:root{
    /* --- codei brand tokens (decoded from flyer-main.pdf) --- */
    --bg-0:#0c0f17;          /* graphite-navy */
    --bg-1:#11151f;
    --ink:#eef1f7;
    --ink-dim:#9aa3b5;
    --crimson:#d83a2e;       /* brand red */
    --crimson-soft:#e2483d;
    --web:#e2483d;           /* stream 1 — Web Development (brand red) */
    --infra:#3b82f6;         /* stream 2 — Infrastructure (blue) */
    --audit:#f5b021;         /* stream 3 — Audit & Reports (amber) */
    --ai:#22c55e;            /* stream 4 — AI (green) */
    --line:rgba(255,255,255,.08);
  }
  /* scoped reset — confined to the hero so it never disturbs NovaDark sections/navbar/footer */
  .codei-hero, .codei-hero *{box-sizing:border-box;margin:0;padding:0}
  .codei-hero{position:relative;color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
    background:var(--bg-0);
    /* go full-bleed under the fixed platform navbar: cancel its in-flow h-16 spacer
       so the 100vh sticky fills the real viewport and its bottom row (scroll hint /
       tiles) lands on the actual bottom edge, not 64px below it */
    margin-top:-4rem}
  body{overflow-x:hidden}

  /* faint circuit-board grid texture, like the flyer */
  .circuit{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:
      radial-gradient(circle at 10% 16%, rgba(216,58,46,.10), transparent 40%),
      radial-gradient(circle at 90% 12%, rgba(59,130,246,.08), transparent 38%),
      radial-gradient(circle at 78% 88%, rgba(34,197,94,.07), transparent 40%),
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:auto,auto,auto,46px 46px,46px 46px;}

  /* ---------------- top brand bar ---------------- */
  .brandbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
    justify-content:space-between;padding:22px clamp(20px,5vw,64px)}
  .brand{display:flex;align-items:center;gap:14px}
  .brand svg{width:38px;height:38px;flex:none}
  .brand .wm{font-family:'Playfair Display',serif;font-weight:700;font-size:24px;letter-spacing:.2px}
  .brand .wm b{color:var(--crimson-soft)}
  .nav{display:flex;gap:30px;font-size:14px;color:var(--ink-dim);font-weight:500}
  .nav a{color:inherit;text-decoration:none;transition:color .2s}
  .nav a:hover{color:var(--ink)}
  @media(max-width:760px){.nav{display:none}}

  /* ---------------- hero ---------------- */
  .hero{position:relative;z-index:10}
  .hero__sticky{position:relative;height:100vh;width:100%;overflow:hidden}
  #scene{position:absolute;inset:0;z-index:1;display:block}

  /* circuit-board grid overlay — sits above the canvas, below the code card & tiles.
     a radial mask fades it out through the centre so the code/streams stay clean,
     and lets it breathe toward the edges (the "nice grid" backdrop) */
  .hero__grid{position:absolute;inset:0;z-index:2;pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:46px 46px,46px 46px;
    -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 46%, transparent 0%, rgba(0,0,0,.4) 48%, #000 82%);
    mask-image:radial-gradient(ellipse 78% 68% at 50% 46%, transparent 0%, rgba(0,0,0,.4) 48%, #000 82%)}

  .hero__tag{position:absolute;z-index:20;left:50%;top:18%;transform:translateX(-50%);
    text-align:center;pointer-events:none;opacity:0}
  .hero__tag .kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.42em;
    text-transform:uppercase;color:var(--crimson-soft);margin-bottom:10px}
  .hero__tag .head{font-family:'Playfair Display',serif;font-size:clamp(28px,4.4vw,52px);line-height:1.05}
  .hero__tag .head em{font-style:normal;color:var(--crimson-soft)}
  .scrollhint{position:absolute;z-index:20;left:50%;bottom:22px;transform:translateX(-50%);
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);
    display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
  .scrollhint .mouse{width:22px;height:34px;border:1.5px solid var(--ink-dim);border-radius:12px;position:relative}
  .scrollhint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
    background:var(--crimson-soft);transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
  @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

  /* ---------------- typewriter editor card ---------------- */
  .editor{position:absolute;z-index:15;left:50%;top:50%;transform:translate(-50%,-52%);
    width:min(640px,86vw);background:rgba(13,17,25,.9);border:1px solid var(--line);
    border-radius:14px;box-shadow:0 40px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset;
    backdrop-filter:blur(6px);overflow:hidden;will-change:opacity,transform}
  .editor__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);
    font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim)}
  .editor__bar .dot{width:11px;height:11px;border-radius:50%}
  .dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
  .editor__bar .file{margin-left:8px}
  .editor__body{padding:20px 22px;font-family:'JetBrains Mono',monospace;font-size:14.5px;line-height:1.7;
    white-space:pre;min-height:248px}
  .editor__body .k{color:#ff7b72}
  .editor__body .s{color:#a5d6ff}
  .editor__body .f{color:#d2a8ff}
  .editor__body .c{color:#6e7681}
  .editor__body .n{color:#79c0ff}
  /* the four base classes are tinted as the four delivery streams (web · ai · infra · audit) */
  .editor__body .web{color:#e2483d}
  .editor__body .ai{color:#22c55e}
  .editor__body .inf{color:#3b82f6}
  .editor__body .aud{color:#f5b021}
  .caret{display:inline-block;width:8px;height:1.1em;background:var(--crimson-soft);
    vertical-align:-2px;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  /* ---------------- pillar tiles (streams resolve here — the "what we do" block) ---------------- */
  /* bottom-anchored so the streams travel DOWN the screen into the tiles */
  .pillars{position:absolute;z-index:20;left:0;right:0;bottom:clamp(28px,5vh,54px);display:grid;
    grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);padding:0 clamp(20px,5vw,64px);
    max-width:1320px;margin:0 auto;pointer-events:none}
  .pillar{position:relative;opacity:0;will-change:opacity;
    background:linear-gradient(180deg,rgba(17,21,31,.82),rgba(22,27,39,.82));
    border:1px solid var(--line);border-radius:16px;padding:26px 24px 28px;overflow:hidden;
    backdrop-filter:blur(4px)}
  .pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
    background:var(--accent);box-shadow:0 0 18px var(--accent)}
  .pillar.web{--accent:var(--web)} .pillar.ai{--accent:var(--ai)}
  .pillar.infra{--accent:var(--infra)} .pillar.audit{--accent:var(--audit)}
  .pillar .ic{width:40px;height:40px;margin:0 0 16px;color:var(--accent)}
  .pillar .ic svg{width:100%;height:100%}
  .pillar h3{font-family:'Playfair Display',serif;font-size:clamp(17px,1.5vw,22px);margin-bottom:9px}
  .pillar p{font-size:13px;line-height:1.55;color:var(--ink-dim);margin-bottom:16px}
  .pillar__ex{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
  .pillar__ex li{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
  @media(max-width:980px){.pillars{grid-template-columns:repeat(2,1fr);gap:14px}}
  @media(max-width:560px){.pillars{grid-template-columns:1fr;max-height:88vh;overflow:auto}.pillar p,.pillar__ex{display:none}}

  /* what comes after the hero, to prove it docks into a page */
  .after{position:relative;z-index:10;min-height:60vh;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:120px 20px;background:linear-gradient(180deg,var(--bg-0),var(--bg-1))}
  .after .small{font-family:'JetBrains Mono',monospace;color:var(--crimson-soft);letter-spacing:.3em;
    text-transform:uppercase;font-size:12px;margin-bottom:18px}
  .after h2{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,52px);max-width:14ch;margin:0 auto 22px;line-height:1.1}
  .after p{color:var(--ink-dim);max-width:52ch;margin:0 auto 30px;line-height:1.6}
  .btn{display:inline-block;background:var(--crimson);color:#fff;text-decoration:none;font-weight:600;
    padding:14px 30px;border-radius:999px;font-size:15px;transition:transform .2s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px var(--crimson)}

  /* reduced-motion / no-webgl static fallback */
  .reduced .editor{position:static;transform:none;margin:140px auto 60px}
  .reduced #scene,.reduced .scrollhint{display:none}
  .reduced .hero__sticky{height:auto}
  .reduced .hero__tag{position:static;transform:none;margin:0 auto 40px;opacity:1}
  .reduced .pillars{position:static;margin:40px auto 80px}
  .reduced .pillar{opacity:1;transform:none}