/* ==========================================================================
   Elite Bot Studios — shared design system
   One stylesheet for every page. Tokens, base, nav, footer, components.
   ========================================================================== */

    /* ============================================================
       1. DESIGN TOKENS
    ============================================================ */
    :root {
      --bg:#0A0E13; --bg-2:#080B10;
      --surface:#11161D; --surface-2:#141A22; --surface-3:#182029;
      --teal:#2DD4BF; --teal-dim:#1F9E8C; --teal-deep:#0E3B36;
      --amber:#F5A623; --amber-dim:#B8791A;
      --text:#E6EDF3; --muted:#9AA7B4; --faint:#808D9A;
      --border:#1E2833; --border-2:#26323F;
      --copper:#C08A3E; --pcb:#0E3A32;

      --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

      --fs-12:0.75rem; --fs-14:0.875rem; --fs-16:1rem;
      --fs-24:1.5rem; --fs-32:2rem; --fs-44:2.75rem; --fs-56:3.5rem;

      --wrap:1120px; --gutter:clamp(16px,5vw,40px);
      --radius:12px; --radius-lg:18px; --nav-h:68px;

      --ease:cubic-bezier(0.16,1,0.3,1);
      --dur:0.6s; --stagger:60ms;

      --glow-teal:0 0 0 1px rgba(45,212,191,.14), 0 18px 60px -22px rgba(45,212,191,.45);
      --glow-amber:0 0 0 1px rgba(245,166,35,.16), 0 18px 60px -22px rgba(245,166,35,.4);
    }

    *,*::before,*::after{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
    body{
      margin:0;background:var(--bg);color:var(--text);
      font-family:var(--font-ui);font-size:clamp(.95rem,.4vw + .9rem,1rem);
      line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
    }
    h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.1}
    p{margin:0}
    a{color:inherit;text-decoration:none}
    ul{margin:0;padding:0;list-style:none}
    img,svg{display:block;max-width:100%}
    button{font:inherit;color:inherit}
    :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

    .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
    /* single-line utility, available to any page that needs mono text inline */
    .mono{font-family:var(--font-mono)}
    .label{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}

    .skip-link{position:absolute;left:12px;top:-64px;z-index:200;padding:12px 18px;border-radius:8px;background:var(--teal);color:#04211C;font-weight:600;font-size:var(--fs-14);transition:top .2s var(--ease)}
    .skip-link:focus{top:12px}

    /* ============================================================
       2. BUTTONS  (44px min touch target)
    ============================================================ */
    .btn{
      position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:48px;padding:0 22px;border-radius:10px;border:1px solid transparent;
      font-size:var(--fs-14);font-weight:600;letter-spacing:.01em;cursor:pointer;
      isolation:isolate;overflow:hidden;
      transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease,border-color .3s ease,color .3s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:linear-gradient(180deg,#4FE6D4,#2DD4BF 45%,#1FB9A6);color:#04211C;box-shadow:var(--glow-teal)}
    .btn-primary::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
    .btn-primary:hover::after{transform:translateX(120%)}
    .btn-ghost{border-color:var(--border-2);color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
    .btn-ghost:hover{border-color:var(--teal);color:var(--teal);box-shadow:var(--glow-teal)}
    .btn-amber{border-color:rgba(245,166,35,.55);color:var(--amber);background:rgba(245,166,35,.06)}
    .btn-amber:hover{background:rgba(245,166,35,.14);box-shadow:var(--glow-amber)}

    /* ============================================================
       3. NAV
    ============================================================ */
    .nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(10,14,19,.82);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--border)}
    .nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.5),transparent);opacity:.6}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
    .brand{display:inline-flex;align-items:center;gap:11px}
    .brand svg{width:32px;height:32px;flex:0 0 auto;filter:drop-shadow(0 0 12px rgba(45,212,191,.35))}
    .brand-word{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-14);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
    .nav-links{display:flex;align-items:center;gap:2px}
    .nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--muted);font-size:var(--fs-14);font-weight:500;border-radius:8px;transition:color .2s ease,background .2s ease}
    .nav-links a::after{content:'';position:absolute;left:13px;right:13px;bottom:9px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
    .nav-links a:hover{color:var(--text)}
    .nav-links a:hover::after{transform:scaleX(1)}
    .nav-actions{display:flex;align-items:center;gap:10px}

    .hamburger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:46px;height:46px;padding:0;background:transparent;border:1px solid var(--border-2);border-radius:10px;cursor:pointer}
    .hamburger span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .2s ease}
    .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
    .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

    .mobile-menu{display:none;background:var(--surface);border-bottom:1px solid var(--border)}
    .mobile-menu[data-open="true"]{display:block}
    .mobile-menu a{display:flex;align-items:center;min-height:50px;padding:0 var(--gutter);border-bottom:1px solid rgba(30,40,51,.55);color:var(--text)}
    .mobile-menu li:last-child a{border-bottom:0}

    @media (max-width:900px){
      .nav-links,.nav-actions .btn-amber{display:none}
      .hamburger{display:inline-flex}
    }

    /* ============================================================
       4. HERO + 3D SCENE
    ============================================================ */
    .hero{position:relative;border-bottom:1px solid var(--border);overflow:hidden;background:radial-gradient(ellipse 90% 70% at 78% 12%,rgba(45,212,191,.07),transparent 62%),radial-gradient(ellipse 60% 50% at 8% 90%,rgba(245,166,35,.05),transparent 60%),var(--bg)}
    .hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(230,237,243,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(230,237,243,.03) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 60% 40%,#000 8%,transparent 76%);mask-image:radial-gradient(ellipse 85% 75% at 60% 40%,#000 8%,transparent 76%);pointer-events:none}
    .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,44px);align-items:center;padding:clamp(44px,7vw,84px) 0 clamp(40px,6vw,72px)}

    .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:20px}
    .eyebrow::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--teal))}
    .hero h1{font-size:clamp(2.15rem,7.4vw,var(--fs-56));margin-bottom:18px;text-wrap:balance}
    .hero h1 em{font-style:normal;background:linear-gradient(100deg,#8FF3E4,#2DD4BF 55%,#1F9E8C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
    .hero-sub{color:var(--muted);font-size:clamp(1rem,.6vw + .92rem,1.15rem);max-width:56ch;margin-bottom:30px}
    .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
    .hero-ctas .btn{flex:1 1 auto}
    .hero-spec{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
    .hero-spec span{display:inline-flex;align-items:center;gap:8px}
    .hero-spec i{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(45,212,191,.9)}
    .hero-spec span:nth-child(2) i{background:var(--amber);box-shadow:0 0 10px rgba(245,166,35,.9)}

    /* ---- 3D stage: the EB-01 board, rendered on the GPU ----------------
       The <img> is the poster and the LCP element; hero3d.js paints the
       live scene on top only when the device and the user allow it. */
    .stage{position:relative;min-height:clamp(240px,58vw,440px);display:grid;place-items:center;isolation:isolate;
      border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
      background:#05080B url('data:image/webp;base64,UklGRmYAAABXRUJQVlA4IFoAAAAwBACdASooABkAPrFQoUynJKOiJWsw4BYJZwDHMA8yLJMn6stM5p30egAA/vI3c+92HvP+ywA7K5of6056HD4ehHJO7DELsvfHi3yVNwuQ563yMlCij2ewAAA=') center/cover no-repeat}
    .stage-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
      background:radial-gradient(58% 52% at 63% 34%,rgba(45,212,191,.15),transparent 68%),
                 radial-gradient(46% 40% at 20% 78%,rgba(245,166,35,.055),transparent 70%)}
    .stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
      transition:opacity .55s var(--ease)}
    .stage-gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;opacity:0;
      transition:opacity .7s var(--ease);cursor:grab;touch-action:pan-y}
    .stage[data-live="true"] .stage-gl{opacity:1}
    .stage[data-live="true"] .stage-poster{opacity:0}
    .board-caption{margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

    @media (min-width:1000px){
      .hero-inner{grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px)}
      .hero-ctas .btn{flex:0 0 auto}
    }
    @media (max-width:640px){
      .stage{min-height:264px}
    }

    /* ============================================================
       5. STACK STRIP (marquee-free, wraps)
    ============================================================ */
    .stack{border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--bg-2))}
    .stack ul{display:flex;flex-wrap:wrap;gap:10px 16px;padding:18px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .stack li{display:inline-flex;align-items:center;gap:16px}
    .stack li+li::before{content:'◦';color:var(--teal);opacity:.7}

    /* ============================================================
       6. DELIVERY PIPELINE
    ============================================================ */
    .pipe{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--border);position:relative}
    .pipe-head{max-width:640px;margin-bottom:42px}
    .pipe-head h2{font-size:clamp(1.6rem,4.4vw,var(--fs-32));margin:12px 0 12px}
    .pipe-head p{color:var(--muted)}
    .pipe-grid{display:grid;grid-template-columns:1fr;gap:16px;position:relative}
    .step{position:relative;padding:26px 24px 26px 70px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface) 60%);transition:transform .4s var(--ease),border-color .4s ease,box-shadow .4s ease}
    .step:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.35);box-shadow:var(--glow-teal)}
    .step::before{content:attr(data-step);position:absolute;left:22px;top:26px;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(45,212,191,.35);background:rgba(45,212,191,.08);font-family:var(--font-mono);font-size:11px;color:var(--teal)}
    .step h3{font-size:1.06rem;margin-bottom:8px}
    .step p{color:var(--muted);font-size:.95rem}
    .step:nth-child(2)::before{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.08);color:var(--amber)}
    @media (min-width:820px){.pipe-grid{grid-template-columns:repeat(3,1fr);gap:20px}}

    /* ============================================================
       7. FOOTER
    ============================================================ */
    .footer{padding:clamp(44px,6vw,68px) 0 28px;position:relative}
    .footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,.35),transparent)}
    .footer-grid{display:grid;grid-template-columns:1fr;gap:30px}
    .footer-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
    .footer p{color:var(--muted);font-size:var(--fs-14);margin-top:10px;max-width:42ch}
    .footer h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
    .footer-links{display:grid;gap:9px}
    .footer-links a,.footer-links li{color:var(--muted);font-size:var(--fs-14)}
    .footer-links a:hover{color:var(--teal)}
    .social{display:flex;gap:10px;margin-top:16px}
    .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border-2);border-radius:11px;color:var(--muted);transition:border-color .25s ease,color .25s ease,transform .25s var(--ease)}
    .social a:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
    .footer-bottom{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;margin-top:38px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--fs-12);color:var(--faint)}
    @media (min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}

    /* ============================================================
       8. REVEAL + MOTION
    ============================================================ */
    .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
    .reveal.in{opacity:1;transform:none}


    /* ============================================================
       11. SCREEN-READER HELPERS
       Section headings that exist only to keep the document outline
       sequential (h1 -> h2 -> h3) must not take up visual space.
       ============================================================ */
    .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* ============================================================
       12. OVERFLOW GUARDS
       Grid and flex children default to min-width:auto, which lets a long
       unbreakable token (a URL, a part number) push a column wider than the
       viewport. These are cheap insurance at 360px.
       ============================================================ */
    .grid > *,.pipe-grid > *,.contact-grid > *,.founder > *,.footer-grid > *{min-width:0}
    .card,.post-card,.info-block,.empty-state,.step{min-width:0}
    .prose,.card p,.post-card p,dd,.bom span{overflow-wrap:break-word}
    .prose code{overflow-wrap:anywhere}
    .bom li{min-width:0}
    .bom li span{overflow-wrap:anywhere}
    .brand-word{min-width:0;overflow:hidden;text-overflow:ellipsis}
    .timeline{min-width:0}
    .prose blockquote{overflow-wrap:anywhere}
    img,svg,canvas,video{max-width:100%}
    .footer-links a{overflow-wrap:anywhere}

    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
      .reveal{opacity:1;transform:none}
      .footer::before{background:var(--teal);opacity:.35}
    }

    /* ============================================================
       9. PAGE SHELL (inner pages)
    ============================================================ */
    .page-head{padding:clamp(48px,7vw,86px) 0 clamp(30px,4vw,44px);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
    .page-head::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 82% 0%,rgba(45,212,191,.075),transparent 62%);pointer-events:none}
    .page-head .wrap{position:relative;z-index:1}
    .page-head h1{font-size:clamp(1.9rem,6vw,var(--fs-44));margin:14px 0 14px;text-wrap:balance}
    .page-head p{color:var(--muted);max-width:62ch;font-size:clamp(.98rem,.5vw + .9rem,1.1rem)}

    .section{padding:clamp(48px,7vw,88px) 0;border-bottom:1px solid var(--border)}
    .section:last-of-type{border-bottom:0}
    .section-head{max-width:660px;margin-bottom:38px}
    .section-head h2{font-size:clamp(1.5rem,4vw,var(--fs-32));margin:12px 0}
    .section-head p{color:var(--muted)}

    /* ============================================================
       10. CARDS / CHIPS
    ============================================================ */
    .grid{display:grid;grid-template-columns:1fr;gap:16px}
    @media (min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}}
    @media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

    .card{position:relative;padding:26px 24px;border:1px solid var(--border);border-radius:var(--radius-lg);
      background:linear-gradient(160deg,var(--surface-2),var(--surface) 62%);
      transition:transform .4s var(--ease),border-color .4s ease,box-shadow .4s ease}
    .card:hover{transform:translateY(-4px);border-color:rgba(45,212,191,.34);box-shadow:var(--glow-teal)}
    .card h3{font-size:1.08rem;margin-bottom:10px}
    .card p{color:var(--muted);font-size:.95rem}
    .card .card-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--teal);margin-bottom:14px;display:block}

    .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
    .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:7px;border:1px solid var(--border-2);
      font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.02)}
    .chip-amber{border-color:rgba(245,166,35,.42);color:var(--amber);background:rgba(245,166,35,.07)}
    .chip-teal{border-color:rgba(45,212,191,.42);color:var(--teal);background:rgba(45,212,191,.07)}
    .chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}


    /* ---- projects ---- */
    .proj-card{display:flex;flex-direction:column;gap:14px}
    .proj-card h3{font-size:1.12rem;margin:0}
    .proj-card .proj-body{display:grid;gap:12px}
    .proj-card dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
    .proj-card dd{margin:4px 0 0;color:var(--muted);font-size:.93rem}
    .proj-card .proj-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
    .bom{font-family:var(--font-mono);font-size:12px;color:var(--muted);display:grid;gap:4px}
    .bom li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed rgba(30,40,51,.8)}

    .empty-state{padding:34px 26px;border:1px dashed var(--border-2);border-radius:var(--radius-lg);background:rgba(17,22,29,.6);max-width:720px}
    .empty-state h3{margin-bottom:12px}
    .empty-state p{color:var(--muted);font-size:.96rem}
    .empty-state p+p{margin-top:12px}

    /* ---- lab log ---- */
    .post-card{display:grid;gap:12px;padding:24px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface) 60%);transition:transform .4s var(--ease),border-color .4s ease}
    .post-card:hover{transform:translateY(-3px);border-color:rgba(45,212,191,.32)}
    .post-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
    .post-card h3{font-size:1.1rem;margin:0}
    .post-card p{color:var(--muted);font-size:.94rem}

    /* ---- prose (lab posts, legal) ---- */
    .prose{max-width:70ch}
    .prose h2{font-size:clamp(1.3rem,3.4vw,1.7rem);margin:38px 0 14px}
    .prose h3{font-size:1.1rem;margin:28px 0 10px}
    .prose p{margin:0 0 18px;color:#C4CFD9}
    .prose ul{margin:0 0 18px;padding-left:0}
    .prose li{position:relative;padding-left:22px;margin-bottom:9px;color:#C4CFD9}
    .prose li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--teal);opacity:.75}
    .prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
    .prose code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-3);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
    .prose blockquote{margin:0 0 20px;padding:16px 20px;border-left:2px solid var(--teal);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--muted)}
    .prose hr{border:0;border-top:1px solid var(--border);margin:34px 0}

    .post-head{padding:clamp(40px,6vw,72px) 0 26px;border-bottom:1px solid var(--border)}
    .post-head h1{font-size:clamp(1.7rem,5vw,var(--fs-32));margin:14px 0 16px;max-width:26ch;text-wrap:balance}
    .backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:44px}
    .backlink:hover{color:var(--teal)}

    /* ---- values / timeline ---- */
    .timeline{border-left:1px solid var(--border-2);padding-left:26px;display:grid;gap:26px}
    .timeline li{position:relative}
    .timeline li::before{content:'';position:absolute;left:-32px;top:6px;width:11px;height:11px;border-radius:50%;border:2px solid var(--teal);background:var(--bg)}
    .timeline li.now::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(245,166,35,.8)}
    .timeline time{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
    .timeline h3{font-size:1rem;margin:7px 0 6px}
    .timeline p{color:var(--muted);font-size:.93rem}

    .founder{display:grid;gap:24px;align-items:start}
    .founder-photo{width:132px;height:132px;border-radius:var(--radius-lg);border:1px dashed var(--border-2);background:var(--surface);display:grid;place-items:center;text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:12px}
    @media (min-width:760px){.founder{grid-template-columns:auto 1fr;gap:32px}}

    /* ---- contact form ---- */
    .contact-grid{display:grid;gap:34px}
    @media (min-width:920px){.contact-grid{grid-template-columns:1.15fr .85fr;gap:48px}}
    .field{display:grid;gap:7px;margin-bottom:18px}
    .field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
    .field .req{color:var(--amber)}
    .field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid var(--border-2);
      background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-14);transition:border-color .2s ease,box-shadow .2s ease}
    .field textarea{min-height:140px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,.14)}
    .field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#E5726B;box-shadow:0 0 0 3px rgba(229,114,107,.14)}
    .field .err{font-size:12px;color:#E5726B;min-height:0}
    .form-note{font-size:12.5px;color:var(--faint);margin-top:14px}
    .contact-aside{display:grid;gap:18px;align-content:start}
    .info-block{padding:22px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
    .info-block h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
    .info-block p{color:var(--muted);font-size:var(--fs-14)}
    .info-block a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
    .info-block a:hover{color:var(--teal)}

    .notice{display:flex;gap:14px;padding:18px 20px;border:1px dashed var(--border-2);border-radius:var(--radius);background:rgba(245,166,35,.04);margin-bottom:26px}
    .notice p{font-size:var(--fs-14);color:var(--muted);margin:0}
    .notice b{color:var(--amber);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:5px}

    .todo{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
      border:1px dashed rgba(245,166,35,.45);border-radius:6px;padding:3px 7px;background:rgba(245,166,35,.06);white-space:nowrap}

    /* ---- 404 / offline ---- */
    .error-page{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;text-align:center;padding:60px 0}
    .error-code{font-family:var(--font-mono);font-size:clamp(3.4rem,14vw,6rem);font-weight:700;line-height:1;
      background:linear-gradient(100deg,#8FF3E4,#2DD4BF 55%,#1F9E8C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}