/* ============================================================
   BLITZ — BASE
   Reset, layout primitives, nav, footer, shared components.
   Loaded on every page after tokens.css.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Font role application */
body{font-family:var(--ffb)}
.ffd,.lb,.lsi,.hh1,.hh2-big,.bL,.sec-ttl,.bcn,.vnum,.bcl,.aname,.acta,
.ftct,.aisg-n,.csub-n,.typed-label,.mm-lbl,.ps-title,.aiera-h,
.page-h1,.page-eyebrow,.dev-card-n,.dev-card-meta{font-family:var(--ffd)}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t1);transition:background .3s,color .3s;overflow-x:hidden}

/* ---- Layout ---- */
.w{max-width:1260px;margin:0 auto;padding:0 28px}
.div{height:1px;background:var(--bd)}
@media(max-width:640px){.w{padding:0 18px}}

/* ============================================================
   NAV
   ============================================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--nav);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bd);transition:background .3s}
.nr{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
footer .logo{display:inline-flex}/* only the logo is clickable, not the whole footer column */
.lm{width:30px;height:30px;background:linear-gradient(135deg,var(--ai),var(--blitz));
  border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lm svg{width:16px;height:16px;fill:white}
.lw{display:flex;align-items:center;gap:5px;line-height:1}
.lb{font-weight:700;font-size:20px;color:var(--t1);letter-spacing:-.5px;line-height:1;transition:color .3s}
.lsw{overflow:hidden;height:22px;display:block}
.lst{display:flex;flex-direction:column;transition:transform .52s cubic-bezier(.4,0,.2,1)}
.lsi{height:22px;font-weight:600;font-size:15px;line-height:22px;white-space:nowrap;
  letter-spacing:-.2px;display:flex;align-items:center}
.nl{display:flex;align-items:center;gap:6px}
.nl a{font-size:14px;font-weight:500;color:var(--t2);text-decoration:none;
  padding:7px 16px;border-radius:8px;border:1px solid var(--bd);background:var(--s1);
  transition:all .2s;white-space:nowrap}
.nl a:hover{color:var(--blitz);background:var(--blitz-s);border-color:var(--blitz-b)}
.nl a.active{color:var(--acc);background:var(--acc-s);border-color:var(--acc-b)}
.nl a.navhome{padding:7px 11px;display:inline-flex;align-items:center}
.nl a.navhome svg{display:block}
@media(max-width:860px){.nl{display:none}}
.na{display:flex;align-items:center;gap:10px}
.tbtn{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--bd);
  background:var(--s1);cursor:pointer;display:flex;align-items:center;gap:6px;
  color:var(--t2);transition:all .2s;font-family:var(--ffb);font-size:12px;font-weight:600}
.tbtn:hover{background:var(--s2);color:var(--t1)}
.ncta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--t1);
  color:var(--bg);font-size:13px;font-weight:600;border-radius:8px;text-decoration:none;
  white-space:nowrap;font-family:var(--ffd);transition:opacity .2s,transform .15s}
.ncta:hover{opacity:.85;transform:translateY(-1px)}

/* ============================================================
   BUTTONS
   ============================================================ */
.bL{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;font-size:15px;
  font-weight:600;border-radius:10px;text-decoration:none;transition:all .2s}
.bS{background:var(--t1);color:var(--bg)}
.bS:hover{opacity:.85;transform:translateY(-1px)}
.bO{border:1px solid var(--bh);color:var(--t1)}
.bO:hover{background:var(--s1)}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.sec-eye{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:13px}
.sec-ttl{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-1.5px;
  color:var(--t1);line-height:1.08;margin-bottom:13px}
.sec-sub{font-size:16px;color:var(--t2);line-height:1.72;max-width:520px}

/* ============================================================
   PILLS (division nav chips) — substantial neutral + glow dot
   Bigger/bolder neutral chip; the division color shows in the glowing
   dot and on the hover border. Carries its color family via .d-* (--c).
   ============================================================ */
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--bh);
  border-radius:999px;font-size:14px;font-weight:600;color:var(--t1);text-decoration:none;
  background:var(--card);transition:all .2s ease}
.pill:hover{border-color:var(--c);transform:translateY(-2px)}
/* Hover-lift stabiliser: lifting controls (translateY on :hover) oscillate when
   the cursor sits on their bottom edge — the lift moves the element out from
   under the pointer, hover drops, it falls back, and any DOM change (e.g. the
   hero typewriter) re-triggers the flip. Fix: a transparent full-size overlay
   that counter-translates on hover, so the ORIGINAL hit area stays occupied
   while the element is lifted. Only for controls with no clickable children.
   (.bc/.ac cards not covered: .bc's overflow:hidden clips pseudo hit areas.) */
.ncta,.bS,.pill,.sw-btn{position:relative}
.ncta::after,.bS::after,.pill::after,.sw-btn::after{content:'';position:absolute;inset:0}
.pill:hover::after{transform:translateY(2px)}
.ncta:hover::after,.bS:hover::after,.sw-btn:hover::after{transform:translateY(1px)}
.pd{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--c);
  box-shadow:0 0 9px var(--c);animation:pdPulse 2.6s ease-in-out infinite}
/* slow rhythmic dim/brighten; staggered into a wave */
@keyframes pdPulse{
  0%,100%{opacity:.4;box-shadow:0 0 4px var(--c)}
  50%{opacity:1;box-shadow:0 0 12px var(--c)}
}
.pills .pill:nth-child(1) .pd{animation-delay:0s}
.pills .pill:nth-child(2) .pd{animation-delay:.3s}
.pills .pill:nth-child(3) .pd{animation-delay:.6s}
.pills .pill:nth-child(4) .pd{animation-delay:.9s}
.pills .pill:nth-child(5) .pd{animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.pd{animation:none;opacity:1}}
/* division color carriers */
.pill.d-ai{--c:var(--ai);--cs:var(--ai-s);--cb:var(--ai-b)}
.pill.d-dm{--c:var(--dm);--cs:var(--dm-s);--cb:var(--dm-b)}
.pill.d-cn{--c:var(--cn);--cs:var(--cn-s);--cb:var(--cn-b)}
.pill.d-dv{--c:var(--dv);--cs:var(--dv-s);--cb:var(--dv-b)}
.pill.d-gr{--c:var(--gr);--cs:var(--gr-s);--cb:var(--gr-b)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--s1);border-top:1px solid var(--bd);padding:64px 0 32px}
.ftg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.ftd{font-size:14px;color:var(--t2);line-height:1.72;max-width:260px;margin-top:16px}
.ftloc{font-size:12px;color:var(--t3);margin-top:10px}
.ftct{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);margin-bottom:16px}
.ftl{list-style:none;display:flex;flex-direction:column;gap:10px}
.ftl a{font-size:14px;color:var(--t2);text-decoration:none;transition:color .2s}
.ftl a:hover{color:var(--t1)}
.ftbot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;
  border-top:1px solid var(--bd);font-size:12px;color:var(--t3);flex-wrap:wrap;gap:8px}
@media(max-width:760px){.ftg{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ftg{grid-template-columns:1fr}.ftbot{flex-direction:column;text-align:center}}

/* ============================================================
   DEV DOCK (switcher tools — REMOVE before production)
   ============================================================ */
/* hidden for regular visitors — core.js unlocks via a deliberately non-obvious
   token (?dev-mode=true1, persisted in localStorage as bcs-dev; any other
   dev-mode value locks again) */
.dev-dock{position:fixed;bottom:24px;right:24px;z-index:300;display:none;
  flex-direction:column;gap:10px;align-items:flex-end}
html[data-dev] .dev-dock{display:flex}
.sw-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--t1);
  color:var(--bg);border:none;border-radius:999px;cursor:pointer;font-size:13px;
  font-weight:600;font-family:var(--ffb);box-shadow:0 2px 16px rgba(0,0,0,0.22);transition:all .2s}
.sw-btn:hover{opacity:.88;transform:translateY(-1px)}
.sw-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:300px;background:var(--card);
  border:1px solid var(--bh);border-radius:16px;padding:16px;box-shadow:var(--sh-h);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.sw-panel.open{opacity:1;pointer-events:all;transform:translateY(0)}
.sw-hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;
  border-bottom:1px solid var(--bd);margin-bottom:10px}
.sw-hd-t{font-size:13px;font-weight:600;color:var(--t1)}
.sw-hd-n{font-size:10px;color:var(--t3);background:var(--s1);padding:2px 8px;border-radius:999px;
  border:1px solid var(--bd)}
.sw-items{display:flex;flex-direction:column;gap:6px}
.sw-item{padding:11px 13px;border:1px solid var(--bd);border-radius:10px;cursor:pointer;
  transition:all .15s;background:var(--card)}
.sw-item:hover{border-color:var(--bh);background:var(--s1)}
.sw-item.active{border-color:var(--blitz);background:var(--blitz-s)}
.sw-iname{font-size:14px;font-weight:700;color:var(--t1);margin-bottom:2px}
.sw-idesc{font-size:11px;color:var(--t3);line-height:1.45}
.fs-iname{font-size:17px;font-weight:700;color:var(--t1);line-height:1.2;margin-bottom:3px}
.fs-imeta{font-size:11px;color:var(--t3);display:flex;justify-content:space-between;
  align-items:center;margin-top:4px}
.fs-itag{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blitz)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .55s,transform .55s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}