/* =====================================================================================
   FODO STUDIO — design system layer (loaded after styles.css + theme-glass.css)
   Direction: white editorial foundation · ink & graphite · one restrained accent (FODO iris)
              · Liquid Glass reserved for controls and navigation · solid content surfaces.
   Everything here is tokens + components; page markup and scripts are unchanged except the home hero.
   ===================================================================================== */

/* ---------- 1. TOKENS ---------- */
html[data-theme="light"]{
  --paper:#FAFAFB; --surface:#FFFFFF; --mist:#F2F3F5; --mist-2:#E9EBEF;
  --ink:#15161A; --graphite:#454A54; --slate:#636873; --hairline:#E1E3E8; --edge:#C9CDD4;
  --accent:#4C3BCF; --accent-soft:rgba(76,59,207,.09);
  /* legacy aliases used by existing components */
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --iron:#9EA3AD;
  --line:var(--hairline); --line-2:#E8EAEE; --line-3:var(--edge);
  --panel:var(--surface); --panel-raised:var(--surface); --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.86);
  --glass-border:rgba(21,22,26,.10); --glass-hi:#fff;
  --glass-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(21,22,26,.05),0 10px 30px -14px rgba(21,22,26,.22);
  --signal:var(--accent); --signal-2:#7A6CF0; --btn-text:#fff;
  --ok:#17834C; --warn:#7E5104; --err:#C2334F;
  --bar-dim:#D9DCE2; --dot-dim:#B9BEC7; --canvas-grid:rgba(21,22,26,.06);
  --shadow-card:0 1px 2px rgba(21,22,26,.04),0 8px 24px -16px rgba(21,22,26,.18);
  --shadow-lift:0 2px 4px rgba(21,22,26,.05),0 18px 40px -18px rgba(21,22,26,.28);
  --wall:var(--paper);
}
html[data-theme="dark"]{
  --paper:#101114; --surface:#17181C; --mist:#1D1F24; --mist-2:#24262C;
  --ink:#F3F4F6; --graphite:#C3C7CF; --slate:#9A9FA9; --hairline:rgba(255,255,255,.09); --edge:rgba(255,255,255,.18);
  --accent:#9C91FF; --accent-soft:rgba(156,145,255,.12);
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --iron:#6E737D;
  --line:var(--hairline); --line-2:rgba(255,255,255,.06); --line-3:var(--edge);
  --panel:var(--surface); --panel-raised:var(--mist); --glass:rgba(30,32,37,.72); --glass-strong:rgba(34,36,42,.86);
  --glass-border:rgba(255,255,255,.12); --glass-hi:rgba(255,255,255,.14);
  --glass-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 34px -14px rgba(0,0,0,.7);
  --signal:var(--accent); --signal-2:#C3BBFF; --btn-text:#101114;
  --ok:#4CC789; --warn:#E3B04B; --err:#FF7A90;
  --bar-dim:#2C2F36; --dot-dim:#4A4E57; --canvas-grid:rgba(255,255,255,.06);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 10px 28px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(255,255,255,.05) inset,0 22px 44px -18px rgba(0,0,0,.85);
  --wall:var(--paper);
}
:root{
  --max:1240px; --gap:clamp(16px,4vw,32px);
  --font-display:"Outfit",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:72px; --s-8:clamp(72px,9vw,128px);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.16s; --t:.24s;
}

/* ---------- 2. BASE ---------- */
html{background:var(--paper)}
body{background:var(--paper)!important;color:var(--graphite);font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.aurora,.bg-grid,body::after,body::before,.hero::before,.hero::after{display:none!important}
[hidden],html[data-theme] .btn[hidden]{display:none!important}                       /* no perpetual background motion */
.loader{display:none!important}                                 /* no intrusive loading screen */
::selection{background:var(--accent-soft);color:var(--ink)}
a{color:inherit}
main p a:not(.btn),.detail a:not(.btn),.acc-body a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);text-transform:none;text-wrap:balance}
h1,.hero h1{font-size:clamp(44px,7.4vw,108px);font-weight:600;line-height:.98;letter-spacing:-.045em;background:none!important;-webkit-text-fill-color:currentColor;color:var(--ink)}
h1 span,.hero h1 span{background:none!important;-webkit-text-fill-color:currentColor;color:inherit}
h2{font-size:clamp(32px,4.4vw,60px);font-weight:600;line-height:1.02;letter-spacing:-.035em}
h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.section-head h2 .dot,h2 .dot,h1 .dot{color:var(--accent);-webkit-text-fill-color:var(--accent)}
p{color:var(--graphite)}
.lead,.hero .lead{font-family:var(--font-body);font-size:clamp(18px,1.55vw,21px);line-height:1.55;font-weight:500;color:var(--graphite);border:0;padding:0;max-width:38em}
.lead::first-letter{color:inherit}
.muted{color:var(--slate)!important}
.eyebrow{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--slate);gap:10px;margin-bottom:var(--s-3)}
.eyebrow::before{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:none}
.mono{letter-spacing:.06em}
.label{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--slate)}
.big{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;color:var(--ink)}

/* ---------- 4. LAYOUT ---------- */
.container{width:min(100% - 2*var(--gap),var(--max))}
main>section:not(.hero){padding-block:clamp(64px,8vw,120px)}
main>section+section{border-top:1px solid var(--hairline)}
.section-head{border-bottom:0;padding-bottom:0;margin-bottom:clamp(28px,4vw,52px);align-items:flex-end}
.section-head::after{content:none}
.section-num{display:none}                                       /* decorative "SEC 01" counters removed */
.section-head h2{max-width:18em;margin:0}

/* ---------- 5. BUTTON SYSTEM (Liquid Glass) ---------- */
html[data-theme] .btn{
  --b-bg:linear-gradient(180deg,#2B2D33 0%,#17181C 100%);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:var(--r-pill);border:1px solid #0B0C0E;
  background:var(--b-bg);color:#fff;font-family:var(--font-display);font-weight:600;font-size:15.5px;letter-spacing:-.005em;text-transform:none;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(21,22,26,.22),0 8px 20px -8px rgba(21,22,26,.45);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),filter var(--t);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html[data-theme] .btn::before{ /* specular sheen on the top half */
  content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:var(--r-pill) var(--r-pill) 40% 40%/var(--r-pill) var(--r-pill) 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none;z-index:-1}
html[data-theme] .btn::after{content:none}
@media (hover:hover){html[data-theme] .btn:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.35),0 2px 4px rgba(21,22,26,.2),0 14px 28px -10px rgba(21,22,26,.5)}}
html[data-theme] .btn:active{transform:translateY(0) scale(.985);filter:brightness(.96);box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 1px 1px rgba(21,22,26,.2)}
html[data-theme] .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-theme] .btn[disabled],html[data-theme] .btn[aria-disabled="true"]{opacity:.42;pointer-events:none;transform:none;filter:saturate(.4)}
html[data-theme] .btn[aria-busy="true"]{color:transparent!important;pointer-events:none}
html[data-theme] .btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fodoSpin .7s linear infinite}
@keyframes fodoSpin{to{transform:rotate(360deg)}}
html[data-theme] .btn.sm{min-height:40px;padding:0 16px;font-size:14px}
html[data-theme="dark"] .btn{ /* on dark pages the primary becomes a porcelain capsule */
  --b-bg:linear-gradient(180deg,#FFFFFF 0%,#E6E8EC 100%);color:#121316;border-color:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.5),0 10px 24px -10px rgba(0,0,0,.8)}
html[data-theme="dark"] .btn::before{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0))}
html[data-theme="dark"] .btn[aria-busy="true"]::after{border-color:rgba(0,0,0,.2);border-top-color:#121316}

/* Secondary — Liquid Glass capsule. Edge, tint and shadow carry the boundary; blur is only a bonus. */
html[data-theme] .btn.ghost{
  --b-bg:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(240,241,244,.78) 100%);
  color:var(--ink);border:1px solid rgba(21,22,26,.14);
  background:var(--b-bg);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(21,22,26,.06),inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(21,22,26,.06),0 8px 22px -12px rgba(21,22,26,.3)}
html[data-theme] .btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
@media (hover:hover){html[data-theme] .btn.ghost:hover{filter:none;color:var(--ink);background:linear-gradient(180deg,#fff 0%,rgba(244,245,248,.9) 100%);border-color:rgba(21,22,26,.22);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(21,22,26,.06),0 14px 28px -14px rgba(21,22,26,.35)}}
html[data-theme] .btn.ghost:active{background:linear-gradient(180deg,#EEF0F3,#F7F8FA);box-shadow:inset 0 1px 3px rgba(21,22,26,.14)}
html[data-theme="dark"] .btn.ghost{--b-bg:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 100%);color:var(--ink);border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.3),0 10px 24px -12px rgba(0,0,0,.8)}
html[data-theme="dark"] .btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0))}
@media (hover:hover){html[data-theme="dark"] .btn.ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));color:var(--ink);border-color:rgba(255,255,255,.28)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="light"] .btn.ghost{background:#F4F5F7}
  html[data-theme="dark"] .btn.ghost{background:#24262C}
}
html[data-theme] .btn.ci .ic,html[data-theme] .btn:not(.ghost).ci .ic{color:currentColor}
.btn-row{gap:12px;align-items:center}

/* Subtle text / icon buttons */
html[data-theme] .theme-btn,html[data-theme] .burger{background:var(--glass);border-color:var(--glass-border);color:var(--ink)}
.theme-btn,.burger{width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--glass-border);background:var(--glass);color:var(--ink);box-shadow:inset 0 1px 0 var(--glass-hi);transition:background var(--t),border-color var(--t)}
@media (hover:hover){.theme-btn:hover,.burger:hover{background:var(--surface);border-color:var(--edge)}}

/* ---------- 6. HEADER & NAV ---------- */
.header{background:transparent}
.header::before{background:var(--glass)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important;border-color:var(--glass-border)!important}
@media(min-width:1024px){
  .header{top:14px;height:60px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  .header.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px rgba(21,22,26,.05),0 18px 40px -18px rgba(21,22,26,.3)}
  html[data-theme="dark"] .header.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -18px rgba(0,0,0,.9)}
}
.wordmark b{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.045em}
.wordmark b::after{background:var(--accent);box-shadow:none;width:7px;height:7px}
.wordmark small{font-family:var(--font-body);font-weight:600;letter-spacing:.08em;font-size:8.5px;color:var(--slate)}
.nav{gap:2px}
.nav a,.nav .sub-btn{font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0;color:var(--graphite);padding:9px 13px;border-radius:var(--r-pill)}
.nav a:hover,.nav a:focus-visible,.nav .sub-btn:hover,.nav .sub-btn:focus-visible{background:var(--mist);color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink);background:var(--mist);box-shadow:inset 0 0 0 1px var(--hairline)}
.sub-menu{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r)!important;box-shadow:var(--shadow-lift)!important;padding:6px!important}
.sub-menu a{border-radius:var(--r-sm)!important}
html[data-theme] .btn.header-cta{display:none;min-height:42px;padding:0 18px;font-size:14px}
@media(min-width:1024px){html[data-theme] .btn.header-cta{display:inline-flex}}
@media(max-width:1023px){.wordmark small{white-space:nowrap}}
@media(max-width:380px){.wordmark small{display:none}}
.drawer{background:var(--paper)}
.drawer a{color:var(--ink)}
.drawer .dlabel{font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--slate);font-weight:600}
.drawer .dlist a{border-radius:var(--r-sm);min-height:48px;display:flex;align-items:center}
.mobile-bar{background:color-mix(in srgb,var(--paper) 88%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-top:1px solid var(--hairline)!important}

/* ---------- 7. SURFACES (solid content cards — glass is reserved for controls) ---------- */
.panel,.detail,.acc,.notice,.stage,.kpi .panel{background:var(--surface)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--hairline)!important;border-radius:var(--r);box-shadow:var(--shadow-card);color:var(--graphite)}
.panel.hud{border-color:var(--hairline)!important}
.panel h3,.detail h3{color:var(--ink)}
a.panel{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
@media (hover:hover){a.panel:hover,button.panel.explain:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--edge)!important}}
.panel-line{display:none!important}
.detail{border-radius:var(--r-lg)}
.detail h3{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.detail h3::before{background:var(--accent);width:6px;height:6px}
.tag,.chip{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--mist);color:var(--graphite);padding:4px 10px}
.tag.hot,.tag.warn,.tag.ok{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.tag.ok{background:rgba(23,131,76,.1);color:var(--ok)}
.chip i{background:var(--accent);box-shadow:none}
.more-hint{font-family:var(--font-body)!important;letter-spacing:0!important;text-transform:none!important;font-size:13px!important;font-weight:600;color:var(--accent)!important}
.notice{border-left:3px solid var(--warn)!important;color:var(--graphite)}
.marquee a{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:10px 16px}
.marquee a:hover,.marquee a:focus-visible{border-color:var(--edge);background:var(--mist);color:var(--ink)}
.stars{color:#D99A1E}

/* filters / segmented controls */
.filters button{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--graphite);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:9px 16px;min-height:42px;transition:background var(--t),border-color var(--t),color var(--t)}
.filters button:hover{border-color:var(--edge);color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* accordions */
.acc{border-radius:var(--r-sm);box-shadow:none}
.acc button{color:var(--ink);font-weight:600}
.acc button::after{color:var(--slate);font-family:var(--font-body);font-weight:500;font-size:20px;transition:transform var(--t)}
.acc button[aria-expanded=true]::after{transform:rotate(45deg)}
.acc .acc-body{color:var(--graphite)}

/* ---------- 8. FORMS ---------- */
.field label,.field legend{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--ink)}
.search,.field input,.field select,.field textarea,.bot-form input,select.search{background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:var(--r-sm)!important;color:var(--ink)!important;box-shadow:inset 0 1px 2px rgba(21,22,26,.04)!important;min-height:50px;transition:border-color var(--t),box-shadow var(--t)}
.search:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:#AEB3BC!important}
.search:focus,.field input:focus,.field select:focus,.field textarea:focus,.bot-form input:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true],.field input:user-invalid,.field textarea:user-invalid{border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(194,51,79,.1)!important}
::placeholder{color:#8B909A;opacity:1}
html[data-theme="dark"] ::placeholder{color:#7E838D}

/* ---------- 9. FOOTER ---------- */
.footer{background:var(--surface)!important;border-top:1px solid var(--hairline)}
.footer-mark{background:none!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important;font-weight:700;letter-spacing:-.06em}
.footer-sub{font-family:var(--font-body);letter-spacing:.08em;font-weight:600;color:var(--slate)}
.footer h4{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;color:var(--ink)}
.footer h4::before{display:none}
.footer a{color:var(--graphite);text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 10. HOME HERO — the lens ----------
   One idea: the headline's last word is fading out; a glass lens brings it back into focus.
   That is literally what FODO does for a brand. The crisp copy under the lens is aria-hidden. */
.hero.hero-lens{padding:clamp(108px,11vw,150px) 0 clamp(56px,7vw,96px);border:0;overflow:hidden}
.hero-lens .eyebrow{margin-bottom:clamp(18px,2.4vw,28px)}
.lens-stage{position:relative;--lx:74%;--ly:76%;--lr:clamp(54px,6.6vw,100px);margin:0}
.hero-lens .lens-type{font-family:var(--font-display);font-size:clamp(50px,8.6vw,132px);font-weight:600;line-height:.95;letter-spacing:-.055em;margin:0;max-width:11ch;color:var(--ink)}
h1.lens-type .fade{color:transparent!important;-webkit-text-fill-color:transparent!important;background:linear-gradient(90deg,#8D929B 0%,#B6BAC2 55%,#D7DAE0 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:blur(.012em)}
html[data-theme="dark"] h1.lens-type .fade{background:linear-gradient(90deg,#8E939C 0%,#5F636B 60%,#3A3D43 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.lens-copy{position:absolute;inset:0;pointer-events:none;user-select:none;clip-path:circle(var(--lr) at var(--lx) var(--ly));-webkit-clip-path:circle(var(--lr) at var(--lx) var(--ly))}
.lens-copy .fade{color:var(--ink);background:none}
.lens-ring{position:absolute;left:var(--lx);top:var(--ly);width:calc(var(--lr)*2);height:calc(var(--lr)*2);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 40%),radial-gradient(100% 100% at 70% 85%,rgba(76,59,207,.07),rgba(76,59,207,0) 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 2px 6px rgba(255,255,255,.9),inset 0 -10px 24px rgba(21,22,26,.08),0 0 0 1px rgba(21,22,26,.10),0 24px 50px -20px rgba(21,22,26,.35),0 4px 10px -4px rgba(21,22,26,.12)}
.lens-ring::after{content:"";position:absolute;width:32%;height:16%;left:20%;top:12%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform:rotate(-24deg);filter:blur(1px)}
html[data-theme="dark"] .lens-ring{background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 45%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -10px 24px rgba(0,0,0,.35),0 24px 50px -20px rgba(0,0,0,.9)}
html[data-theme="dark"] .lens-ring::after{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.lens-stage.ready .lens-copy,.lens-stage.ready .lens-ring{transition:none}
.hero-lens .container{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:end}
.hero-lens .eyebrow{grid-column:1/-1}
.hero-foot{display:contents}
.hero-copy{grid-column:2;grid-row:2;align-self:end;padding-bottom:clamp(8px,1.4vw,20px)}
.hero-index{grid-column:1/-1;grid-row:3;margin-top:clamp(40px,5vw,72px)!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
.hero-copy .lead{margin:0 0 10px}
.hero-q{font-size:15px;font-weight:600;color:var(--slate);margin:0 0 26px}
.hero-q .rotator{color:var(--ink)}
.hero-index{list-style:none;margin:0;padding:0;counter-reset:hi}
.hero-index li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:18px 0 0;border-top:1px solid var(--edge);counter-increment:hi}
.hero-index li::before{content:counter(hi);grid-row:span 2;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--accent);padding-top:3px}
.hero-index b{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.hero-index span{color:var(--slate);font-size:15px}
@media (max-width:900px){.hero-lens .lens-stage{margin-bottom:28px}.hero-lens .container{grid-template-columns:1fr}.hero-copy{grid-column:1;grid-row:auto;padding-bottom:0}.hero-index{grid-column:1;grid-row:auto;grid-template-columns:1fr!important;margin-top:40px!important}.hero-index li{padding:16px 0;border-top:1px solid var(--hairline)}.hero-lens .lens-type{max-width:none}}
@media (max-width:600px){
  .hero.hero-lens{padding-top:104px}
  .lens-stage{--lr:clamp(46px,15vw,72px)}
  .hero-lens .lens-type{font-size:clamp(46px,14.2vw,72px);letter-spacing:-.05em}
  .hero-lens .btn-row{flex-direction:column;align-items:stretch}
  .hero-lens .btn-row .btn{width:100%}
}

/* ---------- 11. INNER-PAGE HEROES ---------- */
.hero:not(.hero-lens){padding:clamp(120px,14vw,176px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--hairline);background:transparent}
.hero:not(.hero-lens) h1{font-size:clamp(40px,6.4vw,88px);max-width:14ch}

/* ---------- 12. CHAT BOT SURFACE (tokens only; behaviour unchanged) ---------- */
.bot-panel{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-lg)!important;box-shadow:0 30px 80px -24px rgba(21,22,26,.35),0 2px 6px rgba(21,22,26,.06)!important}
html[data-theme="dark"] .bot-panel{box-shadow:0 30px 80px -20px rgba(0,0,0,.9)!important}
.bot-panel header{border-bottom:1px solid var(--hairline)}
.bot-panel header b{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.bot-form{background:var(--surface)!important;border-top:1px solid var(--hairline)!important}
.msg.bot{background:var(--mist)!important;color:var(--ink)!important;border:0!important;border-radius:16px 16px 16px 6px!important}
.msg.me{background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:16px 16px 6px 16px!important}
html[data-theme="light"] .msg.me,html[data-theme="light"] .msg.me a{color:#fff!important}
.bot-chips button{font-family:var(--font-body)!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600;color:var(--ink)!important;background:var(--surface)!important;border:1px solid var(--hairline)!important}
.bot-chips button:hover{border-color:var(--edge)!important;background:var(--mist)!important}
.bot-mic{background:var(--surface);border-color:var(--edge);color:var(--ink)}
.bot-mic.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bot-voice{background:var(--mist);border-color:var(--hairline)}
.bv-wave b{background:var(--accent)}
.cookie{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r)!important;box-shadow:var(--shadow-lift)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 13. MOTION — one orchestrated moment (hero) + responsive feedback only ---------- */
.reveal{opacity:1!important;transform:none!important}           /* no fade-up on every section */
@media (prefers-reduced-motion:no-preference){
  .hero-lens .eyebrow,.hero-lens .lens-type:not(.lens-copy),.hero-copy,.hero-index{animation:fodoRise .9s var(--ease) both}
  .hero-lens .lens-type:not(.lens-copy){animation-delay:.06s}
  .hero-copy{animation-delay:.2s}.hero-index{animation-delay:.3s}
}
@keyframes fodoRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- 14. MOBILE REFINEMENTS ---------- */
@media (max-width:767px){
  main>section:not(.hero){padding-block:64px}
  .panel{border-radius:var(--r-sm)}
  html[data-theme] .btn{min-height:48px}
  .filters{gap:6px}
  .filters button{min-height:40px;padding:8px 14px}
}
.nav a,.nav .sub-btn{white-space:nowrap}
.wordmark small{white-space:nowrap}
@media (min-width:1024px) and (max-width:1199px){.nav a,.nav .sub-btn{padding:8px 9px;font-size:13.5px}html[data-theme] .btn.header-cta{padding:0 14px;font-size:13.5px}.header .container{gap:10px}}

/* ---------- 15. CLEAN-UP OF LEGACY DECORATION ---------- */
main>section::before,main>section::after{content:none!important;display:none!important}
html[data-theme] main>section{background:transparent}
html[data-theme] main>section.band{background:var(--mist)}
.grid>.panel::after,.grid>.panel:not(.hud)::after{content:none!important}          /* no 01/02 counters on non-sequential cards */
.grid:not(.no-idx)>.panel:not(.hud){padding-bottom:clamp(20px,3vw,32px)!important}
html[data-theme] .tag.hot,html[data-theme] .tag.warn{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
html[data-theme] .tag.warn{background:rgba(154,100,8,.10);color:var(--warn)}
html[data-theme] .tag.ok{background:rgba(23,131,76,.10);border-color:transparent;color:var(--ok)}

/* ---------- 16. CONTROLLED DARK SURFACE — closing call to action ---------- */
html[data-theme] .cta-final>.container.panel{background:#15161A!important;border-color:#15161A!important;color:#C9CDD5;box-shadow:0 40px 80px -40px rgba(21,22,26,.6)!important;border-radius:var(--r-lg);position:relative;overflow:hidden}
html[data-theme] .cta-final>.container.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);pointer-events:none}
html[data-theme] .cta-final h2{color:#fff;font-size:clamp(34px,5vw,68px)}
html[data-theme] .cta-final h2 .dot{color:#A99FFF;-webkit-text-fill-color:#A99FFF}
html[data-theme] .cta-final .lead{color:#C9CDD5;max-width:none}
html[data-theme] .cta-final .btn:not(.ghost){--b-bg:linear-gradient(180deg,#FFFFFF 0%,#E4E6EA 100%);color:#121316;border-color:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 12px 28px -12px rgba(0,0,0,.9)}
html[data-theme] .cta-final .btn:not(.ghost)::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
html[data-theme] .cta-final .btn.ghost{--b-bg:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -12px rgba(0,0,0,.9)}
html[data-theme] .cta-final .btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
@media (hover:hover){html[data-theme] .cta-final .btn.ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));color:#fff;border-color:rgba(255,255,255,.34)}}
html[data-theme="dark"] .cta-final>.container.panel{background:#F3F4F6!important;border-color:#F3F4F6!important;color:#454A54}
html[data-theme="dark"] .cta-final h2{color:#15161A}
html[data-theme="dark"] .cta-final h2 .dot{color:#4C3BCF;-webkit-text-fill-color:#4C3BCF}
html[data-theme="dark"] .cta-final .lead{color:#454A54}
html[data-theme="dark"] .cta-final>.container.panel::before{background:radial-gradient(60% 90% at 50% 0%,rgba(76,59,207,.08),rgba(76,59,207,0) 70%)}
html[data-theme="dark"] .cta-final .btn:not(.ghost){--b-bg:linear-gradient(180deg,#2B2D33 0%,#17181C 100%);color:#fff;border-color:#0B0C0E}
html[data-theme="dark"] .cta-final .btn.ghost{--b-bg:linear-gradient(180deg,#fff,#EEF0F3);color:#15161A;border-color:rgba(21,22,26,.16)}
@media (hover:hover){html[data-theme="dark"] .cta-final .btn.ghost:hover{background:#fff;color:#15161A}}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.hero:not(.hero-lens) h1{max-width:17ch}
.section-head{justify-content:flex-start}
.btn-row{justify-content:flex-start}
.reviews-empty-state .btn-row,.cta-final .btn-row{justify-content:center}
@media (max-width:600px){
  .hero .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn{width:100%}
}
.drawer .dcontact{display:flex;gap:8px;justify-content:center;font-size:0;letter-spacing:0}
.drawer .dcontact a{font-size:14px;font-weight:600;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);text-decoration:none;font-family:var(--font-body);text-transform:none;letter-spacing:0}
html[data-theme] .section-head{align-items:flex-start;text-align:left;flex-direction:row}
html[data-theme] .section-head h2{text-align:left;margin-left:0}
html[data-theme] .nav a[aria-current=page]{color:var(--ink);background:var(--mist);box-shadow:inset 0 0 0 1px var(--hairline)}

/* =====================================================================================
   17. ART-DIRECTED HEROES FOR EVERY PAGE
   Same material as the home lens (glass objects), one idea per page, real labels only.
   ===================================================================================== */
.hero.hero-art{padding:clamp(112px,12vw,164px) 0 clamp(48px,6vw,88px);border-bottom:1px solid var(--hairline);overflow:hidden}
.hero-art .container{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:0;align-items:center}
.hero-art:not(.has-art) .container{grid-template-columns:minmax(0,1fr)}
.hero-art .ha-text{min-width:0}
.hero-art h1{font-size:clamp(42px,6.2vw,96px);max-width:12ch;margin-bottom:clamp(18px,2vw,26px)}
.hero-art .lead{max-width:34em;margin-bottom:28px}
.hero-art .hero-index{grid-column:1/-1;margin-top:clamp(40px,5vw,72px)!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
.hero-art .hero-index li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:18px 0 0;border-top:1px solid var(--edge)}
.hero-index.plain{counter-reset:none}
.hero-index.plain li{grid-template-columns:1fr!important;counter-increment:none}
.hero-index.plain li::before{content:none!important}
.hero-art .hero-index span{color:var(--slate);font-size:15px}

/* the art box */
.ha-visual{position:relative;width:100%;max-width:470px;justify-self:end}
.ha-box{position:relative;width:100%;aspect-ratio:1/1}
.ha-box .ring{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--hairline);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
html[data-theme="dark"] .ha-box .ring{box-shadow:none}

/* glass primitive */
.g{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6%;border-radius:var(--gr,22px);
  background:linear-gradient(165deg,rgba(255,255,255,.96) 0%,rgba(248,249,251,.82) 55%,rgba(240,241,245,.74) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.65),inset 0 -8px 18px rgba(21,22,26,.035),0 0 0 1px rgba(21,22,26,.09),0 2px 4px rgba(21,22,26,.04),0 22px 44px -22px rgba(21,22,26,.32);
  color:var(--ink);overflow:hidden}
.g::before{content:"";position:absolute;left:8%;right:8%;top:0;height:46%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.g.g-ink{background:linear-gradient(180deg,#2B2D33 0%,#15161A 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 1px #0B0C0E,0 26px 50px -22px rgba(21,22,26,.6)}
.g.g-ink::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
html[data-theme="dark"] .g{background:linear-gradient(165deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.06) 100%);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.1),0 24px 48px -22px rgba(0,0,0,.9)}
html[data-theme="dark"] .g::before{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0))}
html[data-theme="dark"] .g.g-ink{background:linear-gradient(180deg,#FFFFFF,#E4E6EA);color:#15161A;box-shadow:inset 0 1px 0 #fff,0 26px 50px -22px rgba(0,0,0,.95)}
html[data-theme="dark"] .g.g-ink::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.g{background:#F7F8FA}html[data-theme="dark"] .g{background:#23252B}}
.gt{position:relative;font-family:var(--font-body);font-weight:600;font-size:clamp(11px,1.05vw,14px);line-height:1.25;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt.gt-big{font-family:var(--font-display);font-size:clamp(15px,1.6vw,21px);white-space:normal;text-align:center}
.gt.gt-sub{font-size:clamp(10px,.9vw,12px);color:var(--slate);text-align:center}
.gt.gt-h{font-family:var(--font-display);font-size:clamp(14px,1.45vw,19px);white-space:normal;line-height:1.2}
.gt.gt-s,.gt.gt-lab{font-size:clamp(10px,.9vw,12px);color:var(--slate);font-weight:600}
.g.g-ink .gt.gt-s,.g.g-ink .gt.gt-sub{color:rgba(255,255,255,.65)}
html[data-theme="dark"] .g.g-ink .gt.gt-s{color:#5B606B}
.g.g-pill{flex-direction:row;align-items:center;justify-content:center;padding:0 5%}
.g.g-pill .gt{text-align:center}
.g.g-disc{align-items:center;justify-content:center;padding:0}
.pi{display:grid;place-items:center;width:42%;height:42%;color:inherit}
.pi svg{width:100%;height:100%}

/* per-visual details */
.g.g-col{justify-content:flex-end;align-items:center;padding:0 0 10%}
.gt.gt-vert{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(11px,1.1vw,14px)}
.ha-box .base{position:absolute;left:2%;right:2%;top:89%;height:1px;background:var(--edge)}
.g.g-card{justify-content:flex-start;padding:5% 6%;gap:6px}
.g.g-card.g-tilt0{transform:rotate(-6deg)}.g.g-card.g-tilt1{transform:rotate(-1.5deg)}.g.g-card.g-tilt2{transform:rotate(3.5deg)}
.tag-g{position:relative;align-self:flex-start;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:999px}
.g.g-big-quote{justify-content:center;padding:7%}
.qi{display:block;width:22%;color:var(--accent);margin-bottom:6%}
.gt.gt-q{font-family:var(--font-display);font-size:clamp(17px,2vw,26px);white-space:normal;line-height:1.15;letter-spacing:-.02em}
.g.g-dial svg{position:absolute;inset:6%;width:88%;height:88%;transform:rotate(-90deg)}
.g.g-dial .trk{fill:none;stroke:var(--mist-2);stroke-width:6}
.g.g-dial .arc{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:96}
.g.g-track{flex-direction:row;align-items:center;justify-content:flex-start;padding:0 6%}
.g.g-track::after{content:"";position:absolute;left:34%;right:6%;top:50%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--mist-2) var(--p,50%));transform:translateY(-50%)}
.g.g-track .gt.gt-lab{width:30%}
.knob{position:absolute;z-index:1;top:50%;left:calc(34% + (60% * var(--p) / 100%));width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 1px rgba(21,22,26,.14),0 4px 10px rgba(21,22,26,.2)}
.g.g-track:has(.knob[style*="38%"])::after{--p:38%}.g.g-track:has(.knob[style*="62%"])::after{--p:62%}.g.g-track:has(.knob[style*="24%"])::after{--p:24%}
.g.g-track .knob{left:calc(34% + 0.6 * var(--p))}
.g.g-play .pi{width:36%;height:36%;margin-left:6%}
.g.g-row{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.tick{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--edge);color:#fff}
.g.g-row.g-done .tick{background:var(--accent);border-color:var(--accent)}
.tick svg{width:16px;height:16px}
.g.g-row.g-done .gt{color:var(--slate);text-decoration:line-through;text-decoration-color:var(--edge)}
.g.g-sheet{justify-content:flex-start;padding:9% 9%;gap:10px}
.ln{position:relative;display:block;height:8px;border-radius:6px;background:var(--mist-2);width:100%}
.ln.short{width:62%}
.g.g-ink .ln{background:rgba(255,255,255,.18)}
.g.g-lensy{color:var(--ink)}
.g.g-bubble{padding:0 7%}
.g.g-bubble .gt{white-space:normal;font-size:clamp(13px,1.35vw,17px);line-height:1.3}
.g.g-bubble.g-l{border-bottom-left-radius:8px}.g.g-bubble.g-r{border-bottom-right-radius:8px}
.g.g-shield{align-items:center;border-radius:28px 28px 50% 50%/28px 28px 38% 38%}
.g.g-shield .pi{width:34%;height:34%;color:var(--accent)}
.g.g-pill.g-sm .gt{font-size:clamp(10px,.9vw,12px);color:var(--slate)}
.g.g-pill.g-search{justify-content:flex-start;gap:10px}
.si{width:20px;height:20px;flex:none;color:var(--slate)}.si svg{width:100%;height:100%}
.ha-box .wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ha-box .wire path{fill:none;stroke:var(--edge);stroke-width:.6;stroke-dasharray:2 2}
.g.g-window{justify-content:flex-start;padding:0 0 6%;gap:12px}
.g.g-window .hx-bar{position:relative;display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--hairline);margin-bottom:6px}
.g.g-window .hx-bar i{width:9px;height:9px;border-radius:50%;background:var(--edge)}
.g.g-window .gt.gt-h,.g.g-window .ln{margin:0 7%;width:auto}
.g.g-window .ln.short{margin-right:40%}
.g.g-phone{justify-content:flex-end;padding:10% 10%;gap:10px}
.g.g-phone .ph{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,var(--mist-2),var(--mist));order:-1;margin-bottom:auto}

/* motion: one staggered entrance per page */
@media (prefers-reduced-motion:no-preference){
  .hero-art .ha-text{animation:fodoRise .8s var(--ease) both}
  .ha-box>.g{animation:fodoPop .9s var(--ease) both;animation-delay:calc(.12s + var(--d,0) * .07s)}
  .ha-box>.g.g-tilt0,.ha-box>.g.g-tilt1,.ha-box>.g.g-tilt2{animation-name:fodoRise}
  .hero-art .hero-index{animation:fodoRise .9s var(--ease) .3s both}
}
@keyframes fodoPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1}}

/* contact page: art inside the info panel */
.hero-contact .panel .ha-visual{max-width:300px;margin:0 auto 8px;justify-self:center}

/* 404 uses the lens */
.hero-404 .hero-copy{grid-column:1/-1;grid-row:3;margin-top:28px}
.hero-404 .lens-type{max-width:13ch}

@media (max-width:900px){
  .hero-art .container{grid-template-columns:1fr}
  .hero-art .ha-visual{justify-self:start;max-width:min(400px,92%);margin-top:40px}
  .hero-art .hero-index{grid-template-columns:1fr!important;margin-top:36px!important}
  .hero-art .hero-index li{padding:14px 0;border-top:1px solid var(--hairline)}
  .hero-art h1{max-width:none}
}
@media (max-width:600px){
  .hero.hero-art{padding-top:104px}
  .hero-art .ha-visual{max-width:100%;margin-top:32px}
  .gt{font-size:11px}.gt.gt-h{font-size:14px}.gt.gt-q{font-size:18px}.gt.gt-big{font-size:16px}
}
.hero-art.long h1{font-size:clamp(36px,4.6vw,70px);max-width:16ch}
.g.g-card .gt.gt-s,.g.g-card .gt.gt-h{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-lens .lens-type{text-wrap:wrap}

/* =====================================================================================
   18. EDITORIAL NOIR — the FODO identity (overrides everything above)
   Dark cinematic canvas · Instrument Serif headlines with italic voice · Inter Tight for reading
   · one violet spotlight. Light theme = the same system printed on cool paper.
   ===================================================================================== */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:400;font-display:swap;src:url(../assets/fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:500;font-display:swap;src:url(../assets/fonts/inter-tight-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:600;font-display:swap;src:url(../assets/fonts/inter-tight-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:700 900;font-display:swap;src:url(../assets/fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
/* legacy family names used by older stylesheets resolve to the new faces */
@font-face{font-family:"Outfit";font-weight:400 600;font-display:swap;src:url(../assets/fonts/inter-tight-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:700 900;font-display:swap;src:url(../assets/fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(../assets/fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(../assets/fonts/inter-tight-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:600 900;font-display:swap;src:url(../assets/fonts/inter-tight-latin-600-normal.woff2) format("woff2")}

html[data-theme="dark"]{
  --paper:#0D1015; --surface:#131720; --mist:#191E28; --mist-2:#232938;
  --ink:#EEF0F3; --graphite:#C3C9D3; --slate:#8E96A4; --hairline:rgba(238,240,243,.09); --edge:rgba(238,240,243,.2);
  --accent:#A193FF; --accent-soft:rgba(161,147,255,.13); --spot:rgba(132,112,255,.20);
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --line:var(--hairline); --line-3:var(--edge);
  --panel:var(--surface); --panel-raised:var(--mist); --signal:var(--accent); --signal-2:#C9C0FF;
  --glass:rgba(16,20,27,.72); --glass-border:rgba(238,240,243,.1); --glass-hi:rgba(255,255,255,.08);
  --glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -24px rgba(0,0,0,.9);
  --shadow-card:none; --shadow-lift:0 30px 60px -30px rgba(0,0,0,.9);
}
html[data-theme="light"]{
  --paper:#F5F6F8; --surface:#FFFFFF; --mist:#ECEEF2; --mist-2:#E1E4EA;
  --ink:#0D1015; --graphite:#3A404C; --slate:#5C6371; --hairline:rgba(13,16,21,.10); --edge:rgba(13,16,21,.22);
  --accent:#5440D8; --accent-soft:rgba(84,64,216,.09); --spot:rgba(84,64,216,.10);
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --line:var(--hairline); --line-3:var(--edge);
  --panel:var(--surface); --panel-raised:var(--surface); --signal:var(--accent);
  --shadow-card:none; --shadow-lift:0 24px 50px -28px rgba(13,16,21,.3);
}
:root{--font-serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;--font-display:"Instrument Serif",ui-serif,Georgia,serif;--font-body:"Inter Tight",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--max:1320px}
html,body{background:var(--paper)!important}
body{font-family:var(--font-body);font-weight:400;font-size:17px;letter-spacing:-.005em;color:var(--graphite)}

/* type: serif voice for headlines, italic for the second thought */
h1,h2,.hero h1,.hero-art h1,.big,.footer-mark,.cta-final h2{font-family:var(--font-serif)!important;font-weight:400!important;letter-spacing:-.025em;color:var(--ink)}
h1,.hero h1{font-size:clamp(52px,8vw,128px);line-height:.92}
h2{font-size:clamp(40px,5.4vw,84px);line-height:.96}
h1 em,h2 em{font-style:italic;color:var(--graphite)}
.section-head h2 .dot,h2 .dot,h1 .dot{color:var(--accent);-webkit-text-fill-color:var(--accent);font-style:normal}
h3,.panel h3{font-family:var(--font-serif);font-weight:400;font-size:clamp(24px,2.1vw,32px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.detail h3{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--accent)}
.lead,.hero .lead{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--graphite)}
.eyebrow{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--slate)}
.eyebrow::before{width:40px!important;height:1px!important;border-radius:0!important;background:var(--accent)!important}
.big{font-size:clamp(44px,5vw,72px);line-height:1}
.label,.tag,.chip,.more-hint,.marquee a,.filters button,.bot-chips button,.field label{font-family:var(--font-body)!important}
.mono{font-family:var(--font-body)!important;letter-spacing:.04em}

/* header: quiet, hairline, no pill on dark */
.wordmark b{font-family:var(--font-serif);font-weight:400;font-size:32px;letter-spacing:-.02em}
.wordmark b::after{width:6px;height:6px;margin-left:1px}
.wordmark small{font-family:var(--font-body);font-weight:500;letter-spacing:.12em}
.nav a,.nav .sub-btn{font-family:var(--font-body);font-weight:500;font-size:14.5px;color:var(--slate)}
.nav a:hover,.nav .sub-btn:hover,.nav a:focus-visible{color:var(--ink);background:transparent}
html[data-theme] .nav a[aria-current=page]{color:var(--ink);background:transparent;box-shadow:inset 0 -1px 0 var(--accent);border-radius:0}

/* buttons on noir: porcelain primary, hairline-glass secondary (dark theme rules above already apply) */
html[data-theme] .btn{font-family:var(--font-body);font-weight:600;letter-spacing:-.005em}

/* surfaces */
.panel,.detail,.acc,.notice,.stage,.kpi .panel{box-shadow:none!important}
@media (hover:hover){a.panel:hover,button.panel.explain:hover{transform:translateY(-2px);border-color:var(--edge)!important;box-shadow:var(--shadow-lift)!important}}
main>section+section{border-top:1px solid var(--hairline)}
.tag,.chip{background:transparent;border:1px solid var(--edge);color:var(--graphite)}
html[data-theme] .tag.hot,html[data-theme] .tag.warn,html[data-theme] .tag.ok{background:transparent;border:1px solid currentColor}
html[data-theme="dark"] .tag.warn{color:#E7BE6A}

/* ---------- home hero: the spotlight ---------- */
.hero.hero-lens{padding:clamp(130px,13vw,190px) 0 clamp(64px,7vw,104px);position:relative;isolation:isolate}
.hero-lens::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48vw 48vw at var(--sx,62%) var(--sy,45%),var(--spot),transparent 70%)}
.hero-lens .container{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}
.hero-lens .lens-stage{grid-column:1/-1;--lr:clamp(110px,15vw,240px)}
.hero-lens .lens-type{font-family:var(--font-serif)!important;font-weight:400!important;font-size:clamp(58px,11vw,172px)!important;line-height:.9!important;letter-spacing:-.03em!important;max-width:none!important}
.hero-lens .lens-type .fade{font-style:italic;display:inline-block}
h1.lens-type .fade{filter:none!important}
html[data-theme="dark"] h1.lens-type .fade{background:linear-gradient(90deg,rgba(238,240,243,.85) 0%,rgba(238,240,243,.32) 40%,rgba(238,240,243,.06) 80%)!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-theme="light"] h1.lens-type .fade{background:linear-gradient(90deg,rgba(13,16,21,.8) 0%,rgba(13,16,21,.3) 40%,rgba(13,16,21,.07) 80%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.lens-copy{clip-path:none!important;-webkit-clip-path:none!important;
  -webkit-mask-image:radial-gradient(var(--lr) var(--lr) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
          mask-image:radial-gradient(var(--lr) var(--lr) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.6) 45%,transparent 100%)}
.lens-copy .fade{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.lens-ring{display:none!important}
.hero-copy{grid-column:1/-1!important;grid-row:3!important;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:end;margin-top:clamp(36px,4.5vw,64px);padding:0!important}
.hero-copy .lead{grid-column:1;margin:0}
.hero-copy .hero-q{grid-column:1;margin:10px 0 0}
.hero-copy .btn-row{grid-column:2;grid-row:1 / span 2;justify-content:flex-end;align-self:end}
.hero-lens .hero-index{grid-row:4!important}
.hero-index b{font-family:var(--font-serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.hero-index li::before{font-family:var(--font-body)!important;font-size:12px!important;font-weight:600}
.hero-404 .hero-copy{grid-row:3!important}
@media (max-width:900px){
  .hero-copy{grid-template-columns:1fr}
  .hero-copy .btn-row{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:26px}
  .hero-lens .lens-type{font-size:clamp(52px,15vw,96px)!important}
}

/* ---------- inner heroes: editorial headline + side index ---------- */
.hero.hero-art{position:relative;isolation:isolate;padding:clamp(130px,12vw,176px) 0 clamp(56px,6vw,96px)}
.hero.hero-art::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(42vw 34vw at 22% 30%,var(--spot),transparent 70%)}
.hero-art .container{grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr)!important;align-items:end!important}
.hero-art h1{font-size:clamp(50px,7.2vw,112px)!important;max-width:13ch!important;line-height:.93}
.hero-art.long h1{font-size:clamp(42px,5.4vw,84px)!important;max-width:15ch!important}
.ha-aside{border-left:1px solid var(--hairline);padding-left:clamp(20px,2.4vw,36px);margin-bottom:8px;min-width:0}
.ha-label{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--slate);margin:0 0 12px}
.ha-list{list-style:none;margin:0;padding:0;counter-reset:hl}
.ha-list li{font-family:var(--font-serif);font-size:clamp(21px,1.8vw,27px);line-height:1.18;letter-spacing:-.01em;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--hairline);display:flex;gap:14px;align-items:baseline}
.ha-list li:first-child{border-top:1px solid var(--hairline)}
.ha-list.seq li{counter-increment:hl}
.ha-list.seq li::before{content:counter(hl);font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--accent);min-width:14px}
.ha-list a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.ha-list a:hover,.ha-list a:focus-visible{background-size:100% 1px}
.ha-note{font-size:14px;color:var(--slate);margin:14px 0 0}
.hero-art .hero-index b{font-family:var(--font-serif);font-weight:400;font-size:24px}
@media (prefers-reduced-motion:no-preference){.ha-aside{animation:fodoRise .9s var(--ease) .18s both}}
@media (max-width:900px){
  .hero-art .container{grid-template-columns:1fr!important}
  .ha-aside{border-left:0;padding-left:0;margin-top:44px}
  .hero-art h1{max-width:none!important}
}

/* contact hero keeps its form intro + details panel */
.hero-contact h1{font-family:var(--font-serif)!important;font-weight:400!important}

/* footer: the wordmark as a signature */
.footer-mark{font-size:clamp(96px,17vw,260px)!important;letter-spacing:-.04em!important;line-height:.82!important}
.footer-sub{letter-spacing:.14em}
.footer h4{font-family:var(--font-body)}

/* closing band: the one light moment on a dark page (and the inverse on paper) */
html[data-theme="dark"] .cta-final>.container.panel{background:#EEF0F3!important;border-color:#EEF0F3!important}
html[data-theme="dark"] .cta-final h2{color:#0D1015!important}
html[data-theme="dark"] .cta-final .lead{color:#3A404C!important}
html[data-theme="light"] .cta-final>.container.panel{background:#0D1015!important;border-color:#0D1015!important}

/* chat bot on noir */
html[data-theme="dark"] .msg.me{background:#EEF0F3!important;color:#0D1015!important}
html[data-theme="dark"] .msg.me a{color:#0D1015!important}
.stage-card .stage-name,.hero-index b,.score-head p[style*="font-weight"]{font-family:var(--font-serif)!important;font-weight:400!important;font-size:clamp(22px,1.9vw,28px)!important;letter-spacing:-.01em}
.score-gets b,.score-ring span{font-family:var(--font-serif)!important;font-weight:400!important}
.ncr-block h3{font-family:var(--font-serif);font-weight:400}
.footer{background:var(--paper)!important}

/* =====================================================================================
   19. STUDIO TEMPLATE SYSTEM (v4) — marketplace-grade agency layout
   Light stone canvas · white bento cards · tight bold grotesk with a serif-italic voice ·
   black pill CTAs with an arrow chip · section pills · dark feature tiles · one violet accent.
   Dark theme = the same system on charcoal.
   ===================================================================================== */
html[data-theme="light"]{
  --paper:#F4F4F2; --surface:#FFFFFF; --mist:#EDEDEA; --mist-2:#E2E2DE;
  --ink:#0B0B0C; --graphite:#3B3C40; --slate:#67686E; --hairline:rgba(11,11,12,.07); --edge:rgba(11,11,12,.14);
  --accent:#5B3DF5; --accent-soft:rgba(91,61,245,.10); --spot:rgba(91,61,245,.10);
  --tile:#0B0B0C; --tile-ink:#F4F4F2; --tile-mute:#A3A4AA;
  --shadow-card:0 1px 2px rgba(11,11,12,.04),0 0 0 1px rgba(11,11,12,.04);
  --shadow-lift:0 1px 2px rgba(11,11,12,.05),0 18px 40px -22px rgba(11,11,12,.25);
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --line:var(--hairline); --line-3:var(--edge); --panel:var(--surface); --signal:var(--accent);
}
html[data-theme="dark"]{
  --paper:#0B0B0C; --surface:#151517; --mist:#1C1C1F; --mist-2:#26262A;
  --ink:#F4F4F2; --graphite:#C9C9CC; --slate:#97979E; --hairline:rgba(244,244,242,.08); --edge:rgba(244,244,242,.16);
  --accent:#8F7BFF; --accent-soft:rgba(143,123,255,.14); --spot:rgba(143,123,255,.14);
  --tile:#F4F4F2; --tile-ink:#0B0B0C; --tile-mute:#5D5E63;
  --shadow-card:0 0 0 1px rgba(244,244,242,.06); --shadow-lift:0 0 0 1px rgba(244,244,242,.1),0 24px 50px -24px rgba(0,0,0,.9);
  --bg:var(--paper); --text:var(--ink); --text-2:var(--graphite); --muted:var(--slate); --line:var(--hairline); --line-3:var(--edge); --panel:var(--surface); --signal:var(--accent);
}
:root{--font-display:"Inter Tight",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--max:1240px;--r:24px;--r-lg:32px}

/* type: tight bold grotesk; serif italic is the second voice (em / .fade / .dot words) */
h1,h2,.hero h1,.hero-art h1,.footer-mark,.cta-final h2{font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:-.05em!important;color:var(--ink)}
h1,.hero h1{font-size:clamp(46px,7vw,104px);line-height:.95}
h2{font-size:clamp(36px,4.8vw,68px);line-height:1;text-wrap:balance}
h1 em,h2 em,h1 .fade,.lens-type .fade{font-family:var(--font-serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.02em!important}
h3,.panel h3{font-family:var(--font-body)!important;font-weight:600!important;font-size:clamp(19px,1.6vw,23px)!important;letter-spacing:-.025em!important;line-height:1.2}
.big{font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:-.04em!important}
.stage-card .stage-name,.hero-index b,.score-gets b,.score-ring span,.ncr-block h3{font-family:var(--font-body)!important;font-weight:600!important;letter-spacing:-.025em}
.lead,.hero .lead{font-size:clamp(17px,1.4vw,20px);color:var(--slate);line-height:1.55}
body{color:var(--graphite)}

/* section pill label (replaces line-eyebrow) */
.eyebrow{display:inline-flex!important;align-items:center;gap:8px;font-size:13px!important;font-weight:600!important;color:var(--ink)!important;background:var(--surface);padding:7px 14px 7px 12px;border-radius:999px;box-shadow:var(--shadow-card)}
.eyebrow::before{width:7px!important;height:7px!important;border-radius:50%!important;background:var(--accent)!important}

/* buttons: black pill + arrow chip (primary), white pill (secondary) */
html[data-theme] .btn{min-height:50px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.01em}
html[data-theme="light"] .btn:not(.ghost){--b-bg:#0B0B0C;background:#0B0B0C;border-color:#0B0B0C;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(11,11,12,.2),0 10px 22px -12px rgba(11,11,12,.55)}
html[data-theme="dark"] .btn:not(.ghost){--b-bg:#F4F4F2;background:#F4F4F2;border-color:#F4F4F2;color:#0B0B0C}
html[data-theme] .btn:not(.ghost):not(.sm):not(.header-cta):not(.ci){padding-right:7px}
html[data-theme] .btn:not(.ghost):not(.sm):not(.header-cta):not(.ci):not([aria-busy="true"])::after{content:"";flex:none;width:36px;height:36px;margin-left:6px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .3s var(--ease)}
@media (hover:hover){html[data-theme] .btn:not(.ghost):hover::after{transform:rotate(45deg)}html[data-theme] .btn:hover{filter:none;transform:translateY(-1px)}}
html[data-theme] .btn.ghost{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--edge)!important;box-shadow:0 1px 2px rgba(11,11,12,.05)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme] .btn.ghost::before{display:none}
@media (hover:hover){html[data-theme] .btn.ghost:hover{border-color:var(--ink)!important}}
html[data-theme] .btn::before{opacity:.5}

/* header: floating white bar */
@media(min-width:1024px){.header{background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--hairline);border-radius:999px;box-shadow:0 1px 2px rgba(11,11,12,.04),0 10px 30px -18px rgba(11,11,12,.25)}}
.wordmark b{font-family:var(--font-body)!important;font-weight:700!important;font-size:26px!important;letter-spacing:-.06em!important}
.nav a,.nav .sub-btn{font-weight:500;font-size:14.5px;color:var(--graphite);border-radius:999px!important;padding:8px 14px}
html[data-theme] .nav a[aria-current=page]{background:var(--mist);box-shadow:none;color:var(--ink);border-radius:999px}
.nav a:hover,.nav .sub-btn:hover{background:var(--mist)!important}

/* surfaces: white bento cards */
.panel,.detail,.acc,.notice,.stage,.kpi .panel{background:var(--surface)!important;border:0!important;border-radius:var(--r)!important;box-shadow:var(--shadow-card)!important}
.acc{border-radius:16px!important}
@media (hover:hover){a.panel:hover,button.panel.explain:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)!important}}
main>section+section{border-top:0}
main>section:not(.hero){padding-block:clamp(64px,8vw,112px)}
.section-head{flex-direction:column!important;align-items:center!important;text-align:center!important;margin-bottom:clamp(32px,4vw,56px)}
.section-head h2{text-align:center!important;max-width:16ch;margin-inline:auto!important}
.tag,.chip{border:0!important;background:var(--mist)!important;color:var(--graphite)!important;border-radius:999px!important}
html[data-theme] .tag.hot,html[data-theme] .tag.warn,html[data-theme] .tag.ok{background:var(--accent-soft)!important;color:var(--accent)!important;border:0!important}

/* bento: first card is a dark feature tile spanning two columns */
@media (min-width:768px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .bento>.panel:first-child{grid-column:span 2;grid-row:span 2;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
}
.bento>.panel:first-child{background:var(--tile)!important;color:var(--tile-ink)!important}
.bento>.panel:first-child h3{color:var(--tile-ink)!important;font-size:clamp(28px,3vw,44px)!important;letter-spacing:-.045em!important}
.bento>.panel:first-child p,.bento>.panel:first-child .muted{color:var(--tile-mute)!important;font-size:16px!important}
.bento>.panel:first-child .more-hint{color:var(--tile-ink)!important}
.bento.why>.panel:first-child{background:var(--accent)!important;color:#fff!important}
.bento.why>.panel:first-child h3,.bento.why>.panel:first-child .more-hint{color:#fff!important}
.bento.why>.panel:first-child p{color:rgba(255,255,255,.8)!important}

/* home hero: centered studio composition, spotlight word kept */
.hero.hero-lens.hero-studio{padding:clamp(128px,12vw,176px) 0 clamp(56px,6vw,88px);text-align:center}
.hero-studio::before{background:radial-gradient(46vw 30vw at 50% 28%,var(--spot),transparent 70%)!important}
.hero-studio .container{display:flex!important;flex-direction:column;align-items:center}
.status-pill{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--surface);padding:8px 16px 8px 12px;border-radius:999px;box-shadow:var(--shadow-card);margin-bottom:clamp(24px,3vw,36px)}
.status-pill i{width:8px;height:8px;border-radius:50%;background:#1FA463;box-shadow:0 0 0 4px rgba(31,164,99,.15)}
.status-pill:hover{box-shadow:var(--shadow-lift)}
.hero-studio .lens-stage{width:100%;--lr:clamp(80px,10vw,170px)}
.hero-studio .lens-type{font-family:var(--font-body)!important;font-weight:600!important;font-size:clamp(50px,8.4vw,128px)!important;line-height:.94!important;letter-spacing:-.055em!important;text-align:center;max-width:12ch!important;margin:0 auto!important}
.hero-studio .lens-copy{left:0;right:0;margin:0 auto!important}
html[data-theme="light"] .hero-studio h1.lens-type .fade{background:linear-gradient(90deg,#0B0B0C 0%,rgba(11,11,12,.45) 45%,rgba(11,11,12,.10) 90%)!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-theme="dark"] .hero-studio h1.lens-type .fade{background:linear-gradient(90deg,#F4F4F2 0%,rgba(244,244,242,.4) 45%,rgba(244,244,242,.08) 90%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero-studio .hero-copy{display:flex!important;flex-direction:column;align-items:center;margin-top:clamp(22px,2.6vw,32px)!important}
.hero-studio .lead{max-width:34em;text-align:center;margin:0 auto 28px!important}
.hero-studio .btn-row{justify-content:center!important;margin:0}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:0;margin:22px 0 0;font-size:14px;font-weight:500;color:var(--slate)}
.trust-row li{display:inline-flex;align-items:center;gap:7px}
.trust-row li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%235B3DF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.hero-studio .hero-q{margin:14px 0 0;font-size:14px}
.hero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(36px,4vw,56px)}
.hero-pills a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--surface);padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s}
.hero-pills a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}

/* inner heroes: centered, aside becomes a pill row */
.hero.hero-art{text-align:center}
.hero-art .container{display:flex!important;flex-direction:column;align-items:center}
.hero-art .ha-text{display:flex;flex-direction:column;align-items:center}
.hero-art h1{max-width:16ch!important;font-size:clamp(44px,6.2vw,92px)!important;line-height:.98;margin-inline:auto}
.hero-art.long h1{font-size:clamp(38px,4.8vw,72px)!important;max-width:18ch!important}
.hero-art .lead{margin-inline:auto;max-width:36em}
.hero-art .btn-row{justify-content:center!important}
.ha-aside{border:0!important;padding:0!important;margin:clamp(30px,3.6vw,48px) 0 0!important;display:flex;flex-direction:column;align-items:center}
.ha-label{font-size:13px;margin-bottom:12px}
.ha-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.ha-list li,.ha-list li:first-child{font-family:var(--font-body)!important;font-size:14px!important;font-weight:600;letter-spacing:-.005em;line-height:1.2;color:var(--ink);background:var(--surface);border:0!important;border-radius:999px;padding:10px 16px!important;box-shadow:var(--shadow-card);gap:8px}
.ha-list a{background:none!important}
.ha-note{text-align:center}
.hero-art .hero-index{width:100%;text-align:left}
.hero-art .hero-index li{border-top:1px solid var(--edge)}
@media (max-width:900px){.ha-aside{margin-top:32px!important}}

/* closing band: violet */
html[data-theme] .cta-final>.container.panel{background:var(--accent)!important;border:0!important;border-radius:var(--r-lg)!important}
html[data-theme] .cta-final h2,html[data-theme] .cta-final h2 .dot{color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-theme] .cta-final .lead{color:rgba(255,255,255,.82)!important}
html[data-theme] .cta-final .btn:not(.ghost){--b-bg:#fff;background:#fff!important;color:#0B0B0C!important;border-color:#fff!important}
html[data-theme] .cta-final .btn:not(.ghost)::after{background-color:#0B0B0C!important}
html[data-theme] .cta-final .btn.ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.45)!important}

/* footer */
.footer{background:var(--surface)!important;border-radius:var(--r-lg) var(--r-lg) 0 0}
.footer-mark{font-weight:700!important;letter-spacing:-.07em!important}

/* chat on light */
html[data-theme="light"] .msg.me{background:#0B0B0C!important;color:#fff!important}
.score-head p,.score-head .gt{font-family:var(--font-body)!important}
.hero-404{text-align:center}
.hero-404 .container{display:flex!important;flex-direction:column;align-items:center}
.hero-404 .lens-stage{width:100%}
.hero-404 .lens-type{font-family:var(--font-body)!important;font-weight:600!important;font-size:clamp(46px,7.6vw,116px)!important;line-height:.95!important;letter-spacing:-.055em!important;text-align:center;max-width:12ch!important;margin:0 auto!important}
.hero-404 .lens-copy{left:0;right:0}
.hero-404 .hero-copy{display:flex!important;flex-direction:column;align-items:center}
.hero-404 .btn-row{justify-content:center!important}
html[data-theme] .cta-final>.container.panel{background:#5B3DF5!important}

/* ---------- 20. Scroll-driven 3D particle background ---------- */
.fodo-3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
html.has-3d body{background:transparent!important}
html.has-3d{background:var(--paper)!important}
@media print{.fodo-3d{display:none}}
/* keep hero copy crisp over the particle orb */
html.has-3d .hero-studio .lead,html.has-3d .hero-studio .trust-row,html.has-3d .hero-studio .hero-q{text-shadow:0 0 18px var(--paper),0 0 6px var(--paper)}
.hero-studio .hero-copy{width:100%}
@media (max-width:600px){.hero-studio .btn-row{width:100%;flex-direction:column;align-items:stretch}.hero-studio .btn-row .btn{width:100%}}

/* ---------- 21. Readability over the 3D background ---------- */
/* a soft wash between the particles and the content: clear at the edges, calm behind the text column */
.fodo-3d-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--paper) 52%,transparent) 22%,color-mix(in srgb,var(--paper) 60%,transparent) 50%,color-mix(in srgb,var(--paper) 52%,transparent) 78%,transparent 100%)}
@media (max-width:900px){.fodo-3d-scrim{background:color-mix(in srgb,var(--paper) 58%,transparent)}}
/* the hero keeps the orb visible: lighter wash there, stronger halo on the copy */
html.has-3d main>section.hero{background:transparent}
/* halo around free-standing text (text not sitting on a card) */
html.has-3d main h1,html.has-3d main h2,html.has-3d .section-head,html.has-3d main .lead,html.has-3d main>section>.container>p,
html.has-3d main>section>.container>div>p,html.has-3d .hero-q,html.has-3d .trust-row,html.has-3d .ha-label,html.has-3d .ha-note,html.has-3d .eyebrow{
  text-shadow:0 0 1px var(--paper),0 0 10px var(--paper),0 0 22px var(--paper)}
html.has-3d .panel h3,html.has-3d .panel p,html.has-3d .btn,html.has-3d .tag,html.has-3d .cta-final *{text-shadow:none}
html[data-theme] .cta-final .lead{color:#fff!important;opacity:1}
html[data-theme] .cta-final>.container.panel::before{content:none!important;display:none!important}
html.has-3d main .cta-final .lead,html.has-3d main .cta-final h2,html.has-3d .cta-final .section-head{text-shadow:none!important}

.fodo-3d-scrim{transition:opacity .2s linear}

/* ---------- 22. "disappear." — self-running dissolve + touch/pointer reveal ---------- */
.vanish-on .lens-copy,.vanish-on .lens-ring{display:none!important}
.vanish-on h1.lens-type .fade{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;white-space:nowrap}
.vanish-on .fade .ch{display:inline-block;transition:opacity .35s var(--ease),filter .35s var(--ease),transform .35s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .vanish-on .fade .ch{animation:fodoVanish 5.6s cubic-bezier(.45,0,.25,1) infinite;animation-delay:calc(var(--i) * .11s + .6s)}
}
@keyframes fodoVanish{
  0%,12%{opacity:1;filter:blur(0);transform:none}
  38%,56%{opacity:.1;filter:blur(.09em);transform:translateY(-.06em) scale(.97)}
  84%,100%{opacity:1;filter:blur(0);transform:none}
}
.vanish-on .fade .ch.lit,.vanish-on .fade.all-lit .ch{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
.vanish-on .fade .ch.lit{color:var(--accent);-webkit-text-fill-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.vanish-on .fade .ch:nth-last-child(-n+5){opacity:.35}}
.vanish-on [data-lens]{cursor:default}
.lens-stage.vanish-on{touch-action:pan-y}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================================
   23. GROWTH LAB — profile bar, toasts, juice, quiz speed-run, game progress, score plan, audit intro
   ===================================================================================== */
.lab-bar{margin-bottom:16px;padding:14px 18px!important}
.lab-bar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lab-lvl{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:700;font-size:17px}
.lab-who{flex:1 1 220px;min-width:0;display:grid;gap:3px}
.lab-who b{color:var(--ink);font-size:15px}.lab-who span{font-size:13px;color:var(--slate)}
.lab-xp{display:block;height:6px;border-radius:6px;background:var(--mist-2);overflow:hidden}.lab-xp b{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .8s var(--ease)}
.lab-stats{display:flex;gap:16px;font-size:13px;color:var(--slate)}.lab-stats b{color:var(--ink);font-size:15px}
.lab-badges-btn{font:600 13px var(--font-body);padding:8px 14px;min-height:38px;border-radius:999px;border:1px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer}
.lab-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}
.lab-badges[hidden]{display:none}
.lab-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--mist);color:var(--slate)}
.lab-badge i{font-style:normal;color:var(--slate)}.lab-badge.got{background:var(--accent-soft);color:var(--ink)}.lab-badge.got i{color:var(--accent)}
.lab-toasts{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:120;display:grid;gap:8px;pointer-events:none;width:min(360px,calc(100vw - 32px))}
.lab-toast{display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--paper);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);animation:labIn .35s var(--ease) both;font-size:14px}
.lab-toast span{opacity:.75;font-size:13px}.lab-toast.badge{background:var(--accent);color:#fff}.lab-toast.level{background:#1FA463;color:#fff}
.lab-toast.out{opacity:0;transform:translateY(-8px);transition:.35s}
@keyframes labIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.lab-burst{position:fixed;z-index:130;pointer-events:none;width:0;height:0}
.lab-burst i{position:absolute;width:8px;height:8px;border-radius:2px;animation:labPop .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes labPop{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 90px)) rotate(var(--r));opacity:0}}
.lab-float{position:fixed;z-index:130;pointer-events:none;transform:translate(-50%,0);font:700 18px var(--font-body);animation:labFloat 1s var(--ease) forwards;white-space:nowrap}
.lab-float.good{color:#1FA463}.lab-float.bad{color:var(--err)}
@keyframes labFloat{to{transform:translate(-50%,-46px);opacity:0}}
.lab-shake{animation:labShake .42s}
@keyframes labShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* quiz */
.qz-intro{text-align:center;padding:clamp(8px,2vw,24px) 0}
.qz-title{font-size:clamp(30px,4vw,52px)!important;margin:6px auto 22px;max-width:18ch}
.qz-rules{list-style:none;padding:0;margin:0 auto 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:860px;text-align:left}
.qz-rules li{background:var(--mist);border-radius:18px;padding:16px}.qz-rules b{display:block;color:var(--ink);margin-bottom:4px}.qz-rules span{font-size:14px;color:var(--slate)}
.qz-intro .btn-row{justify-content:center}.qz-meta{font-size:14px;margin-top:16px}
.qz-hud{display:flex;align-items:center;gap:clamp(14px,3vw,32px);flex-wrap:wrap;margin-bottom:12px}
.qz-hud>div:not(.qz-life){display:grid}.qz-hud span{font-size:12px;font-weight:600;color:var(--slate)}
.qz-hud b{font-size:24px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}.qz-hud small{font-size:13px;color:var(--slate);font-weight:600}
.qz-hud b.hot{color:#E8590C}
.qz-life{margin-left:auto;display:flex;gap:8px}
.qz-ll{font:700 13px var(--font-body);min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer}
.qz-ll:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.qz-dots{display:flex;gap:6px;margin-bottom:16px}.qz-dots i{flex:1;height:5px;border-radius:5px;background:var(--mist-2)}.qz-dots i.ok{background:#1FA463}.qz-dots i.no{background:var(--err)}.qz-dots i.cur{background:var(--ink)}
.qz-cat{display:flex;gap:8px;margin:0 0 10px}.qz-cat span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--mist);color:var(--graphite)}
.qz-timer{height:6px;border-radius:6px;background:var(--mist-2);overflow:hidden;margin-bottom:18px}
.qz-timer i{display:block;height:100%;background:var(--accent);transition:width .1s linear}.qz-timer i.low{background:var(--err)}
.qz-card h3{font-size:clamp(21px,2.2vw,28px)!important;margin-bottom:18px}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qz-opt{display:flex;align-items:center;gap:12px;text-align:left;font:500 16px var(--font-body);color:var(--ink);background:var(--surface);border:1.5px solid var(--edge);border-radius:16px;padding:14px 16px;min-height:60px;cursor:pointer;transition:transform .15s var(--ease),border-color .15s,background .15s}
.qz-opt kbd{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 13px var(--font-body);background:var(--mist);color:var(--graphite)}
@media (hover:hover){.qz-opt:not(:disabled):hover{border-color:var(--ink);transform:translateY(-2px)}}
.qz-opt.correct{border-color:#1FA463;background:rgba(31,164,99,.10)}.qz-opt.correct kbd{background:#1FA463;color:#fff}
.qz-opt.wrong{border-color:var(--err);background:rgba(194,51,79,.08)}.qz-opt.wrong kbd{background:var(--err);color:#fff}
.qz-opt.dim{opacity:.5}.qz-opt:disabled{cursor:default}
.qz-note{margin-top:16px!important}.qz-gain{font-weight:800;color:#1FA463;margin-right:4px}
.qz-result{text-align:center}
.qz-score b{display:block;font-size:clamp(64px,10vw,120px);font-weight:700;letter-spacing:-.06em;line-height:.95;color:var(--ink)}
.qz-score span{color:var(--slate);font-weight:600}
.qz-rank{font-size:22px;font-weight:600;color:var(--accent);margin:12px 0 18px}
.qz-stats{display:flex;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap}.qz-stats div{display:grid}.qz-stats b{font-size:26px;color:var(--ink)}.qz-stats span{font-size:13px;color:var(--slate)}
@media (max-width:640px){.qz-opts{grid-template-columns:1fr}.qz-rules{grid-template-columns:1fr}.qz-life{margin-left:0;width:100%}}

/* game */
.gm-start{margin-top:18px}.gm-info{font-size:14px;margin:12px 0 0}
.gm-progress{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0;padding:18px!important;background:var(--mist)!important}
.gm-progress>div{display:grid}.gm-progress span{font-size:12px;font-weight:600;color:var(--slate)}.gm-progress b{font-size:22px;color:var(--ink)}
.gm-progress em{font-style:normal}
.gm-next,.gm-progress .btn-row{grid-column:1/-1;margin:0}
@media (max-width:640px){.gm-progress{grid-template-columns:1fr 1fr}}

/* growth score */
.gs-delta{font-weight:700;margin:18px 0 0}.gs-delta.up{color:#1FA463}.gs-delta.down{color:var(--err)}
.gs-plan{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:none}
.gs-plan li{display:grid;gap:3px;padding:14px 16px;border-radius:16px;background:var(--mist)}.gs-plan b{color:var(--ink)}.gs-plan span{font-size:15px}

/* audit intro */
.audit-intro{display:grid;gap:14px;margin-bottom:16px}
.audit-score{background:var(--accent)!important;color:#fff}.audit-score .label{color:rgba(255,255,255,.8)}.audit-score p{color:#fff;margin:6px 0 0}
.audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.audit-areas{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.audit-areas li{font-size:14px;font-weight:600;padding:8px 12px;border-radius:999px;background:var(--mist);color:var(--ink)}
.audit-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:as}
.audit-steps li{display:grid;grid-template-columns:30px 1fr;column-gap:10px;counter-increment:as}
.audit-steps li::before{content:counter(as);grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px}
.audit-steps b{color:var(--ink)}.audit-steps span{font-size:14px;color:var(--slate)}
@media (max-width:760px){.audit-grid{grid-template-columns:1fr}}
.lab-toasts{top:auto;bottom:24px;left:24px;transform:none;width:min(300px,calc(100vw - 120px))}
.lab-toast{padding:10px 14px;font-size:13px;border-radius:14px}
@media (max-width:767px){.lab-toasts{bottom:calc(84px + env(safe-area-inset-bottom));left:12px}}