/* ============================================================
   Soluteck — Aurora v2 (crafted, professional, global)
   Dependency-free. OKLCH tokens. Grain over gradients. Amber accent.
   Reduced-motion safe. Readability first.
   ============================================================ */

:root{
  /* canvas — tinted near-black indigo, not pure black */
  --bg:   oklch(0.15 0.018 275);
  --bg-2: oklch(0.18 0.020 275);
  --bg-3: oklch(0.21 0.022 275);
  /* glass surfaces */
  --surface:   rgba(255,255,255,.042);
  --surface-2: rgba(255,255,255,.072);
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.22);
  /* text — high contrast, lightly tinted, desaturated */
  --text:  oklch(0.96 0.006 275);
  --muted: oklch(0.76 0.018 275);
  --faint: oklch(0.62 0.020 275);
  /* aurora hues (cool ~90%) */
  --indigo: oklch(0.63 0.17 270);
  --violet: oklch(0.65 0.16 300);
  --teal:   oklch(0.80 0.12 195);
  /* the one warm note (~10%): refined amber/gold */
  --amber:     oklch(0.81 0.135 76);
  --amber-2:   oklch(0.86 0.12 82);
  --amber-ink: oklch(0.23 0.055 68);
  /* gradients — atmosphere, used sparingly */
  --grad:      linear-gradient(100deg,var(--indigo),var(--violet) 46%,var(--teal));
  --grad-text: linear-gradient(100deg,oklch(0.78 0.13 268),oklch(0.82 0.12 300) 50%,oklch(0.86 0.11 195));
  --seam:      linear-gradient(90deg,transparent,oklch(0.65 0.16 285/.55) 22%,oklch(0.80 0.12 195/.55) 70%,transparent);
  /* "you are here" — light-alpha aurora tint on the dark canvas */
  --nav-on-bg:   linear-gradient(180deg,oklch(0.74 0.14 288/.17),oklch(0.74 0.14 288/.05));
  --nav-on-bg-h: linear-gradient(180deg,oklch(0.76 0.14 288/.26),oklch(0.76 0.14 288/.10));
  --nav-on-ring: oklch(0.80 0.11 290/.26);
  --nav-on-glow: 0 6px 20px -13px oklch(0.70 0.16 285/.85);
  --mega-on-bg:  linear-gradient(100deg,oklch(0.74 0.14 288/.17),oklch(0.82 0.11 200/.07) 62%,transparent);
  --mega-on-bg-h:linear-gradient(100deg,oklch(0.76 0.14 288/.25),oklch(0.84 0.11 200/.11) 62%,transparent);
  --mega-on-ring:oklch(0.80 0.11 285/.20);

  /* Container width and gutters are in rem ON PURPOSE: the whole layout
     scales with the root font-size on very large screens (see the html rule
     below). In px they would pin the page to a 1200px island and leave a
     quarter of a 2240px monitor empty on each side. */
  --maxw:75rem; --gut:1.5rem; --r:16px; --r-lg:22px; --r-sm:11px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fdisp:"Clash Display",system-ui,-apple-system,Segoe UI,sans-serif;
  --fbody:"General Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --fserif:"Fraunces","Georgia",serif;
  --fmono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Big-screen scaling. Everything here is sized in rem/em, so growing the root
   font grows the entire design in proportion — type, buttons, container —
   like a considered zoom rather than a wider box with lost text in it.
   16px holds up to 1700px of viewport (0.941vw = 16px at exactly 1700), then
   the page scales linearly, capping at 22.5px (~1.4x) around 2390px — which
   covers the common large sizes (1920, 2240, and the 2560 of a 27" QHD panel).

   Past that the cap holds deliberately. On a 3440 ultrawide the margins stay
   generous, and that is correct: prose that spans three thousand pixels is
   unreadable, so wide screens get breathing room, not longer lines. */
html{font-size:clamp(100%,0.941vw,140.625%)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--fbody);font-size:1.0625rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fdisp);font-weight:600;line-height:1.12;letter-spacing:-.018em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* Both the root and the body must clip. With overflow-x only on body, the
   viewport still takes its horizontal scroll from the root element, which let
   the hero's decorative floating tags (.hv-tag sits ~34px outside #heroVisual
   by design) push the page 86px sideways in the light theme. `clip` rather
   than `hidden` so no scroll container is created and position:sticky keeps
   working. */
html,body{overflow-x:clip}
.serif{font-family:var(--fserif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:var(--fmono);font-weight:400;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.gtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--amber);color:var(--amber-ink);padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}

/* ---------- backdrop: aurora + grain ---------- */
.bg-aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.bg-aurora i{position:absolute;border-radius:50%;filter:blur(88px);opacity:.55}
.bg-aurora i:nth-child(1){width:62vw;height:62vw;left:-14vw;top:-16vw;background:radial-gradient(circle,var(--indigo),transparent 62%);animation:d1 30s var(--ease) infinite alternate}
.bg-aurora i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:-4vw;background:radial-gradient(circle,var(--teal),transparent 62%);opacity:.4;animation:d2 34s var(--ease) infinite alternate}
.bg-aurora i:nth-child(3){width:48vw;height:48vw;left:40vw;top:48vw;background:radial-gradient(circle,var(--violet),transparent 62%);opacity:.42;animation:d3 38s var(--ease) infinite alternate}
.bg-fade{position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg) 72%)}
/* film grain — kills banding, reads crafted */
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes d1{to{transform:translate3d(7vw,5vw,0) scale(1.08)}}
@keyframes d2{to{transform:translate3d(-6vw,4vw,0) scale(1.12)}}
@keyframes d3{to{transform:translate3d(-5vw,-7vw,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.bg-aurora i{animation:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--fbody);font-weight:600;font-size:.95rem;
  padding:.78em 1.35em;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
/* primary = the warm note */
.btn-primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 8px 26px -10px oklch(0.83 0.14 78/.6)}
.btn-primary:hover{background:var(--amber-2);transform:translateY(-2px);box-shadow:0 14px 34px -10px oklch(0.83 0.14 78/.7)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-2px)}
.btn-lg{font-size:1.02rem;padding:.92em 1.6em}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:100;transition:background .3s,border-color .3s}
.header.scrolled{background:oklch(0.15 0.018 275/.74);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.header-in{display:flex;align-items:center;gap:26px;padding:17px 0;transition:padding .25s var(--ease)}
.header.scrolled .header-in{padding:11px 0}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--fdisp);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.brand svg{flex:none}
.nav{display:flex;gap:4px;margin-left:6px}
.nav>a{padding:9px 13px;border-radius:9px;color:var(--muted);font-weight:500;font-size:.93rem;transition:color .16s,background .16s}
.nav>a:hover{color:var(--text);background:var(--surface)}
/* products mega-menu */
.nav-mega{position:relative;display:flex;align-items:center}
.nav-trigger{font-family:var(--fbody);font-weight:500;font-size:.93rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:9px 13px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;transition:color .16s,background .16s}
.nav-trigger svg{transition:transform .22s var(--ease);opacity:.7}
.nav-mega:hover .nav-trigger,.nav-mega:focus-within .nav-trigger{color:var(--text);background:var(--surface)}
.nav-mega:hover .nav-trigger svg,.nav-mega:focus-within .nav-trigger svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 14px);left:0;width:min(900px,94vw);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 36px 80px -30px #000,0 0 0 1px rgba(255,255,255,.04) inset;
  padding:22px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:200}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}/* hover bridge */
.nav-mega:hover .mega,.nav-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 16px}
.mega-lbl{display:block;font-family:var(--fmono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:2px 0 7px;padding-left:11px}
.mega-item{display:block;padding:8px 11px;border-radius:11px;transition:background .14s,transform .14s}
.mega-item:hover{background:var(--surface-2)}
.mega-item b{display:block;font-family:var(--fdisp);font-weight:600;font-size:.92rem;color:var(--text);letter-spacing:-.01em}
.mega-item span{display:block;font-size:.775rem;color:var(--muted);margin-top:2px;line-height:1.34}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.mega-foot .mono{font-size:.68rem}
.mega-all{font-weight:600;font-size:.9rem;color:var(--amber);display:inline-flex;gap:7px;align-items:center;white-space:nowrap;transition:gap .18s}
.mega-all:hover{gap:11px}
@media (max-width:920px){.nav-mega{display:none}}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-cta .signin{color:var(--muted);font-weight:500;font-size:.93rem}
.header-cta .signin:hover{color:var(--text)}
.menu-btn{display:none;background:var(--surface);border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center}

/* ---------- hero (asymmetric, left-weighted) ---------- */
".hero{padding:4.375rem 0 1.875rem;position:relative}
/* A colour field that belongs to the hero itself, so the top of every page has
   depth without depending on where the fixed aurora blobs happen to drift. */
.hero::after{content:"";position:absolute;inset:-20% -10% -30%;z-index:-2;
  pointer-events:none;filter:blur(52px);opacity:.9;
  background:
    radial-gradient(44% 48% at 12% 12%,oklch(0.52 0.20 272/.42),transparent 66%),
    radial-gradient(40% 44% at 88% 4%,oklch(0.58 0.15 196/.30),transparent 64%),
    radial-gradient(34% 40% at 68% 78%,oklch(0.50 0.19 302/.26),transparent 66%)}
/* ambient background video — very dark, behind everything, never fights the text */
.hero-vid{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-vid video,.hero-vid img{width:100%;height:100%;object-fit:cover;opacity:.72;filter:brightness(.62) saturate(1.14) contrast(1.06)}
/* The hero video carries no poster on purpose: a poster paints a still photo
   that then jumps to the particle field. Instead the video starts invisible and
   fades in once it is actually rendering frames, over the gradient beneath. */
.hero-vid video{opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.hero-vid video.is-live{opacity:.72}
/* Three layers, painted first-on-top.
   1. The directional sweep: DARK at the left, lightening toward the right.

      Measured on the live hero at 2346px the ground ran 31.2 -> 10.1 across
      twelve bands, i.e. brightest where the headline sits and darkest at the
      far edge — the opposite of the intended reading order. The earlier pass
      put a galaxy tint on the left to stop that side looking blank, but the
      tint WAS the light, so the composition lit its own text column and let
      the visual side fall away.

      This layer does the reverse in two halves of one gradient:
        0-45%   DARKENS the left, on top of the scrim, so the headline sits on
                deeper ground (which also helps its contrast).
        55-100% a soft lift that RAISES THE RIGHT, so brightness climbs toward
                the orbit card and the eye is carried to it.

      DARKENED, NOT BLACKENED — the distinction matters and cost a pass to
      learn. The first attempt used a near-neutral dark (chroma 0.025), which
      took the left from RGB(34,26,73) to RGB(7,8,16): blue-over-red collapsed
      from +39 to +9, i.e. black, with the brand colour gone. Overcorrecting
      the other way (chroma 0.145 at lightness 0.24) crushed green to 5 and
      produced a lurid violet — also not the original colour.
      The shipped stops are a SHADE of the original — the hue mixed toward
      black, chroma held meaningful so it survives at low lightness. That
      lands RGB(3,1,15): 91% darker than the original RGB(34,26,73).

      MEASURE THE RATIO, NOT THE DIFFERENCE. Blue-minus-red was the test used
      through the earlier passes and it is misleading this deep, because every
      channel approaches zero and all differences compress toward nothing. The
      honest measures are B:R ratio and saturation:

        original      RGB(34,26,73)  B:R 2.15  sat 0.64
        black mistake RGB( 7, 8,16)  B:R 2.29  sat 0.50  <- and G > R, so the
                                     ratio flatters it; it is a grey-blue
        shipped       RGB( 3, 1,15)  B:R 4.62  sat 0.91

      The shipped colour is darker than the black attempt AND more saturated
      than the original. That is only possible because chroma is held in OKLCH
      as lightness falls, rather than fading the layer out toward neutral.

      This is near the floor: one step further (RGB 2,1,9) keeps the ratio but
      the absolute values are low enough that any display renders it as black,
      ratio or no ratio. 
      The hues stay on the aurora line (indigo 280 -> 268 -> teal 210) so the
      sweep still reads as the same nebula rather than a grey vignette.
   2. The readability scrim, unchanged.
   3. The bottom fade into the page. */
.hero-vid::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,
    oklch(0.075 0.050 285/1) 0%,
    oklch(0.095 0.048 289/.88) 22%,
    oklch(0.145 0.044 293/.48) 40%,
    transparent 55%,
    oklch(0.54 0.130 262/.12) 76%,
    oklch(0.62 0.125 214/.20) 100%),
  linear-gradient(105deg,var(--bg) 15%,oklch(0.15 0.018 275/.42) 58%,transparent),
  linear-gradient(180deg,transparent 62%,var(--bg))}
@media (prefers-reduced-motion:reduce){.hero-vid video{display:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px}
.hero-eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.hero h1{font-size:clamp(2.7rem,6vw,4.9rem);font-weight:600;line-height:1.1;letter-spacing:-.022em;max-width:13ch}
.hero h1 .serif{font-size:1.02em}
.hero .lead{margin-top:24px;max-width:50ch;color:var(--muted);font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.6}
.hero .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero .reassure{margin-top:18px;color:var(--faint);font-size:.86rem;display:flex;align-items:center;gap:8px}
.hero .reassure b{color:var(--muted);font-weight:500}

/* bespoke hero visual: glass panel + intelligence core */
.hero-visual{position:relative;aspect-ratio:1/1;max-width:min(100%,38rem);margin-inline:auto;width:100%}
.hv-glass{position:absolute;inset:0;border-radius:26px;border:1px solid var(--border);overflow:hidden;
  background:radial-gradient(70% 60% at 28% 22%,oklch(0.63 0.17 270/.35),transparent 60%),
            radial-gradient(60% 60% at 78% 74%,oklch(0.80 0.12 195/.30),transparent 60%),
            radial-gradient(50% 50% at 62% 38%,oklch(0.65 0.16 300/.30),transparent 60%),
            oklch(0.17 0.02 275/.6);
  backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px oklch(0.2 0.1 285/.8)}
.hv-core{position:absolute;inset:0;display:grid;place-items:center}
.hv-core svg{width:74%;height:74%;overflow:visible}
.hv-ring{fill:none;stroke-width:1.2;opacity:.55}
.hv-rot{transform-origin:center;animation:spin 26s linear infinite}
.hv-rot.r2{animation-duration:38s;animation-direction:reverse}
.hv-node{fill:var(--amber)}
.hv-tag{position:absolute;backdrop-filter:blur(8px);background:oklch(0.18 0.02 275/.7);border:1px solid var(--border);
  border-radius:11px;padding:9px 12px;font-size:.78rem;color:var(--text);display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px -14px #000}
.hv-tag .dot{width:7px;height:7px;border-radius:50%}
.hv-tag.t1{top:11%;left:-6%}.hv-tag.t2{bottom:14%;right:-7%}
/* These float deliberately outside the hero visual on desktop; on a phone that
   overhang is what leaves the viewport, so tuck them back inside. */
@media(max-width:560px){.hv-tag.t1{left:0}.hv-tag.t2{right:0}}
.hv-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.hv-core,.hv-tag{will-change:transform;transition:transform .35s var(--ease)}
.hv-core{transform:translate3d(var(--px,0),var(--py,0),0)}
.hv-tag.t1{transform:translate3d(calc(var(--px,0)*1.8),calc(var(--py,0)*1.8),0)}
.hv-tag.t2{transform:translate3d(calc(var(--px,0)*-1.6),calc(var(--py,0)*-1.6),0)}
.hv-pulse{transform-origin:center;animation:pulse 4.5s var(--ease) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hv-rot,.hv-pulse{animation:none}.hv-core,.hv-tag{transition:none}}

/* logo seam strip */
.seam{height:1px;background:var(--seam);margin:0}
.proofstrip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:30px;margin-top:46px}
.proofstrip .lbl{color:var(--faint)}
.proofstrip .names{display:flex;gap:clamp(20px,2.2vw,44px);flex-wrap:wrap;justify-content:flex-end;
  /* The chat launcher is fixed bottom-right. Once the names run to the
     container edge the last one lands under it on narrower desktops, where
     the hero bottom happens to sit level with the bubble on first paint.
     Reserve clearance that tapers to zero by 1700px, where the strip ends
     well clear of the launcher and the space would just read as blank. */
  padding-right:clamp(0px,calc(1700px - 100vw),132px)}
.proofstrip .names span{font-family:var(--fdisp);font-weight:500;color:var(--muted);font-size:1rem;opacity:.82;transition:opacity .2s,color .2s}
.proofstrip .names span:hover{opacity:1;color:var(--text)}

/* ---------- section scaffolding ---------- */
.sec{padding:96px 0;position:relative}
.sec-head{max-width:62ch;margin-bottom:2.75rem}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,3rem);margin-top:14px;letter-spacing:-.025em}
.sec-head p{color:var(--muted);margin-top:15px;font-size:1.12rem;max-width:54ch}
.kick{color:var(--teal)}

/* sector switcher */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.chip{font-family:var(--fbody);font-weight:500;font-size:.93rem;padding:.55em 1.05em;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--border-2)}
.chip[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:transparent;font-weight:600}
.sector-panel{border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 36px;background:var(--surface);backdrop-filter:blur(12px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center;min-height:172px}
.sector-panel h3{font-size:1.55rem;letter-spacing:-.02em}
.sector-panel p{color:var(--muted);margin-top:12px;max-width:48ch}
.sp-side{border-left:1px solid var(--border);padding-left:26px}
.sp-side .pw{color:var(--faint);font-size:.82rem}
.sp-side .pl{margin-top:8px;font-family:var(--fdisp);font-weight:500;color:var(--text);font-size:1.05rem;line-height:1.35}
.sp-side .tag{display:inline-block;margin-top:16px;color:var(--amber);font-weight:600;font-size:.86rem}

/* ---------- bento solutions ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(186px,auto);gap:16px}
.cell{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);backdrop-filter:blur(12px);
  padding:26px;display:flex;flex-direction:column;transition:transform .22s var(--ease),border-color .22s,background .22s,box-shadow .28s;overflow:hidden}
.cell:hover{transform:translateY(-4px);border-color:var(--border-2);background:var(--surface-2);box-shadow:0 22px 60px -30px oklch(0.55 0.18 285/.6)}
.cell .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--border);
  background:linear-gradient(140deg,oklch(0.63 0.17 270/.25),oklch(0.80 0.12 195/.2));color:var(--text)}
.cell .ico.product-logo{width:48px;height:48px;border:0;background:transparent;border-radius:12px;overflow:hidden}
.cell .ico.product-logo img{display:block;width:100%;height:100%;object-fit:contain}
.cell h3{font-size:1.18rem;margin-top:16px;letter-spacing:-.02em}
.cell .who{font-family:var(--fmono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:7px}
.cell p{color:var(--muted);margin-top:9px;font-size:.96rem;flex:1}
.cell .ar{margin-top:14px;color:var(--faint);font-weight:600;font-size:.88rem;display:inline-flex;gap:6px;transition:gap .2s,color .2s}
.cell:hover .ar{color:var(--text);gap:11px}
.cell.feat{grid-column:span 2;grid-row:span 2;padding:0;overflow:hidden;justify-content:flex-end;
  background:radial-gradient(80% 70% at 78% 18%,oklch(0.63 0.17 270/.3),transparent 60%),
            radial-gradient(70% 70% at 18% 90%,oklch(0.80 0.12 195/.22),transparent 60%),var(--surface)}
.cell.feat h3{font-size:1.9rem;margin-top:0}
.cell.feat p{font-size:1.06rem;max-width:42ch;flex:none}
.cell.feat .who{color:var(--amber);margin-top:0}
/* featured KASA "live call" visual */
.feat-viz{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 34px 26px;
  background:radial-gradient(120% 120% at 82% 0%,oklch(0.55 0.17 285/.34),transparent 58%),linear-gradient(165deg,oklch(0.30 0.06 282/.55),transparent 70%);
  border-bottom:1px solid var(--border)}
.feat-body{padding:24px 34px 32px;display:flex;flex-direction:column}
.feat-body .who{margin-bottom:8px}
.feat-body h3{margin-top:2px}
.feat-body p{margin-top:11px}
.feat-body .ar{margin-top:18px}
.cc-badge{display:inline-flex;align-items:center;gap:9px;width:max-content;font-family:var(--fmono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:oklch(0.18 0.03 282/.65);border:1px solid var(--border);border-radius:999px;padding:7px 13px}
.cc-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 oklch(0.80 0.12 195/.55);animation:ccpulse 1.9s infinite}
@keyframes ccpulse{0%{box-shadow:0 0 0 0 oklch(0.80 0.12 195/.5)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cc-wave{display:flex;align-items:center;gap:3px;height:50px;padding:2px 2px}
.cc-wave i{flex:1;min-width:0;height:100%;border-radius:3px;transform-origin:center;background:linear-gradient(180deg,var(--teal),var(--violet));opacity:.9;animation:ccbar 1.5s ease-in-out infinite}
.cc-wave i:nth-child(2n){animation-delay:.18s}.cc-wave i:nth-child(3n){animation-delay:.42s;animation-duration:1.85s}
.cc-wave i:nth-child(5n){animation-delay:.66s}.cc-wave i:nth-child(7n){animation-delay:.3s;animation-duration:1.2s}
.cc-wave i:nth-child(4n){animation-delay:.54s}
@keyframes ccbar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.cc-trans{display:flex;flex-direction:column;gap:8px}
.cc-line{font-size:.82rem;line-height:1.4;padding:8px 13px;border-radius:13px;max-width:88%}
.cc-them{background:var(--surface-2);color:var(--muted);align-self:flex-start;border-bottom-left-radius:4px}
.cc-kasa{background:linear-gradient(100deg,oklch(0.55 0.16 285/.42),oklch(0.52 0.12 200/.34));color:var(--text);align-self:flex-end;border-bottom-right-radius:4px}
@media (prefers-reduced-motion:reduce){.cc-dot,.cc-wave i{animation:none}.cc-wave i{transform:scaleY(.7)}}
.cell.tall{grid-row:span 2}
.bento-foot{margin-top:30px}
/* honest capability-proof grid */
.proofgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:6px}
.pf{background:var(--bg-2);padding:30px 28px;transition:background .22s}
.pf:hover{background:var(--bg-3)}
.pf-n{font-family:var(--fdisp);font-size:2.15rem;font-weight:600;letter-spacing:-.02em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-t{font-family:var(--fmono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:13px}
.pf-d{color:var(--muted);font-size:.95rem;margin-top:11px;line-height:1.55}
@media (max-width:860px){.proofgrid{grid-template-columns:1fr}}
/* cinematic video band (global reach) */
.vidband{position:relative;overflow:hidden;padding:clamp(72px,11vw,138px) 0;border-block:1px solid var(--border)}
.vidband-media{position:absolute;inset:0;z-index:0}
.vidband-media video{width:100%;height:100%;object-fit:cover;opacity:.55}
.vidband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 120% at 78% 50%,transparent,oklch(0.15 0.018 275/.55) 62%),linear-gradient(90deg,var(--bg) 4%,oklch(0.15 0.018 275/.45) 46%,transparent 72%)}
.vidband .container{position:relative;z-index:2}
.vidband-in{max-width:620px}
.vidband-in h2{margin-top:14px;font-size:clamp(2rem,4vw,3.2rem)}
.vidband-in p{color:var(--muted);margin-top:18px;font-size:1.12rem;max-width:50ch;line-height:1.62}
.vidband-in .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* ---------- AI band ---------- */
.band{background:var(--bg-2);border-block:1px solid var(--border)}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.ai-points{display:grid;gap:18px;margin-top:26px}
.ai-pt{display:flex;gap:15px;align-items:flex-start}
.ai-pt .n{font-family:var(--fmono);color:var(--amber);font-size:.8rem;padding-top:3px;flex:none}
.ai-pt b{color:var(--text);font-weight:600}
.ai-pt span{color:var(--muted)}
.ai-vis{aspect-ratio:4/3;border-radius:var(--r-lg);border:1px solid var(--border);position:relative;overflow:hidden;
  background:radial-gradient(60% 70% at 30% 26%,oklch(0.63 0.17 270/.4),transparent 60%),
            radial-gradient(60% 70% at 76% 74%,oklch(0.80 0.12 195/.34),transparent 60%),
            radial-gradient(50% 50% at 60% 40%,oklch(0.65 0.16 300/.32),transparent 60%),var(--bg)}
.ai-vis .label{position:absolute;left:22px;bottom:20px;font-family:var(--fmono);font-size:.72rem;letter-spacing:.14em;color:var(--text);text-transform:uppercase}
.ai-vis .glyph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fdisp);font-weight:600;font-size:2.4rem;color:var(--text);opacity:.92;text-shadow:0 0 36px oklch(0.80 0.12 195/.5)}

/* ---------- services ---------- */
.svc{border:1px solid var(--border);border-radius:var(--r-lg);padding:48px;background:var(--surface);backdrop-filter:blur(12px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;width:300px;height:300px;right:-70px;top:-110px;border-radius:50%;background:radial-gradient(circle,oklch(0.65 0.16 300/.34),transparent 65%);filter:blur(36px)}
.svc h2{font-size:clamp(1.7rem,3vw,2.5rem);position:relative;letter-spacing:-.025em}
.svc p{color:var(--muted);margin-top:15px;position:relative;max-width:46ch}
.promise{display:grid;gap:13px;position:relative}
.prow{display:flex;gap:16px;align-items:center;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.prow .big{font-family:var(--fdisp);font-weight:600;font-size:1.5rem;color:var(--amber);flex:none;width:64px}
.prow span{color:var(--muted);font-size:.95rem}
.prow b{color:var(--text);font-weight:600}

/* ---------- audiences ---------- */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aud a{padding:22px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);transition:all .2s var(--ease)}
.aud a:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-3px)}
.aud a b{display:block;font-family:var(--fdisp);font-weight:500;font-size:1.04rem;letter-spacing:-.01em}
.aud a span{display:block;color:var(--muted);font-size:.88rem;margin-top:6px}

/* ---------- final cta ---------- */
.final{text-align:center;background:linear-gradient(180deg,var(--bg),var(--bg-2));border-top:1px solid var(--border)}
.final h2{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:16ch;margin-inline:auto;letter-spacing:-.03em}
.final p{color:var(--muted);margin:18px auto 0;max-width:48ch;font-size:1.12rem}
.final .cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.newsletter{display:flex;gap:10px;max-width:440px;margin:26px auto 0;flex-wrap:wrap;justify-content:center}
.newsletter input{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.85em 1.2em;color:var(--text);font-family:var(--fbody);font-size:.96rem}
.newsletter input::placeholder{color:var(--faint)}
.newsletter input:focus{border-color:var(--border-2);outline:none}
.consent{font-size:.82rem;color:var(--faint);margin-top:13px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);background:var(--bg);padding:62px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
.foot-brand p{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:32ch}
.foot-col h4{font-family:var(--fmono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400}
.foot-col a{display:block;color:var(--muted);font-size:.93rem;margin-top:11px;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);color:var(--faint);font-size:.85rem}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;transition:all .18s}
.socials a:hover{border-color:var(--border-2);background:var(--surface-2);color:var(--text)}

/* ---------- reveal (subtle, directional, not uniform fade-up) ---------- */
.rvjs .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rvjs .rv-l{opacity:0;transform:translateX(-18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-l.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rvjs .rv,.rvjs .rv-l{opacity:1;transform:none;transition:none}}

/* ============================================================
   PRODUCT PAGE — reusable components (shared by all 25 products)
   ============================================================ */
.tagline{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.tagline .badge{font-family:var(--fmono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber);padding:4px 10px;border-radius:6px;font-weight:600}
.pp-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:46px;padding-top:30px;position:relative}
.pp-stat{flex:1;min-width:150px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:20px 22px}
.pp-stat .num{font-family:var(--fdisp);font-weight:600;font-size:1.9rem;letter-spacing:-.02em}
.pp-stat .num .u{color:var(--amber)}
.pp-stat .lbl{color:var(--muted);font-size:.9rem;margin-top:4px}

/* live-call hero card */
.callcard{position:absolute;inset:0;border-radius:24px;border:1px solid var(--border);overflow:hidden;backdrop-filter:blur(8px);
  background:radial-gradient(70% 60% at 80% 12%,oklch(0.63 0.17 270/.28),transparent 60%),oklch(0.17 0.02 275/.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 90px -44px oklch(0.2 0.1 285/.85);padding:22px;display:flex;flex-direction:column}
.cc-head{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.cc-av{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;font-family:var(--fdisp);font-weight:600;color:#0a0a12;font-size:.85rem}
.cc-head .t{font-weight:600;font-size:.92rem}
.cc-head .s{color:var(--faint);font-size:.74rem;font-family:var(--fmono)}
.cc-lang{margin-left:auto;font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;color:var(--teal);border:1px solid var(--border);border-radius:7px;padding:4px 8px}
.cc-body{flex:1;display:flex;flex-direction:column;gap:11px;padding:18px 0;overflow:hidden}
.bubble{max-width:84%;padding:10px 13px;border-radius:13px;font-size:.86rem;line-height:1.45}
.bubble.ag{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.bubble.cu{align-self:flex-end;background:oklch(0.63 0.17 270/.22);border:1px solid oklch(0.63 0.17 270/.4);border-bottom-right-radius:4px}
.bubble .who{display:block;font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.cc-foot{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.wave{display:flex;align-items:center;gap:3px;height:22px}
.wave span{width:3px;border-radius:2px;background:var(--amber);height:30%;animation:wv 1.1s ease-in-out infinite}
.wave span:nth-child(2){animation-delay:.1s}.wave span:nth-child(3){animation-delay:.2s}.wave span:nth-child(4){animation-delay:.3s}
.wave span:nth-child(5){animation-delay:.15s}.wave span:nth-child(6){animation-delay:.25s}.wave span:nth-child(7){animation-delay:.05s}
@keyframes wv{0%,100%{height:25%}50%{height:95%}}
.cc-foot .live{font-family:var(--fmono);font-size:.7rem;color:var(--muted);letter-spacing:.08em}
.cc-foot .live b{color:var(--teal)}
@media (prefers-reduced-motion:reduce){.wave span{animation:none;height:55%}}

/* problem section */
.problem{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.problem .p{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:24px}
.problem .p .q{font-family:var(--fserif);font-style:italic;font-size:1.12rem;color:var(--text);line-height:1.4}
.problem .p .a{color:var(--muted);margin-top:12px;font-size:.95rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps .st{position:relative;padding-top:18px;border-top:2px solid var(--border)}
.steps .st::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--fmono);font-size:.78rem;color:var(--amber);position:absolute;top:-2px;left:0;border-top:2px solid var(--amber);padding-top:16px}
.steps .st h4{font-family:var(--fdisp);font-size:1.15rem;margin-top:30px;letter-spacing:-.01em}
.steps .st p{color:var(--muted);margin-top:9px;font-size:.96rem}

/* feature rows (by outcome) */
.frows{display:grid;gap:14px}
.frow{display:grid;grid-template-columns:200px 1fr;gap:24px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:24px 26px;align-items:start}
.frow h4{font-family:var(--fdisp);font-size:1.12rem;letter-spacing:-.01em}
.frow .out{font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:6px}
.frow p{color:var(--muted);font-size:.97rem}

/* sectors */
.sectors{display:flex;flex-wrap:wrap;gap:10px}
.sectors .s{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.6em 1.15em;font-size:.92rem;color:var(--muted)}
.sectors .s b{color:var(--text);font-weight:500}

/* faq */
.faq{display:grid;gap:10px;max-width:780px}
/* Form controls in a grid: a <select> with long option labels sets a large
   min-content width, and grid items default to min-width:auto — so the contact
   form refused to shrink below ~383px and pushed the page sideways on phones.
   min-width:0 lets the column shrink; width:100% keeps the controls filling it. */
.faq>div{min-width:0}
.faq input,.faq select,.faq textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.faq details{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);max-width:64ch}

/* pricing teaser */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:28px;display:flex;flex-direction:column}
.tier.hot{border-color:oklch(0.81 0.135 76/.5);background:radial-gradient(90% 70% at 80% 0%,oklch(0.81 0.135 76/.12),transparent 60%),var(--surface)}
.tier .nm{font-family:var(--fmono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tier .pr{font-family:var(--fdisp);font-weight:600;font-size:1.7rem;margin-top:10px;letter-spacing:-.02em}
.tier .pr small{font-family:var(--fbody);font-size:.85rem;color:var(--faint);font-weight:400}
.tier ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:9px}
.tier li{color:var(--muted);font-size:.93rem;padding-left:22px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.tier .btn{margin-top:auto}

/* ============================================================
   MEDIA — real photography with Aurora treatment
   ============================================================ */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-2)}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}
.media.duotone video{filter:saturate(1.08) contrast(1.04)}
/* full-colour & vibrant — photos keep their natural colour & life; only a faint brand glow
   in one corner + a soft bottom scrim for caption legibility, so they still feel on-brand */
.media.duotone img{filter:saturate(1.08) contrast(1.04)}
.media.duotone::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(80% 62% at 86% 6%,oklch(0.63 0.17 270/.13),transparent 62%);mix-blend-mode:screen}
.media.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 56%,oklch(0.12 0.016 275/.5))}
.media .cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 8px #000}
/* photo mosaic — the real people & industries we serve. Self-hosted, pre-optimised
   webp, every tile lazy + async-decoded with a fixed aspect-ratio (zero layout shift,
   never blocks first paint). Assets are immutable + hashed-friendly: front the static
   dir with a CDN (Cloudflare/CloudFront) at deploy and these are edge-cached as-is. */
.mosaic{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.mosaic figure{position:relative;margin:0;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:var(--bg-2);aspect-ratio:1;contain:content}
.mosaic figure.span2{grid-column:span 2;aspect-ratio:2/1}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06);transition:transform .55s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 52%,oklch(0.12 0.016 275/.58))}
.mosaic figcaption{position:absolute;left:11px;bottom:9px;z-index:2;font-family:var(--fmono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px #000;opacity:.94}
/* clickable tiles → read the in-depth article for that domain */
.mosaic figure a{position:absolute;inset:0;z-index:3;display:block;border-radius:inherit}
.mosaic figure.haslink::before{content:"Read →";position:absolute;z-index:4;top:10px;right:10px;font-family:var(--fmono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:oklch(0.55 0.17 285/.82);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 9px;opacity:0;transform:translateY(-5px);transition:opacity .22s var(--ease),transform .22s var(--ease);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mosaic figure.haslink:hover::before,.mosaic figure.haslink:focus-within::before{opacity:1;transform:translateY(0)}
.mosaic figure.haslink{cursor:pointer}
@media(max-width:560px){.mosaic{grid-template-columns:repeat(2,1fr);gap:8px}.mosaic figure.span2{grid-column:span 2;aspect-ratio:2/1}}
.media.plain::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 40%,oklch(0.15 0.018 275/.55))}

/* photo band: a row of images */
.photoband{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.photoband .media{aspect-ratio:4/5}
.photoband .media:first-child{aspect-ratio:auto}
@media(max-width:760px){.photoband{grid-template-columns:1fr 1fr}.photoband .media:first-child{grid-column:span 2;aspect-ratio:16/9}}

/* hero/section background photo layer */
.hasphoto{position:relative}
.photobg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.photobg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5) contrast(1.05)}
.photobg::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--bg) 30%,oklch(0.15 0.018 275/.6)),radial-gradient(70% 90% at 80% 30%,oklch(0.63 0.17 270/.35),transparent 60%)}

/* solutions overview */
.solbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 30px}
.solsearch{margin-left:auto;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.6em 1.1em;color:var(--text);font-family:var(--fbody);font-size:.92rem;min-width:230px}
.solsearch::placeholder{color:var(--faint)}.solsearch:focus{outline:none;border-color:var(--border-2)}
.solgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#solGrid.solgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.solgrid .cell .soon,.bento .cell .soon{position:absolute;top:18px;right:18px;font-family:var(--fmono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid oklch(0.81 0.135 76/.4);border-radius:6px;padding:3px 7px;background:oklch(0.81 0.135 76/.08)}
.cell.hidden{display:none}
.solempty{display:none;color:var(--muted);padding:46px 0;text-align:center;font-size:1.05rem}
@media(max-width:940px){.solgrid{grid-template-columns:1fr 1fr}.solsearch{margin-left:0;width:100%}}
@media(max-width:560px){.solgrid,#solGrid.solgrid{grid-template-columns:1fr}}

/* build card (services hero visual variant) */
.blocks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.blk{font-family:var(--fmono);font-size:.68rem;letter-spacing:.03em;border:1px solid var(--border);border-radius:8px;padding:6px 9px;color:var(--muted);display:flex;align-items:center;gap:6px;background:var(--surface)}
.blk.on{color:var(--teal);border-color:oklch(0.80 0.12 195/.4);background:oklch(0.80 0.12 195/.1)}
.blk.on::before{content:"✓";font-size:.66rem}
.prog{height:7px;border-radius:99px;background:var(--surface-2);margin-top:18px;overflow:hidden}
.prog>i{display:block;height:100%;width:68%;background:var(--grad);border-radius:99px}
.bc-note{margin-top:12px;font-family:var(--fmono);font-size:.68rem;color:var(--muted);letter-spacing:.04em}
.bc-note b{color:var(--amber)}

/* service-line cards */
.slines{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sline{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:30px;display:flex;flex-direction:column}
.sline .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--border);background:linear-gradient(140deg,oklch(0.63 0.17 270/.25),oklch(0.80 0.12 195/.2));font-size:1.2rem}
.sline h3{font-family:var(--fdisp);font-size:1.3rem;margin-top:18px;letter-spacing:-.02em}
.sline>p{color:var(--muted);margin-top:10px;font-size:.97rem}
.sline ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.sline li{color:var(--muted);font-size:.92rem;padding-left:22px;position:relative}
.sline li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
@media (max-width:940px){.slines{grid-template-columns:1fr}}

/* record card (sector hero visual variant) */
.rec-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.rec-row:last-of-type{border-bottom:0}
.rec-k{color:var(--faint);font-family:var(--fmono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.rec-v{color:var(--text);text-align:right;font-size:.9rem}
.rec-v .pill{display:inline-block;background:oklch(0.80 0.12 195/.18);border:1px solid oklch(0.80 0.12 195/.35);color:var(--teal);border-radius:6px;padding:2px 7px;font-size:.78rem}
.rec-ai{margin-top:14px;background:oklch(0.63 0.17 270/.14);border:1px solid oklch(0.63 0.17 270/.32);border-radius:11px;padding:12px 14px;font-size:.83rem;color:var(--text);line-height:1.45}
.rec-ai .tag{font-family:var(--fmono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.rec-ai .sign{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--teal);font-family:var(--fmono);font-size:.66rem;letter-spacing:.06em}
.rec-ai .sign::before{content:"✓";display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--teal);color:var(--bg);font-size:.62rem}

/* sector "serves" grid reuses .aud; product picks reuse .cell/.bento */
.trust-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-band .t{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:22px}
.trust-band .t .ic{font-size:1.2rem}
.trust-band .t b{display:block;font-family:var(--fdisp);font-weight:500;margin-top:10px;font-size:1.02rem;letter-spacing:-.01em}
.trust-band .t span{color:var(--muted);font-size:.9rem;margin-top:5px;display:block}
@media (max-width:940px){.trust-band{grid-template-columns:1fr 1fr}}

/* breadcrumb */
.crumb{font-family:var(--fmono);font-size:.72rem;letter-spacing:.1em;color:var(--faint);padding:26px 0 0}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--text)}

@media (max-width:940px){
  .problem,.steps,.tiers{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr;gap:10px}
}

/* ---------- cookie consent ---------- */
.consent-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:280;max-width:560px;margin:0 auto;background:oklch(0.165 0.018 275/.97);border:1px solid var(--border-2);border-radius:16px;padding:18px 20px;box-shadow:0 30px 70px -30px #000;opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.consent-bar.show{opacity:1;transform:none}
.consent-bar p{color:var(--muted);font-size:.9rem;line-height:1.5}
.consent-bar p a{color:var(--amber)}
.consent-bar .row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.consent-bar .btn{padding:.6em 1.2em;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.consent-bar{transition:none}}

/* ---------- site search ---------- */
.searchbtn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:8px 12px;font-family:var(--fbody);font-size:.86rem;cursor:pointer;transition:border-color .18s,color .18s}
.searchbtn:hover{border-color:var(--border-2);color:var(--text)}
.searchbtn kbd{font-family:var(--fmono);font-size:.64rem;border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--faint)}
@media(max-width:980px){.searchbtn .lbl,.searchbtn kbd{display:none}}
.search-ov{position:fixed;inset:0;z-index:300;display:none;background:oklch(0.10 0.016 275/.72);backdrop-filter:blur(7px);padding:11vh 20px 20px}
.search-ov.open{display:block}
.search-panel{max-width:660px;margin:0 auto;background:oklch(0.165 0.018 275/.97);border:1px solid var(--border-2);border-radius:18px;overflow:hidden;box-shadow:0 44px 100px -34px #000}
.search-top{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border)}
.search-top svg{flex:none;color:var(--faint)}
.search-top input{flex:1;background:none;border:0;outline:none;color:var(--text);font-family:var(--fbody);font-size:1.12rem}
.search-top input::placeholder{color:var(--faint)}
.search-top .esc{font-family:var(--fmono);font-size:.6rem;color:var(--faint);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.search-res{max-height:58vh;overflow:auto;padding:8px}
.sr-group{font-family:var(--fmono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:13px 12px 6px}
.sr-item{display:block;padding:11px 12px;border-radius:11px;cursor:pointer;text-decoration:none}
.sr-item .t{font-family:var(--fdisp);font-weight:500;font-size:1rem;color:var(--text)}
.sr-item .d{color:var(--muted);font-size:.85rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-item.active,.sr-item:hover{background:var(--surface-2)}
.sr-item.active{outline:1px solid var(--border-2)}
.sr-empty{padding:30px 16px;text-align:center;color:var(--muted)}
.sr-empty a{color:var(--amber)}

/* ---------- mobile sheet ---------- */
.sheet{position:fixed;inset:0;z-index:200;background:oklch(0.15 0.018 275/.94);backdrop-filter:blur(20px);display:none;flex-direction:column;padding:22px}
.sheet.open{display:flex}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.sheet-top button{background:var(--surface);border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:11px;cursor:pointer}
.sheet nav{display:flex;flex-direction:column;gap:4px;margin-top:28px}
.sheet nav a{font-family:var(--fdisp);font-size:1.5rem;font-weight:500;padding:13px 0;border-bottom:1px solid var(--border)}
.sheet .scta{margin-top:auto;display:grid;gap:11px}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .nav,.header-cta .signin{display:none}
  .menu-btn{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-visual{max-width:380px}
  .ai-grid,.svc,.sector-panel{grid-template-columns:1fr}
  .sp-side{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:22px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.feat{grid-column:span 2}
  .aud{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  :root{--gut:18px}
  /* Sideways scroll on phones: the header cluster measured 435px against a
     390px viewport (brand 108 + search 36 + theme 38 + CTA 159 + menu 32 +
     gaps). The primary CTA is the widest item by far and is already offered
     in the mobile sheet, so it is dropped here rather than shrunk. */
  .header-cta{gap:8px}
  .header-cta>.btn{display:none}
  .sec{padding:62px 0}
  .svc,.sector-panel{padding:26px}
  .bento{grid-template-columns:1fr}
  .cell.feat,.cell.tall{grid-column:span 1;grid-row:span 1}
  .hero h1{font-size:clamp(2.4rem,9vw,3rem)}
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   LIGHT THEME — "Aurora Daylight"
   Same identity, translated: airy indigo-cast near-white canvas,
   luminous paper-glass surfaces, soft colored glow instead of gray
   drop-shadows, prismatic hairlines on primary cards, and the same
   aurora hues recalibrated (deeper L, same chroma) so gradients stay
   vivid on white. Dark remains the default; this block only applies
   under html[data-theme="light"].
   ============================================================ */
:root{color-scheme:dark;--err:oklch(0.70 0.16 25)}
:root[data-theme="light"]{
  color-scheme:light;
  /* canvas — cool near-white with the same indigo cast, layered deeper */
  --bg:   oklch(0.978 0.008 275);
  --bg-2: oklch(0.960 0.011 275);
  --bg-3: oklch(0.941 0.014 275);
  /* paper-glass surfaces (luminous, not gray) + dark-alpha hairlines */
  --surface:   rgba(255,255,255,.60);
  --surface-2: rgba(255,255,255,.82);
  --border:    rgba(22,26,58,.11);
  --border-2:  rgba(22,26,58,.20);
  /* ink — deep indigo, never pure black */
  --text:  oklch(0.245 0.032 275);
  --muted: oklch(0.425 0.030 275);
  --faint: oklch(0.525 0.028 275);
  /* aurora hues — deeper L, similar chroma, so they hold on white */
  --indigo: oklch(0.50 0.19 270);
  --violet: oklch(0.52 0.18 300);
  --teal:   oklch(0.51 0.115 200);
  /* the warm note — fills keep lift, text gets its own ink */
  --amber:     oklch(0.78 0.145 74);
  --amber-2:   oklch(0.82 0.135 80);
  --amber-ink: oklch(0.24 0.06 68);
  --amber-text:oklch(0.50 0.115 70);
  --err:oklch(0.52 0.19 27);
  --grad-text: linear-gradient(100deg,oklch(0.46 0.19 268),oklch(0.48 0.19 300) 50%,oklch(0.50 0.13 200));
  --seam:      linear-gradient(90deg,transparent,oklch(0.50 0.18 285/.5) 22%,oklch(0.55 0.12 195/.5) 70%,transparent);
  /* light-only: soft colored glow (the signature depth cue) */
  --glow-card: 0 1px 2px oklch(0.40 0.14 282/.05), 0 3px 9px -3px oklch(0.45 0.16 282/.08), 0 20px 44px -22px oklch(0.45 0.16 282/.20);
  --glow-card-hover: 0 2px 4px oklch(0.40 0.14 282/.06), 0 8px 18px -6px oklch(0.45 0.16 282/.12), 0 30px 64px -26px oklch(0.48 0.17 285/.30);
  --hairline: linear-gradient(135deg,oklch(0.55 0.18 270/.55),oklch(0.60 0.16 300/.22) 42%,oklch(0.58 0.12 195/.50));
  /* "you are here" — dark-alpha ink tint + the signature colored glow on paper */
  --nav-on-bg:   linear-gradient(180deg,oklch(0.54 0.17 288/.14),oklch(0.54 0.17 288/.05));
  --nav-on-bg-h: linear-gradient(180deg,oklch(0.52 0.18 288/.21),oklch(0.52 0.18 288/.09));
  --nav-on-ring: oklch(0.48 0.17 285/.24);
  --nav-on-glow: 0 5px 16px -9px oklch(0.48 0.18 283/.45);
  --mega-on-bg:  linear-gradient(100deg,oklch(0.52 0.18 288/.14),oklch(0.52 0.13 205/.06) 62%,transparent);
  --mega-on-bg-h:linear-gradient(100deg,oklch(0.50 0.19 288/.21),oklch(0.50 0.14 205/.10) 62%,transparent);
  --mega-on-ring:oklch(0.48 0.17 285/.20);
}

/* ---------- theme toggle (both themes) ---------- */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease);backdrop-filter:blur(10px)}
.theme-btn:hover{border-color:var(--border-2);color:var(--text);background:var(--surface-2);transform:translateY(-1px)}
.theme-btn svg{display:block}
.theme-btn .tb-moon{display:none}
:root[data-theme="light"] .theme-btn .tb-moon{display:block}
:root[data-theme="light"] .theme-btn .tb-sun{display:none}
@media (prefers-reduced-motion:reduce){.theme-btn:hover{transform:none}}

/* ---------- backdrop: aurora stays, whisper-quiet on white ---------- */
[data-theme="light"] .bg-aurora i{opacity:.62}
[data-theme="light"] .bg-aurora i:nth-child(2){opacity:.5}
[data-theme="light"] .bg-aurora i:nth-child(3){opacity:.52}
[data-theme="light"] .bg-grain{opacity:.032;mix-blend-mode:multiply}

/* ---------- light-only signature 1: faint aurora wash behind heroes ---------- */
[data-theme="light"] .hero,[data-theme="light"] .ins-head,[data-theme="light"] .art-hero{position:relative}
[data-theme="light"] .hero::before,[data-theme="light"] .ins-head::before,[data-theme="light"] .art-hero::before{
  content:"";position:absolute;inset:-16% -8% -14%;z-index:-2;pointer-events:none;filter:blur(40px);
  background:
    radial-gradient(46% 50% at 14% 14%,oklch(0.58 0.19 270/.46),transparent 66%),
    radial-gradient(44% 46% at 84% 6%,oklch(0.66 0.15 195/.42),transparent 64%),
    radial-gradient(36% 42% at 62% 70%,oklch(0.60 0.18 300/.34),transparent 66%),
    conic-gradient(from 220deg at 52% 30%,oklch(0.60 0.17 270/.16),oklch(0.68 0.12 195/.16),oklch(0.62 0.16 300/.16),oklch(0.60 0.17 270/.16))}

/* ---------- light-only signature 2: prismatic hairline on primary cards ---------- */
[data-theme="light"] .cell.feat::after,[data-theme="light"] .sector-panel::before,
[data-theme="light"] .tier.hot::before,[data-theme="light"] .hv-glass::after,
[data-theme="light"] .callcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--hairline);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
[data-theme="light"] .sector-panel,[data-theme="light"] .tier{position:relative}

/* ---------- paper-glass cards: luminous fill + colored glow ---------- */
[data-theme="light"] .cell,[data-theme="light"] .tier,[data-theme="light"] .frow,
[data-theme="light"] .problem .p,[data-theme="light"] .pp-stat,[data-theme="light"] .sline,
[data-theme="light"] .trust-band .t,[data-theme="light"] .aud a,[data-theme="light"] .sector-panel,
[data-theme="light"] .svc,[data-theme="light"] .faq details,[data-theme="light"] .prow{box-shadow:var(--glow-card)}
[data-theme="light"] .cell,[data-theme="light"] .sector-panel,[data-theme="light"] .svc{backdrop-filter:blur(14px) saturate(1.35)}
[data-theme="light"] .cell:hover{background:var(--surface-2);box-shadow:var(--glow-card-hover)}
[data-theme="light"] .aud a:hover{box-shadow:var(--glow-card-hover)}
[data-theme="light"] .prow{background:rgba(255,255,255,.55)}

/* ---------- header / mega / sheet / overlays ---------- */
[data-theme="light"] .header.scrolled{background:oklch(0.978 0.008 275/.74);backdrop-filter:blur(18px) saturate(1.4)}
[data-theme="light"] .mega{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.87)) padding-box,var(--hairline) border-box;
  border-color:transparent;
  box-shadow:0 2px 8px oklch(0.35 0.12 280/.06),0 36px 80px -30px oklch(0.35 0.14 280/.35),0 0 0 1px rgba(255,255,255,.55) inset}
[data-theme="light"] .sheet{background:oklch(0.972 0.009 275/.94)}
[data-theme="light"] .search-ov{background:oklch(0.35 0.04 275/.42)}
[data-theme="light"] .search-panel{background:rgba(255,255,255,.97);box-shadow:0 44px 100px -34px oklch(0.30 0.12 280/.45)}
[data-theme="light"] .consent-bar{background:rgba(255,255,255,.97);box-shadow:0 30px 70px -30px oklch(0.32 0.13 280/.40)}
[data-theme="light"] .brand svg linearGradient stop:nth-child(1){stop-color:oklch(0.48 0.19 270)}
[data-theme="light"] .brand svg linearGradient stop:nth-child(2){stop-color:oklch(0.50 0.18 300)}
[data-theme="light"] .brand svg linearGradient stop:nth-child(3){stop-color:oklch(0.52 0.13 200)}
[data-theme="light"] .brand svg>circle{fill:oklch(0.72 0.145 72)}

/* ---------- amber reads as ink when it's text on the light canvas ---------- */
[data-theme="light"] .mega-all,[data-theme="light"] .sp-side .tag,[data-theme="light"] .cell.feat .who,
[data-theme="light"] .ai-pt .n,[data-theme="light"] .prow .big,[data-theme="light"] .pp-stat .num .u,
[data-theme="light"] .bc-note b,[data-theme="light"] .consent-bar p a,[data-theme="light"] .sr-empty a,
[data-theme="light"] .faq summary::after{color:var(--amber-text)}
[data-theme="light"] .steps .st::before{color:var(--amber-text);border-top-color:oklch(0.66 0.14 72)}
[data-theme="light"] .solgrid .cell .soon,[data-theme="light"] .bento .cell .soon{color:var(--amber-text);border-color:oklch(0.62 0.13 72/.45);background:oklch(0.78 0.14 76/.13)}

/* ---------- hero media + bespoke visuals ---------- */
/* On a near-white canvas the particles have to be DARKENED to register at
   all; brightening them (the old rule) made them disappear into the page.
   multiply keeps the light background while letting the trails read. */
[data-theme="light"] .hero-vid video,[data-theme="light"] .hero-vid img{
  filter:brightness(.78) saturate(1.3) contrast(1.15);mix-blend-mode:multiply}
/* opacity is keyed to .is-live so the fade-in works in light mode too — the
   plain selector here would otherwise tie on specificity and win by order. */
[data-theme="light"] .hero-vid img{opacity:.5}
[data-theme="light"] .hero-vid video.is-live{opacity:.5}
/* The dark hero's tint, with inverted physics. The dark version adds LIGHT to
   near-black; here the ground is near-white, so light added to it clips and
   nothing happens — paper needs PIGMENT. These stops sit below the paper's
   lightness (0.978), so the left deepens into a periwinkle instead of glowing.

   Deepening is also the right direction for how THIS hero is lopsided: the
   footage is multiplied onto the paper, so the nebula makes the right side
   darker, and a left that stayed pure white is what reads as empty. Lightening
   it — the dark-mode instinct — would have widened the gap.

   The first version of this was invisible: lightness 0.86 at .34 alpha moved
   the paper from ~247 to 235, a 12/255 delta, under the threshold where a
   large soft wash registers at all. These stops are ~0.70 and carry more
   coverage, which lands it around a 40/255 delta — read as a tint, not as
   dirt. Full width in even steps, matching dark.

   The left stops are DEEPER than the first pass (edge lightness 0.70 -> 0.58).
   Dark mode now runs dark-left to light-right so the eye is carried across to
   the orbit card; this keeps both themes reading the same way round on paper —
   deepest pigment where the headline starts, opening up across the hero.

   It cannot mirror dark exactly. The footage is MULTIPLIED onto paper here, so
   the right half is darkened by the nebula rather than lit by it; forcing a
   light right would mean bleaching that nebula out of the light hero, which
   costs more than the symmetry is worth. */
[data-theme="light"] .hero-vid::after{background:
  linear-gradient(100deg,
    oklch(0.58 0.16 282/.44) 0%,
    oklch(0.66 0.14 288/.30) 24%,
    oklch(0.76 0.11 294/.16) 48%,
    oklch(0.86 0.07 300/.05) 76%,
    oklch(0.92 0.05 304/0) 100%),
  linear-gradient(105deg,var(--bg) 14%,oklch(0.978 0.008 275/.34) 56%,transparent),
  linear-gradient(180deg,transparent 62%,var(--bg))}
[data-theme="light"] .hv-glass{
  background:radial-gradient(70% 60% at 28% 22%,oklch(0.62 0.17 270/.15),transparent 60%),
             radial-gradient(60% 60% at 78% 74%,oklch(0.70 0.12 195/.13),transparent 60%),
             radial-gradient(50% 50% at 62% 38%,oklch(0.64 0.16 300/.12),transparent 60%),
             rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 34px 80px -36px oklch(0.45 0.16 280/.30),0 10px 30px -12px oklch(0.55 0.14 200/.14)}
[data-theme="light"] .hv-tag{background:rgba(255,255,255,.78);box-shadow:0 12px 30px -14px oklch(0.40 0.15 280/.35)}
[data-theme="light"] .callcard{
  background:radial-gradient(70% 60% at 80% 12%,oklch(0.62 0.17 270/.12),transparent 60%),rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 90px -44px oklch(0.42 0.16 282/.38),0 12px 34px -16px oklch(0.55 0.14 200/.14)}
[data-theme="light"] .cc-av{color:#fff}
[data-theme="light"] .cc-badge{background:rgba(255,255,255,.72)}
[data-theme="light"] .feat-viz{background:radial-gradient(120% 120% at 82% 0%,oklch(0.60 0.16 285/.16),transparent 58%),linear-gradient(165deg,oklch(0.90 0.035 282/.65),transparent 70%)}
[data-theme="light"] .cc-kasa{background:linear-gradient(100deg,oklch(0.55 0.16 285/.15),oklch(0.52 0.12 200/.13))}
[data-theme="light"] .bubble.cu{background:oklch(0.62 0.17 270/.13);border-color:oklch(0.55 0.17 270/.32)}
[data-theme="light"] .bubble.ag{background:rgba(255,255,255,.75)}
[data-theme="light"] .cc-them{background:oklch(0.94 0.012 275/.9)}

/* ---------- bands, visuals, misc component recalibration ---------- */
[data-theme="light"] .vidband-media video{opacity:.32;filter:saturate(1.05) brightness(1.03)}
[data-theme="light"] .vidband::after{background:radial-gradient(120% 120% at 78% 50%,transparent,oklch(0.978 0.008 275/.58) 62%),linear-gradient(90deg,var(--bg) 4%,oklch(0.978 0.008 275/.5) 46%,transparent 72%)}
[data-theme="light"] .ai-vis{background:radial-gradient(60% 70% at 30% 26%,oklch(0.62 0.17 270/.18),transparent 60%),radial-gradient(60% 70% at 76% 74%,oklch(0.70 0.12 195/.15),transparent 60%),radial-gradient(50% 50% at 60% 40%,oklch(0.64 0.16 300/.13),transparent 60%),var(--bg)}
[data-theme="light"] .ai-vis .glyph{text-shadow:0 2px 26px oklch(0.55 0.13 200/.35)}
[data-theme="light"] .svc::after{background:radial-gradient(circle,oklch(0.62 0.16 300/.16),transparent 65%)}
[data-theme="light"] .tier.hot{border-color:transparent;background:radial-gradient(90% 70% at 80% 0%,oklch(0.80 0.14 76/.14),transparent 60%),rgba(255,255,255,.66)}
[data-theme="light"] .cell:hover{border-color:var(--border-2)}
[data-theme="light"] .photobg img{filter:grayscale(1) brightness(1.35) contrast(.92) opacity(.55)}
[data-theme="light"] .photobg::after{background:linear-gradient(110deg,var(--bg) 30%,oklch(0.978 0.008 275/.7)),radial-gradient(70% 90% at 80% 30%,oklch(0.62 0.16 270/.14),transparent 60%)}
[data-theme="light"] .rec-ai{background:oklch(0.62 0.17 270/.10);border-color:oklch(0.55 0.17 270/.28)}
[data-theme="light"] .rec-v .pill{background:oklch(0.62 0.12 195/.14);border-color:oklch(0.52 0.12 195/.34)}
[data-theme="light"] .blk.on{border-color:oklch(0.52 0.12 195/.4);background:oklch(0.62 0.12 195/.10)}
[data-theme="light"] .prog{background:oklch(0.90 0.02 275)}
/* media captions sit on photos with a dark scrim — stay white in light mode */
[data-theme="light"] .media .cap{color:#fff}
[data-theme="light"] .vidband-media video{opacity:.38}

/* investors page: locked document cells */
#docList[data-locked] .doc-cell{opacity:.72;filter:saturate(.6)}
#docList[data-locked] .doc-lock{color:var(--amber)}
#docList .doc-cell[aria-disabled="true"]{cursor:default}

/* Sector triptych — used on the Industries hub, where a single photograph
   would argue the opposite of the page's point. Three frames say "many
   worlds" at a glance. Same scrim language as .pmedia so the page reads as
   one system rather than two components bolted together. */
.psector{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 4px}
.psector figure{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:3/4;background:var(--surface);
  box-shadow:var(--shadow-sm,0 1px 2px rgb(10 8 30/.06))}
.psector img{width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--img-filter);transition:transform 1s cubic-bezier(.16,.84,.36,1)}
.psector figure:hover img{transform:scale(1.04)}
.psector figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--pcap-scrim)}
.psector figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.6vw,22px);color:#fff}
.psector figcaption .ix{display:block;font-family:var(--fmono);font-size:.68rem;
  letter-spacing:.16em;opacity:.72;margin-bottom:8px;text-shadow:0 1px 2px rgb(4 3 16/.5)}
.psector figcaption b{display:block;font-family:var(--fdisp);font-weight:600;
  font-size:clamp(1.02rem,1.4vw,1.24rem);letter-spacing:-.015em;
  text-shadow:0 1px 2px rgb(4 3 16/.55),0 2px 20px rgb(4 3 16/.45)}
.psector figcaption .d{display:block;margin-top:6px;font-size:.88rem;line-height:1.5;
  opacity:.93;text-shadow:0 1px 2px rgb(4 3 16/.5);max-width:34ch}
/* the triptych is part of the argument, so it gets section rhythm, not band rhythm */
.psec{padding-top:6px}
.psec .psector{margin-top:32px}
@media(max-width:760px){.psector{grid-template-columns:1fr;gap:12px}
  .psector figure{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.psector figure:hover img{transform:none}}

/* ── Forms ────────────────────────────────────────────────────────────────
   One form language for the whole site: project briefs, sign-in, investor
   registration. Controls sit on --surface with a real focus ring, because a
   form people are asked to trust must look deliberate rather than default.
   min-width:0 on the grid children is load-bearing — a <select> with long
   options otherwise refuses to shrink and pushes the page sideways. */
.formwrap{max-width:740px}
.fgrid{display:grid;gap:20px;min-width:0}
.fgrid.two{grid-template-columns:1fr 1fr}
@media(max-width:640px){.fgrid.two{grid-template-columns:1fr}}
.field{display:grid;gap:8px;min-width:0}
.field>label{font-weight:600;font-size:.94rem;letter-spacing:-.012em;color:var(--text)}
.field>label .opt{font-weight:400;color:var(--faint)}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.86em 1.05em;color:var(--text);font-family:var(--fbody);font-size:.98rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--indigo);background:var(--surface-2);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--indigo) 26%,transparent)}
.field textarea{resize:vertical;min-height:126px;line-height:1.6}
.field .help{font-size:.84rem;color:var(--faint);line-height:1.5}

/* Radio chips — a friendlier "what do you need" than a dropdown, and it shows
   every option at once so nobody has to go hunting. */
.chipset{display:flex;flex-wrap:wrap;gap:10px}
.chipset input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chipset label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:.62em 1.05em;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);font-size:.92rem;font-weight:500;color:var(--muted);
  transition:all .18s var(--ease)}
.chipset label:hover{border-color:var(--border-2);color:var(--text);transform:translateY(-1px)}
.chipset input:checked+label{border-color:var(--indigo);color:var(--text);
  background:color-mix(in oklab,var(--indigo) 14%,var(--surface));font-weight:600}
.chipset input:focus-visible+label{box-shadow:0 0 0 3px color-mix(in oklab,var(--indigo) 26%,transparent)}
@media (prefers-reduced-motion:reduce){.chipset label:hover{transform:none}}

.fstatus{margin:0;font-size:.93rem;color:var(--muted);min-height:1.4em}
.fstatus.err{color:var(--err)}
/* Success state replaces the form outright — a confirmation the user can read
   without hunting for a message above the fold. */
.fdone{display:none;padding:30px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);max-width:740px}
.fdone h3{font-family:var(--fdisp);font-size:1.45rem;letter-spacing:-.02em;margin:0 0 10px}
.fdone p{color:var(--muted);margin:0 0 8px;line-height:1.65}
.fdone .nx{margin-top:18px;display:grid;gap:10px}
.fdone .nx div{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--muted)}
.fdone .nx b{color:var(--text);font-weight:600}
form.sent{display:none}
.fdone.on{display:block}

/* Sign-in portal cards */
.portals{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.portals{grid-template-columns:1fr}}
.portal{display:block;padding:24px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);transition:all .2s var(--ease)}
.portal:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-3px)}
.portal .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal b{font-family:var(--fdisp);font-weight:600;font-size:1.12rem;letter-spacing:-.015em}
.portal .st{font-family:var(--fmono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.32em .7em;border-radius:999px;border:1px solid var(--border-2);color:var(--muted);white-space:nowrap}
.portal .st.live{color:var(--amber-text);border-color:var(--amber);background:color-mix(in oklab,var(--amber) 12%,transparent)}
.portal p{color:var(--muted);font-size:.92rem;margin:10px 0 0;line-height:1.6}
.portal .go{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--text)}
.portal[aria-disabled="true"]{opacity:.72;cursor:default}
.portal[aria-disabled="true"]:hover{transform:none;background:var(--surface)}

/* Audience cards are descriptions, not destinations — see the sweep in
   tools/link-sweep.js. Styled identically whether <a> or <div>. */
.aud>div{padding:22px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.aud>div b{display:block;font-family:var(--fdisp);font-weight:500;font-size:1.04rem;letter-spacing:-.01em}
.aud>div span{display:block;color:var(--muted);font-size:.88rem;margin-top:6px}

/* Company "Our story" visual — a real photograph, not a gradient placeholder */
.ai-vis{padding:0}
.ai-vis>img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-filter);
  transition:transform 1s cubic-bezier(.16,.84,.36,1)}
.ai-vis:hover>img{transform:scale(1.035)}
.ai-vis:has(>img)::after{content:"";position:absolute;inset:0;background:var(--pcap-scrim);pointer-events:none}
.ai-vis:has(>img) .label{color:#fff;z-index:2;text-shadow:0 1px 2px rgb(4 3 16/.55)}
@media (prefers-reduced-motion:reduce){.ai-vis:hover>img{transform:none}}

/* perf-pass */
:where(img[width][height]){height:auto}

/* ── photo/video media bands (media-pass) ─────────────────────────────── */
:root{
  --img-filter:saturate(1.02) contrast(1.03);
  --img-tint:rgb(76 29 149/.18);
  --pcap-scrim:linear-gradient(to top,rgb(5 4 18/.95) 0%,rgb(5 4 18/.92) 7%,rgb(5 4 18/.85) 15%,rgb(5 4 18/.74) 23%,rgb(5 4 18/.60) 32%,rgb(6 5 20/.45) 41%,rgb(6 5 20/.31) 50%,rgb(6 5 20/.20) 60%,rgb(6 5 20/.11) 71%,rgb(6 5 20/.05) 83%,rgb(6 5 20/.02) 100%);
}
:root[data-theme="light"]{
  --img-filter:saturate(1.05) brightness(1.04);
  --img-tint:rgb(76 29 149/.10);
  --pcap-scrim:linear-gradient(to top,rgb(8 7 26/.93) 0%,rgb(8 7 26/.90) 7%,rgb(8 7 26/.83) 15%,rgb(8 7 26/.72) 23%,rgb(9 8 28/.58) 32%,rgb(9 8 28/.43) 41%,rgb(9 8 28/.29) 50%,rgb(10 9 30/.18) 60%,rgb(10 9 30/.10) 71%,rgb(10 9 30/.04) 83%,transparent 100%);
}
.pband{padding:34px 0}
.pmedia{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 24px 70px rgb(76 29 149/.16),0 6px 22px rgb(15 12 41/.10)}
.pmedia>img,.pmedia>video{display:block;width:100%;height:auto;filter:var(--img-filter)}
.pmedia.cover{aspect-ratio:16/7}
.pmedia.cover>img,.pmedia.cover>video{position:absolute;inset:0;height:100%;object-fit:cover}
.pmedia::before{content:"";position:absolute;inset:0;background:var(--img-tint);
  mix-blend-mode:multiply;pointer-events:none;z-index:1}
/* The photograph stays SHARP. Legibility comes from a cinematic scrim, not
   from blurring the picture — blur reads as a mistake, a graded scrim reads as
   film. Two layers do the work: a whisper of overall darkening so highlights
   can't fight the type, and a bottom-weighted gradient with many stops so it
   ramps on an eased curve instead of a visible straight band. */
.pmedia>img,.pmedia>video{filter:var(--img-filter);transform:none;
  transition:transform .9s cubic-bezier(.16,.84,.36,1)}
.pmedia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--pcap-scrim)}
.pmedia:hover>img,.pmedia:hover>video{transform:scale(1.022)}
@media (prefers-reduced-motion:reduce){.pmedia:hover>img,.pmedia:hover>video{transform:none}}
.pmedia .pcap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,3.4vw,40px) clamp(22px,3.2vw,44px);
  background:none;color:#fff;letter-spacing:-.005em;
  display:block;text-align:left}
.pmedia .pcap b{display:block;font-family:var(--fdisp);font-weight:600;
  font-size:clamp(1.25rem,2.3vw,1.9rem);line-height:1.16;letter-spacing:-.02em;
  text-shadow:0 1px 2px rgb(4 3 16/.55),0 2px 22px rgb(4 3 16/.5)}
.pmedia .pcap span{display:block;margin-top:6px;opacity:.95;text-shadow:0 1px 2px rgb(4 3 16/.5);
  font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.45;font-weight:500}
.pmedia .pcap em{display:block;margin-top:10px;font-style:normal;opacity:.86;text-shadow:0 1px 2px rgb(4 3 16/.45);
  font-size:clamp(.86rem,1vw,.96rem);line-height:1.6;max-width:62ch;
  border-top:1px solid rgb(255 255 255/.18);padding-top:10px}
@media(max-width:900px){.pmedia.cover{aspect-ratio:4/3}.pband{padding:22px 0}}
@media (prefers-reduced-motion:reduce){.pmedia video{display:none}}

/* ============================================================
   CONVERSATION CAROUSEL (.pcar) — emitted by tools/media-pass.js
   Slides ARE .pmedia elements, so the tint, the graded scrim and the caption
   typography are the same code as every other photo band on the site. The
   carousel then reads as part of the page rather than a widget dropped on it.

   Autoplay is driven by the progress bar's own animation — app.js advances on
   its animationend — so the bar and the slide can never disagree about where
   we are, and every reason to pause (hover, focus, hidden tab, scrolled past,
   reduced motion) collapses into one thing: animation-play-state.

   Everything animated is gated behind .rvjs (set by app.js). With no JS the
   first slide is already .is-active in the HTML and simply stays put, fully
   legible — the same fail-safe-to-visible rule the reveals use.
   ============================================================ */
.pcar{position:relative;border-radius:18px;overflow:hidden;isolation:isolate;
  border:1px solid var(--border);touch-action:pan-y;
  box-shadow:0 24px 70px rgb(76 29 149/.16),0 6px 22px rgb(15 12 41/.10)}
/* A dark floor under the panels. Belt-and-braces: during the 14% where the
   incoming panel is still coming up to full opacity, anything showing through
   is this rather than whatever the page happens to be — so a light theme can
   never flash white down the trailing edge. */
.pcar-stage{position:relative;aspect-ratio:16/9;background:#0b0a1e}
/* Slides stack. visibility (not opacity alone) keeps the three inactive
   captions out of the accessibility tree and out of the way of the pointer. */
.pcar .pcar-slide{position:absolute;inset:0;margin:0;border:0;border-radius:0;
  box-shadow:none;opacity:0;visibility:hidden}
.pcar .pcar-slide.is-active{opacity:1;visibility:visible;z-index:2}
.pcar .pcar-slide.is-leaving{opacity:0;visibility:visible;z-index:1}
/* Travel, not just a crossfade: a dissolve tells you the slide changed but not
   which way you went. The incoming panel slides in over the outgoing one,
   which drifts a shorter distance behind it — parallax, so the movement reads
   as depth rather than as two things sliding in lockstep.

   The incoming panel goes opaque almost immediately (14%) and the outgoing one
   holds full opacity until 80%, so the new photograph slides OVER the old one
   rather than dissolving through it. That is what guarantees full coverage:
   the outgoing covers everything left of the incoming's edge, the incoming
   covers everything right of it, and no strip of bare frame is ever exposed.
   Measured first with a crossfade in the middle, which left a ~40px translucent
   band down the trailing edge. It also simply reads as more decisively
   directional — you see a panel arrive, not two pictures blending.

   data-dir is set by app.js, so the first paint — which has no direction yet —
   stays perfectly still. */
.rvjs .pcar[data-dir] .pcar-slide.is-active{
  animation:pcarSlideIn .82s cubic-bezier(.22,.72,.24,1) both}
.rvjs .pcar[data-dir] .pcar-slide.is-leaving{
  animation:pcarSlideOut .82s cubic-bezier(.22,.72,.24,1) both}
.rvjs .pcar[data-dir="prev"] .pcar-slide.is-active{animation-name:pcarSlideInBack}
.rvjs .pcar[data-dir="prev"] .pcar-slide.is-leaving{animation-name:pcarSlideOutBack}
@keyframes pcarSlideIn{0%{opacity:0;transform:translateX(7%)}14%{opacity:1}
  100%{opacity:1;transform:none}}
@keyframes pcarSlideOut{0%{opacity:1;transform:none}80%{opacity:1}
  100%{opacity:0;transform:translateX(-3.5%)}}
@keyframes pcarSlideInBack{0%{opacity:0;transform:translateX(-7%)}14%{opacity:1}
  100%{opacity:1;transform:none}}
@keyframes pcarSlideOutBack{0%{opacity:1;transform:none}80%{opacity:1}
  100%{opacity:0;transform:translateX(3.5%)}}
.pcar .pcar-slide>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:none}
.pcar .pcar-slide:hover>img{transform:none}
/* A slow push that lands exactly as the slide hands over: what keeps a still
   photograph from reading as a stalled page. */
.rvjs .pcar .pcar-slide.is-active>img{
  animation:pcarKB var(--int,7200ms) cubic-bezier(.25,.5,.4,1) forwards}
@keyframes pcarKB{from{transform:scale(1.001)}to{transform:scale(1.07)}}
/* Caption lines arrive staggered. --o carries each line's resting opacity so
   the keyframe cannot flatten the type hierarchy on the way in. */
.rvjs .pcar .pcap>*{opacity:0}
.rvjs .pcar .pcar-slide.is-active .pcap>*{animation:pcarIn .8s cubic-bezier(.16,.84,.36,1) both}
.rvjs .pcar .pcar-slide.is-active .pcap>b{animation-delay:.12s}
.rvjs .pcar .pcar-slide.is-active .pcap>span{animation-delay:.22s;--o:.95}
.rvjs .pcar .pcar-slide.is-active .pcap>em{animation-delay:.32s;--o:.86}
@keyframes pcarIn{from{opacity:0;transform:translateY(15px)}to{opacity:var(--o,1);transform:none}}
/* Progress rail, top-right: it never collides with the bottom-left caption,
   and segments (rather than dots) show how long the slide has left. */
/* The rail sits on a glass pill rather than bare on the photograph: slide 3 is
   a wall of bright office window, and white-on-white made the progress
   indicator vanish exactly where a viewer looks for it. */
.pcar-rail{position:absolute;z-index:3;top:clamp(13px,1.6vw,20px);
  right:clamp(13px,1.6vw,22px);display:flex;align-items:center;gap:7px;
  padding:2px 11px;border-radius:999px;border:1px solid rgb(255 255 255/.16);
  background:rgb(8 7 24/.32);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.pcar-tick{width:34px;padding:9px 0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.pcar-tick>i{display:block;height:3px;border-radius:3px;overflow:hidden;
  background:rgb(255 255 255/.24);box-shadow:0 1px 3px rgb(4 3 16/.4);
  transition:background .25s ease}
.pcar-tick>i>span{display:block;height:100%;background:#fff;border-radius:3px;
  transform:scaleX(0);transform-origin:left center}
.pcar-tick.is-active>i>span{transform:scaleX(1)}
.rvjs .pcar-tick.is-active>i>span{animation:pcarFill var(--int,7200ms) linear forwards}
@keyframes pcarFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pcar-tick:hover>i{background:rgb(255 255 255/.55)}
.pcar-tick:focus-visible>i{outline:2px solid #fff;outline-offset:4px}
/* Centred with margin, not translateY(-50%), so transform is left free for the
   press and hover states below. */
.pcar-arw{position:absolute;z-index:3;top:40%;margin-top:-22px;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:#fff;border:1px solid rgb(255 255 255/.30);
  background:rgb(10 9 30/.32);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);opacity:.5;-webkit-tap-highlight-color:transparent;
  transform:scale(1);
  transition:opacity .3s ease,background .22s ease,border-color .22s ease,
             color .22s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.pcar-arw.prev{left:clamp(12px,1.6vw,20px)}
.pcar-arw.next{right:clamp(12px,1.6vw,20px)}
.pcar:hover .pcar-arw,.pcar:focus-within .pcar-arw{opacity:1}
/* Hover leans the way the slide is about to travel. */
.pcar-arw:hover{background:rgb(10 9 30/.6);border-color:rgb(255 255 255/.62)}
.pcar-arw.prev:hover{transform:scale(1.09) translateX(-2px)}
.pcar-arw.next:hover{transform:scale(1.09) translateX(2px)}
.pcar-arw:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:3px}
/* Engaged: the button inverts and presses in. :active alone is gone before the
   eye registers it — and never fires at all for keyboard or swipe — so app.js
   also holds .is-hit for a beat, which is what makes those feel answered.
   Listed after the :hover rules because they carry equal specificity.

   The held state is a keyframe animation, not a transition into the class. A
   transition only lands correctly if the class is still present when it
   finishes, and four photographs are moving at that exact moment: measured,
   the invert arrived 260ms late and was still showing after .is-hit had been
   removed. An animation owns its whole arc, so a busy frame can delay it but
   cannot desynchronise it from the press that caused it. */
.pcar .pcar-arw:active{opacity:1;background:#fff;color:#0a0920;
  border-color:#fff;transform:scale(.9);transition-duration:.09s}
.pcar-arw.is-hit{opacity:1;animation:pcarPress .44s cubic-bezier(.3,.7,.4,1)}
@keyframes pcarPress{
  0%{transform:scale(1);background:rgb(10 9 30/.32);color:#fff;border-color:rgb(255 255 255/.3)}
  20%{transform:scale(.87);background:#fff;color:#0a0920;border-color:#fff}
  58%{transform:scale(.95);background:#fff;color:#0a0920;border-color:#fff}
  100%{transform:scale(1);background:rgb(10 9 30/.32);color:#fff;border-color:rgb(255 255 255/.3)}}
.pcar-arw.is-hit::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgb(255 255 255/.6);pointer-events:none;
  animation:pcarRing .52s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pcarRing{from{opacity:.75;transform:scale(.82)}to{opacity:0;transform:scale(1.32)}}
/* Touch has no hover to reveal them, so they stay visible there. */
@media (hover:none){.pcar-arw{opacity:.9}}
@media (hover:hover){
  .pcar:hover .pcar-slide.is-active>img,
  .pcar:hover .pcar-tick.is-active>i>span{animation-play-state:paused}
}
/* Keyboard focus pauses; a mouse click must not. Buttons keep focus after a
   click, so pausing on :focus-within would silently kill autoplay forever the
   first time anyone tapped a dot. :focus-visible is exactly the distinction. */
.pcar:has(:focus-visible) .pcar-slide.is-active>img,
.pcar:has(:focus-visible) .pcar-tick.is-active>i>span{animation-play-state:paused}
.pcar.is-paused .pcar-slide.is-active>img,
.pcar.is-paused .pcar-tick.is-active>i>span{animation-play-state:paused}
@media(max-width:900px){.pcar-stage{aspect-ratio:4/3}
  .pcar-arw{width:38px;height:38px;margin-top:-19px}}
@media(max-width:600px){.pcar-stage{aspect-ratio:1/1}.pcar-tick{width:26px}.pcar-rail{gap:6px}}
/* No motion: no push, no stagger, and — because autoplay rides on the progress
   animation — no autoplay either. The carousel becomes a manual gallery. */
@media (prefers-reduced-motion:reduce){
  .pcar .pcar-slide{transition:none}
  .rvjs .pcar[data-dir] .pcar-slide.is-active,
  .rvjs .pcar[data-dir] .pcar-slide.is-leaving,
  .rvjs .pcar .pcar-slide.is-active>img,
  .rvjs .pcar .pcar-slide.is-active .pcap>*,
  .pcar-arw.is-hit::after,
  .rvjs .pcar-tick.is-active>i>span{animation:none}
  /* The press still inverts the button — that is feedback, not motion. It just
     holds flat instead of springing, so keyboard and swipe stay answered. */
  .pcar-arw.is-hit{animation:none;background:#fff;color:#0a0920;border-color:#fff}
  .pcar .pcar-arw:active{transform:none}
  .pcar-arw.prev:hover,.pcar-arw.next:hover{transform:none}
  .rvjs .pcar .pcap>*{opacity:1}
  .rvjs .pcar .pcap>span{opacity:.95}
  .rvjs .pcar .pcap>em{opacity:.86}
  .rvjs .pcar-tick.is-active>i>span{transform:scaleX(1)}
}

/* ============================================================
   "YOU ARE HERE" — active navigation state
   Baked into the HTML by tools/nav-active.js (.is-active + aria-current),
   never derived at runtime, so it paints with the first frame.

   Language: a tinted aurora pill + a gradient hairline drawn from --grad
   under the label; inside the mega-menu, the same gradient becomes a left
   accent bar on a tinted row. Token-driven, so light theme swaps the
   light-alpha tint for a dark-alpha one plus the light-only colored glow.
   Active and hover stay distinguishable: hover is neutral surface, active
   is chromatic + underlined.
   ============================================================ */
.nav>a,.nav-trigger{transition:color .16s,background .16s,box-shadow .22s var(--ease)}

/* ---------- top level: Products / Industries / Services / … ---------- */
.nav>a.is-active,.nav-trigger.is-active{
  position:relative;color:var(--text);font-weight:600;
  background:var(--nav-on-bg);
  box-shadow:inset 0 0 0 1px var(--nav-on-ring),var(--nav-on-glow)}
.nav>a.is-active::after,.nav-trigger.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:999px;
  background:var(--grad);transform-origin:50% 50%;animation:nav-on .5s var(--ease) both}
/* the trigger carries a chevron — underline the word, not the chevron */
.nav-trigger.is-active::after{right:30px}
@keyframes nav-on{from{transform:scaleX(.14);opacity:0}to{transform:scaleX(1);opacity:1}}

/* hover on the page you are already on: same identity, a touch brighter.
   Specificity here has to beat .nav>a:hover and .nav-mega:hover .nav-trigger. */
.nav>a.is-active:hover,
.nav-mega:hover .nav-trigger.is-active,
.nav-mega:focus-within .nav-trigger.is-active{
  color:var(--text);background:var(--nav-on-bg-h);
  box-shadow:inset 0 0 0 1px var(--nav-on-ring),var(--nav-on-glow)}

/* ---------- inside the mega-menu: the product you are viewing ---------- */
.mega-item{transition:background .14s,box-shadow .18s var(--ease),transform .14s}
.mega-item.is-active{position:relative;overflow:hidden;background:var(--mega-on-bg);
  box-shadow:inset 0 0 0 1px var(--mega-on-ring)}
/* flush accent bar, mitred by the row's own radius; the gradient runs vertically
   so a 3px column still reads indigo -> violet -> teal */
.mega-item.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--indigo),var(--violet) 46%,var(--teal))}
.mega-item.is-active span{color:var(--text);opacity:.78}
.mega-item.is-active:hover{background:var(--mega-on-bg-h)}

/* "Explore all products" is the nav home for solutions.html */
.mega-all.is-active{position:relative;color:var(--text)}
.mega-all.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  border-radius:999px;background:var(--grad);transform-origin:0 50%;animation:nav-on .5s var(--ease) both}

/* ---------- mobile sheet ---------- */
.sheet nav a.is-active{position:relative;color:var(--text);font-weight:600}
.sheet nav a.is-active::before{content:"";position:absolute;left:-13px;top:12px;bottom:13px;width:4px;
  border-radius:999px;background:linear-gradient(180deg,var(--indigo),var(--violet) 46%,var(--teal))}

@media (prefers-reduced-motion:reduce){
  .nav>a.is-active::after,.nav-trigger.is-active::after,.mega-all.is-active::after{animation:none}
}

/* ============================================================
   FOCUS PASS — the flagship stack and Labs
   The site promotes one product (KASA) and the engine underneath
   it (PolyText). These components exist to show that as a
   HIERARCHY rather than two equal cards: the product sits on top,
   a hairline joint says "runs on", and the engine sits beneath it
   on a foundation edge, styled as infrastructure (mono spec rows,
   deeper surface) instead of another glossy product tile.
   Everything here reuses the existing tokens — no second design
   system, no new fonts, no new hues.
   ============================================================ */

/* ---------- the hero headline carries a full sentence now ---------- */
.hero h1.h1-lead{font-size:clamp(2.3rem,4.7vw,3.75rem);max-width:19ch}
.hero .lead.lead-wide{max-width:54ch}

/* ---------- flagship stack ---------- */
.stack{margin-top:6px}

/* the product, on top */
.stack-app{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:radial-gradient(78% 74% at 82% 12%,oklch(0.63 0.17 270/.26),transparent 62%),
             radial-gradient(66% 70% at 12% 92%,oklch(0.80 0.12 195/.18),transparent 62%),var(--surface);
  backdrop-filter:blur(12px)}
.sa-body{padding:42px 44px;display:flex;flex-direction:column;min-width:0}
.sa-live{display:inline-flex;align-items:center;gap:9px;width:max-content;
  font-family:var(--fmono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.sa-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 oklch(0.81 0.135 76/.6);animation:ccpulse 2.4s infinite}
.sa-body h3{font-family:var(--fdisp);font-size:clamp(2rem,3.2vw,2.6rem);letter-spacing:-.025em;margin-top:14px}
.sa-body>p{color:var(--muted);margin-top:14px;font-size:1.08rem;line-height:1.6;max-width:44ch}
.sa-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.sa-list li{color:var(--muted);font-size:.96rem;padding-left:24px;position:relative;line-height:1.5}
.sa-list li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.sa-list b{color:var(--text);font-weight:600}
.sa-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.sa-viz{padding:32px 34px;display:flex;flex-direction:column;gap:14px;justify-content:center;
  border-left:1px solid var(--border);min-width:0;
  background:radial-gradient(120% 110% at 84% 0%,oklch(0.55 0.17 285/.3),transparent 60%),
             linear-gradient(165deg,oklch(0.30 0.06 282/.5),transparent 72%)}

/* the joint: a hairline that says the two are stacked, not adjacent */
.stack-joint{position:relative;height:64px;display:grid;place-items:center}
.stack-joint::before{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--border-2),oklch(0.80 0.12 195/.55))}
.stack-joint span{position:relative;background:var(--bg);border:1px solid var(--border);
  border-radius:999px;padding:6px 15px;font-family:var(--fmono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* the engine, underneath — infrastructure, not a product tile */
.stack-engine{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:46px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r-lg);padding:42px 44px;
  background:var(--bg-2);position:relative;overflow:hidden}
.stack-engine::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.se-lbl{font-family:var(--fmono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.stack-engine h3{font-family:var(--fdisp);font-size:clamp(1.7rem,2.7vw,2.2rem);letter-spacing:-.025em;margin-top:13px}
.stack-engine>div>p{color:var(--muted);margin-top:14px;font-size:1.02rem;line-height:1.62;max-width:46ch}
.stack-engine>div>p+p{margin-top:12px}
.se-more{display:inline-flex;align-items:center;gap:7px;margin-top:24px;font-weight:600;font-size:.94rem;
  color:var(--text);border-bottom:1px solid var(--border-2);padding-bottom:3px;transition:gap .2s,border-color .2s}
.se-more:hover{gap:12px;border-color:var(--amber)}
.se-specs{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;margin:0}
.se-specs>div{background:var(--bg);padding:15px 19px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.se-specs dt{font-family:var(--fmono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);flex:0 0 104px}
.se-specs dd{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5;flex:1;min-width:160px}
.se-specs dd b{color:var(--text);font-weight:600}

@media (max-width:940px){
  .stack-app,.stack-engine{grid-template-columns:1fr}
  .stack-engine{gap:32px}
  .sa-viz{border-left:0;border-top:1px solid var(--border)}
  .sa-body{padding:34px 30px}
  .stack-engine{padding:34px 30px}
}
@media (max-width:560px){
  .sa-body,.stack-engine{padding:28px 22px}
  .sa-viz{padding:24px 22px}
  .se-specs dt{flex:0 0 100%}
  .se-specs dd{min-width:0}
}

/* ---------- Labs ---------- */
.labnote{border-left:2px solid var(--amber);padding:4px 0 4px 26px;max-width:68ch;margin-top:8px}
.labnote p{color:var(--muted);font-size:1.06rem;line-height:1.7}
.labnote p+p{margin-top:15px}
.labnote b{color:var(--text);font-weight:600}
.labnote .sig{margin-top:18px;font-family:var(--fmono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

.labgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ── Count-aware card grids ──────────────────────────────────────────────────
   `.solgrid` and `.labgrid` are registry-driven: they render only the products
   whose status is `live`, so their item count changes every time something
   launches. A hard three-column track then leaves visible holes — with two live
   products the right third of the section is simply empty, which reads as a
   broken page rather than a short list, and it gets worse the wider the screen.

   Two rules, both keyed off what the grid actually received:
     • exactly two cards  → two equal columns, so the row is full
     • a last row one cell short → let the final card span the gap
   Nothing here hardcodes a product count, so launching the next product needs
   no CSS change. */
.labgrid:has(> :nth-child(2):last-child),
.solgrid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.labgrid:has(> :first-child:last-child),
.solgrid:has(> :first-child:last-child){grid-template-columns:minmax(0,26rem)}
/* …and let a final card span a one-cell gap. `:not(:nth-child(2))` matters:
   without it the two-card grid above matches 3n+2 as well (n=0), so card two
   spanned both of its columns and the pair stacked into a broken L. */
.labgrid > :last-child:nth-child(3n+2):not(:nth-child(2)),
.solgrid > :last-child:nth-child(3n+2):not(:nth-child(2)){grid-column:span 2}
.lab{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  padding:24px;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),border-color .2s,background .2s,box-shadow .26s}
.lab:hover{transform:translateY(-3px);border-color:var(--border-2);background:var(--surface-2);
  box-shadow:0 18px 46px -28px oklch(0.55 0.18 285/.6)}
.lab h3{font-family:var(--fdisp);font-size:1.08rem;letter-spacing:-.015em}
.lab .who{font-family:var(--fmono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-top:7px}
.lab p{color:var(--muted);font-size:.92rem;margin-top:11px;flex:1;line-height:1.55}
.lab .ar{margin-top:16px;color:var(--faint);font-weight:600;font-size:.85rem;
  display:inline-flex;gap:6px;transition:gap .2s,color .2s}
.lab:hover .ar{color:var(--text);gap:11px}
.labtail{margin-top:34px;color:var(--faint);font-size:.94rem;max-width:62ch}
.labtail a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.labtail a:hover{color:var(--text)}
@media (max-width:940px){.labgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.labgrid{grid-template-columns:1fr}.labnote{padding-left:20px}}
@media (prefers-reduced-motion:reduce){
  .lab:hover{transform:none}
  .sa-live::before{animation:none}
}

/* ---------- light theme ---------- */
[data-theme="light"] .stack-app,[data-theme="light"] .lab{box-shadow:var(--glow-card)}
[data-theme="light"] .stack-app{backdrop-filter:blur(14px) saturate(1.35)}
[data-theme="light"] .lab:hover{box-shadow:var(--glow-card-hover)}
[data-theme="light"] .sa-live{color:var(--amber-text)}
[data-theme="light"] .sa-live::before{background:oklch(0.72 0.145 72)}
[data-theme="light"] .sa-viz{background:radial-gradient(120% 110% at 84% 0%,oklch(0.62 0.16 285/.14),transparent 62%),
  linear-gradient(165deg,oklch(0.72 0.09 282/.16),transparent 74%)}
[data-theme="light"] .stack-engine{background:var(--bg-2);box-shadow:var(--glow-card)}
[data-theme="light"] .stack-joint span{background:var(--bg)}
[data-theme="light"] .labnote{border-left-color:oklch(0.72 0.145 72)}
/* Labs and other interior pages lead with an <h1> in the standard section head */
.sec-head h1{font-size:clamp(2.1rem,3.9vw,3.25rem);margin-top:14px;letter-spacing:-.028em}

/* ---------- prior explorations inside a product grid ----------
   Audience and industry pages lead with KASA and mark everything else as Labs
   work. The tag names the status; the card is held a step back in contrast so
   the eye lands on KASA first, and comes fully forward on hover — this is real
   work, just not what we are pursuing.
   Deliberately appended at the end of the file, outside every @layer: rules
   written inside a layer get tree-shaken out of this build. */
.labs-tag{align-self:flex-start;margin-top:9px;font-family:var(--fmono);font-size:.55rem;
  line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--border);border-radius:999px;padding:5px 9px 4px;background:var(--surface);
  transition:color .2s,border-color .2s,background .2s}
.cell[data-labs]{opacity:.7;transition:opacity .22s var(--ease),transform .22s var(--ease),
  border-color .22s,background .22s,box-shadow .28s}
.cell[data-labs] .who{color:var(--faint)}
.cell[data-labs]:hover,.cell[data-labs]:focus-visible{opacity:1}
.cell[data-labs]:hover .labs-tag,.cell[data-labs]:focus-visible .labs-tag{
  color:var(--muted);border-color:var(--border-2);background:var(--surface-2)}
[data-theme="light"] .cell[data-labs]{opacity:.78}
[data-theme="light"] .cell[data-labs] .who{color:var(--faint)}
@media (prefers-reduced-motion:reduce){.cell[data-labs]{transition:none}}