:root{
    --bg:#06080e; --bg-2:#0a0e1a; --panel:#0c1222; --panel-2:#111a2e;
    --stroke:rgba(53,230,255,.16); --stroke-2:rgba(255,255,255,.07);
    --ink:#e6f0f8; --muted:rgba(230,240,248,.62); --muted-2:rgba(230,240,248,.40);
    --accent:#35e6ff; --accent-2:#b061ff;
    --glow:0 0 22px rgba(53,230,255,.40); --glow-txt:0 0 18px rgba(53,230,255,.55);
    --grid-line:rgba(53,230,255,.055); --logo-filter:invert(1) brightness(1.85);
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
    --wrap:min(1200px,calc(100% - 34px)); --slash:-19deg; --ease:cubic-bezier(.2,1,.3,1);
  }
  @media (prefers-color-scheme: light){
    :root{ --bg:#e9eef5; --bg-2:#f3f7fc; --panel:#ffffff; --panel-2:#eef4fa;
      --stroke:rgba(6,116,150,.22); --stroke-2:rgba(10,20,36,.10);
      --ink:#0a1424; --muted:rgba(10,20,36,.64); --muted-2:rgba(10,20,36,.42);
      --accent:#0891b8; --accent-2:#7c3aed; --glow:0 0 16px rgba(8,145,184,.22);
      --glow-txt:0 0 1px rgba(8,145,184,.4); --grid-line:rgba(6,116,150,.09); --logo-filter:none; }
  }
  :root[data-theme="dark"]{ --bg:#06080e; --bg-2:#0a0e1a; --panel:#0c1222; --panel-2:#111a2e;
    --stroke:rgba(53,230,255,.16); --stroke-2:rgba(255,255,255,.07); --ink:#e6f0f8; --muted:rgba(230,240,248,.62);
    --muted-2:rgba(230,240,248,.40); --accent:#35e6ff; --accent-2:#b061ff; --glow:0 0 22px rgba(53,230,255,.40);
    --glow-txt:0 0 18px rgba(53,230,255,.55); --grid-line:rgba(53,230,255,.055); --logo-filter:invert(1) brightness(1.85); }
  :root[data-theme="light"]{ --bg:#e9eef5; --bg-2:#f3f7fc; --panel:#ffffff; --panel-2:#eef4fa;
    --stroke:rgba(6,116,150,.22); --stroke-2:rgba(10,20,36,.10); --ink:#0a1424; --muted:rgba(10,20,36,.64);
    --muted-2:rgba(10,20,36,.42); --accent:#0891b8; --accent-2:#7c3aed; --glow:0 0 16px rgba(8,145,184,.22);
    --glow-txt:0 0 1px rgba(8,145,184,.4); --grid-line:rgba(6,116,150,.09); --logo-filter:none; }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16.5px;
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    transition:background .5s var(--ease), color .5s var(--ease); }
  a{ color:inherit; }
  .wrap{ width:var(--wrap); margin-inline:auto; }
  h1,h2,h3{ margin:0; letter-spacing:-.02em; line-height:1.04; text-wrap:balance; font-weight:800; }
  p{ margin:0; }

  /* ambient background layers */
  .bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 100%); }
  .bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(46vw 40vh at 78% 12%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),
      radial-gradient(46vw 40vh at 12% 88%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 60%); }
  .scan{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.04) 3px 4px); mix-blend-mode:overlay; }
  :root[data-theme="light"] .scan{ display:none; }

  /* label / mono bits */
  .kbd{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
  .lbl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }
  .grad{ color:var(--accent); text-shadow:var(--glow-txt); }

  /* header */
  header.top{ position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--stroke); }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
  .brand img{ height:26px; width:auto; filter:var(--logo-filter); transition:filter .5s var(--ease); }
  nav.main{ display:flex; align-items:center; gap:24px; }
  nav.main a{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); text-decoration:none; position:relative; padding:4px 0; transition:color .2s; }
  nav.main a:hover{ color:var(--ink); }
  nav.main a.active{ color:var(--accent); text-shadow:var(--glow-txt); }
  nav.main a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
    background:var(--accent); box-shadow:var(--glow); transform:skewX(var(--slash)); }
  .tg{ width:38px; height:38px; border:1px solid var(--stroke); background:var(--panel); color:var(--ink);
    border-radius:9px; cursor:pointer; display:grid; place-items:center; }
  .tg svg{ width:17px; height:17px; }
  .burger{ display:none; width:40px; height:40px; border:1px solid var(--stroke); background:var(--panel);
    border-radius:9px; cursor:pointer; color:var(--ink); }
  .burger span,.burger span::before,.burger span::after{ content:""; display:block; width:17px; height:2px;
    background:currentColor; margin:auto; position:relative; }
  .burger span::before{ top:-5px; position:absolute; } .burger span::after{ top:5px; position:absolute; }
  @media (max-width:880px){
    nav.main{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
      background:var(--bg-2); border-bottom:1px solid var(--stroke); padding:8px 0; transform:translateY(-140%);
      transition:transform .4s var(--ease); }
    nav.main.open{ transform:none; }
    nav.main a{ padding:14px 24px; width:100%; font-size:.86rem; }
    nav.main .tg{ margin:10px 24px; }
    .burger{ display:grid; place-items:center; }
  }

  /* page system */
  main{ position:relative; z-index:2; }
  .sec{ padding:clamp(56px,8vw,104px) 0; }
  .sec.tight{ padding:clamp(40px,5vw,68px) 0; }

  /* hero */
  .hero{ position:relative; overflow:hidden; padding:clamp(60px,10vw,120px) 0 clamp(50px,8vw,96px); }
  .beams{ position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; overflow:hidden; }
  .beam{ position:absolute; top:-20%; height:150%; width:2px; background:linear-gradient(180deg,transparent,var(--accent),transparent);
    filter:blur(1px); opacity:.5; transform:skewX(var(--slash)); animation:beam 9s var(--ease) infinite; }
  .beam:nth-child(1){ left:20%; animation-delay:0s; }
  .beam:nth-child(2){ left:52%; height:120%; background:linear-gradient(180deg,transparent,var(--accent-2),transparent); animation-delay:2.4s; }
  .beam:nth-child(3){ left:78%; animation-delay:4.2s; }
  @keyframes beam{ 0%{ opacity:0; transform:skewX(var(--slash)) translateY(-12%);} 40%{opacity:.55;} 100%{ opacity:0; transform:skewX(var(--slash)) translateY(12%);} }
  .hero__cursor{ position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(200px 200px at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%); }
  .hero .wrap{ position:relative; z-index:2; }
  .hero h1{ font-size:clamp(2.5rem,7vw,5rem); max-width:16ch; margin:20px 0 0; }
  .hero .lead{ max-width:52ch; color:var(--muted); font-size:clamp(1.02rem,2vw,1.2rem); margin-top:20px; }
  .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
  .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:.96rem;
    text-decoration:none; padding:13px 22px; border-radius:11px; cursor:pointer; border:1px solid transparent; transition:transform .2s,box-shadow .3s,background .3s; }
  .btn.primary{ background:var(--accent); color:#04121a; box-shadow:var(--glow); }
  .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 0 34px rgba(53,230,255,.6); }
  .btn.ghost{ background:transparent; border-color:var(--stroke); color:var(--ink); }
  .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .term{ margin-top:36px; border:1px solid var(--stroke); border-radius:12px; background:color-mix(in srgb,var(--panel) 88%,transparent);
    font-family:var(--mono); font-size:.82rem; max-width:520px; overflow:hidden; }
  .term__bar{ display:flex; gap:6px; padding:9px 12px; border-bottom:1px solid var(--stroke-2); }
  .term__bar i{ width:9px; height:9px; border-radius:50%; background:var(--muted-2); }
  .term__bar i:first-child{ background:var(--accent); }
  .term__body{ padding:14px 16px; color:var(--muted); display:grid; gap:6px; }
  .term__body b{ color:var(--accent); font-weight:400; }
  .term__body span{ color:var(--ink); }

  /* page intro (non-home) */
  .phead{ padding:clamp(60px,9vw,110px) 0 clamp(20px,3vw,32px); position:relative; }
  .phead h1{ font-size:clamp(2.2rem,6vw,4rem); max-width:18ch; margin-top:16px; }
  .phead p{ color:var(--muted); max-width:56ch; margin-top:18px; font-size:1.08rem; }

  /* generic grids + panels */
  .grid{ display:grid; gap:18px; }
  .g2{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:940px){ .g4{ grid-template-columns:repeat(2,1fr);} .g3{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .g4,.g3,.g2{ grid-template-columns:1fr;} }
  .panel{ border:1px solid var(--stroke); background:var(--panel); border-radius:14px; padding:26px;
    position:relative; overflow:hidden; transition:border-color .3s, transform .4s var(--ease), box-shadow .3s; }
  .panel:hover{ border-color:color-mix(in srgb,var(--accent) 60%,var(--stroke)); transform:translateY(-4px); box-shadow:var(--glow); }
  .panel::after{ content:""; position:absolute; top:0; right:0; width:60px; height:60px; opacity:.5;
    background:linear-gradient(var(--slash),var(--accent),transparent); clip-path:polygon(100% 0,100% 100%,20% 0); }
  .panel h3{ font-size:1.24rem; margin:12px 0 8px; }
  .panel p{ color:var(--muted); font-size:.95rem; }
  .panel .tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
  .bullets{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
  .bullets li{ color:var(--muted); font-size:.9rem; padding-left:18px; position:relative; }
  .bullets li::before{ content:"▸"; position:absolute; left:0; color:var(--accent); }

  .section-head{ margin-bottom:34px; }
  .section-head h2{ font-size:clamp(1.7rem,4vw,2.6rem); margin-top:10px; }
  .section-head p{ color:var(--muted); margin-top:12px; max-width:60ch; }

  /* chips / pills */
  .chips{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .chip{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.9rem;
    padding:13px 16px; border:1px solid var(--stroke); border-radius:10px; color:var(--muted);
    background:var(--panel); transition:color .2s, border-color .2s, box-shadow .3s; }
  .chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 8px var(--accent); flex:0 0 auto; opacity:.75; transition:opacity .2s; }
  .chip:hover{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 18px -6px var(--accent); }
  .chip:hover::before{ opacity:1; }
  /* application areas — capability list */
  .areas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:2px;
    border:1px solid var(--stroke-2); border-radius:12px; overflow:hidden; background:var(--stroke-2); }
  .area{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--panel);
    color:var(--ink); font-size:.98rem; transition:background .2s, color .2s; }
  .area::before{ content:"◹"; color:var(--accent); font-size:.9rem; flex:0 0 auto;
    text-shadow:0 0 8px var(--accent); }
  .area:hover{ background:var(--panel-2, var(--panel)); color:var(--accent); }

  /* stats */
  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:620px){ .stats{ grid-template-columns:1fr;} }
  .stat{ border-left:2px solid var(--accent); padding:6px 0 6px 20px; }
  .stat .n{ font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; letter-spacing:-.03em; text-shadow:var(--glow-txt); }
  .stat .l{ color:var(--muted); font-size:.92rem; margin-top:6px; max-width:26ch; }

  /* team + portfolio tiles */
  .tile{ aspect-ratio:1/1; border-radius:12px; display:grid; place-items:center; position:relative; overflow:hidden;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,var(--panel)),color-mix(in srgb,var(--accent-2) 30%,var(--panel)));
    border:1px solid var(--stroke); }
  .tile.wide{ aspect-ratio:16/10; }
  .tile .mono-badge{ font-family:var(--mono); font-weight:700; font-size:2rem; color:var(--ink); text-shadow:var(--glow-txt); letter-spacing:.05em; }
  .tile::before{ content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(var(--slash),transparent 0 12px,color-mix(in srgb,var(--accent) 8%,transparent) 12px 13px); }
  .member h3{ font-size:1.05rem; margin-top:14px; }
  .member .role{ color:var(--accent); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
  .member p{ color:var(--muted); font-size:.88rem; margin-top:8px; }

  .proj{ border:1px solid var(--stroke); border-radius:14px; overflow:hidden; background:var(--panel); transition:border-color .3s,transform .4s var(--ease),box-shadow .3s; text-decoration:none; color:inherit; display:block; }
  .proj:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--glow); }
  .proj .body{ padding:22px; }
  .proj .stackline{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; }
  .proj h3{ font-size:1.3rem; margin:8px 0; }
  .proj p{ color:var(--muted); font-size:.92rem; }
  .proj .visit{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:.8rem; color:var(--accent); }

  /* cta strip */
  .ctaband{ border:1px solid var(--stroke); border-radius:18px; padding:clamp(30px,5vw,56px); position:relative; overflow:hidden;
    background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));
    display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .ctaband h2{ font-size:clamp(1.6rem,4vw,2.6rem); max-width:18ch; }
  .ctaband p{ color:var(--muted); margin-top:8px; }

  /* contact */
  .form{ display:grid; gap:16px; }
  .field{ display:grid; gap:6px; }
  .field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .field input,.field textarea,.field select{ background:var(--bg-2); border:1px solid var(--stroke); border-radius:10px;
    padding:12px 14px; color:var(--ink); font-family:var(--sans); font-size:.96rem; }
  .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--glow); }
  .cdetails{ display:grid; gap:18px; }
  .cdetails .blk .k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
  .cdetails .blk .v{ color:var(--ink); margin-top:4px; font-style:normal; }
  .cdetails a{ color:var(--accent); text-decoration:none; }

  /* footer */
  footer.foot{ position:relative; z-index:2; border-top:1px solid var(--stroke); background:var(--bg-2); padding:50px 0 34px; margin-top:20px; }
  .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:28px; }
  .fgrid img{ height:24px; filter:var(--logo-filter); }
  .fgrid .h{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; }
  .fgrid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .fgrid a{ color:var(--muted); text-decoration:none; cursor:pointer; font-size:.92rem; }
  .fgrid a:hover{ color:var(--accent); }
  .fgrid p{ color:var(--muted); font-size:.9rem; }
  .fbtm{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; margin-top:36px; padding-top:20px;
    border-top:1px solid var(--stroke-2); color:var(--muted-2); font-family:var(--mono); font-size:.74rem; }
  @media (max-width:820px){ .fgrid{ grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .fgrid{ grid-template-columns:1fr;} }

  .rv{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
  .rv.in{ opacity:1; transform:none; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; } .beam{ animation:none; } .rv{ opacity:1; transform:none; transition:none; } .hero__cursor{ display:none; }
  }

  /* real media (portfolio screenshots + team photos) */
  .shot{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--stroke); background:var(--panel-2); }
  .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
  .member{ border:1px solid var(--stroke); background:var(--panel); border-radius:14px; padding:22px; }
  .member__photo{ width:88px; height:88px; border-radius:12px; overflow:hidden; border:1px solid var(--stroke);
    background:var(--panel-2); box-shadow:var(--glow); }
  .member__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* form validation + alerts */
  .field__error{ color:#ff6b6b; font-size:.82rem; font-family:var(--mono); margin:0; }
  .alert{ border-radius:10px; padding:12px 14px; font-size:.9rem; margin-bottom:8px; border:1px solid var(--stroke); }
  .alert--success{ color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
  .alert--error{ color:#ff6b6b; border-color:#ff6b6b; background:rgba(255,107,107,.06); }
  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }