/* ============================================================
   ELIM LAB — Terminal Theme
   main.css: CSS reset, custom properties, base styles
   ============================================================ */

/* ============================================================
   CSS RESET
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   GOOGLE FONTS — JetBrains Mono
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* ============================================================
   CUSTOM PROPERTIES — TERMINAL DESIGN SYSTEM
   ============================================================ */
:root {
    /* ===== Terminal Color Palette ===== */
    --green:            #22C55E;
    --green-glow:       rgba(34, 197, 94, 0.15);
    --green-border:     rgba(34, 197, 94, 0.2);
    --green-dim:        rgba(34, 197, 94, 0.6);
    --amber:            #F59E0B;
    --cyan:             #06B6D4;
    --red-terminal:     #EF4444;

    /* ===== Terminal Backgrounds ===== */
    --bg:               #0A0A0A;
    --bg-0:             #0A0A0A;
    --bg-1:             #0F0F0F;
    --bg-2:             #141414;
    --bg-3:             #1A1A1A;
    --bg-4:             #222222;

    /* ===== Terminal Text ===== */
    --text:             #D4D4D8;
    --text-dim:         #71717A;

    /* ===== Scrollbar / Selection ===== */
    --scrollbar-thumb:  var(--green);
    --scrollbar-track:  var(--bg-2);

    /* ============================================================
       SEMANTIC TOKENS — mapped to terminal palette
       (keep same variable NAMES so existing pages work unchanged)
       ============================================================ */

    /* Brand */
    --color-brand-primary:          var(--green);
    --color-brand-accent:           var(--green);

    /* Status */
    --color-status-success:         var(--green);
    --color-status-warning:         var(--amber);
    --color-status-info:            var(--cyan);
    --color-status-error:           var(--red-terminal);

    /* Backgrounds */
    --bg-primary:                   var(--bg-1);
    --bg-secondary:                 var(--bg-2);
    --bg-tertiary:                  var(--bg-3);
    --bg-contrast:                  var(--green);
    --bg-overlay:                   rgba(0, 0, 0, 0.7);
    --bg-overlay-light:             rgba(0, 0, 0, 0.4);
    --bg-overlay-dark:              rgba(0, 0, 0, 0.88);

    /* Text */
    --text-primary:                 var(--text);
    --text-secondary:               var(--text-dim);
    --text-tertiary:                #52525B;
    --text-contrast:                #0A0A0A;
    --text-muted:                   rgba(212, 212, 216, 0.6);

    /* Borders */
    --border-primary:               var(--green-border);
    --border-secondary:             rgba(34, 197, 94, 0.12);
    --border-strong:                var(--green);
    --border-light:                 rgba(34, 197, 94, 0.08);

    /* ===== Typography ===== */
    --font-family-base:             'JetBrains Mono', 'Courier New', Courier, monospace;
    --font-size-xs:                 0.75rem;
    --font-size-sm:                 0.875rem;
    --font-size-base:               1rem;
    --font-size-lg:                 1.125rem;
    --font-size-xl:                 1.25rem;
    --font-size-2xl:                1.5rem;
    --font-size-3xl:                2rem;
    --font-size-4xl:                2.5rem;
    --font-weight-normal:           400;
    --font-weight-medium:           500;
    --font-weight-semibold:         600;
    --font-weight-bold:             700;
    --font-weight-extrabold:        800;
    --line-height-tight:            1.1;
    --line-height-normal:           1.5;
    --line-height-relaxed:          1.6;
    --line-height-loose:            1.8;
    --letter-spacing-tight:         -0.02em;
    --letter-spacing-normal:        0em;
    --letter-spacing-wide:          0.05em;
    --letter-spacing-wider:         0.1em;
    --letter-spacing-widest:        0.2em;

    /* ===== Spacing ===== */
    --spacing-xs:                   0.25rem;
    --spacing-sm:                   0.5rem;
    --spacing-md:                   1rem;
    --spacing-lg:                   1.5rem;
    --spacing-xl:                   2rem;
    --spacing-2xl:                  2.5rem;
    --spacing-3xl:                  3rem;
    --spacing-4xl:                  4rem;
    --spacing-5xl:                  5rem;
    --spacing-6xl:                  6rem;

    /* ===== Border Radius — nearly none in terminal theme ===== */
    --radius-sm:                    2px;
    --radius-md:                    2px;
    --radius-lg:                    2px;
    --radius-xl:                    2px;
    --radius-full:                  2px;
    --radius-circle:                50%;

    /* ===== Shadows — green glow variant ===== */
    --shadow-sm:                    0 0 8px rgba(34, 197, 94, 0.12);
    --shadow-md:                    0 0 16px rgba(34, 197, 94, 0.16);
    --shadow-lg:                    0 0 24px rgba(34, 197, 94, 0.2);
    --shadow-xl:                    0 0 48px rgba(34, 197, 94, 0.24);

    /* ===== Transitions ===== */
    --transition-fast:              0.1s linear;
    --transition-base:              0.2s ease;
    --transition-slow:              0.2s ease;
    --transition-slower:            0.3s ease;

    /* ===== Z-Index Layers ===== */
    --z-base:                       1;
    --z-sidebar:                    100;
    --z-navigation:                 1001;
    --z-nav-overlay:                1000;
    --z-nav-menu:                   1001;
    --z-nav-toggle:                 1002;
    --z-modal:                      2000;
    --z-progress:                   9999;
    --z-skip-link:                  9999;

    /* ===== Opacity ===== */
    --opacity-disabled:             0.4;
    --opacity-hover:                0.85;
    --opacity-hidden:               0;
    --opacity-visible:              1;

    /* ===== Component-Specific ===== */
    --pulse-glow-start:             rgba(34, 197, 94, 0.7);
    --pulse-glow-end:               rgba(34, 197, 94, 0);
    --lifecycle-border-light:       rgba(34, 197, 94, 0.15);
    --lifecycle-text-muted:         rgba(212, 212, 216, 0.6);
    --status-success-bg:            rgba(34, 197, 94, 0.1);
    --status-warning-bg:            rgba(245, 158, 11, 0.1);
    --status-info-bg:               rgba(6, 182, 212, 0.1);

    /* ===== Layout ===== */
    --container-max-width:          1200px;
    --container-wide-max-width:     1400px;
    --nav-height:                   56px;
    --mobile-menu-max-width:        320px;
}

/* ============================================================
   BACKWARD COMPATIBILITY ALIASES
   (used by pages/project.css, pages/case-study.css, etc.)
   ============================================================ */
:root {
    /* Legacy single-word aliases */
    --red:                          var(--green);
    --white:                        #D4D4D8;

    /* Color aliases used by industries.css, case-studies.css */
    --color-primary:                var(--green);
    --color-secondary:              var(--cyan);
    --color-primary-light:          rgba(34, 197, 94, 0.7);
    --color-primary-dark:           #16A34A;
    --color-success:                var(--green);
    --color-success-light:          rgba(34, 197, 94, 0.7);
    --color-success-dark:           #16A34A;
    --color-warning:                var(--amber);
    --color-accent:                 var(--green);

    /* Semantic bg/text/border aliases used by page CSS files */
    --color-bg:                     var(--bg-1);
    --color-bg-light:               var(--bg-2);
    --color-bg-dark:                var(--bg-0);
    --color-bg-dark-2:              var(--bg-0);
    --color-surface:                var(--bg-2);
    --color-surface-dark:           var(--bg-3);
    --color-text:                   var(--text);
    --color-text-dark:              var(--text);
    --color-text-light:             var(--text);
    --color-text-secondary:         var(--text-dim);
    --color-text-secondary-dark:    var(--text-dim);
    --color-text-muted:             var(--text-dim);
    --color-border:                 var(--green-border);
    --color-border-dark:            rgba(34, 197, 94, 0.3);

    /* Border-radius aliases */
    --border-radius:                var(--radius-md);
    --border-radius-lg:             var(--radius-lg);
    --border-radius-md:             var(--radius-md);

    /* Transition alias */
    --transition-normal:            var(--transition-base);
}

/* ============================================================
   GLOBAL TEXT SELECTION
   ============================================================ */
::selection {
    background: var(--green);
    color: #0A0A0A;
}

/* ============================================================
   GREEN SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-2);
}
::-webkit-scrollbar-thumb {
    background: var(--green-border);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--green-dim);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--green-border) var(--bg-2);
}

/* ============================================================
   HTML / BODY — CRT EFFECTS
   ============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family:            var(--font-family-base);
    background:             var(--bg-0);
    color:                  var(--text-primary);
    line-height:            var(--line-height-relaxed);
    font-size:              var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    position:               relative;
    min-height:             100vh;
    overflow-x:             hidden;
}

/* CRT vignette overlay */
body::before {
    content:        '';
    position:       fixed;
    inset:          0;
    background:     radial-gradient(
                        ellipse at center,
                        transparent 60%,
                        rgba(0, 0, 0, 0.55) 100%
                    );
    pointer-events: none;
    z-index:        9998;
}

/* CRT scanlines overlay */
body::after {
    content:            '';
    position:           fixed;
    inset:              0;
    background:         repeating-linear-gradient(
                            0deg,
                            transparent,
                            transparent 2px,
                            rgba(0, 0, 0, 0.08) 2px,
                            rgba(0, 0, 0, 0.08) 4px
                        );
    pointer-events:     none;
    z-index:            9997;
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 var(--pulse-glow-start); }
    70%  { box-shadow: 0 0 0 8px var(--pulse-glow-end); }
    100% { box-shadow: 0 0 0 0 var(--pulse-glow-end); }
}

/* Legacy name kept for existing references */
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--pulse-glow-start); }
    70%  { box-shadow: 0 0 0 8px var(--pulse-glow-end); }
    100% { box-shadow: 0 0 0 0 var(--pulse-glow-end); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60%  { transform: translateX(-4px); }
    40%, 80%  { transform: translateX(4px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%            { opacity: 1;   transform: translateY(-3px); }
}

@keyframes messageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DARK MODE — the terminal look IS the default.
   The html.dark-mode class keeps existing JS toggle working
   but points to identical values so nothing changes visually.
   ============================================================ */
html.dark-mode {
    --bg-primary:               var(--bg-1);
    --bg-secondary:             var(--bg-2);
    --bg-tertiary:              var(--bg-3);
    --bg-contrast:              var(--green);
    --text-primary:             var(--text);
    --text-secondary:           var(--text-dim);
    --text-tertiary:            #52525B;
    --text-contrast:            #0A0A0A;
    --text-muted:               rgba(212, 212, 216, 0.6);
    --border-primary:           var(--green-border);
    --border-secondary:         rgba(34, 197, 94, 0.12);
    --border-strong:            var(--green);
    --border-light:             rgba(34, 197, 94, 0.08);
    --lifecycle-border-light:   rgba(34, 197, 94, 0.15);
    --lifecycle-text-muted:     rgba(212, 212, 216, 0.6);

    /* Dark mode compat aliases */
    --white:                    #D4D4D8;
    --color-text-dark:          var(--text);
    --color-text-light:         var(--text);
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
    max-width:  var(--container-max-width);
    margin:     0 auto;
    padding:    0 1.5rem;
}

#main {
    padding-top: var(--nav-height);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    padding: 5rem 0;
}

.section__label {
    font-size:      var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color:          var(--green-dim);
    margin-bottom:  2rem;
}

/* Terminal prefix before section labels */
.section__label::before {
    content: '// ';
    color:   var(--text-dim);
}

.section__title {
    font-size:       clamp(1.75rem, 6vw, 3rem);
    line-height:     1.1;
    font-weight:     var(--font-weight-bold);
    letter-spacing:  var(--letter-spacing-tight);
    margin-bottom:   3rem;
    color:           var(--text-primary);
}

.section--mission {
    background: var(--bg-1);
}
.section--mission .section__title {
    margin-bottom: 4rem;
}

.section--lifecycle {
    background: var(--bg-0);
    border-top: 1px solid var(--green-border);
    border-bottom: 1px solid var(--green-border);
}
.section--lifecycle .section__label {
    color: var(--lifecycle-text-muted);
}
.section--lifecycle .section__title {
    margin-bottom: 4rem;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height:     100vh;
    display:        flex;
    align-items:    center;
    position:       relative;
    overflow:       hidden;
}

.hero__title {
    font-size:       clamp(2rem, 8vw, 5.5rem);
    line-height:     1.05;
    font-weight:     var(--font-weight-extrabold);
    letter-spacing:  -0.02em;
    margin-bottom:   2rem;
    color:           var(--text-primary);
}

.hero__subtitle {
    font-size:    var(--font-size-base);
    color:        var(--text-dim);
    max-width:    560px;
    margin-bottom: 3rem;
    line-height:  1.7;
}

.hero__cta {
    display:         inline-block;
    background:      transparent;
    color:           var(--green);
    border:          1px solid var(--green-border);
    padding:         0.875rem 2rem;
    text-decoration: none;
    font-weight:     var(--font-weight-semibold);
    font-size:       var(--font-size-sm);
    letter-spacing:  var(--letter-spacing-wide);
    text-transform:  uppercase;
    transition:      background var(--transition-base), color var(--transition-base);
}
.hero__cta::before {
    content: '$ ';
    color: var(--text-dim);
}
.hero__cta:hover {
    background: var(--green-glow);
    color:      var(--green);
}

.hero__metrics {
    margin-top:    4rem;
    display:       flex;
    flex-direction: column;
    gap:           2rem;
    padding-top:   2rem;
    border-top:    1px solid var(--green-border);
}

.hero__metric-value {
    font-size: 2rem;
    color:     var(--green);
}

.hero__metric-label {
    font-size: var(--font-size-xs);
    color:     var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.hero__bg-video {
    position:   absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity:    0.02;
    z-index:    -1;
    filter:     blur(2px) contrast(1.2);
    mix-blend-mode: screen;
}

/* ============================================================
   GRID
   ============================================================ */
.grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1px;
    background:            var(--green-border);
    margin-top:            3rem;
}

.grid__item {
    background:  var(--bg-1);
    padding:     2rem;
    transition:  background var(--transition-base);
}
.grid__item:hover {
    background: var(--bg-2);
}

.grid__item-number {
    font-size:     2.5rem;
    font-weight:   var(--font-weight-extrabold);
    color:         var(--green-border);
    line-height:   1;
    margin-bottom: 1rem;
}

.grid__item-title {
    font-size:     var(--font-size-lg);
    margin-bottom: 1rem;
    font-weight:   var(--font-weight-bold);
    color:         var(--text-primary);
}

.grid__item-description {
    color:       var(--text-dim);
    line-height: 1.7;
}

/* ============================================================
   TABLE
   ============================================================ */
.table {
    display:         block;
    width:           100%;
    overflow-x:      auto;
    white-space:     nowrap;
    border-collapse: collapse;
    margin-top:      3rem;
}

.table th,
.table td {
    padding:       1.25rem 1rem;
    border-bottom: 1px solid var(--green-border);
    vertical-align: top;
    color:         var(--text-primary);
}

.table th {
    border-bottom: 1px solid var(--green);
    color:         var(--green);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-size:     var(--font-size-xs);
}

.table__title {
    font-weight: var(--font-weight-bold);
    font-size:   var(--font-size-base);
}

.table__tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    margin-top: 0.75rem;
}

.table__tag {
    background-color: var(--bg-3);
    border:           1px solid var(--green-border);
    padding:          0.2rem 0.6rem;
    font-size:        var(--font-size-xs);
    color:            var(--text-dim);
    letter-spacing:   var(--letter-spacing-wide);
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline {
    list-style: none;
}

.timeline__item {
    display:       grid;
    grid-template-columns: 1fr;
    gap:           1rem;
    padding:       2rem 0;
    border-bottom: 1px solid var(--green-border);
}

.section--lifecycle .timeline__item {
    border-bottom: 1px solid var(--lifecycle-border-light);
}

.timeline__time {
    font-weight: var(--font-weight-bold);
    font-size:   var(--font-size-lg);
    color:       var(--green);
    display:     flex;
    align-items: center;
    gap:         0.25rem;
}

.timeline__icon {
    font-size:    1.25rem;
    margin-right: 0.25rem;
    display:      inline-block;
}

.timeline__content-title {
    font-size:     var(--font-size-xl);
    margin-bottom: 0.5rem;
    font-weight:   var(--font-weight-bold);
    color:         var(--text-primary);
}

.timeline__content-description {
    color:       var(--text-dim);
    line-height: 1.7;
}

.section--lifecycle .timeline__content-description {
    color: var(--lifecycle-text-muted);
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact__content {
    max-width: 600px;
}

.contact__subtitle {
    font-size:  var(--font-size-base);
    color:      var(--text-dim);
    max-width:  none;
}

/* ============================================================
   FORMS — terminal style (bottom border only)
   ============================================================ */
.form {
    margin-top: 3rem;
}

.form__group {
    margin-bottom: 1.75rem;
    position:      relative;
}

.form__label {
    display:        block;
    font-weight:    var(--font-weight-semibold);
    margin-bottom:  0.5rem;
    font-size:      var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color:          var(--green-dim);
}

.form__label::before {
    content: '$ ';
    color:   var(--text-dim);
}

.form__input,
.form__textarea {
    width:       100%;
    padding:     0.75rem 0;
    border:      none;
    border-bottom: 1px solid var(--green-border);
    background:  transparent;
    color:       var(--text-primary);
    font-size:   var(--font-size-base);
    font-family: var(--font-family-base);
    transition:  border-color var(--transition-base);
    outline:     none;
}

.form__input:focus,
.form__textarea:focus {
    border-bottom-color: var(--green);
    box-shadow: 0 1px 0 0 var(--green);
}

.form__input--error,
.form__textarea--error {
    border-bottom-color: var(--red-terminal);
}

.form__input--error:focus,
.form__textarea--error:focus {
    border-bottom-color: var(--red-terminal);
    box-shadow: 0 1px 0 0 var(--red-terminal);
}

.form__input--valid,
.form__textarea--valid {
    border-bottom-color: var(--green);
}

.form__error {
    color:       var(--red-terminal);
    font-size:   var(--font-size-xs);
    margin-top:  0.4rem;
    min-height:  1.2rem;
    display:     block;
}
.form__error:empty {
    display: none;
}

.form__submit {
    background:     var(--green);
    color:          #0A0A0A;
    padding:        0.875rem 2.5rem;
    border:         1px solid var(--green);
    font-weight:    var(--font-weight-bold);
    font-size:      var(--font-size-sm);
    font-family:    var(--font-family-base);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background var(--transition-base), color var(--transition-base);
    margin-top:     2rem;
}
.form__submit:hover:not(:disabled) {
    background: transparent;
    color:      var(--green);
}
.form__submit:disabled {
    cursor:  wait;
    opacity: 0.5;
}
.form__submit--error {
    background: var(--red-terminal);
    border-color: var(--red-terminal);
    color: #fff;
    animation: shake 0.5s;
}

/* AI helper row */
.form__ai-helper {
    display:     flex;
    justify-content: flex-end;
    align-items: center;
    gap:         1rem;
    margin-top:  1rem;
}

.form__ai-btn {
    background:  transparent;
    border:      1px solid var(--green-border);
    color:       var(--green-dim);
    padding:     0.4rem 0.875rem;
    font-weight: var(--font-weight-semibold);
    font-size:   var(--font-size-xs);
    font-family: var(--font-family-base);
    cursor:      pointer;
    transition:  all var(--transition-base);
    letter-spacing: var(--letter-spacing-wide);
}
.form__ai-btn:hover:not(:disabled) {
    background:   var(--green-glow);
    border-color: var(--green);
    color:        var(--green);
}
.form__ai-btn:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

/* ============================================================
   LOADER SPINNER
   ============================================================ */
.loader {
    border:        2px solid var(--green-border);
    border-top:    2px solid var(--green);
    border-radius: 50%;
    width:         20px;
    height:        20px;
    animation:     spin 0.8s linear infinite;
    will-change:   transform;
}
.loader--hidden {
    display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    padding:    2.5rem 0 1.5rem;
    background: var(--bg-0);
    border-top: 1px solid var(--green-border);
}

.footer__content {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    margin-bottom:         2.5rem;
}

.footer__brand {
    font-weight: var(--font-weight-extrabold);
    font-size:   var(--font-size-lg);
    color:       var(--green);
    margin-bottom: 0.75rem;
}

.footer__contacts {
    line-height: 2;
    color:       var(--text-dim);
    font-size:   var(--font-size-sm);
}

.footer__links {
    list-style: none;
}
.footer__links a {
    color:           var(--text-dim);
    text-decoration: none;
    font-size:       var(--font-size-sm);
    transition:      color var(--transition-base);
}
.footer__links a:hover {
    color: var(--green);
}

.footer__bottom {
    padding-top:    1.5rem;
    border-top:     1px solid var(--green-border);
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    text-align:     center;
    color:          var(--text-dim);
    font-size:      var(--font-size-xs);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position:        fixed;
    inset:           0;
    background:      var(--bg-overlay-dark);
    z-index:         var(--z-modal);
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         var(--spacing-md);
    opacity:         0;
    transition:      opacity var(--transition-slow);
    will-change:     opacity;
}
.modal--open {
    display:   flex;
    opacity:   1;
    animation: fadeIn var(--transition-slow) ease-out;
}

.modal__content {
    background:    var(--bg-1);
    border:        1px solid var(--green-border);
    max-width:     860px;
    width:         100%;
    max-height:    90vh;
    overflow-y:    auto;
    position:      relative;
    box-shadow:    var(--shadow-xl);
    animation:     slideUp var(--transition-slow) ease-out;
    will-change:   transform, opacity;
}

.modal__header {
    position:        sticky;
    top:             0;
    background:      var(--bg-1);
    padding:         1.75rem 1.75rem 1.25rem;
    border-bottom:   1px solid var(--green-border);
    z-index:         10;
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
}

.modal__close {
    background:  none;
    border:      none;
    font-size:   1.25rem;
    cursor:      pointer;
    color:       var(--text-dim);
    line-height: 1;
    padding:     0;
    width:       28px;
    height:      28px;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  color var(--transition-base);
    font-family: var(--font-family-base);
}
.modal__close:hover {
    color: var(--green);
}

.modal__body {
    padding: 2rem;
}

.modal__title {
    font-size:   1.75rem;
    font-weight: var(--font-weight-extrabold);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color:       var(--text-primary);
}

.modal__status {
    display:      inline-block;
    padding:      0.2rem 0.6rem;
    background:   var(--bg-3);
    font-size:    var(--font-size-xs);
    font-weight:  var(--font-weight-semibold);
    margin-bottom: 1.5rem;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}
.modal__status--active   { background: var(--status-success-bg); color: var(--green); }
.modal__status--research { background: var(--status-warning-bg); color: var(--amber); }
.modal__status--testing  { background: var(--status-info-bg);    color: var(--cyan); }

.modal__section {
    margin-bottom: 2rem;
}
.modal__section-title {
    font-size:     var(--font-size-lg);
    font-weight:   var(--font-weight-bold);
    margin-bottom: 0.875rem;
    color:         var(--green);
}
.modal__section-text {
    color:       var(--text-dim);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.modal__tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}
.modal__tag {
    background:  var(--bg-3);
    border:      1px solid var(--green-border);
    padding:     0.3rem 0.75rem;
    font-size:   var(--font-size-xs);
    color:       var(--text-dim);
    letter-spacing: var(--letter-spacing-wide);
}

.modal__links {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
}
.modal__link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.6rem 1.25rem;
    background:      transparent;
    color:           var(--green);
    text-decoration: none;
    border:          1px solid var(--green-border);
    font-weight:     var(--font-weight-semibold);
    font-size:       var(--font-size-sm);
    transition:      background var(--transition-base);
}
.modal__link:hover {
    background: var(--green-glow);
}

.modal__meta {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.25rem;
    padding:               1.25rem;
    background:            var(--bg-2);
    border:                1px solid var(--green-border);
    margin-bottom:         2rem;
}
.modal__meta-label {
    font-size:      var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color:          var(--text-dim);
    margin-bottom:  0.4rem;
    font-weight:    var(--font-weight-semibold);
}
.modal__meta-value {
    font-weight: var(--font-weight-semibold);
    color:       var(--text-primary);
}

/* Project clickable rows */
.project-clickable {
    cursor:     pointer;
    transition: color var(--transition-base);
}
.project-clickable:hover {
    color:           var(--green);
    text-decoration: underline;
}

/* ============================================================
   CHAT WIDGET
   ============================================================ */
.chat {
    position:    fixed;
    bottom:      20px;
    right:       20px;
    z-index:     1000;
    font-family: var(--font-family-base);
}

.chat__toggle {
    width:       60px;
    height:      60px;
    border-radius: 0;
    background:  var(--green);
    border:      none;
    cursor:      pointer;
    box-shadow:  var(--shadow-md);
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  transform var(--transition-slow), box-shadow var(--transition-slow);
    will-change: transform;
}
.chat__toggle:hover {
    transform:  scale(1.04);
    box-shadow: var(--shadow-lg);
}
.chat__toggle svg {
    width:  26px;
    height: 26px;
    fill:   #0A0A0A;
}

.chat__container {
    position:   fixed;
    bottom:     90px;
    right:      20px;
    width:      380px;
    max-width:  calc(100vw - 40px);
    height:     500px;
    max-height: calc(100vh - 120px);
    background: var(--bg-1);
    border:     1px solid var(--green-border);
    box-shadow: var(--shadow-lg);
    display:    none;
    flex-direction: column;
    overflow:   hidden;
    contain:    layout style;
}
.chat__container--open {
    display:    flex;
    animation:  slideIn var(--transition-slow) ease-out;
    will-change: transform, opacity;
}

/* Terminal window chrome bar */
.chat__header {
    background:  var(--bg-2);
    color:       var(--text-primary);
    padding:     0.6rem 1rem;
    display:     flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--green-border);
}
.chat__header-title {
    margin:      0;
    font-size:   var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color:       var(--green);
}
.chat__header-title::before {
    content: '> ';
    color:   var(--text-dim);
}

.chat__close {
    background:  none;
    border:      none;
    color:       var(--text-dim);
    cursor:      pointer;
    font-size:   1rem;
    line-height: 1;
    padding:     0;
    width:       22px;
    height:      22px;
    font-family: var(--font-family-base);
    transition:  color var(--transition-base);
}
.chat__close:hover {
    color: var(--green);
}

.chat__messages {
    flex:           1;
    overflow-y:     auto;
    padding:        var(--spacing-md);
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-sm);
    background:     var(--bg-0);
}

.chat__message {
    max-width:   84%;
    padding:     0.6rem var(--spacing-md);
    line-height: 1.5;
    font-size:   var(--font-size-sm);
    animation:   messageIn var(--transition-slow) ease-out;
    will-change: transform, opacity;
}

.chat__message--bot {
    background:  var(--bg-2);
    color:       var(--text-primary);
    align-self:  flex-start;
    border:      1px solid var(--green-border);
    border-left: 2px solid var(--green);
}
.chat__message--user {
    background:  var(--green);
    color:       #0A0A0A;
    align-self:  flex-end;
}
.chat__message--typing {
    background:  var(--bg-2);
    color:       var(--text-dim);
    align-self:  flex-start;
    padding:     0.6rem 1rem;
    border:      1px solid var(--green-border);
}

.chat__typing-indicator {
    display: flex;
    gap:     4px;
}
.chat__typing-indicator span {
    width:       6px;
    height:      6px;
    border-radius: 50%;
    background:  var(--green-dim);
    animation:   typing 1.4s infinite;
}
.chat__typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.chat__typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

.chat__input-container {
    padding:     var(--spacing-md);
    border-top:  1px solid var(--green-border);
    background:  var(--bg-1);
    display:     flex;
    gap:         var(--spacing-sm);
}

.chat__input {
    flex:        1;
    padding:     0.6rem 0.75rem;
    border:      none;
    border-bottom: 1px solid var(--green-border);
    background:  transparent;
    color:       var(--text-primary);
    font-family: var(--font-family-base);
    font-size:   var(--font-size-sm);
    resize:      none;
    max-height:  100px;
    outline:     none;
}
.chat__input:focus {
    border-bottom-color: var(--green);
}

.chat__send {
    background:     var(--green);
    color:          #0A0A0A;
    border:         none;
    padding:        0.6rem 1rem;
    cursor:         pointer;
    font-weight:    var(--font-weight-semibold);
    font-size:      var(--font-size-xs);
    font-family:    var(--font-family-base);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    transition:     opacity var(--transition-base);
}
.chat__send:hover:not(:disabled) {
    opacity: 0.85;
}
.chat__send:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

/* Chat suggested prompts */
.chat__suggested-prompts {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--spacing-sm);
    padding:    var(--spacing-sm) 0;
    align-self: flex-start;
    max-width:  100%;
}
.chat__prompt-btn {
    background:  transparent;
    border:      1px solid var(--green-border);
    color:       var(--text-dim);
    padding:     0.35rem 0.75rem;
    font-size:   var(--font-size-xs);
    font-family: var(--font-family-base);
    cursor:      pointer;
    transition:  all var(--transition-base);
    white-space: nowrap;
}
.chat__prompt-btn:hover {
    background:   var(--green-glow);
    border-color: var(--green);
    color:        var(--green);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
    position:   fixed;
    top:        0;
    left:       0;
    height:     2px;
    background: var(--green);
    z-index:    var(--z-progress);
    transition: width 0.1s linear;
    will-change: width;
    contain:    layout style;
    box-shadow: 0 0 6px var(--green);
}

/* ============================================================
   SKIP LINK (ACCESSIBILITY)
   ============================================================ */
.skip-link {
    position:        absolute;
    top:             -100px;
    left:            0;
    background:      var(--green);
    color:           #0A0A0A;
    padding:         0.75rem 1.25rem;
    z-index:         var(--z-skip-link);
    text-decoration: none;
    font-weight:     var(--font-weight-bold);
    transition:      top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* ============================================================
   FOCUS STYLES
   ============================================================ */
:focus-visible {
    outline:        2px solid var(--green);
    outline-offset: 2px;
}

.nav__contact:focus,
.nav__theme-switcher:focus {
    outline:        2px solid var(--green);
    outline-offset: 2px;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.u-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ============================================================
   DATA PIPELINE VISUALIZATION
   ============================================================ */
.pipeline {
    margin:   2rem 0 3rem;
    padding:  1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pipeline__svg {
    width:      100%;
    max-width:  900px;
    height:     auto;
    min-height: 120px;
    margin:     0 auto;
    display:    block;
}

.pipeline__box {
    fill:         var(--bg-2);
    stroke:       var(--green-border);
    stroke-width: 1;
    transition:   fill 0.2s ease, stroke 0.2s ease;
}
.pipeline__stage:hover .pipeline__box {
    fill:   var(--bg-3);
    stroke: var(--green);
}

.pipeline__icon {
    font-size:          1.25rem;
    text-anchor:        middle;
    dominant-baseline:  middle;
}

.pipeline__label {
    font-size:      0.7rem;
    font-weight:    var(--font-weight-semibold);
    text-anchor:    middle;
    fill:           var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pipeline__arrow-line {
    stroke:       var(--green-border);
    stroke-width: 1;
    fill:         none;
}

.pipeline__arrow-head {
    fill: var(--green-border);
}

.pipeline__dot {
    fill:    var(--green);
    opacity: 0;
}

@media (max-width: 768px) {
    .pipeline {
        display: none;
    }
}

/* ============================================================
   LAZY LOADING
   ============================================================ */
.lazy-loading-indicator {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.6rem 1rem;
    background:      var(--bg-2);
    border:          1px solid var(--green-border);
    font-size:       var(--font-size-sm);
    color:           var(--text-dim);
    z-index:         9998;
}

.lazy-loading-spinner {
    width:       14px;
    height:      14px;
    border:      2px solid var(--green-border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation:   spin 0.7s linear infinite;
    will-change: transform;
}

.lazy-load-fade-in {
    animation:   fadeIn var(--transition-slow) ease-in;
    will-change: opacity;
}