:root{
    --bg1:#0A0A0B; --bg2:#101013; --bg3:#1E1E24; --panel:#16161A; --bezel:#F5F4F1;
    --red:#F5F4F1; --amber:#F5F4F1; --accent:#F5F4F1; --aqua:#00FFFF; --line: rgba(245,244,241,0.12);
    --text:#F5F4F1; --text-dim: #C9C9CE; --text-muted:#9A9AA2; --max:1180px;
    --chassis: var(--bg1);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --glow-color: rgba(245,245,245,0.5);
    --badge-bg: rgba(255,255,255,0.03);
  }
  html.day-mode{
    --bg1:#EDEBE7; --bg2:#F5F4F1; --bg3:#E3E0DA; --panel:#F5F4F1; --bezel:#0A0A0B;
    --red:#0A0A0B; --amber:#0A0A0B; --accent:#0A0A0B; --aqua:#0B7EA8; --line: rgba(10,10,11,0.12);
    --text:#0A0A0B; --text-dim:#3E3E3E; --text-muted:#5B5B60;
    --chassis: var(--bg1);
    --glow-color: rgba(13,13,13,0.14);
    --badge-bg: rgba(0,0,0,0.03);
  }
  html, body{ transition: background 0.4s var(--ease); }
  body *{ transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  ::selection{ background:var(--red); color:#0B0B0C; }
  body{ margin:0; background:var(--chassis); color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden; }
  h1,h2,h3{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-0.01em; margin:0; text-transform:uppercase; }
  .mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; font-size:0.7rem; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
  a{ color:inherit; }
  button{ font-family:inherit; }
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

  .scan{ position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0.5;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay; }
  .vignette{ position:fixed; inset:0; z-index:4; pointer-events:none; box-shadow: inset 0 0 220px rgba(0,0,0,0.65); }
  html.day-mode .scan{ opacity:0.15; }
  html.day-mode .vignette{ box-shadow: inset 0 0 220px rgba(0,0,0,0.08); }

  /* ---------- splash screen ---------- */
  #splash{
    position:fixed; inset:0; z-index:300; display:flex; flex-direction:column;
    align-items:center; justify-content:center; overflow:hidden;
    background: var(--bg1);
    transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
  }
  #splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  @keyframes splashGradient{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
  #splash .splash-logo{
    height:104px; width:auto; opacity:1;
    animation: splashPulse 1.2s ease-in-out infinite;
  }
  @keyframes splashPulse{ 0%,100%{ opacity:.4; transform:scale(.94); } 50%{ opacity:1; transform:scale(1); } }
  html.day-mode #splash .splash-logo{ filter:invert(1); }
  @media (prefers-reduced-motion: reduce){ #splash .splash-logo{ animation:none; opacity:1; } }
  @keyframes splashLogoIn{
    0%{ opacity:0; transform:scale(0.8); }
    60%{ opacity:1; transform:scale(1.06); }
    100%{ opacity:1; transform:scale(1); }
  }
  #splash .splash-logo.dissolve{ animation: splashLogoOut 0.7s var(--ease) forwards; }
  @keyframes splashLogoOut{ to{ opacity:0; transform:scale(1.12); filter:blur(6px); } }
  #splash .splash-text{ margin-top:26px; text-align:center; opacity:0; animation: splashTextIn 0.8s var(--ease) 0.55s forwards; }
  #splash .splash-text.dissolve{ animation: splashLogoOut 0.6s var(--ease) forwards; }
  @keyframes splashTextIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
  #splash .splash-title{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:0.02em; font-size:1.3rem; color:var(--text); }
  #splash .splash-sub{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; font-size:0.72rem; color:var(--text-muted); margin-top:8px; }
  #splash .splash-particles{ position:absolute; inset:0; pointer-events:none; }
  #splash .particle{
    position:absolute; width:3px; height:3px; border-radius:50%; background:var(--aqua); box-shadow:0 0 6px rgba(0,255,255,0.6);
    opacity:0; animation: particleFloat 1.4s ease-out forwards;
  }
  @keyframes particleFloat{
    0%{ opacity:0; transform:translate(0,0) scale(0.5); }
    15%{ opacity:0.9; }
    100%{ opacity:0; transform:var(--pfinal) scale(1); }
  }

  .rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--aqua); box-shadow:0 0 8px rgba(0,255,255,0.6); animation:blink 1.1s steps(2) infinite; }
  @keyframes blink{ 50%{ opacity:0.15; } }
  .timecode{ color:var(--aqua); }

  /* ---------- premium cursor ---------- */
  body{ cursor:none; }
  @media (max-width:900px), (hover:none){ body{ cursor:auto; } #cursorGlow, #cursorDot, .cursor-trail{ display:none !important; } }
  #cursorGlow{
    position:fixed; width:360px; height:360px; border-radius:50%; pointer-events:none; z-index:250;
    background: radial-gradient(circle, rgba(0,255,255,0.06), rgba(245,245,245,0.02) 45%, transparent 70%);
    transform:translate(-50%,-50%); left:-999px; top:-999px; will-change:transform;
    transition: opacity 0.3s ease;
  }
  #cursorDot{
    position:fixed; width:8px; height:8px; border-radius:50%; background:var(--accent);
    pointer-events:none; z-index:251; left:-999px; top:-999px; will-change:transform;
    transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
  }
  #cursorDot.hovering{ background:var(--aqua); box-shadow:0 0 10px rgba(0,255,255,0.7); }
  .cursor-trail{
    position:fixed; width:4px; height:4px; border-radius:50%; background:var(--text-dim);
    pointer-events:none; z-index:249; left:-999px; top:-999px; opacity:0.5; will-change:transform;
  }

  /* ---------- scroll reveal ---------- */
  .reveal{ opacity:0; transform:translateY(26px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- floating hero glows ---------- */
  .hero-glows{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .glow-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; background:radial-gradient(circle, var(--glow-color), transparent 70%); will-change:transform; }
  .go1{ width:360px; height:360px; top:-100px; left:-60px; animation: floatOrb 14s ease-in-out infinite; }
  .go2{ width:300px; height:300px; bottom:-80px; right:-40px; animation: floatOrb 18s ease-in-out infinite reverse; }
  @keyframes floatOrb{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-24px); } }
  .hero{ position:relative; }

  /* ---------- card lift ---------- */
  .service, .clip, .frame-card, .work-card, .step{ transition: transform 0.35s var(--ease), border-color 0.3s var(--ease); }
  .clip:hover, .frame-card:hover{ transform:translateY(-6px); border-color: rgba(255,255,255,0.18); }

  header{ position:sticky; top:0; z-index:50; background:var(--panel); border-bottom:1px solid var(--line); }
  .topbar{ display:flex; align-items:center; justify-content:space-between; max-width:var(--max); margin:0 auto; padding:14px 28px; gap:20px; }
  .topbar-left{ display:flex; align-items:center; gap:22px; }
  .logo{ font-size:1.1rem; } .logo span{ color:var(--red); }
  .navlogo{ background:none; border:none; padding:4px; cursor:pointer; line-height:0; display:flex; align-items:center; border-radius:8px; transition: background 0.25s var(--ease); }
  .navlogo img{ height:54px; width:auto; display:block; filter: drop-shadow(0 0 14px rgba(255,255,255,0.18)); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), filter 0.25s var(--ease); }
  html.day-mode .navlogo img{ filter: invert(1) drop-shadow(0 0 10px rgba(0,0,0,0.12)); }
  html.day-mode .navlogo:hover img{ filter: invert(1) drop-shadow(0 0 14px rgba(0,255,255,0.35)); }
  .navlogo:hover{ background: rgba(255,255,255,0.04); }
  .navlogo:hover img{ opacity:0.9; transform:scale(1.05); filter: drop-shadow(0 0 20px rgba(0,255,255,0.35)); }
  .footer-logo img{ height:55px; width:auto; opacity:0.9; }
  html.day-mode .footer-logo img{ filter: invert(1); }
  .live-badge{ display:flex; align-items:center; gap:8px; background:var(--chassis); border:1px solid var(--line); border-radius:6px; padding:6px 12px; }
  .navlinks{ display:flex; gap:20px; }
  .navlinks button{ background:none; border:none; text-decoration:none; font-size:0.84rem; opacity:0.7; white-space:nowrap; color:var(--text); cursor:pointer; padding:0; }
  .navlinks button:hover, .navlinks button.active{ opacity:1; color:var(--aqua); }
  @media (max-width:980px){ .navlinks{ display:none; } }

  /* ---------- mobile fixes ---------- */
  @media (max-width:640px){
    .topbar{ padding:10px 14px; gap:10px; }
    .topbar-left{ gap:10px; }
    .topbar-right{ gap:9px; }
    .navlogo{ padding:2px; }
    .navlogo img{ height:34px; }
    .header-toggle{ width:34px; height:34px; }
    .menu-toggle{ padding:8px 9px; }
    .live-badge{ display:none; }
    .navcta{ padding:9px 14px; font-size:0.7rem; letter-spacing:0.02em; }
    .hero{ padding:44px 0 32px; }
    .frame{ padding:32px 20px; }
    .telemetry{ gap:10px 14px; font-size:0.62rem; margin-bottom:18px; }
    .telemetry span{ white-space:nowrap; }
    .hero h1{ font-size:clamp(1.8rem,9vw,2.6rem); }
    .hero-actions{ gap:10px; }
    .btn-primary, .btn-ghost{ padding:12px 18px; font-size:0.82rem; flex:1 1 auto; text-align:center; }
    .section{ padding:60px 0; }
    .section-head{ margin-bottom:32px; }
    .goliveband, .frame, .nle, .browser, .timeline{ padding-left:20px; padding-right:20px; }
    .stat{ padding:24px 14px; }
    .stat-num, .stat-num-static{ font-size:clamp(1.4rem,6vw,1.9rem); }
  }
  .navcta{ background:var(--red); color:#0B0B0C; padding:9px 18px; border-radius:6px; font-weight:700; font-size:0.82rem; text-decoration:none; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; border:none; cursor:pointer; transition: transform 0.25s var(--ease); }
  html.day-mode .navcta{ color:#FFFFFF; }
  html.day-mode .btn-primary{ background:#0A0A0B; color:#FFFFFF; }

  .page{ display:none; }
  .page.active{ display:block; }

  .hero{ padding:70px 0 50px; }
  .hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
  @media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } }
  .frame{ position:relative; border:1px solid var(--line); border-radius:8px; padding:56px 44px;
    background: radial-gradient(circle at 30% 10%, rgba(0,255,255,0.09), rgba(10,120,255,0.05) 42%, transparent 62%);
    transform-style:preserve-3d; will-change:transform; transition: transform 0.15s ease-out; }
  .status-badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--badge-bg); border-radius:100px; padding:7px 14px; margin-bottom:26px; }
  .status-badge .mono{ color:var(--text-dim); }
  .corner{ position:absolute; width:22px; height:22px; opacity:0.6; animation: cornerPulse 3.2s ease-in-out infinite; }
  @keyframes cornerPulse{ 0%,100%{ opacity:0.4; } 50%{ opacity:0.9; } }
  .corner.tl{ top:-1px; left:-1px; border-top:2px solid var(--amber); border-left:2px solid var(--amber); }
  .corner.tr{ top:-1px; right:-1px; border-top:2px solid var(--amber); border-right:2px solid var(--amber); }
  .corner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--amber); border-left:2px solid var(--amber); }
  .corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--amber); border-right:2px solid var(--amber); }
  .telemetry{ display:flex; gap:22px; flex-wrap:wrap; color:var(--text-dim); margin-bottom:26px; }
  .hero h1{ font-size:clamp(2.2rem,6vw,4.2rem); line-height:1; }
  .hero h1 .hl{ color:var(--page-accent, var(--red)); }
  .hero p.lead{ margin-top:22px; color:var(--text-dim); font-size:1.08rem; max-width:56ch; line-height:1.65; }
  .lower-third{ margin-top:30px; display:flex; align-items:center; flex-wrap:wrap; gap:0 14px; background:none; color:var(--text); padding:0; max-width:none;
    font-family:'IBM Plex Mono',monospace; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
  .lower-third .lt-group{ display:inline-flex; align-items:center; gap:14px; }
  .lower-third .lt-item{ position:relative; color:var(--text-dim); padding:4px 0; transition: color .3s var(--ease), text-shadow .3s var(--ease); animation: ltGlow 6s ease-in-out infinite; }
  .lower-third .lt-group:nth-child(2) .lt-item{ animation-delay:1.2s } .lower-third .lt-group:nth-child(3) .lt-item{ animation-delay:2.4s }
  .lower-third .lt-group:nth-child(4) .lt-item{ animation-delay:3.6s } .lower-third .lt-group:nth-child(5) .lt-item{ animation-delay:4.8s }
  @keyframes ltGlow{ 0%,82%,100%{ color:var(--text-dim); text-shadow:none; } 88%{ color:var(--aqua); text-shadow:0 0 14px rgba(0,255,255,0.5); } }
  .lower-third .lt-item::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg, var(--aqua), transparent); opacity:0; transition:opacity .3s var(--ease); }
  .lower-third .lt-item:hover{ color:var(--aqua); text-shadow:0 0 14px rgba(0,255,255,0.5); }
  .lower-third .lt-item:hover::after{ opacity:.8; }
  .lower-third .lt-sep{ width:5px; height:5px; border-radius:50%; background:var(--aqua); opacity:.55; box-shadow:0 0 6px rgba(0,255,255,0.5); flex:0 0 auto; animation: ltPulse 2.4s ease-in-out infinite; }
  .lower-third .lt-group:nth-child(2) .lt-sep{ animation-delay:.3s } .lower-third .lt-group:nth-child(3) .lt-sep{ animation-delay:.6s }
  .lower-third .lt-group:nth-child(4) .lt-sep{ animation-delay:.9s } .lower-third .lt-group:nth-child(5) .lt-sep{ animation-delay:1.2s }
  @keyframes ltPulse{ 0%,100%{ opacity:.3; transform:scale(.85);} 50%{ opacity:.9; transform:scale(1);} }
  @media (prefers-reduced-motion: reduce){ .lower-third .lt-item, .lower-third .lt-sep{ animation:none; } }
  @media (max-width:640px){ .lower-third{ gap:6px 10px; font-size:0.7rem; letter-spacing:0.1em; } .lower-third .lt-group{ gap:10px; } }
  .hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .btn-primary{ background:var(--page-accent, var(--red)); color:#0B0B0C; padding:14px 26px; border-radius:6px; font-weight:700; text-decoration:none; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.03em; border:none; cursor:pointer; transition: transform 0.25s var(--ease); }
  .btn-ghost{ border:1px solid var(--line); padding:14px 26px; border-radius:6px; text-decoration:none; font-weight:700; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--text); background:none; cursor:pointer; transition: transform 0.25s var(--ease); }
  .mode-switch{ position:absolute; top:-24px; right:36px; display:flex; flex-direction:column; align-items:center; gap:7px; z-index:3; }
  .mode-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:1.15rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform 0.3s var(--ease), background 0.4s var(--ease), box-shadow 0.3s var(--ease); box-shadow:0 6px 20px -6px rgba(0,0,0,0.5); }
  .mode-btn:hover{ transform:scale(1.1) rotate(-10deg); box-shadow:0 0 16px rgba(0,255,255,0.3); }
  .mode-label{ color:var(--text-muted); letter-spacing:0.14em; }
  @media (max-width:640px){
    .mode-switch{ top:-18px; right:20px; gap:5px; }
    .mode-btn{ width:38px; height:38px; font-size:0.95rem; }
    .mode-label{ font-size:0.58rem; }
  }

  .ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; white-space:nowrap; background:var(--panel); }
  .ticker-inner{ display:inline-block; animation: scroll 26s linear infinite; font-family:'IBM Plex Mono',monospace; font-size:0.82rem; color:var(--text-dim); }
  .ticker-inner b{ color:var(--amber); }
  .ticker-inner i{ margin:0 20px; font-style:normal; }
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  .section{ padding:90px 0; }
  .section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:44px; flex-wrap:wrap; }
  .section-head .mono{ color:var(--page-accent, var(--red)); }
  .section-head h2{ font-size:clamp(1.6rem,3vw,2.4rem); }

  /* home: scene studio */
  .studio{ display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  @media (max-width:800px){ .studio{ grid-template-columns:1fr; } }
  .scene-list{ background:var(--panel); border-right:1px solid var(--line); }
  @media (max-width:800px){ .scene-list{ border-right:none; border-bottom:1px solid var(--line); } }
  .scene{ display:flex; align-items:center; gap:12px; padding:18px 20px; cursor:pointer; border-bottom:1px solid var(--line); transition: background .2s ease; color:var(--text); width:100%; background:none; border-left:none; border-right:none; border-top:none; text-align:left; }
  .scene:last-child{ border-bottom:none; }
  .scene:hover, .scene.active{ background:var(--chassis); }
  .scene.active{ box-shadow: inset 3px 0 0 var(--aqua); }
  .scene .eye{ opacity:0.4; font-size:0.9rem; }
  .scene.active .eye{ opacity:1; color:var(--aqua); }
  .scene .label{ font-size:0.95rem; font-weight:600; }
  .scene .num{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--text-dim); margin-left:auto; }
  .monitor{ padding:48px 44px; background: radial-gradient(circle at 80% 0%, rgba(0,255,255,0.07), rgba(10,120,255,0.04) 45%, transparent 62%); display:flex; flex-direction:column; justify-content:center; min-height:340px; }
  .monitor .mono{ color:var(--amber); }
  .monitor h3{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:16px; text-transform:none; }
  .monitor p{ color:var(--text-dim); margin-top:16px; line-height:1.7; font-size:1.02rem; max-width:56ch; }
  .monitor .go{ margin-top:22px; display:inline-block; color:var(--red); font-weight:700; text-decoration:none; font-size:0.9rem; background:none; border:none; cursor:pointer; padding:0; }

  .rundown{ border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .run-row{ display:grid; grid-template-columns:90px 1fr 140px; gap:16px; padding:22px 26px; border-bottom:1px solid var(--line); align-items:center; }
  .run-row:last-child{ border-bottom:none; }
  .run-row .mono{ color:var(--amber); }
  .run-row h3{ font-size:1rem; text-transform:none; font-weight:700; }
  .run-row p{ color:var(--text-dim); font-size:0.88rem; margin-top:4px; }
  .run-row .dur{ text-align:right; color:var(--text-dim); }
  @media (max-width:640px){ .run-row{ grid-template-columns:1fr; text-align:left; } .run-row .dur{ text-align:left; } }

  .clips{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:900px){ .clips{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .clips{ grid-template-columns:1fr; } }
  .clip{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); }
  .clip-thumb{ height:130px; position:relative; }
  .clip-thumb .dur-badge{ position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.75); color:#EDEAE2; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; padding:3px 7px; border-radius:3px; }
  .clip-body{ padding:16px 18px; }
  .clip-body .mono{ color:var(--red); }
  .clip-body h4{ font-size:1rem; text-transform:none; margin-top:8px; }
  .t1{ background:linear-gradient(140deg,#1E1E24,#0A0A0B); } .t2{ background:linear-gradient(140deg,#16161A,#101013); }
  .t3{ background:linear-gradient(140deg,#1E1E24,#101013); } .t4{ background:linear-gradient(140deg,#16161A,#0A0A0B); }
  .t5{ background:linear-gradient(140deg,#1E1E24,#0A0A0B); } .t6{ background:linear-gradient(140deg,#16161A,#101013); }

  /* ---------- stats band ---------- */
  .stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  @media (max-width:760px){ .stats-band{ grid-template-columns:1fr 1fr; } }
  .stat{ background:var(--panel); padding:36px 24px; text-align:center; display:flex; flex-direction:column; justify-content:flex-start; }
  .stat-num, .stat-num-static{ font-family:'Archivo',sans-serif; font-weight:900; color:var(--text);
    display:flex; align-items:center; justify-content:center; line-height:1; min-height:clamp(2rem,4vw,2.8rem); }
  .stat-num{ font-size:clamp(2rem,4vw,2.8rem); }
  .stat-num-static{ font-size:clamp(1.4rem,2.6vw,1.9rem); text-transform:uppercase; }
  .stat-label{ margin-top:8px; color:var(--text-muted); }

  /* ---------- trust / faq ---------- */
  .faq{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  @media (max-width:760px){ .faq{ grid-template-columns:1fr; } }
  .faq-item{ background:var(--panel); padding:32px; transition: background 0.3s ease; }
  .faq-item:hover{ background:var(--bg3); }
  .faq-item h3{ font-size:1rem; text-transform:none; font-weight:700; color:var(--text); }
  .faq-item p{ color:var(--text-dim); font-size:0.92rem; margin-top:12px; line-height:1.65; }

  .goliveband{ background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:16px; padding:70px 50px; text-align:center; }
  .goliveband h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); }
  .goliveband p{ color:var(--text-dim); margin-top:14px; font-size:1.02rem; }
  .goliveband .btn-primary{ margin-top:30px; background:var(--accent); color:var(--bg1); }

  footer{ border-top:1px solid var(--line); padding:40px 0; background:var(--panel); }
  .foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
  .foot-grid .mono{ color:var(--text-dim); }
  /* social icons */
  .socials{ display:flex; align-items:center; gap:10px; }
  .social{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:9px; color:var(--text-dim); background:var(--chassis); cursor:pointer;
    transition: color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); }
  .social svg{ width:18px; height:18px; display:block; }
  .social:hover{ color:var(--aqua); border-color:var(--aqua); transform:translateY(-2px); box-shadow:0 0 14px rgba(0,255,255,0.25); }
  .social:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }

  /* ---- design page specifics ---- */
  .swatches{ display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
  .swatch{ width:46px; height:46px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition: transform .2s ease, border-color .2s ease; }
  .swatch:hover, .swatch.active{ transform:translateY(-4px); border-color:var(--text); }
  .specimen{ border:1px solid var(--line); border-radius:10px; padding:36px; margin-bottom:60px; }
  .specimen .row{ display:flex; align-items:baseline; gap:20px; border-bottom:1px solid var(--line); padding:14px 0; }
  .specimen .row:last-child{ border-bottom:none; }
  .specimen .size{ font-family:'IBM Plex Mono',monospace; color:var(--text-dim); width:64px; font-size:0.75rem; }
  .specimen .aa{ font-family:'Archivo',sans-serif; text-transform:none; font-weight:700; }
  .board{ column-count:3; column-gap:16px; }
  @media (max-width:900px){ .board{ column-count:2; } }
  @media (max-width:560px){ .board{ column-count:1; } }
  .tile{ break-inside:avoid; margin-bottom:16px; border-radius:12px; padding:22px; border:1px solid var(--line); }
  .tile .mono{ color:#EDEAE2; }
  .tile h4{ font-size:1rem; text-transform:none; font-weight:700; margin-top:10px; color:#EDEAE2; }
  .tile p{ color:#B8B5AC; font-size:0.88rem; margin-top:8px; line-height:1.6; }
  .tile.h1{ height:120px; } .tile.h2{ height:200px; } .tile.h3{ height:150px; }
  .m1{ background:linear-gradient(150deg,#1E1E24,#101013); } .m2{ background:linear-gradient(150deg,#16161A,#0A0A0B); }
  .m3{ background:linear-gradient(150deg,#1E1E24,#0A0A0B); } .m4{ background:linear-gradient(150deg,#16161A,#101013); }
  .m5{ background:linear-gradient(150deg,#1E1E24,#101013); }

  /* ---- animation page specifics ---- */
  .timeline{ margin-top:40px; border:1px solid var(--line); border-radius:10px; padding:26px; background:var(--panel); }
  .timeline .track{ position:relative; height:44px; background:#0A0A0B; border-radius:6px; margin-top:16px; }
  .timeline .playhead{ position:absolute; top:-6px; width:2px; height:56px; background:var(--aqua); box-shadow:0 0 8px rgba(0,255,255,0.5); left:8%; animation: scrub 6s ease-in-out infinite; }
  @keyframes scrub{ 0%,100%{ left:4%; } 50%{ left:88%; } }
  .keyframe{ position:absolute; top:50%; width:12px; height:12px; background:var(--aqua); box-shadow:0 0 6px rgba(0,255,255,0.5); transform:translate(-50%,-50%) rotate(45deg); border-radius:2px; }
  .timeline .labels{ display:flex; justify-content:space-between; margin-top:10px; }
  .storyboard{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:900px){ .storyboard{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .storyboard{ grid-template-columns:1fr; } }
  .frame-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel); }
  .frame-thumb{ height:140px; position:relative; }
  .frame-thumb .fnum{ position:absolute; top:8px; left:8px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; background:rgba(0,0,0,0.6); color:#EDEAE2; padding:3px 7px; border-radius:3px; }
  .frame-body{ padding:16px; }
  .frame-body h4{ font-size:0.98rem; text-transform:none; }
  .frame-body p{ color:var(--text-dim); font-size:0.85rem; margin-top:6px; line-height:1.5; }
  .f1{ background:linear-gradient(150deg,#16161A,#0A0A0B); } .f2{ background:linear-gradient(150deg,#1E1E24,#101013); }
  .f3{ background:linear-gradient(150deg,#16161A,#101013); } .f4{ background:linear-gradient(150deg,#1E1E24,#0A0A0B); }
  .f5{ background:linear-gradient(150deg,#16161A,#0A0A0B); } .f6{ background:linear-gradient(150deg,#1E1E24,#101013); }
  .easing{ border:1px solid var(--line); border-radius:10px; padding:30px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
  .easing p{ color:var(--text-dim); font-size:0.92rem; line-height:1.6; max-width:44ch; }

  /* ---- video page specifics ---- */
  .nle{ margin-top:40px; border:1px solid var(--line); border-radius:10px; padding:22px; background:var(--panel); }
  .waveform{ display:flex; align-items:flex-end; gap:2px; height:50px; margin:14px 0; }
  .waveform span{ flex:1 1 auto; min-width:2px; background:var(--aqua); border-radius:2px; animation: wave 1.4s ease-in-out infinite; box-shadow:0 0 6px rgba(0,255,255,0.4); }
  @keyframes wave{ 0%,100%{ transform:scaleY(0.3); } 50%{ transform:scaleY(1); } }
  .track-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
  .track-row .tname{ width:70px; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--text-dim); flex-shrink:0; }
  .track-row .lane{ flex:1; height:22px; background:#0A0A0B; border-radius:4px; position:relative; overflow:hidden; }
  .clip-block{ position:absolute; top:2px; bottom:2px; border-radius:3px; }
  .cb1{ background:#D0D0D0; left:2%; width:22%; } .cb2{ background:#9A9A9A; left:28%; width:30%; }
  .cb3{ background:#F5F4F1; left:62%; width:18%; } .cb4{ background:#6b6b6b; left:84%; width:14%; }
  .ab1{ background:#5c5648; left:0%; width:100%; opacity:0.5; }
  .editrows{ border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .erow{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:22px 26px; border-bottom:1px solid var(--line); align-items:center; }
  .erow:last-child{ border-bottom:none; }
  .erow .mono{ color:var(--page-accent); }
  .erow h3{ font-size:1rem; text-transform:none; font-weight:700; }
  .erow p{ color:var(--text-dim); font-size:0.9rem; margin-top:4px; }
  @media (max-width:600px){ .erow{ grid-template-columns:1fr; } }

  /* ---- web dev page specifics ---- */
  .browser{ margin-top:40px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .browser-bar{ background:var(--panel); display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
  .dots{ display:flex; gap:6px; }
  .dots span{ width:10px; height:10px; border-radius:50%; }
  .dots .r{ background:#FF3B3B; } .dots .y{ background:#FFB020; } .dots .g{ background:#38E8D4; }
  .urlbar{ flex:1; background:var(--chassis); border-radius:6px; padding:6px 12px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--text-dim); }
  .terminal{ background:#0A0A0A; padding:20px; font-family:'IBM Plex Mono',monospace; font-size:0.86rem; line-height:1.8; min-height:140px; color:#EDEAE2; }
  .terminal *{ color:#EDEAE2 !important; }
  .terminal .prompt{ color:var(--aqua) !important; }
  .terminal .prompt{ color:var(--aqua); }
  .terminal .typed::after{ content:'▌'; animation: blinkcur 1s steps(1) infinite; color:var(--aqua); }
  @keyframes blinkcur{ 50%{ opacity:0; } }
  .tabs{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
  .tab{ border:1px solid var(--line); border-radius:6px; padding:10px 16px; font-size:0.85rem; cursor:pointer; background:var(--panel); color:var(--text); }
  .tab.active{ border-color:var(--aqua); color:var(--aqua); }
  .tabpanel{ border:1px solid var(--line); border-radius:10px; padding:36px; display:none; }
  .tabpanel.tabactive{ display:block; }
  .tabpanel h3{ font-size:1.2rem; text-transform:none; }
  .tabpanel p{ color:var(--text-dim); margin-top:12px; line-height:1.7; max-width:60ch; }

  /* ---- app dev page specifics ---- */
  .phone-wrap{ display:flex; justify-content:center; }
  .phone{ width:240px; height:490px; background:#000; border-radius:34px; padding:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7); position:relative; }
  .phone .notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:90px; height:18px; background:#000; border-radius:0 0 12px 12px; z-index:2; }
  .screen{ width:100%; height:100%; border-radius:24px; overflow:hidden; position:relative; }
  .status{ display:flex; justify-content:space-between; padding:14px 18px 0; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:#EDEAE2; }
  .app-content{ padding:30px 18px; height:100%; }
  .app1{ background:linear-gradient(160deg,#1E1E24,#0A0A0B); } .app2{ background:linear-gradient(160deg,#16161A,#0A0A0B); } .app3{ background:linear-gradient(160deg,#101013,#0A0A0B); }
  .app-content h4{ font-size:1.1rem; text-transform:none; margin-top:20px; color:#EDEAE2; }
  .app-content p{ color:#B8B5AC; font-size:0.8rem; margin-top:8px; }
  .dots-nav{ display:flex; gap:6px; justify-content:center; margin-top:18px; }
  .dots-nav span{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; }
  .dots-nav span.active{ background:var(--aqua); box-shadow:0 0 6px rgba(0,255,255,0.6); }

  /* ===== added pages: shared components (monochrome + aqua, reuse existing vars) ===== */

  /* mobile nav toggle */
  .menu-toggle{ display:none; align-items:center; gap:9px; background:var(--chassis); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:8px 12px; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; }
  .menu-toggle .bars{ display:flex; flex-direction:column; gap:3px; }
  .menu-toggle .bars i{ display:block; width:16px; height:2px; background:var(--text); }
  @media (max-width:1150px){
    .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--panel); border-bottom:1px solid var(--line); padding:8px 16px 14px; box-shadow:0 22px 44px -22px rgba(0,0,0,0.6); }
    header.nav-open .navlinks{ display:flex; }
    .navlinks button{ text-align:left; padding:13px 4px; font-size:0.95rem; opacity:0.85; border-bottom:1px solid var(--line); }
    .navlinks button:last-child{ border-bottom:none; }
    .menu-toggle{ display:flex; }
  }
  @media (max-width:640px){ .menu-toggle span:not(.bars){ display:none; } .menu-toggle{ padding:8px; } }

  /* role cards (about) */
  .roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:820px){ .roles{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .roles{ grid-template-columns:1fr; } }
  .role{ border:1px solid var(--line); border-radius:12px; padding:26px 22px; background:var(--panel); transition: transform 0.35s var(--ease), border-color 0.3s var(--ease); }
  .role:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,0.18); }
  html.day-mode .role:hover{ border-color:rgba(0,0,0,0.18); }
  .role .code{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; color:var(--aqua); }
  .role h4{ font-size:1.05rem; text-transform:none; margin-top:12px; }
  .role p{ color:var(--text-dim); font-size:0.9rem; margin-top:10px; line-height:1.6; }

  /* positioning statement (about) */
  .statement{ border:1px solid var(--line); border-radius:16px; padding:56px 44px; text-align:center;
    background: radial-gradient(circle at 50% 0%, rgba(0,255,255,0.05), transparent 60%), var(--panel); }
  html.day-mode .statement{ background: radial-gradient(circle at 50% 0%, rgba(0,130,153,0.06), transparent 60%), var(--panel); }
  .statement .mono{ color:var(--aqua); display:block; margin-bottom:18px; }
  .statement h2{ font-size:clamp(1.5rem,3vw,2.2rem); text-transform:none; line-height:1.35; max-width:26ch; margin:0 auto; }
  @media (max-width:560px){ .statement{ padding:40px 22px; } }

  /* case studies (work) */
  .case-body{ padding:18px 20px; }
  .case-body .cat{ color:var(--aqua); }
  .case-body h4{ font-size:1.02rem; text-transform:none; margin-top:8px; }
  .case-line{ margin-top:14px; }
  .case-line .mono{ color:var(--text-muted); font-size:0.62rem; display:block; }
  .case-line p{ color:var(--text-dim); font-size:0.86rem; margin-top:4px; line-height:1.55; }
  .case.hide{ display:none; }

  /* pricing pills */
  .pricenote{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .pricenote span{ border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); }

  /* forms (quote / contact) */
  .qform{ border:1px solid var(--line); border-radius:14px; padding:34px; background:var(--panel); }
  @media (max-width:560px){ .qform{ padding:24px 18px; } }
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
  .field{ margin-bottom:18px; }
  .field > .mono{ display:block; color:var(--text-muted); margin-bottom:8px; }
  .field input, .field select, .field textarea{ width:100%; background:var(--chassis); border:1px solid var(--line); border-radius:8px; padding:12px 14px; color:var(--text); font-family:'Inter',sans-serif; font-size:0.95rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
  .field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
  .field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(0,255,255,0.14); }
  .field select{ appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
    background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
  .form-note{ color:var(--text-muted); font-size:0.82rem; margin-top:14px; line-height:1.6; }
  .form-note a{ color:var(--aqua); text-decoration:none; }
  .form-note a:hover{ text-decoration:underline; }

  /* contact split + channels */
  .split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:24px; align-items:start; }
  @media (max-width:820px){ .split{ grid-template-columns:1fr; } }
  .channels{ border:1px solid var(--line); border-radius:14px; padding:30px; background:var(--panel); }
  @media (max-width:560px){ .channels{ padding:24px 18px; } }
  .channel{ display:flex; flex-direction:column; gap:5px; padding:18px 0; border-bottom:1px solid var(--line); }
  .channel:first-child{ padding-top:0; }
  .channel:last-child{ border-bottom:none; }
  .channel .mono{ color:var(--text-muted); }
  .channel a, .channel .val{ color:var(--text); font-size:1.02rem; text-decoration:none; word-break:break-word; }
  .channel a:hover{ color:var(--aqua); }

  /* footer nav */
  .footer-nav{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .footer-nav button{ background:none; border:none; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; padding:4px 0; }
  .footer-nav button:hover{ color:var(--aqua); }



  /* ---------- mobile dynamism ---------- */
  body.is-touch .btn-primary:active, body.is-touch .btn-ghost:active, body.is-touch .navcta:active,
  body.is-touch .scene:active, body.is-touch .clip:active, body.is-touch .case:active, body.is-touch .role:active,
  body.is-touch .tab:active, body.is-touch .swatch:active, body.is-touch .frame-card:active,
  body.is-touch .navlinks button:active, body.is-touch .nav-dd-menu button:active, body.is-touch .footer-nav button:active,
  body.is-touch .mGo:active, body.is-touch .run-row:active{
    transform: scale(0.965); transition: transform .1s ease;
  }
  body.is-touch .hero-glows{ transition: transform .12s ease-out; }
  @media (hover:none){
    .reveal{ transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .glow-orb{ animation-duration: 10s; }
  }

  /* header right cluster + toggle (moved from hero) */
  .topbar-right{ display:flex; align-items:center; gap:12px; }
  .header-toggle{ width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--chassis); color:var(--text); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition: transform .25s var(--ease), box-shadow .3s var(--ease); }
  .header-toggle:hover{ transform:translateY(-1px); box-shadow:0 0 14px rgba(0,255,255,0.28); }
  @media (max-width:1150px){ .menu-toggle{ margin-left:0; } }
  @media (max-width:640px){ .topbar-right{ gap:8px; } .header-toggle{ width:34px; height:34px; font-size:0.9rem; } }

  /* interactive channel strip (replaces ticker) */
  .channel-strip{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); }
  .chan{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 10px; background:none; border:none; border-right:1px solid var(--line); cursor:pointer; color:var(--text); transition: background .3s var(--ease); }
  .chan:last-child{ border-right:none; }
  .chan:hover{ background:var(--bg3); }
  .chan-no{ font-size:0.6rem; letter-spacing:0.14em; color:var(--text-muted); }
  .chan-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:0.01em; transition:color .3s var(--ease); }
  .chan:hover .chan-name{ color:var(--aqua); }
  .ci{ width:26px; height:26px; color:var(--aqua); display:block; overflow:visible; }
  .chan:hover .ci{ filter: drop-shadow(0 0 5px rgba(0,255,255,0.55)); }
  .ci-pencil{ animation: ciDraw 1.7s ease-in-out infinite; transform-origin:center; }
  @keyframes ciDraw{ 0%,100%{ transform:translate(-1px,1px) rotate(0deg);} 50%{ transform:translate(1px,-1px) rotate(-5deg);} }
  .ci-bounce .ball{ transform-box:view-box; transform-origin:12px 12px; animation: ciBall 1s cubic-bezier(.5,0,.5,1) infinite; }
  @keyframes ciBall{ 0%{ transform:translateY(-2px) scale(1);} 42%{ transform:translateY(8px) scale(1);} 50%{ transform:translateY(9px) scale(1.2,.75);} 58%{ transform:translateY(8px) scale(1);} 100%{ transform:translateY(-2px) scale(1);} }
  .ci-scissors .sc-top{ transform-box:view-box; transform-origin:11px 12px; animation: ciSnipT .9s ease-in-out infinite; }
  .ci-scissors .sc-bot{ transform-box:view-box; transform-origin:11px 12px; animation: ciSnipB .9s ease-in-out infinite; }
  @keyframes ciSnipT{ 0%,100%{ transform:rotate(2deg);} 50%{ transform:rotate(-10deg);} }
  @keyframes ciSnipB{ 0%,100%{ transform:rotate(-2deg);} 50%{ transform:rotate(10deg);} }
  .ci-code .caret{ animation: blink 1s steps(2) infinite; }
  .ci-code .br-l{ animation: ciBrl 1.4s ease-in-out infinite; }
  .ci-code .br-r{ animation: ciBrr 1.4s ease-in-out infinite; }
  @keyframes ciBrl{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(-1.5px);} }
  @keyframes ciBrr{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(1.5px);} }
  .ci-app .tap{ transform-box:view-box; transform-origin:12px 11px; animation: ciTap 1.1s ease-in-out infinite; }
  @keyframes ciTap{ 0%,100%{ transform:scale(.4); opacity:.4;} 50%{ transform:scale(1); opacity:1;} }
  @media (max-width:700px){ .chan{ padding:12px 3px; gap:6px; } .chan-no{ display:none; } .chan-name{ font-size:0.6rem; } .ci{ width:22px; height:22px; } }

  /* reviews */
  .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:860px){ .reviews{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .reviews{ grid-template-columns:1fr; } }
  .review{ margin:0; border:1px solid var(--line); border-radius:14px; padding:26px 24px; background:var(--panel); display:flex; flex-direction:column; gap:14px; transition: transform .35s var(--ease), border-color .3s var(--ease); }
  .review:hover{ transform:translateY(-5px); border-color:rgba(0,255,255,0.28); }
  .review .stars{ color:var(--aqua); letter-spacing:3px; font-size:0.9rem; }
  .review blockquote{ margin:0; color:var(--text-dim); line-height:1.65; font-size:0.95rem; }
  .review figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
  .r-name{ font-family:'Archivo',sans-serif; font-weight:700; }
  .r-role{ color:var(--text-muted); font-size:0.72rem; }

  /* app tap hint */
  .tap-hint{ margin-top:14px; text-align:center; color:var(--aqua); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.85; animation:tapPulse 1.8s ease-in-out infinite; }
  @keyframes tapPulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.95 } }

  /* goliveband mobile overflow fix */
  .goliveband{ overflow-wrap:break-word; }
  .goliveband a.btn-primary, .goliveband .btn-primary{ max-width:100%; overflow-wrap:anywhere; box-sizing:border-box; }
  @media (max-width:600px){
    .goliveband{ padding:44px 22px; }
    .goliveband h2{ font-size:1.5rem; }
    .goliveband p{ font-size:0.94rem; }
    .goliveband a.btn-primary, .goliveband .btn-primary{ white-space:normal; word-break:break-word; }
  }

  /* CTA label swap (mobile shows short "Connect") */
  .cta-short{ display:none; }
  @media (max-width:640px){ .cta-full{ display:none; } .cta-short{ display:inline; } }
  /* 5. footer logo centered on mobile only */
  @media (max-width:640px){
    .foot-grid{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
    .footer-logo{ display:flex; justify-content:center; width:100%; }
    .socials{ justify-content:center; width:100%; }
  }

  /* ---------- services dropdown ---------- */
  .nav-dd{ position:relative; display:flex; align-items:center; }
  .nav-dd-trigger{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:0.84rem; opacity:0.7; color:var(--text); white-space:nowrap; user-select:none; }
  .nav-dd-trigger:hover, .nav-dd:hover .nav-dd-trigger, .nav-dd.dd-open .nav-dd-trigger{ opacity:1; color:var(--aqua); }
  .nav-dd-caret{ width:9px; height:9px; transition:transform .3s var(--ease); }
  .nav-dd:hover .nav-dd-caret, .nav-dd.dd-open .nav-dd-caret{ transform:rotate(180deg); }
  .nav-dd-menu{ position:absolute; top:100%; left:0; transform:translateY(8px); min-width:184px; padding:8px; margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 26px 60px -26px rgba(0,0,0,0.7); display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; z-index:60; }
  .nav-dd-menu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu, .nav-dd.dd-open .nav-dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s; }
  .nav-dd-menu button{ text-align:left; padding:9px 12px; border-radius:7px; font-size:0.85rem; opacity:0.82; white-space:nowrap; width:100%; background:none; border:none; color:var(--text); cursor:pointer; }
  .nav-dd-menu button:hover, .nav-dd-menu button.active{ opacity:1; color:var(--aqua); background:var(--bg3); }
  @media (max-width:1150px){
    .nav-dd{ flex-direction:column; align-items:stretch; }
    .nav-dd-trigger{ justify-content:space-between; padding:13px 4px; font-size:0.95rem; opacity:0.85; border-bottom:1px solid var(--line); }
    .nav-dd-menu{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; min-width:0; margin:0; padding:0; border:none; box-shadow:none; background:none; max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
    .nav-dd.dd-open .nav-dd-menu{ max-height:340px; }
    .nav-dd-menu button{ padding:12px 4px 12px 18px; border-radius:0; border-bottom:1px solid var(--line); }
  }

  /* 5. stats band: readable on mobile (long labels/words) */
  @media (max-width:760px){
    .stat{ display:flex; flex-direction:column; justify-content:flex-start; min-height:118px; }
    .stat-num, .stat-num-static{ min-height:clamp(1.4rem,6vw,1.9rem); }
    .stat-num-static{ font-size:clamp(1.05rem,4.6vw,1.5rem); line-height:1.15; overflow-wrap:break-word; hyphens:none; }
    .stat-label{ font-size:0.6rem; line-height:1.45; overflow-wrap:break-word; }
  }
  @media (max-width:400px){
    .stats-band{ grid-template-columns:1fr; }
    .stat{ min-height:0; padding:22px 16px; }
  }
  /* 8/3. hero timer badge */
  .status-badge .timecode{ color:var(--aqua); letter-spacing:0.04em; }

  /* 1. hero On Air timer: mobile only (desktop header badge covers desktop) */
  #heroBadge{ display:none; }
  @media (max-width:640px){ #heroBadge{ display:inline-flex; } }

  /* ===== multi-page adaptations ===== */
  .navlinks a{ background:none; border:none; text-decoration:none; font-size:0.84rem; opacity:0.7; white-space:nowrap; color:var(--text); cursor:pointer; padding:0; }
  .navlinks a:hover, .navlinks a.active{ opacity:1; color:var(--aqua); }
  .nav-dd-menu a{ text-align:left; padding:9px 12px; border-radius:7px; font-size:0.85rem; opacity:0.82; white-space:nowrap; width:100%; color:var(--text); text-decoration:none; display:block; box-sizing:border-box; }
  .nav-dd-menu a:hover, .nav-dd-menu a.active{ opacity:1; color:var(--aqua); background:var(--bg3); }
  .nav-dd-trigger.dd-active{ opacity:1; color:var(--aqua); }
  .footer-nav a{ color:var(--text-dim); font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; padding:4px 0; text-decoration:none; }
  .footer-nav a:hover{ color:var(--aqua); }
  a.chan{ text-decoration:none; }
  a.navcta{ display:inline-block; }
  a.btn-primary, a.btn-ghost{ display:inline-block; }
  @media (max-width:1150px){
    .navlinks a{ text-align:left; padding:13px 4px; font-size:0.95rem; opacity:0.85; border-bottom:1px solid var(--line); display:block; }
    .navlinks a:last-child{ border-bottom:none; }
  }
  main.page{ display:block; }

  /* ===== forms: honeypot + submit status ===== */
  .hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
  .form-status{ margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; line-height:1.6; min-height:1em; }
  .form-status.is-success{ color:var(--aqua); }
  .form-status.is-error{ color:#FF6B6B; }
  html.day-mode .form-status.is-error{ color:#C62828; }
  .btn-primary:disabled{ opacity:.6; cursor:wait; }

  /* ===== services overview page ===== */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:900px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .svc-grid{ grid-template-columns:1fr; } }
  .svc-card{ display:flex; flex-direction:column; gap:12px; padding:28px 24px; background:var(--panel); border:1px solid var(--line);
    border-radius:14px; text-decoration:none; color:var(--text);
    transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .svc-card:hover{ transform:translateY(-6px); border-color:var(--aqua); box-shadow:0 0 26px -8px rgba(0,255,255,0.3); }
  .svc-top{ display:flex; align-items:center; justify-content:space-between; }
  .svc-no{ color:var(--text-muted); letter-spacing:0.14em; }
  .svc-card h3{ font-size:1.08rem; text-transform:none; letter-spacing:0; }
  .svc-card > p{ color:var(--text-dim); font-size:0.9rem; line-height:1.6; }
  .svc-list{ list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:6px; }
  .svc-list li{ position:relative; padding-left:16px; color:var(--text-muted); font-size:0.82rem; }
  .svc-list li::before{ content:""; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--aqua); opacity:.65; }
  .svc-go{ margin-top:auto; padding-top:14px; color:var(--aqua); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    opacity:0; transform:translateX(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .svc-card:hover .svc-go{ opacity:1; transform:translateX(0); }
  @media (hover:none){ .svc-go{ opacity:.8; transform:none; } }

  /* services dropdown trigger is now a link (crawlable) */
  a.nav-dd-trigger{ text-decoration:none; }
  @media (max-width:1150px){ a.nav-dd-trigger{ border-bottom:1px solid var(--line); } }

  /* dropdown: link to the services overview page */
  .nav-dd-menu .dd-all{ color:var(--aqua); opacity:1; border-bottom:1px solid var(--line); border-radius:7px 7px 0 0; margin-bottom:4px; padding-bottom:11px; }
  .nav-dd-menu .dd-all:hover{ background:var(--bg3); }

  /* ===== video case studies ===== */
  .vid-stage{ position:relative; display:flex; align-items:center; justify-content:center; padding:22px;
    background:radial-gradient(circle at 50% 0%, rgba(0,255,255,0.06), transparent 62%), var(--bg3);
    border-bottom:1px solid var(--line); }
  /* fixed frame: the video can never dictate its own size */
  .vid-frame{ position:relative; width:100%; max-width:196px; aspect-ratio:9/16; border-radius:12px;
    overflow:hidden; background:#000; border:1px solid var(--line);
    box-shadow:0 20px 44px -18px rgba(0,0,0,0.7); transition:border-color .3s var(--ease); }
  .vid-frame video.vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block; border:none; border-radius:0; background:#000; }
  .vid-dur{ position:absolute; top:14px; right:14px; z-index:2; }
  .case-video:hover .vid-frame{ border-color:var(--aqua); }

  /* work grid: cards size to their content instead of stretching to the tallest row */
  #workGrid{ align-items:start; }


  /* ===== ForgeFit featured case study ===== */
  .case-featured{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr); gap:0; }
  @media (max-width:820px){ .case-featured{ grid-template-columns:minmax(0,1fr); } }
  /* children must be allowed to shrink below their content's min width */
  .case-featured > .ff-stage, .case-featured > .case-body{ min-width:0; }
  /* the thumbnail strip scrolls; it must not dictate the column width */
  .ff-thumbs{ min-width:0; max-width:100%; }

  /* stage is a plain BLOCK. no flex, no grid. the shell centres with margin:auto. */
  .ff-stage{ position:relative; display:block; padding:30px 20px 26px; box-sizing:border-box; width:100%;
    background:radial-gradient(circle at 50% 0%, rgba(0,255,255,0.07), transparent 62%), var(--bg3);
    border-right:1px solid var(--line); }
  @media (max-width:820px){ .ff-stage{ border-right:none; border-bottom:1px solid var(--line); padding:26px 12px 22px; } }

  /* fixed width + margin auto = centred, always */
  .ff-shell{ position:relative; width:216px; max-width:100%; margin:0 auto; box-sizing:border-box; }
  @media (max-width:600px){ .ff-shell{ width:196px; } }

  .ff-cap{ display:block; text-align:center; color:var(--aqua); font-size:0.62rem; letter-spacing:0.12em;
    text-transform:uppercase; margin:0 0 10px; min-height:1em; }

  .ff-viewport{ display:block; width:100%; aspect-ratio:620/1438; overflow:hidden; border-radius:14px;
    border:1px solid var(--line); box-shadow:0 22px 50px -18px rgba(0,0,0,0.75); background:#000; box-sizing:border-box; }
  .ff-track{ height:100%; }
  .ff-slide img{ height:100%; object-fit:cover; }
  .ff-track{ display:flex; flex-direction:row; will-change:transform; transition:transform .55s var(--ease); }
  .ff-slide{ flex:0 0 100%; width:100%; margin:0; min-width:0; }
  .ff-slide img{ display:block; width:100%; height:auto; }
  @media (prefers-reduced-motion: reduce){ .ff-track{ transition:none; } }

  .ff-nav{ position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%;
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    font-size:1.15rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3;
    opacity:.85; transition:opacity .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
  .ff-nav:hover{ opacity:1; color:var(--aqua); border-color:var(--aqua); }
  .ff-prev{ left:14px; } .ff-next{ right:14px; }
  @media (max-width:820px){ .ff-prev{ left:10px; } .ff-next{ right:10px; } }

  .ff-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
  .ff-dot{ width:6px; height:6px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--text-muted); opacity:.45; transition:opacity .25s, background .25s, transform .25s; }
  .ff-dot.is-active{ background:var(--aqua); opacity:1; transform:scale(1.35); }

  .ff-thumbs{ display:flex; gap:8px; margin-top:18px; overflow-x:auto; padding-bottom:6px; scroll-behavior:smooth; }
  .ff-thumb{ flex:0 0 auto; width:42px; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
    background:none; cursor:pointer; opacity:.5; transition:opacity .25s, border-color .25s, transform .25s; }
  .ff-thumb img{ width:100%; height:auto; display:block; }
  .ff-thumb:hover{ opacity:.85; transform:translateY(-2px); }
  .ff-thumb.is-active{ opacity:1; border-color:var(--aqua); }