/* TrustLayerr — shared stylesheet.
   Extracted from index.html so every page links one cacheable file
   instead of carrying its own copy of ~620 lines. */

/* ─────────────────────────────  TOKENS  ───────────────────────────── */
:root{
  --navy:#0F172A;
  --blue:#0052FF;
  --blue-deep:#003EC7;
  --blue-soft:#DDE1FF;
  --orange:#F59E0B;
  --slate:#64748B;
  --ice:#F8FAFC;
  --line:#E2E8F0;
  --white:#FFFFFF;

  --shadow-1:0 1px 2px rgba(15,23,42,.04);
  --shadow-2:0 10px 30px rgba(0,82,255,.08);
  --shadow-3:0 24px 60px -12px rgba(0,82,255,.18);

  --r:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem;
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ice);
  color:var(--navy);
  font-family:Inter,system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ─────────────────────────────  TYPE  ───────────────────────────── */
h1,h2,h3,h4,.display{font-family:'Hanken Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
}
.eyebrow.muted{color:var(--slate)}
.h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;text-wrap:balance}
.h2{font-size:clamp(2rem,4.4vw,3.25rem);font-weight:800}
.h3{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--slate);line-height:1.65}
.muted{color:var(--slate)}

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{position:relative}
.sec{padding:clamp(72px,10vw,130px) 0}
.rule{height:1px;background:var(--line);border:0}

/* ─────────────────────────────  NAV  ───────────────────────────── */
header{
  position:sticky;top:0;z-index:100;
  background:transparent;
  border:0;
}
/* The bar itself never paints. This scrim is the only thing that lifts the nav
   off busy content — and its tint, blur and mask all fade to nothing before the
   bottom edge, so there is no line where the header stops and the page begins. */
header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  background:linear-gradient(to bottom,
    rgba(248,250,252,.58) 0%,
    rgba(248,250,252,.30) 52%,
    rgba(248,250,252,0)   100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.42) 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 42%,rgba(0,0,0,.42) 76%,transparent 100%);
  opacity:0;transition:opacity .45s var(--ease),background .45s var(--ease);
}
header.stuck::before{opacity:1}
.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}

/* over the navy Eera block and the blue CTA the same nav flips to light ink */
header.on-dark::before{
  background:linear-gradient(to bottom,
    rgba(15,23,42,.52) 0%,
    rgba(15,23,42,.26) 52%,
    rgba(15,23,42,0)   100%);
}
header.on-dark .logo{color:#fff}
header.on-dark .nav-links a{color:rgba(255,255,255,.72)}
header.on-dark .nav-links a:hover{color:#fff}
header.on-dark .nav-links a::after{background:#fff}
header.on-dark .btn-primary{background:#fff;color:var(--blue);box-shadow:0 6px 20px rgba(0,0,0,.18)}
header.on-dark .btn-primary:hover{background:#fff;box-shadow:0 14px 32px rgba(0,0,0,.26)}
header.on-dark .burger span{background:#fff}
.logo{transition:color .35s var(--ease)}
.nav-links a,.nav .btn{transition:color .35s var(--ease),background .35s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.logo{display:flex;align-items:center;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em}
.nav-links{display:none;gap:28px;align-items:center}
.nav-links a{font-size:14.5px;color:var(--slate);position:relative;transition:color .2s}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--navy)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
@media(min-width:900px){.nav-links{display:flex}}

/* ─────────────  NAV · PHONE  ───────────── */
/* Below 900px the links used to simply vanish, leaving no way to reach a
   section. The burger reveals them in a panel that reuses the header's own
   glass so the sheet reads as the nav growing, not a separate overlay. */
.burger{
  display:grid;place-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;flex:none;   /* 44px = tap target */
  border-radius:var(--r);-webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .35s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.burger{display:none}}

.nav-sheet{
  position:absolute;left:0;right:0;top:100%;z-index:0;
  padding:6px 24px calc(18px + env(safe-area-inset-bottom));
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  background:rgba(248,250,252,.82);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
header.open .nav-sheet{opacity:1;visibility:visible;transform:none}
header.on-dark .nav-sheet{background:rgba(15,23,42,.88);border-bottom-color:rgba(255,255,255,.1)}
.nav-sheet a{
  padding:14px 2px;font-size:16px;font-weight:500;color:var(--navy);
  border-bottom:1px solid var(--line);
}
.nav-sheet a:last-of-type{border-bottom:0}
header.on-dark .nav-sheet a{color:#fff;border-bottom-color:rgba(255,255,255,.1)}
@media(min-width:900px){.nav-sheet{display:none}}

@media(max-width:620px){
  .wrap{padding:0 18px}
  .nav{height:58px;gap:12px}
  .nav-sheet{padding-left:18px;padding-right:18px}
  .logo{font-size:17.5px}
  /* the CTA has to survive next to a 44px burger on a 320px screen */
  .nav .btn-primary{padding:9px 14px;font-size:13.5px}
  .nav .btn-primary .arrow{display:none}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:var(--r);font-size:14.5px;font-weight:600;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(0,82,255,.22)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,82,255,.32)}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-white{background:#fff;color:var(--blue);box-shadow:0 10px 30px rgba(0,0,0,.14)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.2)}
.arrow{font-family:'JetBrains Mono',monospace;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ─────────────────────────────  REVEAL  ───────────────────────────── */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.js .rv-l{opacity:0;transform:translateX(-26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rv-r{opacity:0;transform:translateX(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.js .rv-s{opacity:0;transform:scale(.96);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv-s.in{opacity:1;transform:none}
/* Once the layout stops having side margins these blocks run edge to edge, so
   a 26px sideways start offset hangs past the viewport and the page scrolls
   horizontally until the element reveals. Same reveal, vertical axis instead —
   fixes it without overflow-x:hidden, which would break the sticky hero. */
@media(max-width:1280px){
  .js .rv-l,.js .rv-r{transform:translateY(22px)}
}

/* ══════════════  CINEMATIC SCROLL HERO (frame sequence)  ══════════════ */
.cine{position:relative;height:520vh;background:var(--ice)}
.cine-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
@supports(height:100svh){.cine-stage{height:100svh}}
/* object-fit does the cover crop the canvas used to compute by hand.
   object-position keeps the film's own wordmark clear of the sticky header
   on tall screens, where a centred crop would tuck it underneath. */
.cine-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  object-fit:cover;object-position:50% 46%;background:var(--ice);pointer-events:none
}
@media(max-width:900px) and (orientation:portrait){
  .cine-video{object-position:50% 38%}
}
/* The HQ tier sits directly on top of the light one and fades in once it is
   buffered and seeked to the same playhead, so the swap has nothing to notice. */
.cine-video-hq{opacity:0;transition:opacity .7s var(--ease)}
.cine-video-hq.on{opacity:1}
@media(prefers-reduced-motion:reduce){.cine-video-hq{transition:none}}

/* colour-grade the chrome render into the TrustLayerr palette */
.cine-grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:
    radial-gradient(78% 62% at 20% 28%, rgba(0,82,255,.62), transparent 62%),
    radial-gradient(72% 62% at 86% 80%, rgba(245,158,11,.30), transparent 64%);
}
.cine-tone{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,0) 40%);
}
/* melt every frame edge into the page background */
.cine-veil{
  position:absolute;inset:-2px;z-index:2;pointer-events:none;
  background:
    radial-gradient(124% 92% at 50% 46%, transparent 38%, rgba(248,250,252,.5) 76%, var(--ice) 100%),
    linear-gradient(180deg, var(--ice) 0%, rgba(248,250,252,0) 9%),
    linear-gradient(0deg,   var(--ice) 0%, rgba(248,250,252,0) 24%),
    linear-gradient(90deg,  var(--ice) 0%, rgba(248,250,252,0) 13%),
    linear-gradient(270deg, var(--ice) 0%, rgba(248,250,252,0) 11%);
}

/* staged copy */
.cine-copy{position:absolute;inset:0;z-index:3}
.stage{
  position:absolute;inset:0;display:flex;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .85s var(--ease),visibility 0s .85s;
}
.stage.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .65s var(--ease),transform .95s var(--ease),visibility 0s}
.stage>.wrap{width:100%;position:relative;z-index:1}
.stage-l{align-items:center;
  background:linear-gradient(100deg, rgba(248,250,252,.95) 0%, rgba(248,250,252,.74) 32%, rgba(248,250,252,0) 60%)}
.stage-b{align-items:flex-end;padding-bottom:clamp(46px,9vh,96px);
  background:linear-gradient(0deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.62) 26%, rgba(248,250,252,0) 54%)}
.stage-b>.wrap{text-align:center}
.stage-b .hero-cta{justify-content:center}
.stage-b .hero-meta{justify-content:center;border-top-color:rgba(226,232,240,.9)}
.stage .h1,.stage .h2{text-shadow:0 1px 0 rgba(255,255,255,.55)}
.stage-copy{max-width:min(56ch,52vw)}
/* plain-language subject line under the H1 — kept to one line so it never
   pushes the CTAs off a short phone screen */
.hero-sub{
  font-size:clamp(14.5px,2.1vw,18px);font-weight:500;line-height:1.5;
  color:var(--slate);margin:0;max-width:44ch;letter-spacing:0
}
@media(max-width:1000px){.stage-copy{max-width:100%}}

.layer-row{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.layer-tag{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid var(--line);backdrop-filter:blur(8px);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
}
.layer-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.layer-tag.b::before{background:var(--orange)}
.layer-tag.c::before{background:#10B981}

/* ══════════════  FAQ  ══════════════ */
.faq{background:var(--white)}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:840px}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ice);
  transition:border-color .25s var(--ease),background .25s var(--ease)
}
.faq-item[open]{background:var(--white);border-color:rgba(0,82,255,.28);box-shadow:var(--shadow-1)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:clamp(15px,1.7vw,17.5px);
  color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:16px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:500;
  color:var(--blue);transition:transform .25s var(--ease);line-height:1
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--r-md)}
.faq-item p{margin:0;padding:0 22px 20px;color:var(--slate);font-size:15.5px;line-height:1.68;max-width:68ch}
.faq-item p strong{color:var(--navy);font-weight:600}

/* scroll cue */
.cine-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
  transition:opacity .5s var(--ease);
}
.cine-cue i{width:1px;height:36px;background:linear-gradient(180deg,var(--blue),transparent);animation:cueDrop 2s var(--ease) infinite}
@keyframes cueDrop{0%{transform:scaleY(.15);transform-origin:top;opacity:0}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.cine.moved .cine-cue{opacity:0}

/* loader */
.cine-load{
  position:absolute;inset:0;z-index:6;background:var(--ice);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .8s var(--ease);
}
.cine-load.done{opacity:0;pointer-events:none}
.cine-load p{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.cine-load .bar{width:min(260px,46vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.cine-load .bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .3s linear}

@media(max-width:1000px){
  .cine{height:440vh}
  .stage-l{align-items:flex-end;padding-bottom:clamp(64px,13vh,120px);
    background:linear-gradient(0deg, rgba(248,250,252,.97) 0%, rgba(248,250,252,.72) 36%, rgba(248,250,252,0) 64%)}
}

/* reduced motion / no-JS: film becomes a still backdrop, copy stacks normally */
.cine.still{height:auto}
.cine.still .cine-stage{position:relative;height:auto}
.cine.still .cine-copy{position:relative;inset:auto;display:flex;flex-direction:column;
  gap:clamp(40px,6vw,64px);padding:clamp(80px,10vw,120px) 0}
.cine.still .stage{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
  background:none;padding:0;display:block}
.cine.still .cine-cue{display:none}
.cine.still .cine-veil{background:linear-gradient(180deg,rgba(248,250,252,.9),rgba(248,250,252,.82))}

/* ══════════════  HANDOFF (render → real product)  ══════════════ */
.handoff{padding:clamp(64px,9vw,110px) 0 clamp(72px,9vw,120px);overflow:hidden;position:relative}
.handoff-head{max-width:640px;margin:0 auto clamp(40px,6vw,64px);text-align:center}
.handoff-dash{max-width:940px;margin:0 auto;position:relative}

/* ─────────────────────────────  HERO  ───────────────────────────── */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(64px,8vw,110px);overflow:hidden}
.hero-grid{display:grid;gap:56px;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:64px}}
.hero h1 .strike,.stage h1 .strike{position:relative;white-space:nowrap;display:inline-block}
.hero h1 .strike::after,.stage h1 .strike::after{
  content:"";position:absolute;left:-2px;top:52%;height:6px;width:calc(100% + 4px);
  background:var(--orange);border-radius:4px;transform:scaleX(0);transform-origin:left;
  animation:strike 1s var(--ease) 1.1s forwards;
}
@keyframes strike{to{transform:scaleX(1)}}
.hero h1 em{font-style:normal;color:var(--blue)}

.rotator{
  display:inline-block;position:relative;vertical-align:bottom;
  height:1.65em;min-width:9.2ch;overflow:hidden;text-align:left;
}
.rotator span{
  position:absolute;left:0;top:0;width:100%;line-height:1.65;
  color:var(--blue);font-weight:600;white-space:nowrap;
  opacity:0;transform:translateY(100%);
  animation:rot 12s cubic-bezier(.5,0,.2,1) infinite;
}
.rotator span:nth-child(1){animation-delay:0s}
.rotator span:nth-child(2){animation-delay:3s}
.rotator span:nth-child(3){animation-delay:6s}
.rotator span:nth-child(4){animation-delay:9s}
@keyframes rot{
  0%{opacity:0;transform:translateY(100%)}
  3%,22%{opacity:1;transform:translateY(0)}
  25%,100%{opacity:0;transform:translateY(-100%)}
}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.hero-meta div{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.hero-meta b{color:var(--navy);font-weight:600}

.glow{
  position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;
}
.glow-a{width:520px;height:520px;background:rgba(0,82,255,.13);top:-160px;right:-140px;animation:float 14s ease-in-out infinite}
.glow-b{width:380px;height:380px;background:rgba(245,158,11,.10);bottom:-140px;left:-120px;animation:float 18s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,26px)}}
.hero>.wrap,.handoff>.wrap{position:relative;z-index:1}

/* dashboard mock */
.dash{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);padding:20px;position:relative;
  animation:hover 7s ease-in-out infinite;
}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i:first-child{background:#FCA5A5}.dots i:nth-child(2){background:#FDE68A}.dots i:nth-child(3){background:#A7F3D0}
.dash-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--slate);text-transform:uppercase}
.live{display:inline-flex;align-items:center;gap:6px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#10B981;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(16,185,129,0)}}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.kpi{background:var(--ice);border-radius:var(--r-md);padding:12px 14px}
.kpi small{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:5px}
.kpi b{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(17px,2.2vw,22px);font-weight:800;letter-spacing:-.02em;display:block}
.kpi .up{font-size:11px;color:#059669;font-weight:600}

.chart{display:flex;align-items:flex-end;gap:7px;height:110px;padding:14px 0 0}
.chart i{
  flex:1;background:linear-gradient(180deg,var(--blue),#5B8CFF);border-radius:4px 4px 2px 2px;
  height:0;transition:height 1.1s var(--ease);transition-delay:calc(var(--i)*70ms);
}
.chart i.tall{background:linear-gradient(180deg,var(--orange),#FBBF24)}
.tickets{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;display:grid;gap:8px}
.ticket{
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--slate);
  background:var(--ice);border-radius:var(--r);padding:9px 12px;
  animation:slideIn .6s var(--ease) both;
}
.ticket:nth-child(1){animation-delay:1.2s}.ticket:nth-child(2){animation-delay:1.45s}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}}
.ticket b{color:var(--navy);font-weight:600}
.ticket .pill{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:99px;background:rgba(0,82,255,.1);color:var(--blue)}
.ticket .pill.green{background:rgba(16,185,129,.12);color:#059669}

/* floating chip */
.chip-float{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:10px 14px;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:8px;animation:hover 6s ease-in-out infinite;
}
.chip-float.one{bottom:-22px;left:-18px;animation-delay:.8s}
.chip-float.two{top:-44px;right:0;animation-delay:2s}
.chip-float span{font-size:15px}
@media(max-width:520px){.chip-float{display:none}}

/* ─────────────────────────────  MARQUEE  ───────────────────────────── */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:scroll 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee-track span{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);display:flex;align-items:center;gap:44px;white-space:nowrap;
}
.marquee-track span::after{content:"◆";color:var(--blue);font-size:8px}

/* ─────────────────────────────  CARDS  ───────────────────────────── */
.grid-3{display:grid;gap:20px}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(0,82,255,.06),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:rgba(0,82,255,.25)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.ico{
  width:46px;height:46px;border-radius:13px;background:rgba(0,82,255,.09);
  display:grid;place-items:center;margin-bottom:20px;font-size:21px;
  transition:transform .4s var(--ease);
}
.card:hover .ico{transform:scale(1.08) rotate(-5deg)}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--slate)}
.card .num{
  position:absolute;top:22px;right:26px;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--line);letter-spacing:.1em;
}

/* ─────────────────────────────  PRODUCTS  ───────────────────────────── */
.prod{display:grid;gap:44px;align-items:center;padding:clamp(40px,6vw,72px) 0}
@media(min-width:940px){.prod{grid-template-columns:1fr 1fr;gap:72px}.prod.rev .p-media{order:2}}
.prod + .prod{border-top:1px solid var(--line)}
.p-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.p-title{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;color:var(--navy);margin-bottom:14px}
.p-line{font-size:17px;color:var(--slate);margin-bottom:26px;max-width:46ch}
.feats{display:grid;gap:11px}
.feat{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--slate)}
.feat i{
  flex:none;width:19px;height:19px;border-radius:50%;background:rgba(0,82,255,.1);color:var(--blue);
  display:grid;place-items:center;font-size:11px;font-style:normal;margin-top:3px;font-weight:700;
}
.p-media{position:relative}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);padding:22px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.p-media:hover .panel{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-3)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel-head b{font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:700}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate)}
.row b{color:var(--navy);font-weight:600}
.row .r{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--navy)}
.bar{height:6px;border-radius:99px;background:var(--ice);overflow:hidden;flex:1;max-width:110px}
.bar>i{display:block;height:100%;background:var(--blue);width:0;border-radius:99px;transition:width 1.2s var(--ease);transition-delay:calc(var(--i)*120ms)}
.donut{display:grid;place-items:center;padding:6px 0 14px}
.donut svg{transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:12;stroke-linecap:round}
.donut .bg{stroke:var(--ice)}
.donut .fg{stroke:var(--blue);stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.6s var(--ease)}
.donut-lbl{position:absolute;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em}
.donut-wrap{position:relative;display:grid;place-items:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:4px;max-width:330px}
.cal i{aspect-ratio:1;border-radius:5px;background:var(--ice);display:grid;place-items:center;font-size:10px;font-style:normal;color:var(--slate);font-family:'JetBrains Mono',monospace}
.cal i.on{background:var(--blue);color:#fff}
.cal i.soft{background:rgba(0,82,255,.14);color:var(--blue)}

/* ─────────────────────────────  EERA (AI MENU)  ───────────────────────────── */
.dark{background:var(--navy);color:#fff;overflow:hidden}
.dark .lead,.dark .muted{color:#94A3B8}
.dark .eyebrow{color:#FBBF24}
.noise{position:absolute;inset:0;opacity:.5;background:
  radial-gradient(700px circle at 12% 0%,rgba(0,82,255,.28),transparent 55%),
  radial-gradient(600px circle at 90% 90%,rgba(245,158,11,.16),transparent 55%);
  pointer-events:none}
.eera-grid{display:grid;gap:48px;align-items:center;position:relative;z-index:1}
@media(min-width:1000px){.eera-grid{grid-template-columns:.95fr 1.05fr;gap:64px}}

.phone{
  width:min(370px,100%);margin:0 auto;background:#0B1220;border:1px solid rgba(255,255,255,.12);
  border-radius:30px;padding:14px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  position:relative;
}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:78px;height:5px;border-radius:99px;background:rgba(255,255,255,.16)}
.phone-in{background:#0F172A;border-radius:20px;padding:22px 16px 16px;min-height:474px;display:flex;flex-direction:column}
.eera-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.eera-av{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#0052FF,#F59E0B);display:grid;place-items:center;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:13px;flex:none}
.eera-head b{font-family:'Hanken Grotesk',sans-serif;font-size:15px;display:block;line-height:1.2}
.eera-head small{font-size:10.5px;color:#94A3B8;font-family:'JetBrains Mono',monospace;letter-spacing:.08em}
.eera-head .cart{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#94A3B8;border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px 10px}

.stream{flex:1;padding:16px 0;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.bub{
  max-width:88%;padding:11px 14px;border-radius:15px;font-size:13.5px;line-height:1.5;
  animation:pop .45s var(--ease) both;
}
.bub.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.bub.ai{align-self:flex-start;background:rgba(255,255,255,.07);color:#E2E8F0;border-bottom-left-radius:5px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.typing{display:flex;gap:4px;padding:13px 15px;align-self:flex-start;background:rgba(255,255,255,.07);border-radius:15px;border-bottom-left-radius:5px;animation:pop .3s var(--ease) both}
.typing i{width:6px;height:6px;border-radius:50%;background:#94A3B8;animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.dish{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;
  padding:12px 14px;display:flex;gap:12px;align-items:center;animation:pop .5s var(--ease) both;
}
.dish .emo{font-size:22px;flex:none}
.dish b{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;display:block;letter-spacing:-.01em}
.dish small{display:block;font-size:11px;color:#94A3B8;margin-top:2px;line-height:1.4}
.dish .price{margin-left:auto;text-align:right;flex:none}
.dish .price b{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#FBBF24}
.dish .price small{font-family:'JetBrains Mono',monospace;font-size:9.5px}
.tags{display:flex;gap:5px;margin-top:5px}
.tag{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.08em;padding:2px 6px;border-radius:99px;background:rgba(0,82,255,.22);color:#B7C4FF}
.tag.veg{background:rgba(16,185,129,.18);color:#6EE7B7}
.tag.hot{background:rgba(245,158,11,.18);color:#FBBF24}

.moods{display:flex;gap:7px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.mood{
  font-size:11.5px;padding:7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.15);
  color:#CBD5E1;transition:all .25s var(--ease);
}
.mood:hover{border-color:var(--blue);background:rgba(0,82,255,.16);color:#fff;transform:translateY(-1px)}
.mood.active{background:var(--blue);border-color:var(--blue);color:#fff}

.eera-points{display:grid;gap:14px;margin-top:32px}
.pt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);background:rgba(255,255,255,.03);transition:all .35s var(--ease)}
.pt:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);transform:translateX(4px)}
.pt .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:#FBBF24;flex:none;padding-top:3px}
.pt b{font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;display:block;margin-bottom:3px}
.pt p{font-size:13.5px;color:#94A3B8;line-height:1.55}

.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
@media(min-width:600px){.stats-row{grid-template-columns:repeat(4,1fr)}}
.stat{border-left:2px solid rgba(255,255,255,.14);padding-left:14px}
.stat b{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800;display:block;letter-spacing:-.02em}
.stat small{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#94A3B8}

/* ─────────────────────────────  WHY  ───────────────────────────── */
.why{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
@media(min-width:820px){.why{grid-template-columns:repeat(3,1fr)}}
.why-cell{padding:34px 30px;border-bottom:1px solid var(--line);transition:background .35s}
.why-cell:last-child{border-bottom:0}
@media(min-width:820px){
  .why-cell{border-bottom:0;border-right:1px solid var(--line)}
  .why-cell:last-child{border-right:0}
}
.why-cell:hover{background:var(--ice)}
.why-cell b{font-family:'Hanken Grotesk',sans-serif;font-size:20px;font-weight:700;display:block;margin:14px 0 8px}
.why-cell p{font-size:14.5px;color:var(--slate)}
.why-cell .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--blue)}

/* ─────────────────────────────  CTA  ───────────────────────────── */
.cta{background:var(--blue);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-mesh{position:absolute;inset:0;opacity:.5;background:
  radial-gradient(500px circle at 20% 20%,rgba(255,255,255,.22),transparent 55%),
  radial-gradient(500px circle at 80% 80%,rgba(245,158,11,.3),transparent 55%);
  animation:meshMove 16s ease-in-out infinite}
@keyframes meshMove{0%,100%{transform:scale(1)}50%{transform:scale(1.15) translate(-3%,3%)}}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.cta p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 32px;font-size:17px}
.cta .eyebrow{color:rgba(255,255,255,.7)}

/* ─────────────────────────────  FOOTER  ───────────────────────────── */
footer{background:var(--ice);border-top:1px solid var(--line)}
.f-grid{display:grid;gap:36px;padding:64px 0 40px}
@media(min-width:820px){.f-grid{grid-template-columns:1.6fr 1fr 1.2fr 1fr}}
.f-col .f-h{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:16px;font-weight:600}
.f-col a,.f-col p{display:block;font-size:14.5px;color:var(--slate);margin-bottom:9px;transition:color .2s,transform .2s}
.f-col a:hover{color:var(--blue);transform:translateX(3px)}
.f-bot{border-top:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:var(--slate)}
.f-bot span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em}

/* progress bar */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--blue);width:0;z-index:200;transition:width .1s linear,background .35s var(--ease)}
/* blue-on-blue would vanish once the nav crosses the CTA band */
.prog.on-dark{background:#fff}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv,.js .rv-l,.js .rv-r,.js .rv-s{opacity:1;transform:none}
}

/* ══════════════  INNER PAGES  ══════════════
   Added when the site went from one page to ten. The home page keeps its
   cinematic hero; every other page opens with a plain, fast page-head. */
.page-head{
  padding:calc(clamp(72px,10vw,130px) + 34px) 0 clamp(40px,6vw,64px);
  background:linear-gradient(180deg,var(--white) 0%,var(--ice) 100%);
  border-bottom:1px solid var(--line)
}
.page-head .h1{font-size:clamp(34px,5.6vw,60px);line-height:1.05;letter-spacing:-.03em}

/* alternating band so long pages do not read as one undifferentiated column */
.sec.alt{background:var(--white);border-block:1px solid var(--line)}

/* current page in the nav */
.nav-links a.on{color:var(--navy);font-weight:600}
.nav-links a.on::after{transform:scaleX(1);transform-origin:left}
.nav-sheet a.on{color:var(--blue)}

/* card grid used by products, services and contact */
.cards{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}
.cards .card{display:flex;flex-direction:column}
.cards .card .p-line{flex:1}
.cards .card .btn{align-self:flex-start}

/* legal pages: keep paragraphs readable, tighten the rhythm */
.page-legal .sec{padding:clamp(48px,6vw,80px) 0}

/* breadcrumbs — visible trail matching the BreadcrumbList schema on every page */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:.06em;margin:0 0 22px
}
.crumbs a{color:var(--slate);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--blue)}
.crumbs a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.crumbs span[aria-hidden]{color:var(--line)}
.crumbs [aria-current="page"]{color:var(--navy);font-weight:600}

/* sibling product links — keeps every product one hop from every other */
.siblings{background:var(--ice);border-top:1px solid var(--line)}
.sibling-row{display:flex;gap:12px;flex-wrap:wrap}


/* Skip link — first focusable element on the page, so a keyboard user can jump
   the nav instead of tabbing through it on every single page. Visible only when
   focused, which is exactly when it is needed. */
.skip-link{
  position:fixed;top:0;left:0;z-index:10001;
  transform:translateY(-120%);
  background:var(--blue);color:#fff;padding:12px 22px;
  border-radius:0 0 var(--r-md) 0;font-size:14px;font-weight:600;
  text-decoration:none;box-shadow:var(--shadow-2);
  transition:transform .18s var(--ease)
}
.skip-link:focus{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* ══════════════  LANGUAGE SWITCHER  ══════════════
   Sits beside the demo button. Real links to real translated URLs, not a
   browser-side widget — so each language is its own indexable page. */
.lang-switch{position:relative;flex:none}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);color:var(--navy);cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:600;
  line-height:1;transition:border-color .2s var(--ease),color .2s var(--ease)
}
.lang-btn:hover{border-color:rgba(0,82,255,.35);color:var(--blue)}
.lang-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lang-btn svg{flex:none;opacity:.75}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  margin:0;padding:6px;list-style:none;min-width:150px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.lang-menu a{
  display:block;padding:9px 12px;border-radius:var(--r);
  font-size:14.5px;color:var(--slate);text-decoration:none;transition:background .15s,color .15s
}
.lang-menu a:hover{background:var(--ice);color:var(--navy)}
.lang-menu a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.lang-menu a[aria-current="true"]{color:var(--blue);font-weight:600;background:var(--blue-soft)}
/* over the navy Eera block the nav flips to light ink — keep the control legible */
header.on-dark .lang-btn{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
header.on-dark .lang-btn:hover{border-color:rgba(255,255,255,.6);color:#fff}
@media(prefers-reduced-motion:reduce){.lang-menu{transition:none}}

/* ══════════════  NAV FIT ON SMALL SCREENS  ══════════════
   Adding the language switcher pushed the burger off-screen at 375px — the nav
   wanted 446px of content in a 375px bar, so the mobile menu became unreachable.
   Below the desktop breakpoint the switcher drops to its globe icon (the current
   language is already obvious from the page) and the gaps tighten. */
@media(max-width:899px){
  .nav{gap:10px}
  .lang-btn{padding:9px 10px}
  .lang-btn span{display:none}          /* icon only — saves ~48px */
  .lang-menu{min-width:135px}
}
/* very narrow phones: shrink the CTA rather than let anything overflow */
@media(max-width:400px){
  .nav{gap:8px}
  .nav .btn-primary{padding:8px 11px;font-size:12.5px}
  .nav .logo{font-size:17px}
}
/* last resort — never let the bar push the page sideways */
.nav>*{flex:0 0 auto;min-width:0}
.nav .logo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════  NAV GROUPING  ══════════════
   space-between spread all four children evenly, leaving the language control
   stranded mid-bar. Auto margins absorb the free space instead, so the logo
   holds the left, the links centre, and the language button sits tight against
   the demo CTA as one control group on the right. */
@media(min-width:900px){
  .nav{gap:14px}
  .nav-links{margin-left:auto;margin-right:auto}
}
@media(max-width:899px){
  /* links are hidden here, so push the group right from the switcher itself */
  .lang-switch{margin-left:auto}
}