/* ============================================================
   CRT Insights Technologies — homepage mockup v2
   Layout and motion after the FusionAI Framer template,
   rebuilt from scratch in CRT's light palette.
   navy #002B5D · blue #007AB9 · sky #6CC6F0 · near-white #F7FBFC
   Fonts: Hanken Grotesk + IBM Plex Mono (same as mockup v1)
   ============================================================ */

:root{
  --bg:        #f4f8fb;
  --card:      #ffffff;
  --card-2:    #f7fbfd;
  --ice:       #e8f3fa;
  --ink:       #0d2238;
  --ink-80:    rgba(13,34,56,.82);
  --ink-70:    rgba(13,34,56,.72);
  --ink-60:    rgba(13,34,56,.62);
  --ink-45:    rgba(13,34,56,.48);
  --ink-30:    rgba(13,34,56,.30);
  --line:      rgba(0,43,93,.10);
  --line-2:    rgba(0,43,93,.16);

  --navy:      #002b5d;
  --navy-2:    #054a71;
  --blue:      #007ab9;
  --sky:       #6cc6f0;
  --green:     #12915c;
  --amber:     #b7791f;

  --glow-a:    #007ab9;              /* the template's warm accent */
  --glow-b:    #6cc6f0;              /* the template's cool accent */

  --sh-card:   0 1px 2px rgba(0,43,93,.04), 0 12px 32px rgba(0,43,93,.06);
  --sh-float:  0 2px 6px rgba(0,43,93,.06), 0 24px 56px rgba(0,43,93,.12);

  --font:      "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:      "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.12,.23,.5,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* our own display rules would otherwise win */
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
svg{ flex:none; stroke:currentColor; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
::selection{ background:rgba(0,122,185,.18); }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }

.container{ width:min(clamp(1240px, 78vw, 1400px), calc(100% - 200px)); margin-inline:auto; position:relative; }
.section{ position:relative; padding:78px 0; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-weight:500; color:var(--ink); letter-spacing:-.02em; }
h1{ font-size:clamp(40px, 4.5vw, 66px); line-height:1.08; }
h2{ font-size:54px; line-height:1.06; }
h3{ font-size:24px; line-height:1.33; letter-spacing:-.01em; }
h1, h2{ text-wrap:balance; }

/* gradient-outline pill used for section tags */
.tag{
  display:inline-flex; padding:1px; border-radius:99px;
  background:linear-gradient(90deg, var(--glow-a) 0%, rgba(0,122,185,.35) 33%, rgba(0,43,93,.14) 54%, var(--glow-b) 100%);
}
.tag > span{
  display:block; padding:6px 12px; border-radius:99px; background:var(--card);
  font-size:14px; line-height:16px; font-weight:500; color:var(--ink); white-space:nowrap;
}

.sec-head{ display:grid; justify-items:center; gap:0; text-align:center; max-width:780px; margin:0 auto 52px; }
.sec-head .tag{ margin-bottom:16px; }
.sec-head h2{ margin-bottom:24px; }
.sec-head p{ font-size:18px; line-height:28px; color:var(--ink-70); max-width:640px; text-wrap:pretty; }
.sec-head.left{ justify-items:start; text-align:left; margin-left:0; max-width:620px; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:50px; border-radius:10px; font-size:16px; font-weight:500; white-space:nowrap;
  isolation:isolate; transition:transform .3s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn .in{ display:flex; align-items:center; justify-content:center; gap:8px; height:100%; width:100%; padding:0 19px; border-radius:9px; }
.btn-primary{ padding:1px; background:linear-gradient(90deg, var(--glow-b) 0%, var(--glow-a) 35%, var(--navy) 60%, var(--glow-b) 100%); color:#fff; }
.btn-primary .in{ background:var(--navy); }
.btn-primary::before{          /* the glow that sits on the top edge */
  content:""; position:absolute; z-index:-1; left:18%; right:18%; top:-9px; height:18px;
  background:radial-gradient(closest-side, rgba(108,198,240,.95), rgba(108,198,240,0));
  filter:blur(5px); transition:opacity .3s ease, transform .4s var(--ease);
}
.btn-primary:hover::before{ transform:scaleX(1.25); }
.btn-ghost{ padding:1px; background:var(--line-2); color:var(--ink); transition:background .25s ease, transform .3s var(--ease); }
.btn-ghost .in{ background:var(--card); }
.btn-ghost:hover{ background:rgba(0,43,93,.3); }
.btn-sm{ height:40px; }
.btn-sm .in{ padding:0 14px; }

/* hover text roll */
.roll{ display:inline-grid; overflow:hidden; line-height:26px; height:26px; }
.roll > span{ grid-area:1 / 1; transition:transform .45s var(--ease); }
.roll > span + span{ transform:translateY(105%); }
.btn:hover .roll > span:first-child{ transform:translateY(-105%); }
.btn:hover .roll > span + span{ transform:none; }

/* rotating glass orb */
.orb{
  --size:40px;
  position:relative; display:block; width:var(--size); height:var(--size); border-radius:50%; flex:none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0 5%, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 50% 62%, #0b4a86 0%, #002b5d 52%, #00162f 100%);
  box-shadow:inset 0 -8px 18px rgba(108,198,240,.35), 0 10px 28px rgba(0,43,93,.22);
}
.orb::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(108,198,240,0) 0deg, rgba(108,198,240,1) 70deg, rgba(0,122,185,0) 150deg, rgba(0,122,185,.95) 235deg, rgba(108,198,240,0) 310deg);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 72%);
          mask:radial-gradient(circle, transparent 60%, #000 72%);
  animation:spin 9.7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* sparkle mark used in chats and lists */
.spark{ width:18px; height:18px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; top:28px; left:0; right:0; bottom:auto; z-index:100; pointer-events:none; transition:top .3s var(--ease); }
.nav-shell{
  pointer-events:auto; width:min(clamp(1240px, 78vw, 1400px), calc(100% - 200px)); margin:0 auto;
  border-radius:12px; background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line), 0 6px 24px rgba(0,43,93,.05);
  overflow:hidden;
}
.nav-top{ display:flex; align-items:center; height:60px; padding:0 10px 0 16px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:24px; margin:0 auto; }
.nav-links a{ font-size:16px; line-height:26px; font-weight:500; color:var(--ink-70); transition:color .2s ease; }
.nav-links a:hover, .nav-links a.is-current{ color:var(--ink); }
.nav-cta{ flex:none; }
.burger{ display:none; position:relative; width:40px; height:40px; margin-left:auto; }
.burger i{ position:absolute; left:10px; width:20px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .4s var(--ease), top .4s var(--ease); }
.burger i:nth-child(1){ top:15px; }
.burger i:nth-child(2){ top:23px; }
.nav.open .burger i:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav.open .burger i:nth-child(2){ top:19px; transform:rotate(-45deg); }
.nav-panel{ display:none; }
.nav.open .nav-shell{ background:rgba(255,255,255,.97); }

/* full-width mega menu: hovering any item opens the whole map of the site */
.mega{ height:0; overflow:hidden; transition:height .42s var(--ease); }
.nav.mega-open .nav-shell{ background:rgba(255,255,255,.97); box-shadow:inset 0 0 0 1px var(--line), 0 18px 50px rgba(0,43,93,.10); }
.mega-in{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) 272px; gap:32px;
  padding:24px 24px 28px; border-top:1px solid var(--line);
}
.mega-col{ display:grid; align-content:start; transition:opacity .3s ease; }
.mega-col.dim{ opacity:.55; }
.mega-t{ font-size:13px; color:var(--ink-45); margin-bottom:10px; }
.mega-col a:not(.btn){ font-size:15px; line-height:22px; color:var(--ink-70); padding:7px 0; transition:color .2s ease, transform .25s var(--ease); }
.mega-col a:not(.btn):hover{ color:var(--blue); transform:translateX(3px); }
.mega-card{ border-radius:12px; padding:18px; background:var(--ice); box-shadow:inset 0 0 0 1px var(--line); }
.mega-card .mega-t{ margin-bottom:6px; }
.mega-card p{ font-size:14px; line-height:21px; color:var(--ink-70); margin-bottom:14px; }
.mega-card .btn{ width:100%; margin-bottom:6px; }
.mega-card a:not(.btn){ font-size:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  padding:clamp(150px, 15vh, 214px) 0 clamp(48px, 7vh, 88px);
  min-height:100vh; min-height:min(100dvh, 1000px);
}

/* light streaks (stands in for the template's hero video) */
.hero-light{ position:absolute; inset:0; height:auto; min-height:958px; pointer-events:none; opacity:0; }
html.js.loaded .hero-light{ opacity:1; transition:opacity 1.2s linear .4s; }
html:not(.js) .hero-light{ opacity:1; }
.hero-light::before{        /* soft sky wash top right */
  content:""; position:absolute; right:-10%; top:-18%; width:75%; height:120%;
  background:radial-gradient(closest-side, rgba(108,198,240,.55), rgba(108,198,240,0));
  filter:blur(20px);
}
.hero-light::after{         /* the warm corner glow, bottom left */
  content:""; position:absolute; left:-18%; bottom:-20%; width:55%; height:60%;
  background:radial-gradient(closest-side, rgba(0,122,185,.42), rgba(0,122,185,0));
  filter:blur(30px);
}
.beams{ position:absolute; left:48%; top:-420px; width:1500px; height:1500px; transform:rotate(-50deg); transform-origin:50% 50%; }
.beams i{
  position:absolute; left:-10%; width:120%; border-radius:50%;
  background:linear-gradient(90deg, rgba(0,122,185,0) 12%, rgba(108,198,240,.55) 34%, #007ab9 48%, #6cc6f0 56%, rgba(0,122,185,.25) 70%, rgba(0,122,185,0) 88%);
  box-shadow:0 0 22px 2px rgba(0,122,185,.28);
  animation:beam 11s ease-in-out infinite alternate;
}
.beams i:nth-child(1){ top:38%; height:3px; animation-delay:-3s; }
.beams i:nth-child(2){ top:41%; height:9px; opacity:.55; filter:blur(6px); animation-duration:13s; }
.beams i:nth-child(3){ top:45%; height:2px; animation-delay:-6s; }
.beams i:nth-child(4){ top:47.5%; height:5px; filter:blur(1px); animation-duration:9s; animation-delay:-1s; }
.beams i:nth-child(5){ top:52%; height:2px; opacity:.8; animation-delay:-8s; }
.beams i:nth-child(6){ top:55%; height:14px; opacity:.35; filter:blur(10px); animation-duration:15s; }
.beams i:nth-child(7){ top:58%; height:2px; opacity:.7; animation-delay:-4s; }
.beams i:nth-child(8){ top:43%; height:70px; opacity:.55; filter:blur(26px); background:linear-gradient(90deg, rgba(0,122,185,0) 15%, rgba(0,122,185,.75) 45%, rgba(108,198,240,.85) 60%, rgba(108,198,240,0) 85%); animation-duration:14s; }
.beams i:nth-child(9){ top:50%; height:120px; opacity:.4; filter:blur(40px); background:linear-gradient(90deg, rgba(108,198,240,0) 20%, rgba(108,198,240,.9) 50%, rgba(0,122,185,.6) 65%, rgba(0,122,185,0) 90%); animation-duration:17s; animation-delay:-5s; }
@keyframes beam{ 0%{ transform:translateX(-5%); opacity:.45; } 100%{ transform:translateX(5%); } }

.hero-copy{ position:relative; z-index:2; display:grid; justify-items:start; }
.hero-copy .tag{ margin-bottom:12px; }
.hero h1{ margin-bottom:28px; }
.hero-h1{ display:block; }
.h1-line{ display:block; }
.tw{ display:inline; white-space:nowrap; }
.tw-word{
  background:linear-gradient(92deg, var(--sky) 0%, var(--blue) 45%, var(--navy) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tw-caret{
  display:inline-block; width:.055em; height:.82em; margin-left:.05em;
  vertical-align:-.06em; background:var(--blue); border-radius:1px;
}
.tw-caret.blink{ animation:twblink .9s steps(1) infinite; }
@keyframes twblink{ 50%{ opacity:0; } }
.hero-desc{ max-width:540px; font-size:16px; line-height:26px; color:var(--ink-80); margin-bottom:36px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; }

/* word and character reveals */
.w, .ch, .wd{ display:inline-block; }
.wd{ white-space:nowrap; }
html.js .reveal .w, html.js .reveal .ch{ opacity:0; transform:translateY(10px); filter:blur(2px); }
html.js .reveal.go .w, html.js .reveal.go .ch{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .7s ease, transform .8s var(--ease), filter .7s ease;
  transition-delay:var(--d, 0s);
}

/* entrance for appear-id pieces */
html.js .up{ opacity:0; transform:translateY(var(--y, 30px)); }
html.js.loaded .up{ opacity:1; transform:none; transition:opacity .8s var(--ease-soft), transform .9s var(--ease-soft); transition-delay:var(--d, 0s); }

/* hero grid: copy on the left, the live panel on the right */
.hero .container{ display:grid; grid-template-columns:minmax(0,1fr) clamp(430px, 46%, 700px); gap:clamp(32px, 4vw, 72px); align-items:center; }
.hero-stage{
  --pt:clamp(228px, 19vw, 324px);            /* where the prompt sits inside the stage */
  position:relative; z-index:2; height:calc(var(--pt) + 352px);
}
.prompt-wrap{ position:absolute; z-index:3; left:0; right:0; top:var(--pt); }

/* the app window behind the prompt */
.hero-app{
  position:absolute; left:0; right:calc(-1 * clamp(32px, 5vw, 120px)); top:0; height:calc(var(--pt) + 124px);
  display:grid; grid-template-columns:210px 1fr;
  border-radius:20px; background:var(--card); overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,43,93,.10);
  -webkit-mask-image:linear-gradient(180deg, #000 66%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 66%, transparent 100%);
}
html.js .hero-app.up{ --y:40px; }
.hero-app .win-side{ padding:16px 12px 0; }
.hero-app .dots{ margin-bottom:18px; }
.hero-app .win-brand{ margin-bottom:14px; }
.hero-app .win-brand img{ height:22px; }
.hero-app .win-new{ height:34px; font-size:14px; margin-bottom:12px; }
.hero-app .win-list li{ padding:9px 8px; font-size:13px; white-space:nowrap; }
.hero-app .win-list li svg{ width:16px; height:16px; }
.app-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 0; }
.app-head b{ display:block; font-size:15px; font-weight:500; color:var(--ink); }
.app-head span{ font-size:12.5px; color:var(--ink-45); }
.app-chart{ display:flex; align-items:flex-end; gap:10px; height:176px; margin:18px 18px 0; }
.app-chart i{
  flex:1; height:var(--h); border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, var(--sky), var(--blue)); opacity:.9;
  transform-origin:50% 100%;
}
html.js .hero-app.up .app-chart i{ transform:scaleY(.06); }
html.js.loaded .hero-app.up .app-chart i{
  transform:none; transition:transform .9s cubic-bezier(.22,1.2,.36,1);
  transition-delay:calc(.9s + var(--i) * .06s);
}
.app-rows{ display:grid; gap:8px; padding:18px; }
.app-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; }
.app-row span{ display:flex; align-items:center; gap:9px; color:var(--ink-70); }
.app-row svg{ width:16px; height:16px; color:var(--blue); }
.app-row b{ font-weight:500; color:var(--ink); }
.fit{ transform-origin:0 0; margin-inline:auto; }

/* prompt panel */
.prompt{
  position:relative; border-radius:16px; padding:16px; background:var(--card);
  box-shadow:0 0 0 1px var(--line), var(--sh-float);
}
html.js .prompt-wrap.up{ transform:translateY(40px); }
html.js.loaded .prompt-wrap.up{ transform:none; transition:opacity .9s ease, transform 1.2s cubic-bezier(.22,1.2,.36,1); transition-delay:.5s; }
.prompt-edge{ position:absolute; left:14px; right:14px; height:1px; overflow:hidden; pointer-events:none; }
.prompt-edge.top{ top:0; }
.prompt-edge.bottom{ bottom:0; }
.prompt-edge i{
  position:absolute; top:0; width:38%; height:100%;
  background:linear-gradient(90deg, rgba(0,122,185,0), var(--glow-a) 40%, var(--glow-b) 60%, rgba(108,198,240,0));
  animation:sweep 5.5s ease-in-out infinite;
}
.prompt-edge.bottom i{ animation-direction:reverse; animation-delay:-2.2s; }
.prompt::before{ content:""; position:absolute; left:10%; right:30%; top:-6px; height:12px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,122,185,.45), rgba(0,122,185,0)); filter:blur(6px); pointer-events:none; }
@keyframes sweep{ 0%{ left:-40%; } 55%{ left:102%; } 100%{ left:102%; } }
.prompt-top{ display:flex; gap:8px; }
.select{ display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line); font-size:15px; font-weight:500; color:var(--ink); }
.select .caret{ width:14px; height:14px; margin-left:18px; color:var(--ink-45); }
.select svg:first-child{ width:18px; height:18px; color:var(--blue); }
.icon-btn{ width:38px; height:38px; border-radius:8px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-60); }
.icon-btn svg{ width:17px; height:17px; }
.prompt-text{ display:flex; align-items:center; height:52px; font-size:17px; color:var(--ink); }
.caret-blink{ display:inline-block; width:1.5px; height:20px; margin-left:3px; background:var(--ink-60); animation:blink .8s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.prompt-bottom{ display:flex; align-items:center; gap:8px; }
.chip{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line); font-size:15px; color:var(--ink-80); }
.send{
  position:relative; margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 10px; border-radius:8px;
  background:var(--card); font-size:15px; font-weight:500; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(0,122,185,.45), 0 0 16px rgba(0,122,185,.18);
  transition:transform .25s var(--ease), box-shadow .3s ease, background .3s ease;
}
.chip{ transition:box-shadow .3s ease, color .3s ease, background .3s ease; }
.chip.is-on{ color:var(--navy); background:var(--ice); box-shadow:inset 0 0 0 1px rgba(0,122,185,.45); }
.send.is-armed{ transform:translateY(-1px); box-shadow:inset 0 0 0 1px var(--blue), 0 0 26px rgba(0,122,185,.45); }
.send.is-press{ transform:scale(.94); background:var(--navy); color:#fff; box-shadow:inset 0 0 0 1px var(--navy), 0 0 26px rgba(0,122,185,.5); }
.send.is-press .spark path{ fill:#fff; }

/* the answer the assistant types back */
.answer{ display:flex; gap:12px; margin-top:14px; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .6s var(--ease); }
.answer.show{ opacity:1; transform:none; }
.answer-spark{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--card); box-shadow:0 0 0 1px var(--line), var(--sh-card); }
.answer-body{ flex:1; min-width:0; border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 0 0 1px var(--line), var(--sh-float); }
.answer-dots{ display:flex; gap:5px; height:18px; align-items:center; }
.answer-dots i{ width:6px; height:6px; border-radius:50%; background:var(--ink-30); animation:blip 1.1s ease-in-out infinite; }
.answer-dots i:nth-child(2){ animation-delay:.15s; }
.answer-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes blip{ 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(-4px); opacity:1; } }
.answer.done .answer-dots{ display:none; }
.answer-line{ font-size:15.5px; line-height:24px; color:var(--ink); }
.answer-rows{ display:grid; gap:8px; margin-top:12px; }
.answer-rows:empty{ display:none; }
.answer-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 12px; border-radius:9px; background:linear-gradient(90deg, rgba(0,122,185,.07), rgba(108,198,240,.12)); box-shadow:inset 0 0 0 1px rgba(0,122,185,.2); font-size:14px; }
.answer-row span{ color:var(--ink-60); }
.answer-row b{ font-weight:500; color:var(--ink); }

/* product windows */
.window{
  position:relative; border-radius:20px; background:var(--card); overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,43,93,.10);
}
.win-side{ padding:18px 18px 0; border-right:1px solid var(--line); background:linear-gradient(180deg, var(--card-2), var(--card)); }
.dots{ display:flex; gap:7px; margin-bottom:22px; }
.dots i{ width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.dots i:nth-child(2){ background:#febc2e; }
.dots i:nth-child(3){ background:#28c840; }
.win-brand{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.win-brand img{ height:26px; }
.win-brand span{ font-family:var(--mono); font-size:12px; color:var(--ink-45); }
.win-new{ display:flex; align-items:center; justify-content:center; gap:8px; height:38px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line-2); font-size:15px; font-weight:500; color:var(--ink); margin-bottom:18px; }
.win-new .spark{ width:14px; height:14px; }
.win-list li{ display:flex; align-items:center; gap:12px; padding:12px 12px; font-size:14px; color:var(--ink-70); }
.win-list li svg{ width:18px; height:18px; color:var(--ink-45); }
.win-list li:nth-child(n+3){ opacity:.8; }
.win-list li:nth-child(n+5){ opacity:.55; }
.win-list li:nth-child(n+7){ opacity:.3; }
.win-main{ position:relative; overflow:hidden; }
.win-main::before{ content:""; position:absolute; right:-10%; bottom:-30%; width:75%; height:90%; background:radial-gradient(closest-side, rgba(108,198,240,.7), rgba(108,198,240,0)); filter:blur(10px); }
.win-main::after{ content:""; position:absolute; left:-15%; bottom:-40%; width:65%; height:80%; background:radial-gradient(closest-side, rgba(0,122,185,.4), rgba(0,122,185,0)); filter:blur(10px); }

/* ============================================================
   LOGOS
   ============================================================ */
.logos{ padding:72px 0 48px; }
.logos-title{ text-align:center; font-size:18px; line-height:28px; font-weight:500; color:var(--ink); margin-bottom:32px; }
.ticker{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track{ display:flex; align-items:center; width:max-content; animation:tick var(--dur, 60s) linear infinite; }
.ticker.reverse .ticker-track{ animation-direction:reverse; }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(var(--shift, -50%)); } }
.logo-item{ display:grid; place-items:center; height:48px; padding:0 32px; }
.logo-item img{ height:auto; opacity:.75; filter:grayscale(1); }

/* ============================================================
   BENTO — glow-border cards
   ============================================================ */
.bento{ display:grid; gap:24px; }
.bento-row{ display:grid; gap:24px; }
.bento-row.r1{ grid-template-columns:497fr 719fr; }
.bento-row.r2{ grid-template-columns:806fr 410fr; }
.gcard{ position:relative; border-radius:16px; padding:1px; background:var(--line-2); overflow:hidden; isolation:isolate; }
.glow-border{
  position:absolute; z-index:0; left:50%; top:50%; width:170%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg, rgba(0,122,185,0) 0deg 318deg, var(--glow-a) 334deg, var(--glow-b) 342deg, rgba(108,198,240,0) 352deg);
  animation:spin 7.76s linear infinite;
}
.gcard-in{ position:relative; z-index:1; height:100%; border-radius:15px; background:var(--card); padding:8px; display:flex; flex-direction:column; }
.art{ position:relative; overflow:hidden; border-radius:12px; height:276px; background:linear-gradient(180deg, #f3f8fc, #eaf3f9); }
.gcard-copy{ padding:24px 23px 24px; }
.gcard-copy h3{ margin-bottom:12px; }
.gcard-copy p{ font-size:16px; line-height:26px; color:var(--ink-70); max-width:440px; }

.art .blob{ position:absolute; border-radius:50%; filter:blur(38px); pointer-events:none; }
.blob.b-blue{ background:rgba(0,122,185,.7); }
.blob.b-sky{ background:rgba(108,198,240,.85); }
.blob.b-navy{ background:rgba(0,43,93,.35); }

/* integrations art */
.art-int .ring{ position:absolute; left:50%; top:50%; border-radius:50%; translate:-50% -50%; box-shadow:inset 0 0 0 1px rgba(0,43,93,.08); background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); }
.art-int .ring.r1{ width:230px; height:230px; }
.art-int .ring.r2{ width:170px; height:170px; }
.art-int .ring.r3{ width:84px; height:84px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 10px 30px rgba(0,43,93,.10); }
.art-int .orb{ --size:48px; position:absolute; left:50%; top:50%; margin:-24px 0 0 -24px; }
.art-int .apps{ position:absolute; left:0; right:0; top:50%; translate:0 -50%; display:flex; justify-content:center; gap:14px; }
.art-int .apps span{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1px var(--line), 0 6px 14px rgba(0,43,93,.08); }
.art-int .apps span img{ width:22px; height:22px; object-fit:contain; }
.art-int .apps .gap{ width:118px; background:none; box-shadow:none; }

/* chat art (e-Invoicing) */
.bubble-row{ position:absolute; display:flex; align-items:center; gap:12px; }
.bubble{ padding:12px 22px; border-radius:24px; background:#fff; box-shadow:0 0 0 1px var(--line-2); font-size:16px; color:var(--ink); white-space:nowrap; }
.avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none; background:linear-gradient(160deg, #dbeef9, #b8dcf1); color:var(--navy); font-size:14px; font-weight:600; box-shadow:0 0 0 2px #fff, 0 4px 12px rgba(0,43,93,.12); }
.avatar svg{ width:20px; height:20px; }
.reply{ position:absolute; border-radius:16px; padding:14px 16px; background:rgba(255,255,255,.88); box-shadow:0 0 0 1px var(--line-2), var(--sh-float); }
.reply > b{ display:block; font-weight:500; font-size:16px; margin-bottom:10px; }
.record{ border-radius:8px; padding:10px 12px; background:linear-gradient(90deg, rgba(0,122,185,.08), rgba(108,198,240,.14)); box-shadow:inset 0 0 0 1px rgba(0,122,185,.25); display:grid; grid-template-columns:auto auto; column-gap:48px; row-gap:10px; font-size:15px; }
.record span{ color:var(--ink-60); }
.record em{ font-style:normal; text-align:right; color:var(--ink); }
.reply p{ margin-top:12px; font-size:15px; color:var(--ink-80); }
.spark-float{ position:absolute; width:34px; height:34px; }

/* workflow art */
.node{ position:absolute; display:flex; align-items:center; gap:8px; height:46px; padding:0 18px; border-radius:10px; background:rgba(255,255,255,.9); box-shadow:0 0 0 1px var(--line-2), 0 6px 18px rgba(0,43,93,.06); font-size:15px; color:var(--ink); white-space:nowrap; }
.node svg{ width:16px; height:16px; color:var(--blue); }
.hub{ position:absolute; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1px var(--line-2), 0 8px 22px rgba(0,43,93,.10); }
.hub .spark{ width:22px; height:22px; }
.wire{ position:absolute; background:var(--line-2); }
.arc{ position:absolute; border-radius:50%; box-shadow:inset 0 0 0 4px rgba(0,122,185,.85), inset 0 0 0 9px rgba(108,198,240,.45), 0 0 44px rgba(0,122,185,.55), inset 0 0 70px rgba(108,198,240,.55); pointer-events:none; }

/* channels art */
.chan{ position:absolute; left:50%; width:250px; margin-left:-125px; display:flex; align-items:center; gap:12px; height:52px; padding:0 14px; border-radius:10px; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px var(--line-2), 0 6px 18px rgba(0,43,93,.06); font-size:15px; color:var(--ink); }
.chan .ci{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--navy); color:#fff; }
.chan .ci svg{ width:14px; height:14px; }
.chan::after{ content:""; position:absolute; left:52px; right:40px; bottom:9px; height:3px; border-radius:3px; background:linear-gradient(90deg, rgba(0,122,185,.35), rgba(0,122,185,.05)); }

/* appear on view */
html.js .rv{ opacity:0; transform:translateY(50px); }
html.js .rv.in{ opacity:1; transform:none; transition:opacity .8s ease, transform 1s var(--ease); transition-delay:var(--d, 0s); }

/* ============================================================
   AI AUTOMATION
   ============================================================ */
.ai{ padding-top:100px; }
.ai-title{ display:flex; align-items:center; justify-content:center; gap:28px; font-size:clamp(88px, 9.6vw, 140px); line-height:1; letter-spacing:-.03em; font-weight:500; margin-bottom:48px; white-space:nowrap; }
.ai-title .orb{ --size:120px; }
.ai-title .grad{
  display:inline-block; padding-bottom:.08em;
  background:linear-gradient(90deg, var(--sky) 0%, var(--blue) 45%, var(--navy) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  will-change:transform;
}
.video-window{ margin-bottom:0; box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,43,93,.12); }
.video-window::after{ content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg, var(--glow-a), rgba(0,122,185,.1) 45%, var(--glow-b)); opacity:.85; pointer-events:none; }
.vw-bar{ display:flex; align-items:center; gap:16px; height:48px; padding:0 18px; border-bottom:1px solid var(--line); background:var(--card-2); }
.vw-bar .dots{ margin:0; }
.vw-title{ flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vw-sub{ font-weight:400; color:var(--ink-45); }
.vw-time{ font-family:var(--mono); font-size:12px; color:var(--ink-45); }
.vw-stage{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#0b1a2e; cursor:pointer; }
.vw-stage img{ width:100%; height:100%; object-fit:cover; }
.vw-stage.playing{ cursor:auto; }
.vw-stage iframe{ position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; }
.vw-play{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; height:56px; font-size:17px; }
.vw-play .in{ padding:0 24px 0 18px; gap:10px; }
.vw-ico{ width:18px; height:18px; }
.lenis.lenis-scrolling iframe{ pointer-events:none; }
.vw-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; margin:32px 0 56px; }
.vw-cols h3{ display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:8px; }
.vw-cols h3 .spark{ width:20px; height:20px; }
.vw-cols p{ font-size:16px; line-height:26px; color:var(--ink-70); }
.text-link{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-size:16px; font-weight:500; color:var(--blue); }
.text-link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.text-link:hover svg{ transform:translateX(3px); }

/* ============================================================
   INDUSTRIES — photo cards on a horizontal rail
   ============================================================ */
.rail-head.sec-head{ max-width:none; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; text-align:left; margin-bottom:40px; }
.rail-head > div:first-child{ max-width:620px; }
.rail-head h2{ margin-bottom:0; }
.rail-nav{ display:flex; gap:10px; flex:none; }
.rail-btn{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line), var(--sh-card); color:var(--ink);
  transition:box-shadow .3s ease, transform .3s var(--ease), opacity .3s ease;
}
.rail-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; }
.rail-btn[data-dir="-1"] svg{ transform:scaleX(-1); }
.rail-btn:hover{ box-shadow:inset 0 0 0 1px var(--blue), var(--sh-float); transform:translateY(-2px); }
.rail-btn[disabled]{ opacity:.35; pointer-events:none; }

.rail{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; margin:0 -24px; padding:0 24px 8px; }
.rail::-webkit-scrollbar{ display:none; }
.rail-track{ display:flex; gap:24px; }
.icard{
  position:relative; flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start;
  aspect-ratio:1; border-radius:16px; overflow:hidden; display:block;
  background:var(--card-2); box-shadow:0 0 0 1px var(--line), var(--sh-card);
  transition:transform .45s var(--ease), box-shadow .35s ease;
}
.icard:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--line-2), var(--sh-float); }
.icard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease); }
.icard:hover img{ scale:1.04; }
.icard-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.78) 56%, #fff 78%); }
.icard-body{ position:absolute; inset:auto 0 0; display:grid; padding:0 22px 22px; }
.icard-body b{ font-size:24px; line-height:1.25; font-weight:500; color:var(--ink); margin-bottom:8px; }
.icard-copy{ font-size:15px; line-height:23px; color:var(--ink-70); }
.icard-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:15px; font-weight:500; color:var(--blue); transition:gap .25s var(--ease);
}
.icard-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.icard:hover .icard-link{ gap:14px; }

/* ============================================================
   PRODUCTS — sticky stacking cards
   ============================================================ */
.stack{ position:relative; }
.stack-mark{ height:0; }
.scard{ position:sticky; top:100px; margin-bottom:64px; transform-origin:50% 50%; will-change:transform; }
.scard:last-child{ margin-bottom:0; }
.scard-in{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; min-height:512px; padding:10px 10px 10px 56px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line), var(--sh-card); }
.scard.flip .scard-in{ padding:10px 60px 10px 10px; }
.scard.flip .scard-copy{ order:2; }
.scard-copy h3{ font-size:40px; line-height:1.2; letter-spacing:-.02em; margin-bottom:22px; }
.scard-copy > p{ font-size:16px; line-height:26px; color:var(--ink-70); max-width:470px; margin-bottom:32px; }
.sparks{ display:grid; gap:16px; }
.sparks li{ display:flex; align-items:center; gap:16px; font-size:18px; line-height:28px; font-weight:500; color:var(--ink); }
.sparks li .spark{ width:24px; height:24px; padding:4px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--line-2); background:#fff; }

.scard-art{ position:relative; height:492px; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 90% at 85% 110%, #0d5a93 0%, rgba(13,90,147,0) 55%), linear-gradient(160deg, #001a38 0%, #002b5d 55%, #04406f 100%); }
.streaks{ position:absolute; inset:-30%; transform:rotate(-38deg); }
.streaks i{ position:absolute; left:-10%; width:120%; border-radius:50%;
  background:linear-gradient(90deg, rgba(108,198,240,0) 10%, rgba(108,198,240,.7) 40%, #d9f1fc 50%, rgba(0,122,185,.7) 62%, rgba(0,122,185,0) 88%);
  box-shadow:0 0 26px 3px rgba(108,198,240,.35); animation:beam 12s ease-in-out infinite alternate; }
.streaks i:nth-child(1){ top:44%; height:3px; }
.streaks i:nth-child(2){ top:47%; height:12px; opacity:.4; filter:blur(8px); animation-delay:-4s; }
.streaks i:nth-child(3){ top:52%; height:2px; opacity:.8; animation-delay:-7s; }
.streaks i:nth-child(4){ top:56%; height:22px; opacity:.25; filter:blur(14px); }
.glass{ position:absolute; border-radius:12px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 20px 50px rgba(0,10,30,.35); color:#fff; }
.glass-field{ left:14%; right:14%; top:18%; height:48px; display:flex; align-items:center; padding:0 16px; font-size:14px; color:rgba(255,255,255,.7); }
.glass-list{ left:14%; right:14%; top:calc(18% + 64px); padding:8px; }
.glass-list li{ display:flex; align-items:center; gap:12px; height:48px; padding:0 12px; font-size:16px; border-radius:8px; }
.glass-list li + li{ margin-top:2px; }
.glass-list li:first-child{ background:rgba(255,255,255,.1); }
.glass-list li span{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,.95); color:var(--navy); }
.glass-list li span svg{ width:15px; height:15px; }
.glass-stack{ position:absolute; left:50%; top:16%; width:250px; margin-left:-125px; display:grid; justify-items:center; gap:14px; }
.glass-stack .orb{ --size:64px; margin-bottom:10px; }
.gbtn{ width:210px; height:60px; border-radius:12px; display:grid; place-items:center; font-size:17px; color:#fff; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.gbtn.hot{ background:linear-gradient(90deg, #007ab9, #6cc6f0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 30px rgba(0,122,185,.45); }
.gbtn:nth-child(4){ width:232px; }
.gbtn:nth-child(5){ width:252px; opacity:.85; }
.glass-chat{ position:absolute; left:10%; right:8%; top:20%; display:grid; gap:18px; }
.glass-chat .row{ display:flex; align-items:center; gap:14px; }
.glass-chat .spark{ width:30px; height:30px; }
.glass-chat .avatar{ width:34px; height:34px; box-shadow:0 0 0 2px rgba(255,255,255,.5); }
.glass-chat .glass{ position:relative; padding:12px 16px; font-size:16px; }

/* ============================================================
   SERVICES — auto-rotating panels
   ============================================================ */
.tabs-panel{ position:relative; height:712px; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, #ffffff 0%, #f1f8fc 70%, #dff0fa 100%); box-shadow:0 0 0 1px var(--line), var(--sh-card); }
.tabs-panel::before{ content:""; position:absolute; left:-10%; bottom:-35%; width:60%; height:70%; background:radial-gradient(closest-side, rgba(0,122,185,.55), rgba(0,122,185,0)); filter:blur(20px); }
.tabs-panel::after{ content:""; position:absolute; right:-10%; bottom:-35%; width:60%; height:70%; background:radial-gradient(closest-side, rgba(108,198,240,.8), rgba(108,198,240,0)); filter:blur(20px); }
.tab-art{ position:absolute; inset:0; padding:28px; opacity:0; transition:opacity .6s ease; z-index:1; }
.tab-art.on{ opacity:1; }
.canvas{ display:grid; grid-template-columns:260px 1fr; gap:14px; height:100%; }
.canvas .window{ box-shadow:0 0 0 1px var(--line), 0 12px 30px rgba(0,43,93,.06); border-radius:14px; }
.c-side{ padding:16px; }
.c-side .win-brand{ margin-bottom:14px; }
.c-side .win-brand img{ height:22px; }
.c-side .win-new{ height:34px; font-size:14px; margin-bottom:12px; }
.c-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:8px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:14px; }
.c-seg span{ height:28px; display:grid; place-items:center; border-radius:6px; font-size:13px; color:var(--ink-60); }
.c-seg span:first-child{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,43,93,.08); }
.c-group{ font-size:12px; color:var(--ink-45); margin:10px 4px 6px; }
.c-item{ display:flex; gap:10px; padding:8px 4px; }
.c-item i{ width:28px; height:28px; border-radius:7px; display:grid; place-items:center; flex:none; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-60); }
.c-item i svg{ width:14px; height:14px; }
.c-item b{ display:block; font-size:13px; font-weight:500; color:var(--ink); line-height:1.3; }
.c-item span{ display:block; font-size:11.5px; color:var(--ink-45); line-height:1.3; }
.c-main{ position:relative; padding:18px 20px; }
.c-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; }
.c-head b{ display:block; font-size:16px; font-weight:500; }
.c-head span{ font-size:13px; color:var(--ink-45); }
.c-head .mini-btn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line-2); font-size:13px; color:var(--ink); }
.flowmap{ position:relative; height:520px; }
.flowmap svg.links{ position:absolute; inset:0; width:100%; height:100%; }
.flowmap svg.links path{ fill:none; stroke:rgba(0,122,185,.35); stroke-width:1.5; }
.fnode{ position:absolute; width:196px; padding:10px 12px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--line-2), 0 6px 16px rgba(0,43,93,.06); }
.fnode b{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; }
.fnode b svg{ width:14px; height:14px; color:var(--blue); }
.fnode span{ display:block; font-size:12px; color:var(--ink-45); margin:3px 0 8px; }
.fnode em{ font-style:normal; display:inline-flex; font-size:11px; padding:2px 7px; border-radius:5px; margin-right:4px; }
.ok{ background:rgba(18,145,92,.1); color:var(--green); }
.warn{ background:rgba(183,121,31,.12); color:var(--amber); }
.info{ background:rgba(0,122,185,.1); color:var(--blue); }
.plan-rows{ display:grid; gap:12px; }
.plan-row{ display:grid; grid-template-columns:190px 1fr 70px; align-items:center; gap:18px; padding:14px 16px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--line); }
.plan-row b{ display:block; font-size:14px; font-weight:500; }
.plan-row span{ font-size:12px; color:var(--ink-45); }
.track{ position:relative; height:10px; border-radius:10px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line); }
.track i{ position:absolute; top:0; bottom:0; border-radius:10px; background:linear-gradient(90deg, var(--blue), var(--sky)); }
.plan-row em{ font-style:normal; font-size:12px; text-align:right; }
.tickets{ display:grid; gap:10px; }
.ticket-row{ display:grid; grid-template-columns:90px 1fr 110px 90px; align-items:center; gap:14px; padding:13px 16px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:13.5px; }
.ticket-row code{ font-family:var(--mono); font-size:12px; color:var(--ink-45); }
.ticket-row span{ color:var(--ink-60); font-size:12.5px; }
.ticket-row em{ font-style:normal; justify-self:end; font-size:11.5px; padding:3px 8px; border-radius:6px; }

.tab-bars{ display:flex; justify-content:center; gap:8px; margin:22px 0 32px; }
.tab-bars button{ position:relative; width:40px; height:3px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.tab-bars button i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--blue); }
.tab-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.tab-col{ text-align:left; font-size:16px; line-height:26px; color:var(--ink-80); opacity:.5; transition:opacity .4s ease; }
.tab-col b{ font-weight:600; color:var(--ink); }
.tab-col.on, .tab-col:hover{ opacity:1; }

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.integ{ overflow:hidden; }
.integ .sec-head{ position:relative; z-index:2; margin-bottom:40px; }
.integ-orb{ position:absolute; z-index:0; left:50%; top:22px; width:477px; height:477px; margin-left:-238px; pointer-events:none; }
.integ-orb .orb{ --size:477px;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.75) 26%, rgba(214,236,249,.55) 55%, rgba(108,198,240,.38) 80%, rgba(0,122,185,.3) 100%);
  box-shadow:inset 0 -30px 80px rgba(0,122,185,.18), inset 0 0 0 1px rgba(255,255,255,.8), 0 40px 120px rgba(0,122,185,.22); }
.integ-orb .orb::after{ inset:-3px; -webkit-mask:radial-gradient(circle, transparent 64%, #000 71%); mask:radial-gradient(circle, transparent 64%, #000 71%); }
.integ .sec-head .tag > span{ background:rgba(255,255,255,.92); }
.icon-rows{ position:relative; z-index:1; display:grid; gap:28px; }
.still-track{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.still-track .icon-tile{ margin:0; transition:transform .35s var(--ease), box-shadow .3s ease; }
.still-track .icon-tile:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--blue), 0 12px 24px rgba(0,43,93,.12); }
.icon-tile{ width:56px; height:56px; margin:0 33px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px var(--line-2), 0 8px 18px rgba(0,43,93,.06); color:var(--navy); }
.icon-tile img{ width:28px; height:28px; object-fit:contain; }
.icon-tile svg{ width:24px; height:24px; }
/* one call-to-action block, reused at the foot of several sections */
.sec-cta{ position:relative; z-index:1; display:grid; justify-items:center; gap:16px; margin-top:44px; text-align:center; }
.sec-cta p{ font-size:17px; line-height:27px; color:var(--ink-70); max-width:540px; text-wrap:pretty; }
.sec-cta-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ============================================================
   EVENTS & STORIES — ticker cards
   ============================================================ */
.stories{ overflow:hidden; }
.stories-beam{ position:absolute; left:4%; right:-20%; top:50%; height:220px; transform:rotate(-24deg); pointer-events:none;
  background:linear-gradient(90deg, rgba(0,122,185,0) 5%, rgba(0,122,185,.6) 35%, rgba(108,198,240,.8) 55%, rgba(108,198,240,0) 85%); filter:blur(34px); }
.story-ticker .ticker-track{ align-items:stretch; }
.story{ width:364px; min-height:420px; margin-right:24px; display:flex; flex-direction:column; padding:28px; border-radius:16px;
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 0 0 1px var(--line), var(--sh-card); }
.story-logo{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:24px; }
.story-logo i{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-style:normal; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(145deg, var(--blue), var(--navy)); }
.story-logo i svg{ width:16px; height:16px; }
.story p{ font-size:16px; line-height:26px; font-weight:500; color:var(--ink-80); }
.story-by{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px; }
.story-by .avatar{ width:48px; height:48px; border-radius:10px; }
.story-by b{ display:block; font-size:16px; font-weight:500; line-height:1.4; }
.story-by div span{ display:block; font-size:14px; color:var(--ink-60); }
.story-dots{ display:none; }

/* ============================================================
   WAYS TO START — three steps
   ============================================================ */
/* ============================================================
   HOW WE WORK — all four stages visible, the media follows
   you down as you read them
   ============================================================ */
.hw-rail{ position:relative; margin-bottom:56px; }
.hw-line{ position:absolute; left:12.5%; right:12.5%; top:7px; height:2px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.hw-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:2px;
  background:linear-gradient(90deg, var(--sky), var(--blue)); transition:width .55s var(--ease); }
.hw-nodes{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.hw-node{ display:grid; justify-items:center; gap:14px; font-size:15px; color:var(--ink-45);
  text-align:center; transition:color .4s ease; }
.hw-node i{ width:16px; height:16px; border-radius:50%; background:var(--bg);
  box-shadow:inset 0 0 0 2px var(--line-2), 0 0 0 5px var(--bg); transition:box-shadow .4s ease; }
.hw-node.on{ color:var(--ink); }
.hw-node.on i{ box-shadow:inset 0 0 0 4px var(--blue), 0 0 0 5px var(--bg), 0 0 14px rgba(0,122,185,.45); }

.hw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.hw-media{
  position:sticky; top:118px; display:grid; border-radius:18px; overflow:hidden;
  background:var(--card); box-shadow:0 0 0 1px var(--line), var(--sh-float);
}
.hw-slide{ grid-area:1/1; display:flex; flex-direction:column; opacity:0; transition:opacity .55s ease; }
.hw-slide.on{ opacity:1; }
.hw-slide img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.hw-cap{ padding:15px 20px; font-size:15px; font-weight:500; color:var(--navy);
  border-top:1px solid var(--line); background:var(--card); }

.hw-steps{ display:grid; }
.hw-step{ padding:34px 0 40px; border-top:1px solid var(--line); transition:opacity .45s ease; }
.hw-step:first-child{ padding-top:0; border-top:0; }
.hw-step.dim{ opacity:.34; }
.hw-step h3{ font-size:24px; margin-bottom:10px; }
.hw-step p{ font-size:16px; line-height:26px; color:var(--ink-70); max-width:44ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:417px 1fr; gap:100px; align-items:start; }
.faq-left{ display:grid; justify-items:start; }
.faq-left .tag{ margin-bottom:16px; }
.faq-left h2{ margin-bottom:40px; }
.faq-left b{ display:block; font-size:18px; line-height:28px; font-weight:600; }
.faq-left p{ font-size:16px; line-height:26px; color:var(--ink-70); margin-bottom:32px; }
.faq-list{ display:grid; gap:12px; }
.qa{ border-radius:10px; background:var(--card); box-shadow:0 0 0 1px var(--line); transition:box-shadow .3s ease; }
.qa.open{ box-shadow:0 0 0 1px var(--line-2), var(--sh-card); }
.qa button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; text-align:left; font-size:17px; line-height:28px; font-weight:500; color:var(--ink); }
.pm{ position:relative; width:20px; height:20px; flex:none; }
.pm::before, .pm::after{ content:""; position:absolute; left:0; top:9px; width:20px; height:2px; border-radius:2px; background:var(--ink-80); transition:transform .4s var(--ease); }
.pm::after{ transform:rotate(90deg); }
.qa.open .pm::after{ transform:rotate(0deg); }
.ans{ height:0; overflow:hidden; transition:height .5s var(--ease); }
.qa.open .ans{ height:auto; }
.ans p{ padding:0 56px 18px 20px; font-size:16px; line-height:26px; color:var(--ink-70); }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.end{ position:relative; overflow:hidden; }
.end-bg{ position:absolute; z-index:0; left:0; right:0; top:200px; bottom:0; pointer-events:none; }
.end-bg i{ position:absolute; border-radius:50%; filter:blur(90px); }
.end-bg .c1{ left:-16%; top:14%; width:66%; height:130%; background:radial-gradient(closest-side, rgba(0,122,185,.95), rgba(0,122,185,0)); }
.end-bg .c2{ right:-16%; top:8%; width:66%; height:130%; background:radial-gradient(closest-side, rgba(108,198,240,1), rgba(108,198,240,0)); }
.end-bg::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, var(--bg) 0%, rgba(244,248,251,.6) 22%, rgba(244,248,251,0) 45%); }
.cta{ position:relative; z-index:1; padding:100px 40px; }
.cta-in{ display:grid; justify-items:center; text-align:center; }
.cta-in .orb{ --size:56px; margin-bottom:28px; }
.cta-in h2{ max-width:760px; margin-bottom:24px; }
.cta-in p{ font-size:18px; line-height:28px; color:var(--ink-80); max-width:620px; margin-bottom:32px; }
.cta-in .hero-cta{ justify-content:center; }

/* ============================================================
   CONTACT FORM — every call to action on the page lands here
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:64px; align-items:start; }
.contact-copy .orb{ --size:56px; display:block; margin-bottom:26px; }
.contact-copy h2{ margin-bottom:20px; }
.contact-copy p{ font-size:18px; line-height:28px; color:var(--ink-80); max-width:520px; margin-bottom:30px; }
.contact-list{ display:grid; gap:14px; }
.contact-list li{ display:flex; align-items:center; gap:12px; }
.contact-list span{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--card); box-shadow:0 0 0 1px var(--line), var(--sh-card); }
.contact-list svg{ width:17px; height:17px; color:var(--blue); }
.contact-list a{ font-size:16px; color:var(--ink-80); transition:color .2s ease; }
.contact-list a:hover{ color:var(--blue); }

.contact-card{ border-radius:20px; padding:28px; background:var(--card); box-shadow:0 0 0 1px var(--line), var(--sh-float); }
.cform{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; }
.field-wide{ grid-column:1 / -1; }
.cform label{ font-size:14px; color:var(--ink-60); }
.cform input, .cform textarea, .cform select{
  width:100%; height:46px; padding:0 14px; border:0; border-radius:10px; background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--line); font:inherit; font-size:15.5px; color:var(--ink);
  transition:box-shadow .25s ease, background .25s ease;
}
.cform textarea{ height:auto; padding:12px 14px; line-height:23px; resize:vertical; }
.cform input:focus, .cform textarea:focus, .cform select:focus{ outline:none; background:var(--card); box-shadow:inset 0 0 0 1px var(--blue), 0 0 0 4px rgba(0,122,185,.12); }
.sel{ position:relative; }
.sel select{ appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.sel .caret{ position:absolute; right:14px; top:50%; margin-top:-7px; width:14px; height:14px; color:var(--ink-45); pointer-events:none; }
.form-note{
  grid-column:1 / -1; border-radius:12px; padding:14px 16px; background:var(--ice);
  box-shadow:inset 0 0 0 1px rgba(0,122,185,.22); font-size:14.5px; line-height:22px; color:var(--ink-80);
}
.form-note a{ color:var(--blue); }
.form-note p + p{ margin-top:4px; }
.form-foot{ grid-column:1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form-status{ font-size:14px; line-height:20px; color:var(--ink-60); flex:1; min-width:200px; }
.form-status.on{ color:var(--navy); }

/* what you see after sending */
.form-done{ display:grid; justify-items:start; gap:14px; padding:14px 2px 6px; }
.form-tick{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg, #e9f5fc, #cfe7f5); color:var(--blue);
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(0,122,185,.22);
}
.form-tick svg{ width:26px; height:26px; stroke-width:2.4; }
.form-done h3{ font-size:22px; }
.form-done p{ font-size:16px; line-height:26px; color:var(--ink-70); }
.form-done .btn{ margin-top:4px; }

.foot{ position:relative; z-index:1; padding-bottom:30px; }
.foot-card{ border-radius:20px; background:var(--navy); color:#fff; padding:40px 40px 0; box-shadow:0 30px 80px rgba(0,43,93,.25); }
.foot-main{ display:grid; grid-template-columns:1fr auto; gap:40px; padding-bottom:60px; }
.foot-brand img{ width:auto; height:34px; margin-bottom:22px; }
.foot-brand p{ font-size:16px; line-height:26px; color:rgba(255,255,255,.78); max-width:340px; }
.foot-cols{ display:grid; grid-template-columns:repeat(3, auto); gap:72px; }
.foot-col h4{ font-size:18px; line-height:28px; font-weight:500; color:rgba(255,255,255,.55); margin-bottom:12px; }
.foot-col a, .foot-col p{ display:block; font-size:16px; line-height:26px; color:#fff; opacity:.8; padding:6px 0; transition:opacity .2s ease; }
.foot-col a:hover{ opacity:1; }
.foot-col p b{ display:block; font-weight:500; }
.foot-bot{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 26px; border-top:1px solid rgba(255,255,255,.14); font-size:15px; color:rgba(255,255,255,.8); }
.socials{ display:flex; gap:18px; }
.socials a{ color:#fff; opacity:.8; transition:opacity .2s ease; }
.socials a:hover{ opacity:1; }
.socials svg{ width:18px; height:18px; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html.js .reveal .w, html.js .reveal .ch, html.js .up, html.js .rv{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .ticker-track, .glow-border, .orb::after, .beams i, .streaks i, .prompt-edge i, .caret-blink{ animation:none !important; }
  .hero-light{ opacity:1 !important; }
  .scard{ transform:none !important; }
  .ai-title .grad{ transform:none !important; }
}

/* ============================================================
   TABLET (810–1199)
   ============================================================ */
@media (max-width: 1199px){
  .container, .nav-shell{ width:calc(100% - 80px); }
  .nav-links, .nav-cta, .mega{ display:none; }
  .burger{ display:block; }
  /* full-screen menu sheet */
  .nav-panel{ display:block; height:0; overflow:hidden; }
  .nav.open{ top:0; bottom:0; }
  .nav.open .nav-shell{
    width:100%; height:100%; margin:0; border-radius:0;
    background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:none; display:flex; flex-direction:column;
  }
  .nav.open .nav-top{ flex:none; height:64px; padding:0 8px 0 16px; box-shadow:inset 0 -1px 0 var(--line); }
  .nav.open .nav-panel{ flex:1; min-height:0; height:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .nav-panel-in{ display:flex; flex-direction:column; min-height:100%; }

  .mnav{ padding:6px 0 8px; }
  .mgroup + .mgroup, .mgroup + .mlink, .mlink + .mlink{ box-shadow:inset 0 1px 0 var(--line); }
  .mrow{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:17px 20px; text-align:left;
    font-size:17px; font-weight:500; line-height:24px; color:var(--ink);
    opacity:0; transform:translateY(8px);
  }
  .nav.open .mrow{
    opacity:1; transform:none;
    transition:opacity .4s ease var(--md, 0s), transform .5s var(--ease) var(--md, 0s);
  }
  .mchev{ flex:none; width:16px; height:16px; color:var(--ink-45); transition:transform .35s var(--ease), color .2s ease; }
  .mrow[aria-expanded="true"]{ color:var(--blue); }
  .mrow[aria-expanded="true"] .mchev{ transform:rotate(180deg); color:var(--blue); }
  .msub{ height:0; overflow:hidden; transition:height .38s var(--ease); }
  .msub-in{ display:grid; padding:2px 20px 16px; }
  .msub-in a{ font-size:15.5px; line-height:22px; color:var(--ink-70); padding:9px 0 9px 14px; box-shadow:inset 2px 0 0 var(--line-2); }
  .msub-in a:active{ color:var(--blue); }

  .nav-foot{ margin-top:auto; padding:20px; box-shadow:inset 0 1px 0 var(--line); }
  .nav-foot .btn{ width:100%; height:50px; }
  .nav-foot-links{ display:grid; gap:12px; margin-top:18px; }
  .nav-foot-links a{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-60); }
  .nav-foot-links svg{ width:16px; height:16px; color:var(--blue); }
  h1{ font-size:48px; }
  h2{ font-size:44px; }
  .hero{ display:block; min-height:0; padding:150px 0 64px; }
  .hero .container{ grid-template-columns:1fr; gap:0; }
  .hero-copy{ max-width:760px; }
  .hero-stage{ --pt:268px; margin-top:52px; max-width:620px; }
  .hero-app{ right:0; }
  .ai-title{ font-size:96px; gap:20px; }
  .ai-title .orb{ --size:84px; }
  .icard{ flex:0 0 calc((100% - 24px) / 2); }
  .vw-cols{ gap:24px; }
  .scard{ top:88px; margin-bottom:40px; }
  .scard-in{ padding:10px 10px 10px 36px; gap:28px; min-height:0; }
  .scard.flip .scard-in{ padding:10px 36px 10px 10px; }
  .scard-copy h3{ font-size:32px; }
  .scard-art{ height:460px; }
  .glass-list li{ font-size:14px; }
  .tabs-panel{ height:auto; aspect-ratio:1240 / 712; }
  .tab-art{ padding:0; }
  .faq-grid{ grid-template-columns:300px 1fr; gap:48px; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .contact-copy p{ max-width:640px; }
  .hw-grid{ gap:40px; }
  .hw-node{ font-size:14px; }
  .hw-step h3{ font-size:22px; }
  .foot-cols{ gap:40px; }
}

/* ============================================================
   PHONE (< 810)
   ============================================================ */
@media (max-width: 809px){
  .container, .nav-shell{ width:calc(100% - 32px); }
  .nav{ top:16px; }
  .nav.open{ top:0; }
  .section{ padding:64px 0; }
  h1{ font-size:clamp(34px, 9.6vw, 40px); line-height:1.12; }
  h2{ font-size:clamp(32px, 8.4vw, 36px); line-height:1.12; }
  h3{ font-size:20px; }
  .sec-head{ margin-bottom:40px; }
  .sec-head h2{ margin-bottom:16px; }
  .sec-head p{ font-size:16px; line-height:26px; }
  .hero{ padding:128px 0 56px; }
  .hero-copy{ justify-items:center; text-align:center; margin-inline:auto; }
  .hero h1, .hero-desc{ margin-inline:auto; }
  .hero-cta{ width:100%; flex-direction:column; gap:12px; }
  .hero-cta .btn{ width:100%; }
  .hero-stage{ position:static; height:auto; max-width:none; margin-top:28px; }
  .hero-app{
    position:static; right:auto; height:auto; grid-template-columns:1fr; margin-bottom:16px;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-app .win-side{ display:none; }
  .app-chart{ height:110px; margin:14px 14px 0; }
  .app-head{ padding:14px 14px 0; }
  .app-rows{ padding:14px; }
  .prompt-wrap{ position:static; width:100%; margin:0; }
  .prompt{ padding:12px; }
  .prompt-text{ height:auto; min-height:44px; font-size:15px; }
  .prompt-top .select{ font-size:14px; height:34px; }
  .prompt-bottom{ flex-wrap:wrap; gap:6px; }
  .prompt-bottom .chip{ height:30px; padding:0 10px; font-size:13px; }
  .send{ height:32px; font-size:14px; }
  .answer-body{ padding:12px 14px; }
  .answer-line{ font-size:14.5px; line-height:22px; }
  .answer-row{ font-size:13px; padding:8px 10px; }
  .hero-light{ height:720px; }
  .beams{ left:10%; top:-560px; }
  .sec-cta{ margin-top:34px; gap:14px; }
  .sec-cta p{ font-size:16px; line-height:26px; }
  .sec-cta-btns{ flex-direction:column; width:100%; }
  .sec-cta-btns .btn{ width:100%; }
  .cta{ padding:72px 0; }
  .contact-grid{ gap:32px; }
  .contact-card{ padding:20px; }
  .cform{ grid-template-columns:1fr; gap:14px; }
  .contact-copy p{ font-size:16px; line-height:26px; }
  .logos{ padding:72px 0 24px; }
  .logos-title{ font-size:16px; padding:0 20px; }
  /* solutions become a swipeable row instead of four tall stacked panels */
  .bento{ display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
          margin:0 -16px; padding:0 16px 8px; scrollbar-width:none; -ms-overflow-style:none; }
  .bento::-webkit-scrollbar{ display:none; }
  .bento-row{ display:contents; }
  .bento .gcard{ flex:0 0 min(300px, 84%); scroll-snap-align:start; }
  .art{ height:230px; }
  .art-int .apps{ gap:8px; transform:scale(.8); }
  .gcard-copy{ padding:20px 16px; }
  .ai-title{ gap:12px; font-size:clamp(30px, 10.4vw, 48px); margin-bottom:32px; }
  .ai-title .orb{ display:none; }
  .tabs-panel{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; margin:0 -16px; padding:0 16px; }
  .tabs-panel::-webkit-scrollbar{ display:none; }
  .vw-cols{ grid-template-columns:1fr; gap:22px; margin:28px 0 48px; }
  .vw-sub{ display:none; }
  .vw-bar{ height:40px; padding:0 12px; gap:10px; }
  .vw-play{ height:46px; font-size:15px; }
  .vw-play .in{ padding:0 18px 0 14px; }
  .rail-head{ display:grid; gap:20px; }
  .rail-nav{ justify-content:flex-start; }
  .rail{ margin:0 -16px; padding:0 16px 8px; }
  .rail-track{ gap:16px; }
  .icard{ flex:0 0 min(300px, 82%); }
  .icard-body{ padding:0 18px 18px; }
  .icard-body b{ font-size:21px; }
  .icard-copy{ font-size:14px; line-height:21px; }
  .ind{ height:180px; }
  .scard{ top:78px; margin-bottom:28px; }
  .scard-in, .scard.flip .scard-in{ grid-template-columns:1fr; padding:10px; gap:0; }
  .scard.flip .scard-copy{ order:0; }
  .scard-art{ order:-1; height:250px; }
  .scard-copy{ padding:20px 12px 14px; }
  .scard-copy h3{ font-size:25px; margin-bottom:12px; }
  .scard-copy > p{ margin-bottom:22px; }
  .sparks li{ font-size:16px; line-height:24px; gap:12px; }
  .glass-field, .glass-list{ left:8%; right:8%; }
  .glass-list li{ height:40px; font-size:13.5px; }
  .gbtn{ width:170px; height:48px; font-size:15px; }
  .gbtn:nth-child(4){ width:188px; }
  .gbtn:nth-child(5){ width:204px; }
  .glass-chat .glass{ font-size:13.5px; }
  .tabs-panel{ border-radius:14px; }
  .tab-cols{ grid-template-columns:1fr; gap:22px; }
  .tab-col{ opacity:1; }
  .integ-orb{ width:300px; height:300px; margin-left:-150px; top:40px; }
  .integ-orb .orb{ --size:300px; }
  .icon-rows{ gap:16px; }
  .still-track{ gap:14px; }
  .stories-beam{ top:60%; }
  .story-ticker .ticker-track{ animation:none; }
  .story-ticker{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .story-ticker::-webkit-scrollbar{ display:none; }
  .story-ticker .story{ scroll-snap-align:center; width:calc(100vw - 32px); max-width:360px; margin-right:16px; }
  .story-ticker .story.dup{ display:none; }
  .story-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
  .story-dots i{ width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:background .3s ease, transform .3s ease; }
  .story-dots i.on{ background:var(--ink); transform:scale(1.15); }
  /* the progress bar rides along at the top and you scroll the stages under it */
  .hw-rail{
    position:sticky; top:76px; z-index:6; margin:0 -16px 8px; padding:0 16px;
    background:var(--bg); box-shadow:inset 0 -1px 0 var(--line);
  }
  .hw-nodes{ padding:14px 0 16px; }
  .hw-line{ left:12.5%; right:12.5%; top:21px; }
  .hw-node{ gap:9px; font-size:11.5px; line-height:15px; }
  .hw-node i{ width:14px; height:14px; }
  .hw-grid{ display:block; }
  .hw-media{ display:none; }
  .hw-step{ padding:30px 0 34px; }
  .hw-step h3{ font-size:21px; margin-bottom:8px; }
  .hw-step p{ font-size:15.5px; line-height:25px; }
  .faq-grid{ grid-template-columns:1fr; gap:40px; }
  .faq-left h2{ margin-bottom:24px; }
  .faq-left p{ text-wrap:pretty; }
  .qa button{ font-size:16px; padding:14px 16px; }
  .ans p{ padding:0 16px 16px; }
  .end-bg{ top:120px; }
  .sec-cta{ margin-top:34px; gap:14px; }
  .sec-cta p{ font-size:16px; line-height:26px; }
  .sec-cta-btns{ flex-direction:column; width:100%; }
  .sec-cta-btns .btn{ width:100%; }
  .cta{ padding:72px 0; }
  .cta-in .hero-cta{ width:100%; }
  .foot-card{ padding:28px 20px 0; }
  .foot-main{ grid-template-columns:1fr; gap:32px; padding-bottom:32px; }
  .foot-cols{ grid-template-columns:1fr; gap:28px; }
  .foot-col:first-child{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  .foot-col:first-child h4{ grid-column:1 / -1; }
  .foot-bot{ flex-direction:column; align-items:flex-start; }
}