/* ==========================================================
   Gravity Logics - main stylesheet
   ========================================================== */

@font-face {
  font-family: "Syne";
  src: url("../fonts/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --midnight: #040A1A;
  --deep: #081430;
  --deep-2: #0D1D42;
  --cobalt: #0A8DFF;        /* Gravity Azure, main brand blue */
  --cobalt-hi: #3AA8FF;
  --indigo: #2B5BFF;
  --cyan: #2FD4FF;
  --ice: #A9DCFF;
  --mist: #F2F7FF;
  --ink: #0A1430;
  --muted: #8A9CC2;
  --grad: linear-gradient(115deg, #2B5BFF 0%, #0A8DFF 52%, #22C3FF 100%);
  --grad-text: linear-gradient(100deg, #6FA0FF 0%, #2FB6FF 50%, #7BE3FF 100%);
  --line: rgba(169, 220, 255, .14);
  --line-strong: rgba(169, 220, 255, .28);

  --f-display: "Syne", "Manrope", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 76px;
  --stage-h: min(100svh, 56.25vw);   /* 16:9 widescreen on desktop */
  --ease: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--mist);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; }

:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--indigo); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn-lg { height: 54px; padding: 0 28px; font-size: 1rem; }
.btn-primary {
  background: var(--grad); background-size: 160% 100%; background-position: 0% 0;
  color: #fff; font-weight: 600;
  box-shadow: 0 10px 30px -12px rgba(10, 141, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-position .5s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 36px -12px rgba(47, 212, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--mist); }
.btn-ghost:hover { border-color: var(--ice); }
.text-link { display: inline-block; margin-top: 18px; color: var(--ice); font-weight: 500; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.text-link:hover { border-color: var(--ice); }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(4, 10, 26, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand-mark { width: 50px; height: auto; aspect-ratio: 466 / 346; }
.brand-mark .bm-g { fill: url(#brand-grad); }
.brand-mark .bm-l { fill: #EAF4FF; }

.site-nav { margin-left: auto; }
.nav-list { display: flex; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: .9375rem; color: var(--mist); opacity: .86;
  transition: opacity .2s, background-color .2s;
}
.nav-link:hover, .nav-item.is-open > .nav-link { opacity: 1; background: rgba(169, 220, 255, .08); }
.has-panel > .nav-link::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.nav-item.is-open > .nav-link::after { transform: rotate(-135deg); margin-top: 3px; }
.header-cta { margin-left: 8px; }
/* desktop: logo left, menu in the middle, button right */
@media (min-width: 1081px) {
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .site-nav { margin: 0; justify-self: center; }
  .header-cta { margin: 0; justify-self: end; }
}

.nav-toggle, .nav-mobile-foot { display: none; }

/* ---------- Mega panels (desktop) ---------- */
.panel {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) - 6px);
  max-width: 1240px; margin: 0 auto;
  background: linear-gradient(180deg, var(--deep-2), var(--deep));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  overflow: hidden;
}
.nav-item.is-open > .panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.panel-inner { display: grid; gap: 36px; padding: 32px; }

/* Services panel */
.panel-services .panel-inner { grid-template-columns: 1fr 1fr 1fr 300px; }
.panel-services .svc-cols { display: contents; }
.svc-head { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.svc-head a { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; }
.svc-head span { font-size: .8125rem; color: var(--muted); }
.svc-link {
  display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 12px;
  transition: background-color .2s;
}
.svc-link strong { display: block; font-weight: 500; font-size: .9688rem; }
.svc-link span { display: block; font-size: .8438rem; color: var(--muted); line-height: 1.45; }
.svc-link:hover, .svc-link.is-active { background: rgba(10, 141, 255, .14); }
.svc-link:hover strong, .svc-link.is-active strong { color: #fff; }

.preview { display: flex; flex-direction: column; }
.preview-media {
  aspect-ratio: 16 / 11; border-radius: 14px; margin-bottom: 16px;
  border: 1px solid var(--line);
  transition: opacity .3s var(--ease);
}
.preview-title { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; margin-bottom: 6px; }
.preview-text { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.preview-link { margin-top: auto; padding-top: 14px; color: var(--ice); font-size: .9063rem; font-weight: 500; }
.preview-link:hover { color: #fff; }

.panel-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px; border-top: 1px solid var(--line);
  background: rgba(10, 141, 255, .07);
}
.panel-actions p { font-size: .9375rem; color: var(--muted); }
.panel-actions strong { color: var(--mist); font-weight: 500; }
.panel-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

/* Work + Insights panels */
.panel-insights .panel-inner { grid-template-columns: 1fr 1fr 260px; }
.panel-cards { display: contents; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 10px; margin: -10px; border-radius: 16px; transition: background-color .2s; }
.card:hover { background: rgba(169, 220, 255, .06); }
.card-media { display: block; aspect-ratio: 16 / 10; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--line); }
.card strong { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.card > span:last-child { font-size: .875rem; color: var(--muted); }
.panel-label { font-size: .8125rem; color: var(--muted); margin-bottom: 10px; }
.panel-links li a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.panel-links li a:hover { color: var(--ice); }

/* About panel */
.panel-about .panel-inner { grid-template-columns: 380px 1fr; max-width: 900px; }
.panel-about { max-width: 900px; left: var(--gutter); right: var(--gutter); margin: 0 auto; }
.about-media { border-radius: 14px; border: 1px solid var(--line); min-height: 260px; }
.about-lead { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; margin-bottom: 18px; }
.panel-list a { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; }
.panel-list a:hover { background: rgba(10, 141, 255, .14); }
.panel-list strong { display: block; font-weight: 500; }
.panel-list span { font-size: .8438rem; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .8438rem; color: var(--ice); }
.panel-address { margin-top: 10px; font-style: normal; font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.badge svg { width: 18px; height: 18px; fill: none; stroke: var(--ice); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

/* Media placeholders: real images drop in at these paths, gradient shows until then */
[data-media] { background-color: var(--deep-2); background-size: cover; background-position: center; }
[data-media="web"] { background-image: url("../img/menu/m-web.webp"); }
[data-media="app"] { background-image: url("../img/menu/m-app.webp"); }
[data-media="auto"] { background-image: url("../img/menu/m-auto.webp"); }
[data-media="avatar"] { background-image: url("../img/menu/m-avatar.webp"); }
[data-media="prompt"] { background-image: url("../img/menu/m-prompt.webp"); }
[data-media="google"] { background-image: url("../img/menu/m-google.webp"); }
[data-media="meta"] { background-image: url("../img/menu/m-meta.webp"); }
[data-media="seo"] { background-image: url("../img/menu/m-seo.webp"); }
[data-media="dm"] { background-image: url("../img/menu/m-dm.webp"); }
[data-media="about"] { background-image: url("../img/menu/m-about.webp"); }
[data-media="industries"] { background-image: url("../img/menu/m-industries.webp"); }
[data-media="post-1"] { background-image: url("../img/menu/post-1.webp"); }
[data-media="post-2"] { background-image: url("../img/menu/post-2.webp"); }
[data-media="post-3"] { background-image: url("../img/menu/post-3.webp"); }
[data-media="post-4"] { background-image: url("../img/menu/post-4.webp"); }
[data-media="post-5"] { background-image: url("../img/menu/post-5.webp"); }

/* Panel images load only when a panel is first opened */
.site-nav:not(.media-ready) [data-media] { background-image: radial-gradient(circle at 60% 40%, rgba(10,141,255,.35), transparent 65%); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative; min-height: max(600px, var(--stage-h));
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--header-h) + clamp(36px, 6vw, 110px)) var(--gutter) 96px;
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 55% at 70% 54%, rgba(10, 141, 255, .18), transparent 70%),
    var(--midnight);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 26, 0), var(--midnight)); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 10, 26, .55) 0%, rgba(4, 10, 26, .3) 34%, transparent 56%);
}
.hero-content { position: relative; z-index: 1; max-width: 640px; will-change: transform, opacity; }
.hero h1 {
  font-size: clamp(2.375rem, 4.4vw, 4.375rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  text-wrap: balance;
}
.hero-sub { margin-top: 26px; max-width: 31em; font-size: clamp(1rem, 1.2vw, 1.125rem); color: #C5D0EA; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }


.orbit-labels { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 92%); mask-image: linear-gradient(180deg, #000 70%, transparent 92%); }
.orbit-label {
  position: absolute; left: 0; top: 0;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--f-body); font-weight: 600; font-size: .75rem; letter-spacing: .01em;
  color: var(--mist); background: rgba(8, 20, 48, .7); border: 1px solid var(--line-strong);
  pointer-events: auto; opacity: 0; transition: opacity .5s, border-color .2s;
  white-space: nowrap;
}
.orbit-label:hover { border-color: var(--ice); }
.orbit-label::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--ice); }
.orbit-label[data-tone="ai"]::before { background: var(--cyan); }
.orbit-label[data-tone="grow"]::before { background: var(--indigo); box-shadow: 0 0 0 1px rgba(169, 220, 255, .5); }
.hero.is-live .orbit-label { opacity: 1; }

/* single page-load moment */
.hero-content > * { opacity: 0; transform: translateY(14px); }
.hero.is-live .hero-content > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero.is-live .hero-content > :nth-child(2) { transition-delay: .12s; }
.hero.is-live .hero-content > :nth-child(3) { transition-delay: .24s; }
.hero-content.is-static > * { opacity: 1; transform: none; }


/* ==========================================================
   HOME / SECTION 2: ONE DROP, EVERY SHAPE
   Scroll drives the video. Each scene gets --e (enter 0..1) and --x (exit 0..1) from journey.js.
   ========================================================== */
.journey { position: relative; height: calc(var(--stage-h) * 5.6); }
.journey-stage {
  position: sticky; top: max(0px, calc((100svh - var(--stage-h)) / 2)); height: var(--stage-h);
  overflow: hidden; background: var(--midnight); isolation: isolate;
}
.journey-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
/* desktop: the film plays smaller and closer to the cards, its edges melting into space */
@media (min-width: 721px) {
  .journey-video {
    --vw: 62%; inset: auto; left: 23%; top: 50%; width: var(--vw); height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  }
}
.journey-video.is-loaded { opacity: 1; }
.journey-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 10, 26, .82) 0%, rgba(4, 10, 26, .42) 30%, transparent 56%),
              linear-gradient(0deg, rgba(4, 10, 26, .55) 0%, transparent 26%);
}

/* scenes share one engine */
.scene { --e: 0; --x: 0; position: absolute; z-index: 3; pointer-events: none; visibility: hidden; }
.scene.is-on { visibility: visible; }
.scene.is-live { pointer-events: auto; }
.w { display: inline-block; will-change: transform, opacity, filter;
  --t: clamp(0, calc(var(--e) * 2.6 - var(--i, 0) * .16), 1);
  opacity: calc(var(--t) * (1 - var(--x)));
  transform: translate3d(0, calc((1 - var(--t)) * .7em + var(--x) * -.5em), 0) rotate(calc((1 - var(--t)) * 4deg));
  filter: blur(calc((1 - var(--t)) * 8px + var(--x) * 10px));
}

/* intro: the headline sits on the drop */
.scene-intro { left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(620px, 42vw); }
.scene-intro h2 { font-size: clamp(2.125rem, 3.7vw, 3.875rem); line-height: 1.02; letter-spacing: -.035em; }
.scroll-hint {
  display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: .9375rem; font-weight: 600; color: var(--ice);
  opacity: calc(var(--e) * (1 - var(--x) * 1.6));
}
.hint-drop { position: relative; width: 18px; height: 28px; border: 1.5px solid var(--line-strong); border-radius: 12px; }
.hint-drop::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 10px rgba(47, 212, 255, .8);
  animation: hintDrop 1.8s var(--ease) infinite;
}
@keyframes hintDrop { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* glass cards that grow out of the shape and dissolve with it */
.glass {
  --mx: 30%; --my: 0%; --rx: 0deg; --ry: 0deg;
  left: clamp(var(--gutter), 7vw, 140px); top: 50%; width: min(620px, 44vw);
  opacity: clamp(0, calc(var(--e) * 1.4 - var(--x) * 1.2), 1);
  transform: translate3d(calc((1 - var(--e)) * 70px), calc(-50% + var(--x) * -70px), 0)
             perspective(1000px) rotateY(calc((1 - var(--e)) * -14deg + var(--ry))) rotateX(var(--rx)) scale(calc(.94 + var(--e) * .06));
  clip-path: circle(calc(var(--e) * 160%) at 110% 50%);
  border-radius: 28px;
  background:
    /* moving sheen, travels with scroll */
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .05) 50%, transparent 56%) calc(var(--s, 0) * 100%) 0 / 260% 100% no-repeat,
    /* main glare: the big diagonal reflection of a polished glass sheet */
    linear-gradient(128deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 18%, rgba(255, 255, 255, 0) 34%),
    /* second, thinner reflection streak */
    linear-gradient(128deg, transparent 52%, rgba(255, 255, 255, .07) 56%, transparent 61%),
    /* light catching the bottom edge */
    linear-gradient(0deg, rgba(160, 225, 255, .07), transparent 14%),
    transparent;
  /* no blur: clear glass, not frosted */
  -webkit-backdrop-filter: saturate(150%) brightness(1.12) contrast(1.05);
  backdrop-filter: saturate(150%) brightness(1.12) contrast(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .75),
    inset 2px 0 0 rgba(255, 255, 255, .28),
    inset -1px 0 0 rgba(160, 225, 255, .3),
    inset 0 -1px 0 rgba(200, 240, 255, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 0 24px rgba(160, 220, 255, .10),
    0 30px 70px -30px rgba(0, 0, 0, .7),
    0 0 50px -18px rgba(10, 141, 255, .45);
  text-shadow: 0 1px 12px rgba(2, 8, 24, .65);
}
/* bevelled glass edge: bright where the light hits, cooler on the far side */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, .35) 16%, rgba(160, 225, 255, .1) 45%, rgba(120, 214, 255, .15) 70%, rgba(47, 212, 255, .8) 90%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* specular highlight that follows the cursor across the glass */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), rgba(160, 225, 255, .06) 30%, transparent 55%);
}
.glass-inner { position: relative; z-index: 1; padding: clamp(24px, 2.4vw, 36px); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.glass h3 { margin-top: 12px; font-size: clamp(1.875rem, 2.9vw, 3rem); letter-spacing: -.035em; }
.glass-text {
  margin-top: 14px; font-size: 1rem; line-height: 1.6; color: #E2EBFA;
  opacity: clamp(0, calc(var(--e) * 2 - .7), 1);
  transform: translateY(calc((1 - var(--e)) * 14px));
}
.pills { margin-top: 22px; display: flex; flex-wrap: nowrap; gap: 8px; }
.pills a { white-space: nowrap; }
.pills li { --t: clamp(0, calc(var(--e) * 2.4 - 1.2 - var(--i, 0) * .14), 1); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 12px)); }
.pills a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: .875rem; font-weight: 600; color: var(--mist);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)); border: 1px solid rgba(200, 235, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.pills a:hover { background: rgba(10, 141, 255, .22); border-color: var(--ice); box-shadow: 0 0 24px -6px rgba(47, 212, 255, .7); }

/* the thread that ties a card to its shape */
.journey-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; transition: opacity .4s; }
.link-path { fill: none; stroke: none; }
.link-p { fill: #CFF3FF; }
.link-dot { fill: #E8FAFF; filter: drop-shadow(0 0 10px rgba(47, 212, 255, 1)); }
.link-ring { fill: none; stroke: rgba(120, 214, 255, .7); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: linkPulse 2.2s ease-out infinite; }
@keyframes linkPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }

/* final call to action, revealed as the spiral reaches the light */
.scene-final { left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(560px, 46vw); }
.scene-final h3 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); letter-spacing: -.035em; }
.scene-final p { margin-top: 16px; color: #CFDAF2; font-size: 1.0625rem; opacity: clamp(0, calc(var(--e) * 2 - .8), 1); }
.final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; opacity: clamp(0, calc(var(--e) * 2.2 - 1.2), 1); transform: translateY(calc((1 - var(--e)) * 16px)); }

/* liquid progress: a droplet slides along the track and stretches with scroll speed */
.journey-rail { position: absolute; left: 50%; bottom: clamp(18px, 3.2vw, 40px); transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rail-track { position: relative; width: 220px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
.rail-drop {
  position: absolute; top: 50%; left: calc(var(--rp, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #7FE0FF 40%, #0A8DFF 75%);
  box-shadow: 0 0 14px rgba(47, 212, 255, .9), 0 0 30px rgba(10, 141, 255, .5);
  transform: scale(calc(1 + var(--rv, 0)), calc(1 - var(--rv, 0) * .25));
}
.journey-rail ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }
.journey-rail a { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); transition: color .3s; }
.journey-rail a.is-active { color: var(--mist); }

@media (max-width: 720px) {
  :root { --stage-h: 100svh; }
  .hero { min-height: 0; }
  .journey { height: calc(var(--stage-h) * 5.2); }
  /* mobile: the film plays smaller in the upper part, and the card sits right under the shape */
  .journey-video {
    --mvh: 60svh; inset: auto; left: 50%; top: calc(var(--header-h) + 7svh); height: var(--mvh); width: auto; aspect-ratio: 9 / 16;
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
  }
  .journey-shade { background: linear-gradient(0deg, rgba(4, 10, 26, .9) 0%, rgba(4, 10, 26, .5) 42%, transparent 66%); }
  .scene-intro, .scene-final { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(40px + env(safe-area-inset-bottom)); transform: none; }
  .scene-intro { top: calc(var(--header-h) + 7svh + 60svh * .5); bottom: auto; }
  .scene-intro h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .glass {
    left: 12px; right: 12px; width: auto; bottom: auto; top: calc(var(--header-h) + 7svh + 60svh * .5);
    transform: translate3d(0, calc((1 - var(--e)) * 60px + var(--x) * -50px), 0) scale(calc(.96 + var(--e) * .04));
    clip-path: circle(calc(var(--e) * 160%) at 50% 0%);
  }
  .glass h3 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .glass-text { font-size: .9375rem; }
  .pills { flex-wrap: wrap; }
  .pills a { height: 34px; padding: 0 12px; font-size: .8125rem; }
  .journey-link { display: none; }
  .journey-rail { top: calc(var(--header-h) + 12px); bottom: auto; right: auto; left: var(--gutter); transform: none; flex-direction: column; align-items: flex-start; gap: 10px; }
  .rail-track { width: 132px; height: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent); }
  .rail-drop { top: 50%; left: calc(var(--rp, 0) * 100%); transform: scale(calc(1 + var(--rv, 0)), calc(1 - var(--rv, 0) * .25)); }
  .journey-rail ol { display: flex; gap: 22px; }
  .journey-rail a.is-active { transform: none; }
  .final-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .journey { height: auto; }
  .journey-stage { position: relative; height: auto; padding: 64px var(--gutter); display: grid; gap: 32px; }
  .journey-video, .journey-shade, .journey-link, .journey-rail, .scroll-hint { display: none; }
  .scene { position: static; visibility: visible; pointer-events: auto; --e: 1; --x: 0; width: auto; transform: none; clip-path: none; opacity: 1; }
}

/* ==========================================================
   HOME / SECTION 3: HOW WE WORK (with the AI guide)
   ========================================================== */
.process { position: relative; padding: clamp(96px, 10vw, 160px) 0 clamp(80px, 8vw, 140px); }
.process::before { /* faint light behind the guide */
  content: ""; position: absolute; left: 20%; top: 25%; width: 60%; height: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 141, 255, .12), transparent);
}
.process-head { max-width: 760px; padding: 0 var(--gutter); }
.process-head h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 4rem); letter-spacing: -.035em; text-wrap: balance; }
.process-lead { margin-top: 18px; font-size: 1.125rem; color: #C9D6F0; }

/* the track gives the scroll room; the stage stays pinned while she moves and the cards change */
.process-track { position: relative; height: 460svh; margin-top: clamp(24px, 3vw, 48px); }
.process-stage {
  --fh: calc(100svh - var(--header-h) - 160px);      /* her frame height */
  --fw: min(calc(var(--fh) * 9 / 16), 34vw);         /* her frame width */
  --gap: clamp(28px, 3.4vw, 56px);
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}

/* the guide stays in the middle, the camera moves around her */
.guide { position: absolute; left: 50%; top: calc(var(--header-h) + 36px); margin: 0; width: var(--fw); transform: translateX(-50%); }
.guide-frame { /* no box: the video edges melt into the page on all four sides */
  position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: var(--fh); isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 90%, transparent);
  mask-composite: intersect;
}
.guide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); z-index: 2; }
.guide.is-ready .guide-video { opacity: 1; }
.guide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; z-index: 1; transition: opacity .8s var(--ease); }
.guide.is-ready .guide-img { opacity: 0; }
.guide-pulse { /* her light answers each new card */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 45% 35% at 50% 45%, rgba(47, 212, 255, .3), transparent 70%);
  mix-blend-mode: screen;
}
.guide.is-pulsing .guide-pulse { animation: guidePulse 1.2s var(--ease); }
@keyframes guidePulse { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.guide figcaption { position: absolute; left: -50%; right: -50%; top: 100%; margin-top: 8px; font-family: var(--f-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: #C9D6F0; text-align: center; }
.guide figcaption strong { font-weight: 600; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the steps: no boxes, words typed beside her over a drifting blue glow. JS sets --o (opacity) */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  --o: 0; position: absolute; width: min(440px, calc(50% - var(--fw) / 2 - var(--gap) - var(--gutter)));
  display: flex; gap: 20px; isolation: isolate;
  opacity: var(--o); visibility: hidden; pointer-events: none;
  text-shadow: 0 2px 18px rgba(4, 10, 26, .9);
}
.step.is-on { visibility: visible; pointer-events: auto; }
/* the glow: two soft blue clouds waving slowly behind the words, like the nebula in the hero */
.step::before, .step::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  filter: blur(42px); animation-play-state: paused;
}
.step::before {
  inset: -28% -18%;
  background: radial-gradient(ellipse 50% 42% at 34% 50%, rgba(10, 141, 255, .5), transparent 72%),
              radial-gradient(ellipse 38% 34% at 72% 58%, rgba(47, 212, 255, .2), transparent 72%);
  animation: glowWave 9s ease-in-out infinite alternate;
}
.step::after {
  inset: -18% -8%;
  background: radial-gradient(ellipse 46% 38% at 62% 40%, rgba(43, 91, 255, .34), transparent 72%);
  animation: glowWave2 12s ease-in-out infinite alternate;
}
.step.is-on::before, .step.is-on::after { animation-play-state: running; }
@keyframes glowWave {
  0% { transform: translate(-6%, 4%) rotate(-6deg) scale(1); }
  50% { transform: translate(5%, -5%) rotate(4deg) scale(1.08, .94); }
  100% { transform: translate(8%, 6%) rotate(8deg) scale(.96, 1.06); }
}
@keyframes glowWave2 {
  0% { transform: translate(8%, -4%) scale(1.05); opacity: .7; }
  50% { transform: translate(-6%, 6%) scale(.92, 1.1); opacity: 1; }
  100% { transform: translate(-10%, -6%) scale(1.1, .9); opacity: .8; }
}
.step-num {
  flex: none; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; letter-spacing: -.03em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.step h3 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); letter-spacing: -.03em; }
.step p { margin-top: 10px; color: #C9D6F0; }
.step-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; text-shadow: none; opacity: 0; transition: opacity .4s var(--ease); }
.step.is-typed .step-tags { opacity: 1; }
.step-tags li { font-size: .8125rem; font-weight: 600; color: var(--ice); padding: 6px 12px; border-radius: 999px; background: rgba(10, 141, 255, .1); border: 1px solid rgba(120, 214, 255, .2); }

/* typing */
.type-rest { visibility: hidden; }
.type-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* where each step sits around her (screen sides):
   1 left, centred / 2 left, beside her legs / 3 right, beside her head / 4 left, centred */
.step-p1, .step-p4 { right: calc(50% + var(--fw) / 2 + var(--gap)); top: 50%; transform: translateY(-50%); }
.step-p2 { right: calc(50% + var(--fw) / 2 + var(--gap)); bottom: 10svh; }
.step-p3 { left: calc(50% + var(--fw) / 2 + var(--gap)); top: calc(var(--header-h) + 8svh); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.process-cta { /* sits right under her and the caption, appears at the end of step 4 (JS sets --o) */
  --o: 0; position: absolute; left: 50%; top: calc(var(--header-h) + 36px + var(--fh) + 46px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 20px; white-space: nowrap; opacity: var(--o); visibility: hidden;
}
.process-cta.is-on { visibility: visible; }
.process-cta p { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -.02em; }

/* tablet and mobile: she stays in the upper part and moves a little, the card shows under her */
@media (max-width: 1000px) {
  .process-track { height: 420svh; }
  .process-stage { --fh: clamp(38svh, calc(100svh - var(--header-h) - 300px), 64svh); --fw: calc(var(--fh) * 9 / 16); } /* she grows on tall screens, the words always fit under her */
  .guide { top: calc(var(--header-h) + 14px); }
  .guide figcaption { display: none; }
  .step, .step-p1, .step-p2, .step-p3, .step-p4 {
    left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 14px + var(--fh) * .93); bottom: auto; margin: 0; /* right under her, whatever the screen height */ transform: none; width: auto; max-width: 560px; margin-inline: auto;
    flex-direction: column; gap: 6px;
  }
  .step h3 { font-size: 1.5rem; }
  .step p { margin-top: 6px; font-size: .9375rem; }
  .step-tags { margin-top: 12px; }
  .step-num { font-size: 1.5rem; }
  .process-cta { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); transform: none; flex-direction: column; align-items: stretch; gap: 10px; white-space: normal; }
  .process-cta p { font-size: 1.125rem; }
  .process-stage.is-end .step-p4 .step-tags { opacity: 0; } /* room for the button */
}

/* reduced motion: no pinning, everything shown in order */
@media (prefers-reduced-motion: reduce) {
  .process-track { height: auto; }
  .process-stage { position: relative; height: auto; overflow: visible; display: grid; gap: 24px; padding: 0 var(--gutter); }
  .guide { position: relative; left: auto; top: auto; transform: none; width: min(320px, 70vw); margin-inline: auto; }
  .guide figcaption { position: static; }
  .steps { display: grid; gap: 20px; }
  .step, .step-p1, .step-p2, .step-p3, .step-p4 { position: relative; inset: auto; margin: 0; transform: none; width: auto; --o: 1; visibility: visible; }
  .step-tags { opacity: 1; }
  .step::before, .step::after { animation: none; }
  .process-cta { position: relative; inset: auto; transform: none; --o: 1; visibility: visible; margin-top: 24px; flex-wrap: wrap; }
}

/* ==========================================================
   HOME / SECTION 4: WHY GRAVITY LOGICS
   Five scattered suppliers drift apart, the core pulls them into one orbit,
   then the four reasons type themselves in around it.
   ========================================================== */
.why { position: relative; }
.why-track { position: relative; height: 400svh; }
.why-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.why-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* JS sets --o (opacity) and --y (lift) on the intro, the reasons and the button */
.why-intro, .reason, .why-cta { --o: 0; opacity: var(--o); visibility: hidden; }
.why-intro.is-on, .reason.is-on, .why-cta.is-on { visibility: visible; }

.why-intro {
  --o: 1; --y: 0px; visibility: visible;
  position: absolute; left: 50%; top: calc(var(--header-h) + 6svh); width: min(760px, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, var(--y)); text-align: center;
}
.why-intro .kicker { justify-content: center; }
.why-intro h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 4rem); letter-spacing: -.035em; text-wrap: balance; }
.why-lead { margin: 18px auto 0; max-width: 34em; font-size: 1.125rem; color: #C9D6F0; }

.why-list { list-style: none; margin: 0; padding: 0; }
.reason {
  --edge: max(var(--gutter), calc(50% - 580px)); /* keep them inside a centred box, not on the screen edges */
  position: absolute; width: min(320px, 26vw); isolation: isolate;
  text-shadow: 0 2px 18px rgba(4, 10, 26, .9);
}
.reason-num {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .02em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.reason h3 { margin-top: 8px; font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.03em; }
.reason p { margin-top: 10px; color: #C9D6F0; }
/* the same drifting blue glow as in "How we work" */
.reason::before, .reason::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  filter: blur(42px); animation-play-state: paused;
}
.reason::before {
  inset: -28% -18%;
  background: radial-gradient(ellipse 50% 42% at 34% 50%, rgba(10, 141, 255, .45), transparent 72%),
              radial-gradient(ellipse 38% 34% at 72% 58%, rgba(47, 212, 255, .2), transparent 72%);
  animation: glowWave 9s ease-in-out infinite alternate;
}
.reason::after {
  inset: -18% -8%;
  background: radial-gradient(ellipse 46% 38% at 62% 40%, rgba(43, 91, 255, .32), transparent 72%);
  animation: glowWave2 12s ease-in-out infinite alternate;
}
.reason.is-on::before, .reason.is-on::after { animation-play-state: running; }

/* four corners around the system, clockwise */
.reason-1 { left: var(--edge); top: calc(var(--header-h) + 9svh); }
.reason-2 { right: var(--edge); top: calc(var(--header-h) + 9svh); text-align: right; }
.reason-3 { right: var(--edge); bottom: 12svh; text-align: right; }
.reason-4 { left: var(--edge); bottom: 12svh; }

.why-cta { position: absolute; left: 50%; bottom: 6svh; transform: translateX(-50%); }

@media (max-width: 1000px) {
  .why-track { height: 440svh; }
  .why-intro { top: auto; bottom: calc(36px + env(safe-area-inset-bottom)); text-align: left; }
  .why-intro .kicker { justify-content: flex-start; }
  .why-intro h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .why-lead { margin-left: 0; font-size: 1rem; }
  /* one reason at a time, under the system */
  .reason, .reason-1, .reason-2, .reason-3, .reason-4 {
    left: var(--gutter); right: var(--gutter); top: 55svh; bottom: auto; width: auto; max-width: 560px; text-align: left;
  }
  .reason h3 { font-size: 1.625rem; }
  .why-cta { bottom: calc(28px + env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); transform: none; }
  .why-cta .btn { width: 100%; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .why-intro { bottom: 8svh; }
  .why-cta { bottom: 6svh; }
}

@media (prefers-reduced-motion: reduce) {
  .why-track { height: auto; }
  .why-stage { position: relative; height: auto; overflow: visible; padding: clamp(96px, 10vw, 160px) var(--gutter); display: grid; gap: 40px; }
  .why-canvas { display: none; }
  .why-intro, .reason, .why-cta { position: relative; inset: auto; transform: none; width: auto; --o: 1; visibility: visible; text-align: left; }
  .why-list { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .reason::before, .reason::after { animation: none; }
}

/* ==========================================================
   HOME / SECTION 5: WHAT WE BUILD ("Gravity Field" look, and the "Black Hole" look below)
   The stage is pinned. The logo floats above a field of light and bends it, like mass bends space.
   The six services orbit it on a tilted ring, seen a little from the side:
   the current one swings in front of the logo, the others pass behind it.
   Every time a new service arrives, a wave runs through the field.
   ========================================================== */
.core { position: relative; }
.core-track { position: relative; height: 380svh; }
.core-stage {
  --lw: min(15vw, 22svh, 220px);             /* logo width */
  --cy: 50%;                                 /* centre of the orbit */
  position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--midnight);
}
.core-field { /* the field fades into the page at the bottom, so there is no edge between this section and the next */
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 96%);
}
.core-head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 24px); padding: 0 var(--gutter); text-align: center; z-index: 4; }
.core-head .kicker { justify-content: center; }
.core-head h2 { margin-top: 10px; font-size: clamp(1.5rem, 2.2vw, 2.25rem); letter-spacing: -.03em; text-wrap: balance; }
.core-count { margin-top: 10px; font-family: var(--f-display); font-size: .9375rem; color: var(--muted); letter-spacing: .04em; }
.core-now { color: var(--mist); font-weight: 600; }

/* the logo: floats in the middle; services in front cover it, services behind pass under it */
.core-logo { position: absolute; left: 50%; top: var(--cy); width: var(--lw); aspect-ratio: 466 / 346; z-index: 2; transform: translate(-50%, -50%); will-change: transform; }
.core-mark { position: relative; width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 18px rgba(10, 141, 255, .55)) drop-shadow(0 0 2px rgba(169, 220, 255, .6)); }
.core-halo {
  position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--hs, 1));
  background: radial-gradient(circle, rgba(10, 141, 255, .26), rgba(43, 91, 255, .08) 38%, transparent 66%);
  opacity: var(--ho, .8);
}

/* the services: words on a tilted orbit */
.core-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.core-item {
  --f: 0;                                    /* 1 when it is the one in front */
  position: absolute; left: 50%; top: var(--cy); width: min(560px, 50vw);
  text-align: center; visibility: hidden; opacity: 0; will-change: transform, opacity;
  text-shadow: 0 0 6px rgba(4, 10, 26, .95), 0 0 22px rgba(4, 10, 26, .9), 0 4px 44px rgba(4, 10, 26, .85);
}
.core-item::before { /* a soft dark pool behind the words, so they read on top of the field and the logo */
  content: ""; position: absolute; inset: -18% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(4, 10, 26, .72), rgba(4, 10, 26, .4) 45%, transparent 72%);
}
.core-item.is-on { visibility: visible; }
.core-item.is-front { pointer-events: auto; }
.core-num { font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: .08em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.core-item h3, .core-item h2 { margin-top: 8px; font-size: clamp(2rem, 3.3vw, 3.25rem); letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.core-item p, .core-actions { opacity: var(--f); transform: translateY(calc((1 - var(--f)) * 10px)); }
.core-item p { margin: 14px auto 0; max-width: 34ch; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.55; color: #E2EBFA; }
.core-actions { margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; text-shadow: none; }
.core-actions .btn { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.core-actions .btn-ghost { background: rgba(4, 10, 26, .55); }

@media (max-width: 720px) {
  .core-track { height: 340svh; }
  .core-stage { --lw: min(30vw, 16svh); --cy: 50%; }
  .core-head { top: calc(var(--header-h) + 16px); }
  .core-head h2 { font-size: 1.5rem; }
  .core-item { width: calc(100vw - 2 * var(--gutter)); }
  .core-item h3, .core-item h2 { font-size: clamp(1.75rem, 8vw, 2.125rem); }
  .core-item p { margin-top: 10px; font-size: 1rem; }
  .core-actions { margin-top: 18px; }
  .core-actions .btn { height: 44px; padding: 0 18px; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .core-track { height: auto; }
  .core-field { display: none; }
  .core-stage { position: relative; height: auto; overflow: visible; padding: calc(var(--header-h) + 24px) var(--gutter) 48px; display: flex; flex-direction: column; gap: 32px; }
  .core-head, .core-logo, .core-list, .core-item { position: relative; inset: auto; left: auto; top: auto; transform: none; }
  .core-logo { margin: 0 auto; }
  .core-list { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); pointer-events: auto; }
  .core-item { width: auto; opacity: 1; visibility: visible; text-align: left; --f: 1; }
  .core-item h3 { font-size: 1.75rem; }
  .core-item p { margin-left: 0; }
}

/* Services page: the "Gravity Field" look opens the page, with the page title in its head */
.core-hero .core-head h1 { margin-top: 12px; font-size: clamp(1.875rem, 3vw, 3rem); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; max-width: 820px; margin-left: auto; margin-right: auto; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.core-grp { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); font-family: var(--f-body); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }
.core-hero .core-track { height: 560svh; }
.core-hero .core-stage { --cy: 56%; }
@media (max-width: 720px) {
  .core-hero .core-head h1 { font-size: 1.75rem; }
  .core-hero .core-track { height: 500svh; }
  /* phones: the logo sits higher, the service words open right under it, no empty gap */
  .core-hero .core-stage { --cy: 40%; --iy: 17; --lw: min(30vw, 14svh); }
  .core-hero .core-count { margin-top: 6px; }
}

/* ==========================================================
   SERVICES / SECTIONS 2 to 7. A sales story told in the homepage style:
   one system > three chapters of services > one team vs the usual options > what happens next
   > the worries people have > a risk-free next step
   ========================================================== */
/* ---------- 2. one system ---------- */
.system { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--gutter) clamp(40px, 5vw, 70px); }
.system-text h2 { margin-top: 14px; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.system-text > p:not(.kicker) { margin-top: 18px; max-width: 560px; font-size: 1.125rem; line-height: 1.7; color: #C9D6F0; }
.sjump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sjump a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; font-weight: 600; color: var(--mist); background: rgba(8, 20, 48, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.sjump b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 .75rem var(--f-display); color: #fff; background: radial-gradient(circle at 35% 30%, #3AA8FF, #0A3FB0 70%); }
.sjump a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .5), 0 0 24px -6px rgba(10, 141, 255, .8); }
.system-viz svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; overflow: visible; }
.sys-loop { fill: none; stroke: rgba(169, 220, 255, .18); stroke-width: 1.5; stroke-dasharray: 4 7; }
.sys-runner { fill: var(--cyan); filter: drop-shadow(0 0 8px rgba(47, 212, 255, .9)); }
.sys-runner.r2 { fill: #fff; }
.sys-node circle { fill: #0B1C44; stroke: url(#sys-g); stroke: rgba(47, 212, 255, .55); stroke-width: 1.5; filter: drop-shadow(0 0 22px rgba(10, 141, 255, .45)); }
.sys-node text { fill: var(--mist); font: 600 17px var(--f-display); text-anchor: middle; }
.sys-node text.s { fill: var(--muted); font: 500 11px var(--f-body); }
.sys-heart { fill: rgba(10, 141, 255, .14); stroke: rgba(47, 212, 255, .35); animation: heartBeat 3s ease-in-out infinite; transform-origin: 200px 190px; }
.sys-core { fill: var(--mist); font: 600 13px var(--f-display); text-anchor: middle; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- 3. chapters: pinned while you scroll, like the homepage. A glass planet shows the service,
   the list on the right opens one service at a time ---------- */
.chaps { position: relative; overflow-x: clip; padding: clamp(10px, 2vw, 30px) 0 clamp(20px, 3vw, 40px); }
.chap { position: relative; scroll-margin-top: var(--header-h); }
.chap-track { position: relative; }
.chap.n2 .chap-track { height: 200svh; } .chap.n3 .chap-track { height: 270svh; } .chap.n4 .chap-track { height: 340svh; }
.chap-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vh, 36px);
  max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + 8px) var(--gutter) 24px; isolation: isolate; }
.chap-stage::before { /* the drifting nebula from the homepage, behind each chapter */
  content: ""; position: absolute; left: 30%; top: 30%; width: 70%; height: 70%; z-index: -1; pointer-events: none; filter: blur(60px); border-radius: 50%;
  background: radial-gradient(ellipse 40% 45% at 30% 50%, rgba(10, 141, 255, .22), transparent 70%), radial-gradient(ellipse 30% 35% at 70% 55%, rgba(43, 91, 255, .16), transparent 70%);
  animation: glowWave 14s ease-in-out infinite alternate; }
.chap-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 3vw, 36px); align-items: end; max-width: 1000px; }
.chap-num { grid-row: span 2; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(5rem, 9vw, 8.5rem); line-height: .78; letter-spacing: -.06em;
  background: linear-gradient(180deg, rgba(140, 200, 255, .7), rgba(43, 91, 255, .04) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chap-head h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); letter-spacing: -.045em; line-height: 1; }
.chap-sub { display: block; margin-bottom: 10px; font-family: var(--f-body); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chap-head > p:not(.chap-num) { grid-column: 2; margin-top: 12px; max-width: 640px; font-size: 1.0625rem; line-height: 1.65; color: #C9D6F0; }
.chap-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: 0; }

/* the glass planet */
.chap-orb { position: relative; width: min(100%, 52vh, 480px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 60%, rgba(10, 141, 255, .28), rgba(8, 20, 48, .7) 62%, rgba(4, 10, 26, .9) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -20px 60px rgba(10, 141, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .22), 0 0 80px -10px rgba(10, 141, 255, .45), 0 60px 120px -60px rgba(10, 141, 255, .9); }
.orb-ring { position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(169, 220, 255, .16); transform: rotateX(70deg) rotateZ(0deg); animation: orbSpin 18s linear infinite; pointer-events: none; }
.orb-ring::after { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 3px rgba(47, 212, 255, .8); }
.orb-ring.r2 { inset: -18%; border-color: rgba(169, 220, 255, .08); animation-duration: 30s; animation-direction: reverse; }
.orb-ring.r2::after { background: #fff; width: 6px; height: 6px; left: auto; right: -3px; }
@keyframes orbSpin { to { transform: rotateX(70deg) rotateZ(360deg); } }
.cviz { position: absolute; inset: 14%; display: grid; place-items: center; opacity: 0; transform: scale(.85) translateY(14px); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); }
.cviz.is-on { opacity: 1; transform: none; filter: none; }
.cviz .viz { max-width: 100%; filter: drop-shadow(0 10px 30px rgba(10, 141, 255, .35)); }

/* the list: big names, one opens at a time */
.chap-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.citem { border-bottom: 1px solid rgba(169, 220, 255, .1); }
.citem:first-child { border-top: 1px solid rgba(169, 220, 255, .1); }
.citem-name { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 4px; border: 0; background: none; text-align: left; cursor: pointer; color: rgba(201, 214, 240, .55); transition: color .4s var(--ease); }
.citem-n { font: 600 .875rem var(--f-display); letter-spacing: .06em; color: var(--muted); transition: color .4s var(--ease); }
.citem-t { flex: 1; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.citem-name:hover { color: var(--mist); }
.citem.is-on .citem-name { color: #fff; }
.citem.is-on .citem-n { color: var(--cyan); }
.citem.is-on .citem-t { background: linear-gradient(100deg, #fff 0%, #A9DCFF 60%, #2FD4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.citem-plus { position: relative; width: 22px; height: 22px; flex: none; }
.citem-plus::before, .citem-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.citem-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.citem.is-on .citem-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.citem-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.citem.is-on .citem-detail { grid-template-rows: 1fr; }
.citem-inner { overflow: hidden; min-height: 0; }
.citem-inner > :first-child { margin-top: 0; }
.citem-viz { display: none; }
.citem-tag { display: none; }
.citem h3 { padding-top: 2px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -.025em; line-height: 1.2; color: var(--mist); }
.citem-story { margin-top: 10px; color: #C9D6F0; line-height: 1.65; }
.citem-who { margin: 14px 0 0; font-size: .9375rem; color: #DCE6F7; }
.citem-who span { margin-right: 8px; padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); background: rgba(47, 212, 255, .12); }
.citem-cta { margin: 18px 0 22px; gap: 8px; }
.citem-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.citem-cta:hover svg { transform: translateX(4px); }

/* ---------- middle call to action: a clear glass card, like the homepage cards ---------- */
.midcta { padding: clamp(30px, 4vw, 60px) var(--gutter); }
.midcta-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); max-width: 1180px; margin: 0 auto;
  padding: clamp(28px, 3.6vw, 48px); border-radius: 30px; isolation: isolate; overflow: hidden;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .03) 50%, transparent 56%) 0 0 / 260% 100% no-repeat,
              linear-gradient(128deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 22%, rgba(255, 255, 255, 0) 40%),
              radial-gradient(70% 140% at 0% 50%, rgba(10, 141, 255, .3), transparent 60%), rgba(8, 20, 48, .55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 2px 0 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(200, 240, 255, .3), 0 40px 90px -40px rgba(10, 141, 255, .7);
  animation: glare 8s ease-in-out infinite; }
@keyframes glare { 0%, 100% { background-position: 120% 0, 0 0, 0 0, 0 0; } 50% { background-position: -30% 0, 0 0, 0 0, 0 0; } }
.midcta-orbit { position: relative; width: 120px; height: 120px; }
.midcta-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(169, 220, 255, .22); animation: orbSpin2 9s linear infinite; }
.midcta-orbit i:nth-child(2) { inset: 18px; animation-duration: 6s; animation-direction: reverse; }
.midcta-orbit i:nth-child(3) { inset: 36px; animation-duration: 4s; }
.midcta-orbit i::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.midcta-orbit i:nth-child(2)::after { background: #fff; }
.midcta-orbit b { position: absolute; inset: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3AA8FF, #0A3FB0 70%); box-shadow: 0 0 24px rgba(10, 141, 255, .9); }
@keyframes orbSpin2 { to { transform: rotate(360deg); } }
.midcta-text h2 { margin-top: 10px; font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.midcta-text > p:not(.kicker) { margin-top: 10px; color: #C9D6F0; line-height: 1.6; }
.midcta-actions { display: flex; flex-direction: column; gap: 10px; }

/* homepage-style nebula behind the other sections */
.system, .vs, .flow, .worries { position: relative; isolation: isolate; }
.system::before, .vs::before, .worries::before { content: ""; position: absolute; left: 50%; top: 10%; width: min(1000px, 120vw); height: 60%; transform: translateX(-50%); z-index: -1; pointer-events: none; filter: blur(70px); border-radius: 50%;
  background: radial-gradient(ellipse 40% 50% at 35% 50%, rgba(10, 141, 255, .16), transparent 70%), radial-gradient(ellipse 30% 40% at 68% 50%, rgba(43, 91, 255, .12), transparent 70%); }
.vs, .worries, .system { overflow-x: clip; }

/* ---------- the little animations inside the cards ---------- */
.viz { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.viz .vf { fill: rgba(4, 10, 26, .6); stroke: rgba(169, 220, 255, .28); stroke-width: 1.2; }
.viz .vd { fill: rgba(169, 220, 255, .35); }
.viz * { animation-play-state: paused; }
.is-live .viz * { animation-play-state: running; }
/* website: the page builds itself, a cursor clicks the button */
.viz-web .vb { fill: rgba(120, 190, 255, .22); opacity: 0; animation: vbIn 6s var(--ease) infinite; }
.viz-web .vg { fill: #0A8DFF; }
.viz-web .b2 { animation-delay: .25s; } .viz-web .b3 { animation-delay: .5s; } .viz-web .b4 { animation-delay: .75s; } .viz-web .b5 { animation-delay: 1s; } .viz-web .b6 { animation-delay: 1.15s; } .viz-web .b7 { animation-delay: 1.3s; }
@keyframes vbIn { 0% { opacity: 0; transform: translateY(6px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.viz-web .vcur { fill: #fff; stroke: #0A1430; stroke-width: 1; animation: vcur 6s var(--ease) infinite; }
@keyframes vcur { 0%, 20% { transform: translate(200px, 130px); } 45%, 60% { transform: translate(60px, 86px); } 52% { transform: translate(60px, 86px) scale(.85); } 100% { transform: translate(200px, 130px); } }
/* app: notifications drop in */
.viz-app .vn rect { fill: rgba(120, 190, 255, .2); } .viz-app .vn circle { fill: var(--cyan); }
.viz-app .vn { opacity: 0; animation: vnIn 5s var(--ease) infinite; }
.viz-app .n2 { animation-delay: .6s; } .viz-app .n3 { animation-delay: 1.2s; }
@keyframes vnIn { 0% { opacity: 0; transform: translateY(-10px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.viz-app .vping { fill: none; stroke: var(--cyan); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vping 2.4s ease-out infinite; }
.viz-app .p2 { animation-delay: 1.2s; }
@keyframes vping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
/* automation: data runs between the tools */
.viz-auto .vline { fill: none; stroke: rgba(169, 220, 255, .3); stroke-width: 2; stroke-dasharray: 6 6; animation: vdash 1.5s linear infinite; }
@keyframes vdash { to { stroke-dashoffset: -24; } }
.viz-auto .vnode { fill: #0B1C44; stroke: rgba(47, 212, 255, .6); stroke-width: 1.5; }
.viz-auto .vic { fill: none; stroke: var(--ice); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-auto .vrun { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
/* AI video: the presenter speaks, the language changes */
.viz-avatar .vhead { fill: rgba(120, 190, 255, .25); stroke: rgba(169, 220, 255, .4); }
.viz-avatar .vwave rect { fill: var(--cyan); transform-box: fill-box; transform-origin: bottom; animation: vwave .9s ease-in-out infinite alternate; }
.viz-avatar .vwave rect:nth-child(2n) { animation-delay: .2s; } .viz-avatar .vwave rect:nth-child(3n) { animation-delay: .45s; }
@keyframes vwave { from { transform: scaleY(.3); } to { transform: scaleY(1.2); } }
.viz-avatar .vlang rect { fill: #0A8DFF; } .viz-avatar .vlang text { fill: #fff; font: 700 9px var(--f-body); text-anchor: middle; }
.viz-avatar .vlang { opacity: 0; animation: vlang 6s steps(1) infinite; }
.viz-avatar .l2 { animation-delay: 2s; } .viz-avatar .l3 { animation-delay: 4s; }
@keyframes vlang { 0% { opacity: 1; } 33.3% { opacity: 0; } }
/* AI optimization: a question, the assistant types, a spark */
.viz-prompt .vbub.q { fill: rgba(43, 91, 255, .7); } .viz-prompt .vbub.a { fill: rgba(169, 220, 255, .14); stroke: rgba(169, 220, 255, .3); }
.viz-prompt .vtype circle { fill: var(--ice); animation: vtype 1.2s ease-in-out infinite; }
.viz-prompt .vtype circle:nth-child(2) { animation-delay: .2s; } .viz-prompt .vtype circle:nth-child(3) { animation-delay: .4s; }
@keyframes vtype { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.viz-prompt .vlinef { fill: rgba(4, 10, 26, .6); stroke: rgba(169, 220, 255, .3); }
.viz-prompt .vcaret { fill: var(--cyan); animation: caret 1s steps(1) infinite; }
.viz-prompt .vspark { fill: var(--cyan); transform-box: fill-box; transform-origin: center; animation: vspark 2.4s ease-in-out infinite; }
@keyframes vspark { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
/* Google Ads: someone searches, your ad is on top */
.viz-search .vlinef { fill: rgba(4, 10, 26, .6); stroke: rgba(169, 220, 255, .3); }
.viz-search .vic2 { fill: none; stroke: var(--ice); stroke-width: 2; stroke-linecap: round; }
.viz-search .vtyped { fill: rgba(169, 220, 255, .4); transform-box: fill-box; transform-origin: left; animation: vtyped 4s steps(10) infinite; }
@keyframes vtyped { 0% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
.viz-search .vres { fill: rgba(120, 190, 255, .12); }
.viz-search .vres.top { fill: rgba(10, 141, 255, .3); stroke: var(--cyan); stroke-width: 1.2; animation: vtop 4s ease-in-out infinite; }
@keyframes vtop { 0%, 45% { opacity: .3; } 60%, 100% { opacity: 1; } }
.viz-search .vad { fill: var(--cyan); font: 700 10px var(--f-body); }
/* Meta ads: the hearts float up */
.viz-feed .vimg { fill: rgba(43, 91, 255, .35); }
.viz-feed .vheart { fill: #FF5C8A; opacity: 0; animation: vheart 3s ease-out infinite; }
.viz-feed .h2 { animation-delay: 1s; fill: #2FD4FF; } .viz-feed .h3 { animation-delay: 2s; }
@keyframes vheart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }
/* SEO: the bars grow, you reach #1 */
.viz-seo .vaxis { fill: none; stroke: rgba(169, 220, 255, .25); }
.viz-seo .vbar { fill: rgba(10, 141, 255, .55); transform-box: fill-box; transform-origin: bottom; animation: vbar 5s var(--ease) infinite; }
.viz-seo .b2 { animation-delay: .2s; } .viz-seo .b3 { animation-delay: .4s; } .viz-seo .b4 { animation-delay: .6s; fill: var(--cyan); }
@keyframes vbar { 0% { transform: scaleY(0); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.viz-seo .vtrend { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 140; stroke-dashoffset: 140; animation: vtrend 5s var(--ease) infinite; }
@keyframes vtrend { 0%, 15% { stroke-dashoffset: 140; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 140; } }
.viz-seo .vrank { fill: #0A8DFF; filter: drop-shadow(0 0 10px rgba(10, 141, 255, .8)); }
.viz-seo .vrt { fill: #fff; font: 700 12px var(--f-display); text-anchor: middle; }
/* marketing: every channel orbits one plan */
.viz-orbit .vorb { fill: none; stroke: rgba(169, 220, 255, .25); stroke-dasharray: 3 6; }
.viz-orbit .vcore { fill: #0A8DFF; filter: drop-shadow(0 0 14px rgba(10, 141, 255, .9)); }
.viz-orbit .vsat { fill: var(--cyan); } .viz-orbit .s2 { fill: #fff; } .viz-orbit .s3 { fill: #6E8BFF; }

/* ---------- 4. one team vs the usual options ---------- */
.vs { padding: clamp(70px, 9vw, 130px) var(--gutter) clamp(40px, 5vw, 70px); }
.vs-wrap { max-width: 1000px; margin: clamp(32px, 4vw, 52px) auto 0; overflow-x: auto; }
.vs-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .9375rem; }
.vs-table th, .vs-table td { padding: 16px 18px; text-align: center; color: #AFC0DE; border-bottom: 1px solid rgba(169, 220, 255, .08); }
.vs-table thead th { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: var(--mist); border-bottom: 0; padding-bottom: 20px; }
.vs-table tbody th { text-align: left; font-weight: 500; color: #DCE6F7; width: 34%; }
.vs-table .us { position: relative; color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(10, 141, 255, .16), rgba(10, 141, 255, .08)); box-shadow: inset 1px 0 0 rgba(47, 212, 255, .35), inset -1px 0 0 rgba(47, 212, 255, .35); }
.vs-table thead .us { border-radius: 18px 18px 0 0; box-shadow: inset 1px 0 0 rgba(47, 212, 255, .35), inset -1px 0 0 rgba(47, 212, 255, .35), inset 0 1px 0 rgba(47, 212, 255, .35); }
.vs-table thead .us span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-table tbody tr:last-child .us { border-radius: 0 0 18px 18px; box-shadow: inset 1px 0 0 rgba(47, 212, 255, .35), inset -1px 0 0 rgba(47, 212, 255, .35), inset 0 -1px 0 rgba(47, 212, 255, .35); }
.vs-table tbody tr:hover th, .vs-table tbody tr:hover td { background-color: rgba(169, 220, 255, .03); }

/* ---------- 5. what happens next: a line of light fills as you scroll ---------- */
.flow { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(40px, 5vw, 70px); }
.flow-list { position: relative; max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 0 0 64px; list-style: none; display: grid; gap: clamp(30px, 4vw, 48px); }
.flow-line { position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: rgba(169, 220, 255, .12); border-radius: 2px; overflow: hidden; }
.flow-line i { position: absolute; inset: 0; background: linear-gradient(180deg, #2FD4FF, #2B5BFF); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 12px rgba(47, 212, 255, .8); }
.flow-list li { position: relative; opacity: .45; transition: opacity .5s var(--ease); }
.flow-list li.is-lit { opacity: 1; }
.flow-dot { position: absolute; left: -51px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--midnight); box-shadow: inset 0 0 0 2px rgba(169, 220, 255, .3); transition: box-shadow .4s var(--ease), background .4s var(--ease); }
.flow-list li.is-lit .flow-dot { background: var(--cyan); box-shadow: 0 0 0 5px rgba(47, 212, 255, .18), 0 0 18px rgba(47, 212, 255, .9); }
.flow-n { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.flow-list h3 { margin-top: 6px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.03em; }
.flow-list p { margin-top: 8px; color: #C9D6F0; line-height: 1.65; }

/* ---------- 6. worries: cards that turn over ---------- */
.worries { padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(50px, 6vw, 90px); }
.worry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); max-width: 1180px; margin: clamp(32px, 4vw, 52px) auto 0; padding: 0; list-style: none; perspective: 1600px; }
.worry-card { position: relative; display: block; width: 100%; height: 100%; min-height: 230px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.worry-card[aria-pressed="true"] { transform: rotateY(180deg); }
.worry-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.worry-front { background: linear-gradient(128deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(13, 29, 66, .6), rgba(6, 14, 36, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .1); }
.worry-back { transform: rotateY(180deg); background: radial-gradient(120% 80% at 0% 0%, rgba(47, 212, 255, .22), transparent 60%), linear-gradient(180deg, rgba(16, 40, 92, .95), rgba(9, 22, 54, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(47, 212, 255, .35), 0 30px 70px -40px rgba(10, 141, 255, .9); }
.worry-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.worry-back .worry-tag { color: var(--cyan); }
.worry-q { margin-top: 14px; font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--mist); }
.worry-hint { margin-top: auto; padding-top: 16px; font-size: .875rem; color: var(--ice); }
.worry-hint::after { content: " ↻"; }
.worry-a { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: #E2EBFA; }
.worry-card:hover .worry-front { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(47, 212, 255, .3); }
.worry-card:focus-visible { outline: none; }
.worry-card:focus-visible .worry-face { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- 7. call to action ---------- */
.scta { padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(80px, 9vw, 130px); }
.pcta-big { padding: clamp(32px, 4.4vw, 60px); }
.pcta-big .pcta-title { margin-top: 10px; font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
.pcta-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: #DCE6F7; }
.pcta-points li::before { content: "✓"; margin-right: 8px; color: var(--cyan); font-weight: 700; }

/* chapters on tablets and phones: no pinning, every service open with its own animation */
@media (max-width: 900px) {
  .chap .chap-track { height: auto; }
  .chap-stage { position: relative; height: auto; padding-top: clamp(50px, 8vw, 80px); padding-bottom: 20px; }
  .chap-body { grid-template-columns: minmax(0, 1fr); }
  .chap-orb { display: none; }
  .chap-head { grid-template-columns: minmax(0, 1fr); }
  .chap-num { grid-row: auto; font-size: 4.5rem; margin-bottom: 8px; }
  .chap-head > p:not(.chap-num) { grid-column: 1; }
  .citem-detail { grid-template-rows: 1fr; }
  .citem-name { pointer-events: none; padding: 22px 0 14px; color: #fff; }
  .citem-name .citem-n { color: var(--cyan); }
  .citem-plus { display: none; }
  .citem-viz { display: grid; place-items: center; margin-bottom: 18px; padding: 18px; border-radius: 22px; background: radial-gradient(70% 90% at 50% 100%, rgba(10, 141, 255, .22), transparent 70%), rgba(8, 20, 48, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(169, 220, 255, .1); }
  .citem-viz .viz { max-width: 260px; }
  .midcta-card { grid-template-columns: minmax(0, 1fr); }
  .midcta-orbit { display: none; }
  .midcta-actions { flex-direction: row; flex-wrap: wrap; }
  .midcta-actions .btn { flex: 1 1 200px; }
}
@media (max-width: 1000px) {
  .system { grid-template-columns: minmax(0, 1fr); }
  .system-viz svg { max-width: 360px; }
  .worry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .worry-grid { grid-template-columns: minmax(0, 1fr); }
  .worry-card { min-height: 200px; }
  .flow-list { padding-left: 48px; }
  /* the comparison becomes one card per question on phones, our answer highlighted */
  .vs-wrap { overflow: visible; }
  .vs-table { min-width: 0; }
  .vs-table thead { display: none; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table tr { margin-bottom: 12px; padding: 16px; border-radius: 18px; background: rgba(8, 20, 48, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); }
  .vs-table tbody th { width: auto; padding: 0 0 10px; border: 0; font-weight: 600; color: var(--mist); }
  .vs-table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; text-align: right; }
  .vs-table td::before { content: attr(data-l); color: var(--muted); text-align: left; }
  .vs-table td.us, .vs-table tbody tr:last-child .us { margin-top: 4px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
  .vs-table td.us::before { color: var(--cyan); font-weight: 600; }
  .flow-line { left: 13px; }
  .flow-dot { left: -43px; }
}
@media (max-width: 720px) {
  .system { padding-top: 70px; gap: 10px; }
  .system-viz { order: -1; }
  .system-viz svg { max-width: 280px; }
  /* chapters: the chapter stays pinned and the service cards slide in from the right as you scroll down */
  .chap .chap-track { height: auto; }
  .chap-stage { position: sticky; top: 0; height: auto; min-height: 100svh; justify-content: center; gap: 18px; padding-top: calc(var(--header-h, 64px) + 14px); padding-bottom: 24px; overflow: hidden; }
  .chap-head .chap-num { font-size: 3rem; line-height: 1; margin-bottom: 0; }
  .chap-head h2 { font-size: 2rem; }
  .chap-head > p:not(.chap-num) { margin-top: 8px; font-size: .9375rem; line-height: 1.55; }
  .chap-list { display: flex; flex-wrap: nowrap; gap: 14px; overflow: visible; padding: 4px 0 6px; will-change: transform; }
  .citem, .citem:first-child { flex: 0 0 84%; border: 0; border-radius: 26px; overflow: hidden;
    background: linear-gradient(128deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(14, 32, 74, .7), rgba(6, 14, 36, .7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(169, 220, 255, .12), 0 30px 60px -40px rgba(10, 141, 255, .9); }
  .citem-name { display: none; }
  .citem-inner { display: flex; flex-direction: column; height: 100%; padding: 0 20px 22px; }
  .citem-viz { margin: 0 -20px 16px; padding: 22px 18px 18px; border-radius: 0; box-shadow: none;
    background: radial-gradient(60% 80% at 50% 70%, rgba(10, 141, 255, .3), transparent 70%), radial-gradient(circle at 50% 120%, rgba(47, 212, 255, .14), transparent 60%); border-bottom: 1px solid rgba(169, 220, 255, .1); }
  .citem-viz .viz { max-width: 190px; }
  .citem h3 { font-size: 1.375rem; }
  .citem-story { font-size: .9375rem; }
  .citem-who { font-size: .875rem; }
  .citem-who span { display: inline-block; margin-bottom: 6px; }
  .citem-cta { margin: auto 0 0; padding-top: 0; width: 100%; }
  .citem-who + .citem-cta { margin-top: 18px; }
  .citem-tag { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
  /* comparison: just us next to the typical agency, short and clear */
  .vs-table td:nth-child(2) { display: none; }
  .vs-table tr { padding: 14px 16px; }
  .vs-table td { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viz *, .sys-heart, .orb-ring, .midcta-orbit i, .midcta-card, .chap-stage::before { animation: none !important; }
  .viz-web .vb, .viz-app .vn, .viz-avatar .l1 { opacity: 1; }
  .worry-card { transition: none; }
}

/* "Black Hole" look (homepage): the same section around a black hole drawn on the canvas, no logo.
   Without the class it is the "Gravity Field" look, kept for another page. */
.core-hole .core-field { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 98%); }

/* ==========================================================
   PRICING PAGE. Same world as the homepage: deep space, drifting blue light,
   clear glass with a bright bevelled edge, and a light that follows the cursor.
   ========================================================== */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- SECTION 1: hero ---------- */
.pricing { position: relative; padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(64px, 8vw, 120px); overflow: hidden; isolation: isolate; }
.pricing-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.pricing-glow { position: absolute; left: 50%; top: -6%; width: min(1300px, 160vw); aspect-ratio: 2 / 1; transform: translateX(-50%); pointer-events: none; z-index: -1; filter: blur(30px);
  background: radial-gradient(ellipse 34% 40% at 42% 34%, rgba(10, 141, 255, .32), transparent 70%), radial-gradient(ellipse 30% 30% at 62% 30%, rgba(43, 91, 255, .22), transparent 70%), radial-gradient(ellipse 22% 24% at 55% 44%, rgba(47, 212, 255, .14), transparent 70%);
  animation: priceGlow 14s ease-in-out infinite alternate; }
@keyframes priceGlow { 0% { transform: translateX(-50%) translate(-3%, 2%) scale(1); } 50% { transform: translateX(-50%) translate(3%, -3%) scale(1.06, .95); } 100% { transform: translateX(-50%) translate(4%, 3%) scale(.97, 1.05); } }
.pricing-orbits { position: absolute; left: 50%; top: clamp(170px, 22vw, 260px); width: min(1100px, 150vw); aspect-ratio: 3.2 / 1; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.pricing-orbits i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(169, 220, 255, .09); transform: rotate(-8deg); }
.pricing-orbits i:nth-child(2) { inset: 12% 10%; border-color: rgba(47, 212, 255, .12); transform: rotate(6deg); }
.pricing-orbits i:nth-child(3) { inset: 26% 24%; border-color: rgba(169, 220, 255, .07); transform: rotate(-3deg); }
.pricing-orbits i::after { content: ""; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 3px rgba(47, 212, 255, .7);
  offset-path: border-box; animation: orbitDot 18s linear infinite; }
.pricing-orbits i:nth-child(2)::after { animation-duration: 26s; animation-direction: reverse; background: #fff; }
.pricing-orbits i:nth-child(3)::after { animation-duration: 34s; }
@supports not (offset-path: border-box) { .pricing-orbits i::after { display: none; } }
@keyframes orbitDot { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.pricing-head { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.pricing-head .kicker { justify-content: center; }
.pricing-head h1 { margin-top: 16px; font-size: clamp(2.5rem, 5.4vw, 4.75rem); letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; text-shadow: 0 6px 40px rgba(4, 10, 26, .8); }
.pricing-lead { margin: 20px auto 0; max-width: 580px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: #C9D6F0; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: #DCE6F7; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* how ordering works: three steps joined by a line of light */
.howto { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0; list-style: none; counter-reset: none; }
.howto::before { content: ""; position: absolute; top: 23px; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 212, 255, .6), rgba(43, 91, 255, .6), transparent); }
.howto li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.howto-n { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; font-family: var(--f-display); font-weight: 700; color: #fff;
  background: radial-gradient(circle at 35% 30%, #3AA8FF, #0A3FB0 70%); box-shadow: 0 0 0 6px rgba(4, 10, 26, 1), 0 0 26px rgba(10, 141, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.howto strong { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: var(--mist); }
.howto small { font-size: .875rem; color: var(--muted); }

/* launch offer */
.offer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; width: fit-content; max-width: 100%; margin: clamp(32px, 4vw, 44px) auto 0; padding: 10px 12px 10px 10px;
  border-radius: 999px; background: rgba(8, 20, 48, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .22), 0 20px 50px -30px rgba(10, 141, 255, .8); font-size: .9375rem; color: #DCE6F7; }
.offer p { margin: 0; }
.offer-tag { padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 600; font-size: .8125rem; letter-spacing: .02em; box-shadow: 0 0 18px rgba(10, 141, 255, .55); }
.offer-code { position: relative; padding: 6px 14px; border: 1px dashed var(--cyan); border-radius: 8px; background: rgba(47, 212, 255, .08); color: var(--mist); font: 700 .9375rem/1 var(--f-display); letter-spacing: .08em; cursor: pointer; transition: background-color .2s var(--ease); }
.offer-code:hover { background: rgba(47, 212, 255, .18); }
.offer-copied { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font: 500 .75rem var(--f-body); letter-spacing: 0; color: var(--cyan); }
.offer-until { color: var(--muted); font-size: .875rem; }

/* ---------- service tabs: one glass bar, a light slides to the chosen service ---------- */
.pricing-controls { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(48px, 6vw, 80px); }
.ptabs-wrap { max-width: 100%; padding: 6px; border-radius: 999px; background: rgba(8, 20, 48, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 24px 60px -36px rgba(10, 141, 255, .9); }
.ptabs { position: relative; display: flex; align-items: center; gap: 4px; }
.ptab-group { display: contents; }
.ptab-label { margin: 0 2px 0 12px; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5D7BB0; writing-mode: vertical-rl; transform: rotate(180deg); }
.ptab-group:first-child .ptab-label { margin-left: 6px; }
.ptab { position: relative; z-index: 1; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #AFC0DE; font: 500 .9375rem var(--f-body); cursor: pointer; white-space: nowrap; transition: color .3s var(--ease); }
.ptab:hover { color: var(--mist); }
.ptab[aria-selected="true"] { color: #fff; }
.ptab-ind { position: absolute; z-index: 0; top: 0; left: 0; height: 42px; width: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(115deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 0 24px rgba(10, 141, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .5s var(--ease), width .5s var(--ease); }
.bill { display: none; padding: 4px; border-radius: 999px; background: rgba(8, 20, 48, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.pricing.has-monthly .bill { display: inline-flex; }
.bill-opt { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #C9D6F0; font: 500 .9375rem var(--f-body); cursor: pointer; }
.bill-opt.is-on { background: rgba(169, 220, 255, .16); color: var(--mist); }
.bill-save { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(47, 212, 255, .16); color: var(--cyan); font-size: .75rem; font-weight: 600; }

/* ---------- panels and price cards ---------- */
.ppanels { position: relative; max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; }
.ppanel + .ppanel { margin-top: 72px; }
.pricing.is-tabbed .ppanel { display: none; }
.pricing.is-tabbed .ppanel.is-active { display: block; }
.pricing.is-tabbed .ppanel + .ppanel { margin-top: 0; }
.pricing.is-tabbed .ppanel.is-active .plan { animation: planIn .7s var(--ease) both; }
.pricing.is-tabbed .ppanel.is-active .plan:nth-child(2) { animation-delay: .08s; }
.pricing.is-tabbed .ppanel.is-active .plan:nth-child(3) { animation-delay: .16s; }
@keyframes planIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.ppanel-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.ppanel-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); letter-spacing: -.035em; }
.ppanel-head p { margin-top: 10px; color: #C9D6F0; line-height: 1.6; }
.ppanel-head .text-link { margin-top: 0; margin-left: 4px; }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); align-items: stretch; perspective: 1400px; }
.plan {
  --mx: 50%; --my: 0%; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.4vw, 34px); border-radius: 26px; isolation: isolate;
  background: linear-gradient(128deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, rgba(13, 29, 66, .55), rgba(6, 14, 36, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 24px rgba(160, 220, 255, .05), 0 40px 80px -50px rgba(0, 0, 0, .9);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .4s var(--ease);
}
.plan::before { /* bevelled glass edge, like the homepage cards */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .14) 18%, rgba(160, 225, 255, .05) 45%, rgba(120, 214, 255, .1) 70%, rgba(47, 212, 255, .55) 92%, rgba(255, 255, 255, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plan::after { /* light that follows the cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s var(--ease); mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(160, 225, 255, .16), rgba(47, 212, 255, .04) 35%, transparent 60%);
}
.plan:hover::after { opacity: 1; }
.plan:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 30px rgba(160, 220, 255, .08), 0 50px 90px -50px rgba(10, 141, 255, .55); }
.plan.is-popular { background: radial-gradient(120% 70% at 50% 0%, rgba(10, 141, 255, .28), transparent 60%), linear-gradient(128deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(16, 40, 92, .75), rgba(8, 20, 50, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 50px 110px -50px rgba(10, 141, 255, .9); }
.plan.is-popular::before { padding: 1.6px; background: conic-gradient(from var(--spin), #2FD4FF, #2B5BFF 25%, rgba(255, 255, 255, .9) 40%, #0A8DFF 60%, #2FD4FF 80%, #2B5BFF); animation: ringSpin 6s linear infinite; }
@keyframes ringSpin { to { --spin: 360deg; } }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) translateZ(20px); margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--grad); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; box-shadow: 0 0 22px rgba(10, 141, 255, .7); }
.plan-name { font-size: 1.5rem; letter-spacing: -.025em; }
.plan-desc { margin-top: 8px; min-height: 3.1em; color: #C9D6F0; font-size: .9375rem; line-height: 1.55; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 24px 0 0; }
.plan-from { font-size: .875rem; color: var(--muted); }
.plan-amt { font-family: var(--f-display); font-size: clamp(2.5rem, 3.6vw, 3.25rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan.is-popular .plan-amt { background: linear-gradient(100deg, #fff 0%, #A9DCFF 45%, #2FD4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(47, 212, 255, .35)); }
.plan-per { color: var(--muted); font-size: .9375rem; }
.plan-note { margin-top: 10px; min-height: 2.9em; font-size: .875rem; line-height: 1.5; color: #AFC0DE; }
.plan-note strong { color: var(--mist); font-weight: 600; }
.when-y { display: none; }
.pricing.is-yearly .when-y { display: inline; }
.pricing.is-yearly .when-m { display: none; }
.plan-cta { margin-top: 22px; width: 100%; height: 50px; font-size: 1rem; }
.plan .btn-ghost { background: rgba(169, 220, 255, .05); }
.plan .btn-ghost:hover { background: rgba(169, 220, 255, .12); }
.plan-time { margin-top: 12px; text-align: center; font-size: .8125rem; color: var(--muted); }
.plan-feats { margin: 24px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(169, 220, 255, .12); display: grid; gap: 12px; font-size: .9375rem; color: #DCE6F7; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.plan-feats svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: rgba(47, 212, 255, .14); fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pricing-foot { position: relative; max-width: 720px; margin: 36px auto 0; text-align: center; font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* compare table, inside each service tab */
.cmp { margin: 30px auto 0; max-width: 1180px; border-radius: 22px; background: rgba(8, 20, 48, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(169, 220, 255, .12); }
.cmp summary { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ice); }
.cmp summary::-webkit-details-marker { display: none; }
.cmp summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ease); }
.cmp[open] summary svg { transform: rotate(180deg); }
.cmp-scroll { overflow-x: auto; padding: 0 clamp(12px, 2vw, 24px) 22px; }
.cmp table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .9375rem; }
.cmp th, .cmp td { padding: 14px; text-align: center; border-top: 1px solid rgba(169, 220, 255, .1); color: #DCE6F7; }
.cmp thead th { border-top: 0; font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: var(--mist); }
.cmp thead th.is-pop { color: var(--cyan); }
.cmp tbody tr:hover { background: rgba(169, 220, 255, .04); }
.cmp tbody th { text-align: left; font-weight: 500; color: #C9D6F0; width: 28%; }
.cmp-yes { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(47, 212, 255, .14); fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.cmp-no { color: #4F6290; }

/* call-to-action strips: after the price cards and after the bundles */
.pcta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 48px);
  border-radius: 28px; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 140% at 0% 50%, rgba(10, 141, 255, .26), transparent 60%), radial-gradient(50% 120% at 100% 50%, rgba(43, 91, 255, .18), transparent 60%), linear-gradient(180deg, rgba(14, 32, 74, .75), rgba(7, 17, 42, .75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 40px 90px -50px rgba(10, 141, 255, .85); }
.pcta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .7), rgba(47, 212, 255, .2) 25%, rgba(43, 91, 255, .1) 60%, rgba(47, 212, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pcta::after { /* a slow band of light sweeping across, like the homepage glass */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .08) 45%, transparent 55%) 0 0 / 300% 100% no-repeat; animation: ctaSweep 7s ease-in-out infinite; }
@keyframes ctaSweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.pcta-title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); letter-spacing: -.035em; line-height: 1.1; }
.pcta-text p { margin-top: 10px; max-width: 560px; color: #C9D6F0; line-height: 1.6; }
.pcta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.pcta-alt { max-width: 1000px; }
@media (max-width: 860px) {
  .pcta { flex-direction: column; align-items: flex-start; }
  .pcta-actions { width: 100%; }
  .pcta-actions .btn { flex: 1 1 200px; }
}
@media (prefers-reduced-motion: reduce) { .pcta::after { animation: none; } }

/* shared section heading */
.sec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.sec-head .kicker { justify-content: center; }
.sec-head h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.sec-head > p:not(.kicker) { margin-top: 14px; color: #C9D6F0; line-height: 1.6; font-size: 1.0625rem; }

/* ---------- SECTION 2: bundles ---------- */
.bundles { position: relative; overflow-x: clip; padding: clamp(56px, 7vw, 110px) var(--gutter); isolation: isolate; }
.bundles::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1000px, 130vw); height: 70%; transform: translate(-50%, -40%); z-index: -1; pointer-events: none; filter: blur(40px);
  background: radial-gradient(ellipse 40% 50% at 35% 50%, rgba(10, 141, 255, .18), transparent 70%), radial-gradient(ellipse 35% 45% at 70% 55%, rgba(43, 91, 255, .14), transparent 70%); }
.bundle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); max-width: 1000px; margin: clamp(32px, 4vw, 52px) auto 0; }
.bundle { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 2.8vw, 38px); border-radius: 26px; isolation: isolate;
  background: linear-gradient(128deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 40%), radial-gradient(120% 90% at 100% 0%, rgba(10, 141, 255, .22), transparent 55%), linear-gradient(180deg, rgba(13, 29, 66, .7), rgba(8, 20, 48, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 40px 90px -50px rgba(10, 141, 255, .7); }
.bundle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1) 20%, rgba(47, 212, 255, .1) 60%, rgba(47, 212, 255, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.bundle-save { align-self: flex-start; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: rgba(47, 212, 255, .14); color: var(--cyan); font-size: .8125rem; font-weight: 700; }
.bundle h3 { font-size: 1.625rem; letter-spacing: -.03em; }
.bundle-desc { margin-top: 8px; color: #C9D6F0; line-height: 1.55; }
.bundle-items { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: .9375rem; color: #DCE6F7; }
.bundle-items li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px dashed rgba(169, 220, 255, .14); }
.bundle-items li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.bundle-price { display: flex; align-items: baseline; gap: 12px; margin: auto 0 0; padding-top: 24px; }
.bundle-price s { color: var(--muted); font-size: 1.125rem; }
.bundle-price span { font-family: var(--f-display); font-size: clamp(2.375rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.045em; background: linear-gradient(100deg, #fff, #A9DCFF 50%, #2FD4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bundle .btn { margin-top: 20px; height: 52px; font-size: 1rem; }

/* ---------- SECTION 3: ways to save ---------- */
.save { padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(56px, 7vw, 100px); }
.ways { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; list-style: none; }
.way { position: relative; padding: 26px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(13, 29, 66, .45), rgba(8, 20, 48, .25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(169, 220, 255, .1); overflow: hidden; }
.way::after { content: ""; position: absolute; right: -30%; top: -40%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(10, 141, 255, .22), transparent 65%); pointer-events: none; }
.way-value { margin: 0; font-family: var(--f-display); font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 600; letter-spacing: -.035em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.way h3 { margin-top: 10px; font-size: 1.0625rem; }
.way p:last-child { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; }
.promise { position: relative; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); max-width: 880px; margin: clamp(30px, 4vw, 48px) auto 0; padding: clamp(24px, 2.8vw, 34px); border-radius: 26px; isolation: isolate;
  background: radial-gradient(80% 140% at 0% 50%, rgba(47, 212, 255, .16), transparent 60%), linear-gradient(180deg, rgba(16, 40, 92, .8), rgba(9, 22, 54, .8)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 40px 90px -50px rgba(10, 141, 255, .8); }
.promise::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--spin), #2FD4FF, #2B5BFF 30%, rgba(255, 255, 255, .8) 50%, #0A8DFF 70%, #2FD4FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: ringSpin 8s linear infinite; }
.promise svg { flex: none; width: 60px; height: 60px; fill: rgba(47, 212, 255, .12); stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 14px rgba(47, 212, 255, .5)); }
.promise h3 { font-size: 1.5rem; letter-spacing: -.025em; }
.promise p { margin-top: 6px; color: #C9D6F0; line-height: 1.55; }

/* ---------- SECTION 4: questions, as a chat with the team ---------- */
.faq { padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(56px, 7vw, 100px); }
.ask { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); max-width: 1120px; margin: clamp(32px, 4vw, 52px) auto 0; align-items: start; }
.ask-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ask-q { width: 100%; padding: 14px 18px; border: 0; border-radius: 16px 16px 16px 4px; text-align: left; cursor: pointer; font: 500 .9375rem/1.45 var(--f-body); color: #C9D6F0;
  background: rgba(8, 20, 48, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.ask-q:hover { color: var(--mist); transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .28); }
.ask-q[aria-expanded="true"] { color: #fff; background: linear-gradient(115deg, rgba(43, 91, 255, .55), rgba(10, 141, 255, .45)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px -6px rgba(10, 141, 255, .8); transform: translateX(6px); }
.ask-screen { position: sticky; top: calc(var(--header-h) + 24px); min-height: 380px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(128deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(180deg, rgba(10, 24, 58, .75), rgba(5, 12, 30, .75)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 50px 100px -60px rgba(10, 141, 255, .9); }
.ask-screen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1) 20%, rgba(160, 225, 255, .05) 50%, rgba(47, 212, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ask-bar { display: flex; align-items: center; gap: 7px; padding: 14px 20px; border-bottom: 1px solid rgba(169, 220, 255, .1); font-size: .8125rem; color: var(--muted); }
.ask-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169, 220, 255, .2); }
.ask-bar span { margin-left: 10px; color: #C9D6F0; font-weight: 600; }
.ask-bar b { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--cyan); }
.ask-bar b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: caret 2s steps(1) infinite; }
.ask-body { position: relative; padding: clamp(22px, 3vw, 36px); }
.ask-a + .ask-a { margin-top: 26px; }
.faq.is-chat .ask-a { display: none; }
.faq.is-chat .ask-a.is-on { display: block; }
.faq.is-chat .ask-a + .ask-a { margin-top: 0; }
.ask-you { display: flex; justify-content: flex-end; margin: 0; }
.ask-you span { max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: linear-gradient(115deg, #2B5BFF, #0A8DFF); color: #fff; font-size: .9375rem; line-height: 1.5; box-shadow: 0 10px 30px -12px rgba(10, 141, 255, .8); }
.ask-reply { position: relative; display: flex; gap: 14px; margin-top: 22px; isolation: isolate; }
.ask-reply::before { /* the drifting blue glow from the homepage, behind the answer */
  content: ""; position: absolute; inset: -30% -10% -30% -6%; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none;
  background: radial-gradient(ellipse 46% 44% at 36% 50%, rgba(10, 141, 255, .32), transparent 72%), radial-gradient(ellipse 36% 34% at 70% 56%, rgba(47, 212, 255, .14), transparent 72%);
  animation: glowWave 9s ease-in-out infinite alternate; }
.ask-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #0D1D42, #040A1A 75%); box-shadow: 0 0 0 1px rgba(169, 220, 255, .28), 0 0 18px rgba(10, 141, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ask-avatar img { width: 26px; height: auto; margin-left: -2px; filter: drop-shadow(0 0 6px rgba(10, 141, 255, .7)); }
.ask-text { margin: 0; padding: 14px 18px; border-radius: 4px 18px 18px 18px; background: rgba(169, 220, 255, .07); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); color: #E2EBFA; font-size: 1.0625rem; line-height: 1.65; }
.ask-text .type-caret { height: 1.05em; }

/* ---------- SECTION 5: help choosing ---------- */
.choose { position: relative; max-width: 860px; margin: 0 auto clamp(70px, 8vw, 120px); padding: clamp(36px, 4vw, 56px) var(--gutter); text-align: center; isolation: isolate; }
.choose::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; border-radius: 30px;
  background: radial-gradient(70% 120% at 50% 0%, rgba(10, 141, 255, .22), transparent 70%), rgba(8, 20, 48, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(169, 220, 255, .12); }
.choose h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); letter-spacing: -.04em; }
.choose p { margin-top: 12px; color: #C9D6F0; line-height: 1.6; }
.choose-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

@media (max-width: 1100px) {
  .ptabs-wrap { width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); border-radius: 0; padding: 6px var(--gutter); overflow-x: auto; scrollbar-width: none; background: transparent; box-shadow: none; }
  .ptabs-wrap::-webkit-scrollbar { display: none; }
  .ptabs { width: max-content; margin: 0 auto; padding: 5px; border-radius: 999px; background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
}
@media (max-width: 1000px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 28px; }
  .plan-desc, .plan-note { min-height: 0; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundle-grid { grid-template-columns: 1fr; max-width: 560px; }
  .ask { grid-template-columns: minmax(0, 1fr); }
  .ask-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-snap-type: x proximity; }
  .ask-list::-webkit-scrollbar { display: none; }
  .ask-list li { flex: none; max-width: 260px; scroll-snap-align: start; }
  .ask-q { height: 100%; }
  .ask-q:hover, .ask-q[aria-expanded="true"] { transform: none; }
  .ask-screen { position: relative; top: 0; min-height: 0; }
}
@media (max-width: 720px) {
  .howto { grid-template-columns: 1fr; gap: 14px; max-width: 360px; }
  .howto::before { top: 23px; bottom: 23px; left: 23px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(47, 212, 255, .6), rgba(43, 91, 255, .6)); }
  .howto li { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; column-gap: 14px; }
  .howto-n { margin: 0; }
  .howto li strong { flex: 1; }
  .howto small { width: 100%; padding-left: 60px; margin-top: -8px; }
  .offer { border-radius: 18px; padding: 12px; }
  .trust { gap: 10px 18px; font-size: .875rem; }
  .ptab-label { display: none; }
}
@media (max-width: 560px) {
  .ways { grid-template-columns: 1fr; }
  .promise { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .plan, .plan:hover { transition: none; transform: none; }
  .pricing.is-tabbed .ppanel.is-active .plan { animation: none; }
  .pricing-glow, .ask-reply::before, .plan.is-popular::before, .promise::before, .pricing-orbits i::after { animation: none; }
}

/* ==========================================================
   CHECKOUT. Built to feel calm and safe:
   - an enclosed page: no menu, no offers, nothing to pull attention from the order
   - the details sit on a light "paper" card with dark text: easy to read, nothing to decode
   - the payment block is set apart in its own shaded box with a lock (people read a framed card area as more secure)
   - brand blue for the main button, a quiet green only for the reassurance lines (green reads as "safe, done")
   - the total is always visible, the discount code is folded away so nobody leaves to hunt for one
   ========================================================== */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: .875rem; color: #C9D6F0; }
.field[hidden] { display: none; }
.field em { font-style: normal; color: var(--muted); font-size: .8125rem; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(4, 10, 26, .6);
  color: var(--mist); font: 400 1rem/1.4 var(--f-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(47, 212, 255, .18); }
.field [aria-invalid="true"] { border-color: #FF7A8A; box-shadow: 0 0 0 3px rgba(255, 122, 138, .16); }
.field ::placeholder { color: #5D6F96; }

.co-page {
  --paper: #F6F9FE; --paper-2: #EDF2FB; --ink-1: #0B1530; --ink-2: #4A5878; --ink-3: #75839F; --pline: #D8E1EF; --safe: #11845B; --safe-bg: #E6F6EF;
  background: radial-gradient(80% 50% at 50% -10%, rgba(10, 141, 255, .16), transparent 70%), var(--midnight);
}
.co-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: 1160px; margin: 0 auto; padding: 18px var(--gutter); }
.co-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; color: var(--mist); }
.co-brand .brand-mark { width: 34px; height: auto; }
.co-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: #BFF0D9; background: rgba(17, 132, 91, .16); box-shadow: inset 0 0 0 1px rgba(80, 220, 160, .28); }
.co-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.co-back { justify-self: end; font-size: .9375rem; color: #AFC0DE; }
.co-back::before { content: "← "; }
.co-back:hover { color: var(--mist); }

.co { max-width: 1160px; margin: 0 auto; padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 6vw, 80px); }
.co-alert { max-width: 760px; margin: 0 auto 20px; padding: 14px 18px; border-radius: 14px; background: #FFF6E5; color: #6B4A00; text-align: center; font-size: .9375rem; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(20px, 3vw, 40px); align-items: start; }

/* the light paper card */
.co-main { padding: clamp(24px, 3.2vw, 44px); border-radius: 24px; background: var(--paper); color: var(--ink-1); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.co-head h1 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -.035em; color: var(--ink-1); }
.co-head p { margin-top: 6px; color: var(--ink-2); }
.co-block { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.co-block legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 16px; font-family: var(--f-display); font-size: 1.1875rem; font-weight: 600; color: var(--ink-1); }
.co-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-1); color: #fff; font-size: .8125rem; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.cf { display: flex; flex-direction: column; gap: 7px; font-size: .875rem; font-weight: 600; color: var(--ink-1); }
.cf[hidden] { display: none; }
.cf-wide { grid-column: 1 / -1; }
.cf em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.cf small { font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
.cf input, .cf select, .cf textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--pline); background: #fff; color: var(--ink-1); font: 400 1rem/1.4 var(--f-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.cf textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.cf select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.cf input:hover, .cf select:hover, .cf textarea:hover { border-color: #BCC8DD; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: #0A8DFF; box-shadow: 0 0 0 4px rgba(10, 141, 255, .16); }
.cf [aria-invalid="true"] { border-color: #D93B52; box-shadow: 0 0 0 4px rgba(217, 59, 82, .12); }
.cf ::placeholder { color: #9AA6BD; }
.co-seg { display: flex; padding: 4px; border-radius: 10px; background: var(--paper-2); border: 1.5px solid var(--pline); }
.co-seg label { flex: 1; cursor: pointer; }
.co-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.co-seg span { display: block; padding: 9px 10px; border-radius: 7px; text-align: center; font-weight: 500; color: var(--ink-2); transition: background-color .2s var(--ease), color .2s var(--ease); }
.co-seg input:checked + span { background: #fff; color: var(--ink-1); font-weight: 600; box-shadow: 0 1px 3px rgba(11, 21, 48, .14); }
.co-seg input:focus-visible + span { outline: 2px solid #0A8DFF; outline-offset: 1px; }

/* the payment block: framed and shaded so it reads as the secure part */
.co-pay { margin-top: 32px; padding: 22px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--pline); }
.co-pay legend { float: left; width: 100%; }
.co-methods { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-m { cursor: pointer; }
.co-m input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.co-m-box { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 14px 44px; border-radius: 12px; background: #fff; border: 1.5px solid var(--pline); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.co-m-box::before { content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #AEB9CE; background: #fff; }
.co-m input:checked + .co-m-box { border-color: #0A8DFF; box-shadow: 0 0 0 3px rgba(10, 141, 255, .14); }
.co-m input:checked + .co-m-box::before { border-color: #0A8DFF; background: #0A8DFF; box-shadow: inset 0 0 0 4px #fff; }
.co-m input:focus-visible + .co-m-box { outline: 2px solid #0A8DFF; outline-offset: 2px; }
.co-m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-m-box strong { color: var(--ink-1); }
.co-m-box small { color: var(--ink-3); font-size: .8125rem; }
.co-m-logos { display: flex; gap: 4px; }
.co-m-logos i { font-style: normal; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--pline); background: #fff; color: #1A2A55; font-size: .625rem; font-weight: 800; letter-spacing: .02em; }
.co-m-logos i.pp { color: #003087; }
.co-note { margin: 12px 0 0; font-size: .875rem; color: #6B4A00; }
.co-secure { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.co-secure svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--safe); stroke-width: 1.8; stroke-linecap: round; }
.co-secure strong { color: var(--ink-1); }

.co-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.co-agree input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: #0A8DFF; }
.co-agree [aria-invalid="true"] { outline: 2px solid #D93B52; outline-offset: 2px; }
.co-agree a { color: #0A6BD6; text-decoration: underline; text-underline-offset: 3px; }
.co-error { min-height: 1.3em; margin: 12px 0 0; color: #C42840; font-size: .9375rem; font-weight: 500; }
.co-pay-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; margin-top: 6px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(115deg, #2B5BFF, #0A8DFF 60%, #22A8FF); color: #fff; font: 600 1.0625rem var(--f-body);
  box-shadow: 0 14px 30px -12px rgba(10, 100, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.co-pay-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 36px -12px rgba(10, 100, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.co-pay-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.co-pay-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.co-pay-btn.is-busy span::after { content: "…"; }
.co-after { margin: 12px 0 0; text-align: center; font-size: .875rem; line-height: 1.5; color: var(--ink-3); }
.co-after strong { color: var(--ink-2); font-weight: 600; }

/* the summary: brand navy, always in view on desktop */
.co-sum { position: sticky; top: 20px; border-radius: 24px; color: var(--mist);
  background: linear-gradient(180deg, rgba(16, 36, 84, .92), rgba(8, 18, 44, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 30px 80px -40px rgba(10, 141, 255, .7); }
.co-sum-toggle { display: none; }
.co-sum-body { padding: 28px; }
.co-sum .sum-label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.co-sum .sum-item { margin-top: 8px; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.25; }
.co-sum .sum-desc { margin-top: 6px; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; }
.co-sum .sum-bill { display: inline-flex; margin-top: 16px; }
.co-sum .sum-bill[hidden] { display: none; }
.co-sum .sum-lines { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid rgba(169, 220, 255, .14); display: grid; gap: 10px; }
.co-sum .sum-lines div { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; color: #C9D6F0; }
.co-sum .sum-lines div[hidden] { display: none; }
.co-sum .sum-lines dt, .co-sum .sum-lines dd { margin: 0; }
.co-sum .sum-lines dd { color: var(--mist); font-variant-numeric: tabular-nums; text-align: right; }
.co-sum [data-row="discount"] dd { color: #7EE2B8; }
.co-sum .sum-today { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(169, 220, 255, .2); align-items: baseline; }
.co-sum .sum-today dt { color: var(--mist); font-weight: 600; font-size: 1rem; }
.co-sum .sum-today dd { font-family: var(--f-display); font-size: 2.125rem; font-weight: 600; letter-spacing: -.035em; }
.sum-tax { margin: 8px 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.co-code { margin-top: 16px; }
.co-code summary { display: inline-block; cursor: pointer; list-style: none; font-size: .9375rem; color: var(--ice); text-decoration: underline; text-decoration-color: rgba(169, 220, 255, .4); text-underline-offset: 4px; }
.co-code summary::-webkit-details-marker { display: none; }
.co-code .coupon { display: flex; gap: 8px; margin-top: 10px; }
.co-code .coupon input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(169, 220, 255, .3); background: rgba(4, 10, 26, .5); color: var(--mist); font: 600 .9375rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.co-code .coupon input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #6F80A6; }
.co-code .coupon input:focus { outline: none; border-color: var(--cyan); }
.co-apply { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: rgba(169, 220, 255, .16); color: var(--mist); font: 600 .9375rem var(--f-body); cursor: pointer; }
.co-apply:hover { background: rgba(169, 220, 255, .26); }
.co-sum .coupon-msg { min-height: 1.2em; margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.co-sum .coupon-msg.is-good { color: #7EE2B8; }
.co-sum .coupon-msg.is-bad { color: #FF9AA6; }
.co-promise { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(169, 220, 255, .14); list-style: none; display: grid; gap: 12px; font-size: .875rem; line-height: 1.5; color: #C9D6F0; }
.co-promise li { display: flex; gap: 10px; align-items: flex-start; }
.co-promise li[hidden] { display: none; }
.co-promise svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #6FDCAF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.co-promise strong { color: var(--mist); font-weight: 600; }
.co-sum .sum-change { display: inline-block; margin-top: 18px; font-size: .875rem; color: #AFC0DE; text-decoration: underline; text-underline-offset: 3px; }

.co-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 1160px; margin: 0 auto; padding: 24px var(--gutter) 36px; border-top: 1px solid rgba(169, 220, 255, .08); font-size: .8125rem; color: var(--muted); }
.co-foot p { margin: 0; display: flex; gap: 16px; }
.co-foot a { color: #AFC0DE; }
.co-foot a:hover { color: var(--mist); }

@media (max-width: 960px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-sum { position: static; order: -1; }
  .co-sum-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 20px; border: 0; background: none; color: var(--mist); font: 600 1rem var(--f-body); cursor: pointer; }
  .co-sum-toggle strong { margin-left: auto; font-family: var(--f-display); font-size: 1.125rem; }
  .co-sum-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ease); }
  .co-sum.is-open .co-sum-toggle svg { transform: rotate(180deg); }
  .co-sum-body { display: none; padding: 4px 20px 22px; }
  .co-sum.is-open .co-sum-body { display: block; }
  .co-top { grid-template-columns: auto 1fr; }
  .co-badge { justify-self: end; }
  .co-back { display: none; }
}
@media (max-width: 600px) {
  .co-fields, .co-methods { grid-template-columns: 1fr; }
  .co-brand span { display: none; }
  .co-pay { padding: 18px 14px; }
  .co-foot { flex-direction: column; align-items: center; text-align: center; }
}

/* thank-you page */
.thanks { max-width: 760px; margin: 0 auto; padding: calc(var(--header-h) + clamp(48px, 7vw, 100px)) var(--gutter) clamp(80px, 9vw, 130px); text-align: center; }
.thanks .kicker { justify-content: center; margin-top: 26px; }
.thanks-mark svg { display: block; margin: 0 auto; width: 88px; height: 88px; fill: rgba(47, 212, 255, .08); stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 22px rgba(47, 212, 255, .45)); }
.thanks-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick .8s .3s var(--ease) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.thanks h1 { margin-top: 12px; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.thanks-id { margin-top: 14px; color: #C9D6F0; }
.thanks-id strong { font-family: var(--f-display); color: var(--mist); letter-spacing: .04em; }
.thanks-text { margin: 16px auto 0; max-width: 560px; color: #C9D6F0; line-height: 1.65; font-size: 1.0625rem; }
.thanks-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; text-align: left; }
.thanks-next li { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(8, 20, 48, .45); display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; color: #C9D6F0; line-height: 1.5; }
.thanks-next strong { color: var(--mist); }
.thanks-guarantee { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: .9375rem; color: #DCE6F7; }
.thanks-guarantee svg { width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

@media (max-width: 1000px) {
  .order-grid { grid-template-columns: 1fr; }
  .sum { position: static; order: -1; }
}
@media (max-width: 640px) {
  .ofs-grid, .pay-opts { grid-template-columns: 1fr; }
  .order-steps { font-size: .75rem; gap: 12px; }
  .order-steps li { flex-direction: column; text-align: center; gap: 6px; }
  .thanks-next { grid-template-columns: 1fr; }
}

/* ==========================================================
   HOME / SECTION 6: INSIGHTS
   When the section comes into view the three articles fall into place one by one,
   bounce like the apple, and send a ripple through the light line they land on.
   ========================================================== */
.insights { padding: clamp(96px, 10vw, 160px) var(--gutter) clamp(80px, 9vw, 140px); }
.insights-head { max-width: 1080px; margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.insights-head h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 4rem); letter-spacing: -.035em; text-wrap: balance; }
.insights-all { margin: 0 0 10px; }
.insights-all::after { content: " \2192"; }

.insights-field { position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; padding-bottom: 34px; } /* three smaller cards, centred */
.insights-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }

.post { --i: 0; --r: 0deg; --mx: .5; --my: .5; position: relative; }
.post:nth-child(1) { --i: 0; --r: -7deg; }
.post:nth-child(2) { --i: 1; --r: 5deg; }
.post:nth-child(3) { --i: 2; --r: -4deg; }
.post-link {
  position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 40%, rgba(4, 10, 26, .3));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 30px 70px -45px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* a soft light that follows the cursor across the card */
.post-link::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(47, 212, 255, .14), transparent 60%);
}
.post-link:hover { transform: translateY(-6px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(120, 214, 255, .3), 0 40px 80px -40px rgba(10, 141, 255, .55); }
.post-link:hover::after { opacity: 1; }
.post-cover { aspect-ratio: 16 / 10; overflow: hidden; background: #071330; }
.post-cover img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.04);
  transition: transform .9s var(--ease);
}
/* the cover leans toward the cursor, like light bending around a mass */
.post-link:hover .post-cover img { transform: scale(1.1) translate(calc((var(--mx) - .5) * -3%), calc((var(--my) - .5) * -3%)); }
.post-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.post-meta { display: flex; gap: 14px; font-size: .8125rem; font-weight: 600; color: var(--ice); letter-spacing: .02em; }
.post-meta span + span { color: var(--muted); font-weight: 500; }
.post h3 { margin-top: 10px; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.post-text { margin-top: 8px; color: #C9D6F0; font-size: .9063rem; }
.post-more { margin-top: auto; padding-top: 14px; color: var(--ice); font-weight: 600; font-size: .9375rem; }
.post-more::after { content: " \2192"; display: inline-block; transition: transform .3s var(--ease); }
.post-link:hover .post-more::after { transform: translateX(4px); }

/* the ground: a thin light line, with a ripple under each card when it lands */
.insights-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 214, 255, .35) 15%, rgba(120, 214, 255, .35) 85%, transparent);
}
.post::after {
  content: ""; position: absolute; left: 50%; bottom: -34px; width: 70%; height: 22px; pointer-events: none;
  transform: translate(-50%, 50%) scale(.2); border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(127, 224, 255, .9); box-shadow: 0 0 22px rgba(47, 212, 255, .6), inset 0 0 12px rgba(47, 212, 255, .4);
}

/* falling: only when JS is running, so the cards are always visible without it */
.insights.is-armed .post { opacity: 0; transform: translateY(-46vh) rotate(var(--r)); }
.insights.is-in .post { animation: postFall 1.25s calc(var(--i) * .22s) both; }
.insights.is-in .post::after { animation: postRipple 1s calc(var(--i) * .22s + .62s) both; }
@keyframes postFall {
  0% { opacity: 0; transform: translateY(-46vh) rotate(var(--r)); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  12% { opacity: 1; }
  50% { transform: translateY(0) rotate(calc(var(--r) * .15)); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  66% { transform: translateY(-26px) rotate(calc(var(--r) * -.25)); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  80% { transform: translateY(0) rotate(calc(var(--r) * .08)); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  90% { transform: translateY(-7px) rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  100% { opacity: 1; transform: none; }
}
@keyframes postRipple {
  0% { opacity: 1; transform: translate(-50%, 50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(1.25); }
}

@media (max-width: 900px) {
  /* mobile and tablet: the cards stack in one column, nothing hides off screen */
  .insights { padding-top: 24px; } /* the section above already ends with space under its button */
  .insights-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .insights-all { margin: 0; }
  .insights-field { max-width: 560px; padding-bottom: 0; }
  .insights-row { grid-template-columns: 1fr; gap: 30px; }
  .insights-ground { display: none; }
  .post::after { bottom: -15px; height: 14px; }
  .post-cover { aspect-ratio: 16 / 9; }
  .post h3 { font-size: 1.25rem; }
  .insights.is-armed .post { transform: translateY(-30vh) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .insights.is-armed .post { opacity: 1; transform: none; }
  .insights.is-in .post, .insights.is-in .post::after { animation: none; }
}

/* ==========================================================
   HOME / SECTION 7: START A PROJECT, a launch sequence
   One question at a time on the left. The answers float as glass orbs around the core on the right;
   picked ones are captured into its orbit. "Launch" pulls the whole system into the core.
   ========================================================== */
.start { position: relative; }
.start-stage { position: relative; min-height: 100svh; padding: calc(var(--header-h) + 6svh) var(--gutter) 10svh; overflow: hidden; isolation: isolate; }
.start-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.mission { position: static; max-width: 1160px; margin: 0 auto; }
.mission > * { max-width: 520px; }
.mission-head h2 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 4rem); letter-spacing: -.035em; }
.mission-intro { margin-top: 16px; font-size: 1.0625rem; color: #C9D6F0; }
.mission-count { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--ice); }
.mission-picked { margin-top: 10px; font-size: .9375rem; color: var(--ice); min-height: 1.4em; }
.mission-picked strong { color: var(--mist); font-weight: 600; }
/* a soft pulse on the answers until one is picked, so people see they can tap them */
.mstep.is-waiting .orb span { animation: orbCall 2.4s ease-in-out infinite; }
.mstep.is-waiting .orb:nth-child(2n) span { animation-delay: .6s; }
.mstep.is-waiting .orb:nth-child(3n) span { animation-delay: 1.2s; }
@keyframes orbCall { 50% { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(127, 224, 255, .55), 0 0 26px -6px rgba(47, 212, 255, .7); } }
.orbit-hint {
  position: absolute; left: 0; top: 0; z-index: 30; display: none; align-items: center; gap: 10px; pointer-events: none;
  font-size: .875rem; font-weight: 600; color: var(--ice); white-space: nowrap; transform: translate(-50%, 0);
  padding: 8px 14px; border-radius: 999px; background: rgba(4, 10, 26, .7); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, .3);
}
.orbit-hint span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: caret 1.2s ease-in-out infinite; }
.start.show-hint .orbit-hint { display: inline-flex; }
.mission-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 6px; }
.mission-steps li {
  flex: 1; padding-top: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-top: 2px solid rgba(169, 220, 255, .14); transition: color .3s, border-color .3s;
}
.mission-steps li.is-done { color: var(--ice); border-color: rgba(127, 224, 255, .55); }
.mission-steps li.is-now { color: var(--mist); border-color: var(--cobalt); box-shadow: 0 -6px 14px -8px var(--cyan); }

.mstep { margin: 0; padding: 0; border: 0; min-width: 0; margin-top: clamp(34px, 6svh, 56px); }
.step-q { padding: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -.03em; line-height: 1.15; }
.step-help { margin-top: 10px; color: #C9D6F0; }

/* answers as glass orbs */
.orbs { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.orb { position: relative; cursor: pointer; }
.orb input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.orb span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; color: var(--mist); white-space: nowrap;
  background: radial-gradient(120% 140% at 30% 20%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 45%, rgba(4, 10, 26, .5));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.orb:hover span { transform: scale(1.06); }
.orb input:checked + span {
  background: radial-gradient(120% 140% at 30% 20%, rgba(190, 240, 255, .5), rgba(10, 141, 255, .55) 45%, rgba(43, 91, 255, .55));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(127, 224, 255, .8), 0 0 34px -4px rgba(47, 212, 255, .85);
}
.orb input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 3px; }

/* text answers: clean lines, no boxes */
.line { display: grid; gap: 6px; margin-top: 22px; }
.line > span { font-size: .875rem; font-weight: 600; color: var(--ice); }
.line em { font-style: normal; font-weight: 500; color: var(--muted); }
.line input, .line textarea {
  width: 100%; padding: 10px 0 12px; font: inherit; font-size: 1.375rem; color: var(--mist); background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(169, 220, 255, .25); border-radius: 0; transition: border-color .25s, box-shadow .25s;
}
.line textarea { font-size: 1.125rem; line-height: 1.6; resize: vertical; min-height: 140px; }
.line input:focus, .line textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 10px 18px -14px var(--cyan); }
.line.is-invalid input, .line.is-invalid textarea { border-color: #FF7A8A; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mission-nav { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.mission-status { flex-basis: 100%; font-size: .9375rem; color: var(--muted); min-height: 1.5em; }
.mission-status.is-error { color: #FF9AA6; }
.mission-nav .btn[disabled] { opacity: .55; cursor: progress; }

.mission-done { max-width: 1160px; margin: 0 auto; padding-top: 12svh; }
.mission-done > * { max-width: 520px; }
.mission-done h3 { margin-top: 14px; font-size: clamp(2.25rem, 4.2vw, 3.75rem); letter-spacing: -.035em; }
.mission-done p:last-child { margin-top: 16px; font-size: 1.125rem; color: #C9D6F0; }


/* with JavaScript: one step at a time, the orbs float in orbit around the core (wide screens) */
.start.is-live .mstep { display: none; }
.start.is-live .mstep.is-now { display: block; animation: stepIn .6s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; } to { opacity: 1; } } /* opacity only: a transform would move the floating orbs */
.start:not(.is-live) .mission-steps, .start:not(.is-live) .mission-next, .start:not(.is-live) .mission-back { display: none; }
.start.is-live .mission-launch, .start.is-live .mission-back { display: none; }
.start.is-live.is-last .mission-launch, .start.is-live.has-back .mission-back { display: inline-flex; }
.start.is-live.is-last .mission-next { display: none; }
.start.is-sent .mission { display: none; }

@media (min-width: 1001px) {
  .start.is-live .orbs { position: absolute; inset: 0; margin: 0; pointer-events: none; display: block; }
  .start.is-live .orb { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
}

@media (max-width: 1000px) {
  .start-stage { padding: clamp(80px, 12vw, 120px) var(--gutter) clamp(64px, 10vw, 100px); min-height: 0; }
  .start-sky, .orbit-hint { display: none !important; } /* the orbit is a wide-screen effect; on phones the form stays simple */
  .mission > * { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .start.is-live .mstep.is-now, .mstep.is-waiting .orb span { animation: none; } }

/* ==========================================================
   FOOTER
   A light horizon, the links, and a giant wordmark at the bottom: its letters fall into place
   with gravity when the footer appears, and lift toward the cursor (footer.js).
   ========================================================== */
.site-footer { position: relative; padding: 0 var(--gutter); overflow: hidden; isolation: isolate; }
.site-footer::before { /* soft light rising from below */
  content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; height: 90%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 141, 255, .16), rgba(43, 91, 255, .05) 55%, transparent);
}
.foot-horizon { /* the ground line, glowing in the middle */
  height: 1px; margin: 0 calc(-1 * var(--gutter));
  background: linear-gradient(90deg, transparent, rgba(120, 214, 255, .25) 20%, rgba(127, 224, 255, .9) 50%, rgba(120, 214, 255, .25) 80%, transparent);
  box-shadow: 0 0 22px 2px rgba(47, 212, 255, .35);
}
.foot-inner { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px); }
.foot-brand .brand { font-size: 1.25rem; }
.foot-brand .brand-mark { width: 56px; }
.foot-tag { margin-top: 18px; max-width: 26em; color: #C9D6F0; }
.foot-brand .btn { margin-top: 24px; }

.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot-col h2 { font-family: var(--f-body); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
.foot-col .foot-col-gap { margin-top: 26px; }
.foot-col ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: #C9D6F0; font-size: .9375rem; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-col address { margin-top: 14px; font-style: normal; display: grid; gap: 12px; font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.foot-col address a { color: var(--mist); border-bottom: 1px solid var(--line-strong); justify-self: start; }

.foot-bar {
  max-width: 1240px; margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: .8438rem; color: var(--muted);
}
.foot-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-bar a { color: var(--muted); transition: color .2s; }
.foot-bar a:hover { color: var(--mist); }
.foot-top::after { content: " \2191"; }

/* the giant wordmark: letters sit on the ground at the very bottom */
.foot-word {
  margin: clamp(8px, 2vw, 24px) calc(-1 * var(--gutter)) 0; text-align: center; white-space: nowrap; line-height: .78;
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.05em; font-size: clamp(2.5rem, 12.6vw, 13rem);
  /* solid letters in a very light, low opacity tint that fades away toward the bottom */
  color: transparent; -webkit-text-stroke: 0;
  background: linear-gradient(180deg, rgba(234, 244, 255, .13) 0%, rgba(169, 220, 255, .07) 45%, rgba(169, 220, 255, 0) 92%); -webkit-background-clip: text; background-clip: text;
  user-select: none; padding-bottom: .1em;
}
.foot-word .ch { --y: 0px; --r: 0deg; display: inline-block; transform: translateY(var(--y)) rotate(var(--r)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .5s; -webkit-text-stroke: inherit; background: inherit; -webkit-background-clip: text; background-clip: text; }
.foot-word .sp { display: inline-block; width: .28em; }
.foot-word.is-armed .ch { opacity: 0; transform: translateY(-120%) rotate(var(--r0)); }
.foot-word.is-in .ch { animation: chFall 1s calc(var(--i) * 55ms) both; }
@keyframes chFall {
  0% { opacity: 0; transform: translateY(-120%) rotate(var(--r0)); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  15% { opacity: 1; }
  55% { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72% { transform: translateY(-10%) rotate(calc(var(--r0) * -.2)); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  86% { transform: translateY(0); }
  93% { transform: translateY(-3%); }
  100% { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); }
}

@media (max-width: 1000px) {
  .foot-inner { grid-template-columns: 1fr; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
/* phones: Build and Company on the left, AI and Grow on the right, contact as its own block below */
@media (max-width: 640px) {
  .foot-inner { gap: 40px; padding-top: 48px; }
  .foot-brand .btn { width: 100%; }
  .foot-nav { grid-template-areas: "build ai" "company ai" "contact contact"; gap: 30px 20px; }
  .fc-build { grid-area: build; } .fc-ai { grid-area: ai; } .fc-company { grid-area: company; }
  .fc-contact { grid-area: contact; padding: 20px; border-radius: 20px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
  .foot-col ul { gap: 12px; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0 18px; }
  .foot-bar ul { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .foot-word.is-armed .ch { opacity: 1; transform: none; }
  .foot-word.is-in .ch { animation: none; }
}

/* ==========================================================
   SCROLL INDICATOR: NEWTON'S APPLE
   An apple hangs on a branch at the top of a thin line. Scrolling lets it fall,
   with a little weight and swing, and it lands with a ripple at the end of the page.
   ========================================================== */
.fall { --top: calc(var(--header-h) + 18px); --bottom: 34px;
  position: fixed; right: 22px; top: var(--top); bottom: var(--bottom); width: 30px; z-index: 40; pointer-events: none; }
.fall-branch { position: absolute; top: -10px; right: -2px; width: 40px; height: 20px; overflow: visible; }
.fall-branch path { fill: none; stroke: rgba(169, 220, 255, .55); stroke-width: 1.4; stroke-linecap: round; }
.fall-branch .fall-leaf { fill: rgba(47, 212, 255, .55); stroke: none; }
.fall-track { position: absolute; left: 50%; top: 6px; bottom: 0; width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, rgba(169, 220, 255, .28), rgba(169, 220, 255, .14) 85%, rgba(169, 220, 255, .28)); }
.fall-trail { position: absolute; left: -0.5px; top: 0; width: 2px; height: var(--fy, 0px); border-radius: 2px;
  background: linear-gradient(180deg, rgba(43, 91, 255, 0), rgba(10, 141, 255, .7) 70%, #7FE0FF);
  box-shadow: 0 0 10px rgba(47, 212, 255, .6); }
.fall-ticks { position: absolute; inset: 0; }
.fall-ticks i { position: absolute; left: -4px; width: 9px; height: 1px; background: rgba(169, 220, 255, .45); }
.fall-ticks i.is-past { background: #7FE0FF; box-shadow: 0 0 6px rgba(47, 212, 255, .8); }
.fall-ground { position: absolute; left: 50%; bottom: -6px; width: 26px; height: 2px; margin-left: -13px; border-radius: 2px;
  background: radial-gradient(closest-side, rgba(169, 220, 255, .55), transparent); }
.fall-ripple { position: absolute; left: 50%; top: 50%; width: 10px; height: 4px; margin: -2px 0 0 -5px; border-radius: 50%;
  border: 1px solid rgba(127, 224, 255, .9); opacity: 0; }
.fall.is-landed .fall-ripple { animation: fallRipple 1.1s ease-out; }
@keyframes fallRipple { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(5.5); } }

.fall-apple { position: absolute; left: 50%; top: 0; width: 24px; height: 28px; margin-left: -12px; pointer-events: auto; cursor: pointer;
  transform: translate3d(0, var(--fy, 0px), 0) rotate(var(--fr, 0deg)) scale(var(--fsx, 1), var(--fsy, 1)); transform-origin: 50% 8%; }
.fall-fruit { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(47, 212, 255, .7)) drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.apple-body { fill: url(#apple-body); }
.apple-shine { fill: rgba(255, 255, 255, .55); }
.apple-stem { fill: none; stroke: #BFEFFF; stroke-width: 1.2; stroke-linecap: round; }
.apple-leaf { fill: #2FD4FF; }
.fall.is-hanging .fall-fruit { animation: appleSway 3.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes appleSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.fall-num {
  position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-weight: 700; font-size: .6875rem; letter-spacing: -.01em; color: var(--ice);
  font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity .4s;
}
.fall-num::after { content: "%"; margin-left: 1px; opacity: .6; }
.fall.is-moving .fall-num, .fall-apple:hover .fall-num { opacity: 1; }
.fall-apple:hover .fall-fruit { filter: drop-shadow(0 0 10px rgba(47, 212, 255, 1)) drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

@media (max-width: 1080px) {
  .fall { right: 6px; width: 20px; --bottom: calc(24px + env(safe-area-inset-bottom)); --top: calc(var(--header-h) + 14px); }
  .fall-branch { width: 30px; right: -4px; }
  .fall-apple { width: 16px; height: 19px; margin-left: -8px; }
  .fall-num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fall.is-hanging .fall-fruit { animation: none; } }

/* ==========================================================
   PROJECT FINDER
   ========================================================== */
.finder {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow-y: auto; padding: 32px;
  background: var(--deep); color: var(--mist);
  border: 1px solid var(--line-strong); border-radius: 22px;
}
.finder::backdrop { background: rgba(4, 8, 20, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.finder-close-form { position: absolute; top: 18px; right: 18px; }
.finder-close { font-size: .875rem; color: var(--muted); padding: 6px 10px; border-radius: 8px; }
.finder-close:hover { color: var(--mist); }
.finder-step { font-size: .8125rem; color: var(--ice); margin-bottom: 10px; }
.finder h2 { font-size: 1.375rem; line-height: 1.25; margin-bottom: 22px; padding-right: 48px; }
.finder-opts { display: grid; gap: 8px; }
.finder-opts button {
  text-align: left; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--line-strong); font-size: 1rem;
  transition: border-color .2s, background-color .2s;
}
.finder-opts button:hover { border-color: var(--cobalt-hi); background: rgba(10, 141, 255, .12); }
.finder-recs { display: grid; gap: 10px; margin-bottom: 24px; }
.finder-recs a { display: block; padding: 16px 18px; border-radius: 14px; background: rgba(10, 141, 255, .14); border: 1px solid rgba(10, 141, 255, .4); }
.finder-recs a:hover { border-color: var(--ice); }
.finder-recs strong { display: block; font-weight: 500; }
.finder-recs span { font-size: .875rem; color: var(--muted); }
.finder-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* the short request form at the end of the helper */
.finder-recs[hidden] { display: none; }
.finder-form { margin: 4px 0 18px; padding: 20px; border-radius: 18px; background: rgba(4, 10, 26, .45); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.finder-form[hidden] { display: none; }
.finder-form-lead { margin: 0 0 16px; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; }
.finder-form-lead strong { color: var(--mist); }
.ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ff-grid .field input { padding: 11px 13px; font-size: .9375rem; }
.ff-error { min-height: 1.2em; margin: 10px 0 0; color: #FF9AA6; font-size: .875rem; }
.ff-send { width: 100%; height: 52px; margin-top: 6px; }
.ff-send:disabled { opacity: .6; }
.ff-small { margin: 10px 0 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.finder-done { margin: 4px 0 18px; padding: 26px 20px; border-radius: 18px; text-align: center; background: rgba(47, 212, 255, .06); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .25); }
.finder-done[hidden] { display: none; }
.finder-done svg { display: block; width: 56px; height: 56px; margin: 0 auto 12px; fill: rgba(47, 212, 255, .08); stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.finder .finder-done h3 { font-size: 1.25rem; }
.finder-done p { margin-top: 6px; color: #C9D6F0; font-size: .9375rem; }
@media (max-width: 560px) { .ff-grid { grid-template-columns: 1fr; } }
/* the bundle guide: tap the services you need together */
.finder-mix[hidden] { display: none; }
.finder .finder-mix h2 { margin-bottom: 6px; }
.mix-hint { margin: 0 0 18px; color: #C9D6F0; font-size: .9375rem; }
.mix-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mix-opts button { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(4, 10, 26, .5); color: #C9D6F0; font: 500 .9375rem var(--f-body); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.mix-opts button:hover { border-color: var(--cobalt-hi); color: var(--mist); }
.mix-opts button[aria-pressed="true"] { background: linear-gradient(115deg, rgba(43, 91, 255, .6), rgba(10, 141, 255, .5)); border-color: transparent; color: #fff; box-shadow: 0 0 18px -4px rgba(10, 141, 255, .8); }
.mix-opts:not(.mix-when) button[aria-pressed="true"]::before { content: "✓ "; }
.mix-label { margin: 22px 0 10px; font-weight: 600; color: var(--mist); }
.mix-next { width: 100%; height: 52px; margin-top: 8px; }

/* ==========================================================
   MOBILE ACTION BAR
   ========================================================== */

/* ==========================================================
   TABLET + MOBILE
   ========================================================== */
@media (max-width: 1080px) {
  :root { --header-h: 64px; }
  .header-cta { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
    font-size: .875rem;
  }
  .nav-toggle-lines, .nav-toggle-lines::before {
    display: block; width: 16px; height: 1.5px; background: currentColor; position: relative;
    transition: transform .3s var(--ease);
  }
  .nav-toggle-lines::before { content: ""; position: absolute; top: 5px; }
  .nav-toggle-lines { transform: translateY(-2.5px); }
  .is-open .nav-toggle-lines { transform: rotate(45deg); }
  .is-open .nav-toggle-lines::before { transform: translateY(-5px) rotate(-90deg); }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0;
    background: var(--midnight); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 120px;
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
  }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transition: opacity .25s; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link {
    width: 100%; height: 56px; padding: 0; justify-content: space-between; border-radius: 0;
    font-family: var(--f-body); font-size: 1.0625rem; font-weight: 600; opacity: 1;
  }
  .nav-link:hover, .nav-item.is-open > .nav-link { background: none; }

  .panel {
    position: static; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav-item.is-open > .panel { display: block; }
  .panel-inner { display: block; padding: 0 0 20px; }
  .panel-services .svc-cols { display: block; }
  .svc-col + .svc-col { margin-top: 18px; }
  .svc-head { margin-bottom: 4px; padding-bottom: 8px; }
  .svc-head a { font-size: 1rem; color: var(--ice); }
  .svc-link { margin: 0; padding: 10px 0; border-radius: 0; }
  .svc-link:hover, .svc-link.is-active { background: none; }
  .preview, .card-media, .about-media { display: none; }
  .panel-actions { display: none; }

  .panel-cards { display: block; }
  .card { margin: 0; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .panel-links { margin-top: 18px; }
  .panel-about { max-width: none; }
  .about-lead { font-size: 1rem; }
  .panel-list a { margin: 0; padding: 10px 0; }

  .nav-mobile-foot { display: grid; gap: 14px; margin-top: 28px; font-size: .8438rem; color: var(--muted); }

  /* the two main actions live inside the mobile menu (no sticky bar at the bottom) */
  .nav-mobile-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
  .nav-mobile-actions .btn { height: 50px; }
  .nav-mobile-actions .btn-ghost { background: rgba(169, 220, 255, .06); }

  /* backdrop-filter would trap the fixed menu inside the header bar */
  .site-header.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--midnight); }
}

@media (max-width: 720px) {
  .hero { min-height: 0; justify-content: flex-start; padding-top: calc(var(--header-h) + min(86vw, 46svh)); padding-bottom: 48px; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  .hero-sub { margin-top: 18px; font-size: 1rem; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero::before { background: linear-gradient(180deg, transparent 38%, rgba(4, 10, 26, .7) 60%); }
  .orbit-label { font-size: .625rem; padding: 3px 8px; }
  .orbit-label::before { width: 5px; height: 5px; margin-right: 5px; }
  .finder { padding: 26px 20px; }
}

@media (hover: none) { .hero-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-content > * { opacity: 1; transform: none; }
}

/* ---------- worries on phones: one deck of cards instead of a long list ---------- */
.deck-nav { display: none; }
@media (max-width: 720px) {
  .worries.is-deck .worry-grid { display: block; position: relative; height: 220px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .worries.is-deck .worry { position: absolute; inset: 0; transition: transform .55s var(--ease), opacity .45s ease, filter .45s ease; }
  .worries.is-deck .worry-card { height: 100%; min-height: 0; }
  .worries.is-deck .worry[data-pos="0"] { z-index: 3; }
  .worries.is-deck .worry[data-pos="1"] { z-index: 2; transform: translateY(14px) scale(.95); opacity: .6; filter: brightness(.75); pointer-events: none; }
  .worries.is-deck .worry[data-pos="2"] { z-index: 1; transform: translateY(28px) scale(.9); opacity: .3; filter: brightness(.6); pointer-events: none; }
  .worries.is-deck .worry[data-pos="x"] { z-index: 0; transform: translateY(-30px) scale(1.04); opacity: 0; pointer-events: none; }
  .worries.is-deck .deck-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 420px; margin: 44px auto 0; }
  .deck-count { margin: 0; font-size: .9375rem; color: var(--muted); }
  .deck-count b { color: #fff; }
  .deck-nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; font: 600 .9375rem/1 var(--f-body); color: #fff; cursor: pointer;
    background: linear-gradient(128deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%), rgba(10, 26, 62, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .18); }
  .deck-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .deck-nav button { white-space: nowrap; }
  .worries.is-deck .worry-front { background: linear-gradient(128deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #0d1d42, #071029); }
  .worries.is-deck .worry:not([data-pos="0"]) .worry-face > * { visibility: hidden; }
  .deck-nav .deck-next { background: var(--grad); box-shadow: 0 14px 30px -14px rgba(10, 141, 255, .9); }
  .deck-nav .deck-prev { width: 46px; padding: 0; justify-content: center; }
}

/* ---------- "Keep scrolling": appears after 1.5 seconds without scrolling, on every page ---------- */
.gl-hint { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px;
  font: 600 .875rem/1 var(--f-body); color: var(--mist); pointer-events: none; opacity: 0; transform: translate(-50%, 14px);
  transition: opacity .5s ease, transform .6s var(--ease);
  background: linear-gradient(128deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%), rgba(6, 16, 40, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 20px 40px -20px rgba(10, 141, 255, .8); }
.gl-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.sh-mouse { position: relative; width: 20px; height: 30px; border: 1.5px solid rgba(201, 214, 240, .8); border-radius: 12px; }
.sh-mouse i { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 8px rgba(47, 212, 255, .9); animation: shWheel 1.5s var(--ease) infinite; }
.sh-finger { position: relative; width: 20px; height: 30px; }
.sh-finger::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(transparent, rgba(169, 220, 255, .45)); }
.sh-finger i { position: absolute; left: 50%; bottom: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 5px rgba(47, 212, 255, .25), 0 0 14px rgba(47, 212, 255, .8); animation: shSwipe 1.6s var(--ease) infinite; }
@keyframes shWheel { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 75% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
@keyframes shSwipe { 0% { transform: translateY(0) scale(.8); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scale(1); } 80% { transform: translateY(-16px) scale(.9); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-hint { display: none; } }
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .sp-rel-stage { position: relative; } .sp-rel-grid { overflow-x: auto; scroll-snap-type: x mandatory; } .sp-rel-grid li { scroll-snap-align: center; } }
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .chap-stage { position: relative; } .chap-list { overflow-x: auto; scroll-snap-type: x mandatory; } .citem { scroll-snap-align: center; } }

/* =====================================================================
   SERVICE PAGES (/services/website-design/ and the other eight)
   ===================================================================== */
.sp { overflow-x: clip; }
.sp > section { position: relative; isolation: isolate; }
.sp > section + section { margin-top: clamp(40px, 6vw, 90px); }

/* ---------- hero: text on the left, a 3D website on the right ---------- */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(30px, 5vw, 80px);
  min-height: min(100svh, 900px); padding: calc(var(--header-h) + clamp(20px, 4vw, 50px)) var(--gutter) clamp(40px, 5vw, 70px); max-width: 1380px; margin: 0 auto; }
.sp-hero::before { content: ""; position: absolute; right: -10%; top: 10%; width: min(900px, 90vw); height: 80%; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px);
  background: radial-gradient(closest-side, rgba(10, 141, 255, .35), rgba(43, 91, 255, .12) 55%, transparent); animation: spNebula 14s ease-in-out infinite alternate; }
@keyframes spNebula { to { transform: translate(-6%, 6%) scale(1.08); } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { color: var(--ice); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--mist); }
.sp-hero h1 { margin-top: 14px; font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.sp-lead { margin-top: 20px; max-width: 560px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: #C9D6F0; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sp-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .9375rem; color: #C9D6F0; }
.sp-trust li { display: flex; align-items: center; gap: 8px; }
.sp-trust svg, .sp-ico svg { fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-trust svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(47, 212, 255, .14); }

/* the 3D browser */
.sp-hero-viz { perspective: 1600px; }
.spb { --rx: 0deg; --ry: 0deg; position: relative; width: min(100%, 640px); margin: 0 auto; transform-style: preserve-3d;
  transform: rotateX(calc(10deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(2deg); animation: spbFloat 8s ease-in-out infinite; }
@keyframes spbFloat { 50% { translate: 0 -12px; } }
.spb-win { position: relative; border-radius: 18px; overflow: hidden; transform: translateZ(0);
  background: linear-gradient(160deg, rgba(20, 44, 98, .9), rgba(6, 14, 36, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 60px 120px -40px rgba(10, 141, 255, .7), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.spb-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(169, 220, 255, .12); }
.spb-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169, 220, 255, .3); }
.spb-url { margin-left: 12px; padding: 4px 14px; border-radius: 99px; font-size: .75rem; color: var(--muted); background: rgba(169, 220, 255, .07); }
.spb-page { padding: 18px 22px 22px; }
.spb-nav { display: flex; align-items: center; gap: 10px; }
.spb-nav b { width: 26px; height: 10px; border-radius: 4px; background: var(--grad); }
.spb-nav span { width: 34px; height: 6px; border-radius: 3px; background: rgba(169, 220, 255, .2); }
.spb-nav span:first-of-type { margin-left: auto; }
.spb-nav em { width: 50px; height: 16px; border-radius: 8px; background: rgba(47, 212, 255, .35); }
.spb-hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 16px; margin-top: 26px; }
.spb-copy i { display: block; height: 12px; margin-bottom: 9px; border-radius: 5px; background: linear-gradient(90deg, #fff, #A9DCFF); transform-origin: left; animation: spbType 6s var(--ease) infinite; }
.spb-copy .l1 { width: 92%; } .spb-copy .l2 { width: 70%; animation-delay: .15s; } .spb-copy .l3 { width: 50%; height: 7px; margin-top: 14px; background: rgba(169, 220, 255, .3); animation-delay: .3s; }
.spb-copy em { display: block; width: 46%; height: 22px; margin-top: 16px; border-radius: 11px; background: var(--grad); box-shadow: 0 8px 22px -6px rgba(10, 141, 255, .9); animation: spbPulse 3s ease-in-out infinite; }
@keyframes spbType { 0%, 8% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes spbPulse { 50% { box-shadow: 0 8px 30px -2px rgba(47, 212, 255, 1); } }
.spb-orb { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.spb-orb::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(169, 220, 255, .3); transform: rotateX(70deg); animation: spbSpin 8s linear infinite; }
.spb-orb span { width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #A9DCFF 10%, #2FB6FF 32%, #2B5BFF 62%, #071029 100%);
  box-shadow: 0 0 40px rgba(47, 212, 255, .6), inset -10px -14px 30px rgba(4, 10, 26, .7); animation: spbBob 5s ease-in-out infinite; }
@keyframes spbSpin { to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes spbBob { 50% { transform: translateY(-6px); } }
.spb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.spb-cards i { height: 54px; border-radius: 10px; background: linear-gradient(160deg, rgba(169, 220, 255, .14), rgba(169, 220, 255, .04)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); }
.spb-chip, .spb-lead { position: absolute; z-index: 2; padding: 9px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #fff; white-space: nowrap;
  background: linear-gradient(128deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%), rgba(10, 26, 62, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 20px 40px -18px rgba(0, 0, 0, .9); animation: spbChip 6s ease-in-out infinite; }
.spb-chip::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); vertical-align: 1px; }
.spb-chip.c1 { left: -6%; top: 18%; transform: translateZ(90px); }
.spb-chip.c2 { right: -7%; top: 42%; transform: translateZ(120px); animation-delay: -2s; }
.spb-chip.c3 { left: 8%; bottom: -5%; transform: translateZ(70px); animation-delay: -4s; }
.spb-lead { right: 4%; top: -7%; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; font-weight: 500; color: #C9D6F0; transform: translateZ(150px); animation: spbLead 7s var(--ease) infinite; }
.spb-lead b { color: #fff; font-size: .875rem; }
.spb-lead::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 12px #3DF0A0; }
@keyframes spbChip { 50% { translate: 0 -8px; } }
@keyframes spbLead { 0%, 12% { opacity: 0; translate: 0 14px; } 22%, 80% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 -10px; } }
.spb:not(.is-live), .spb:not(.is-live) * { animation-play-state: paused; }

/* ---------- why it matters: three numbers with filling rings ---------- */
.sp-stats { padding: clamp(50px, 7vw, 100px) var(--gutter) 0; }
.sp-stat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1180px; margin: clamp(36px, 4vw, 56px) auto 0; }
.sp-stat { position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 26px 28px; border-radius: 26px; text-align: center;
  background: linear-gradient(128deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(13, 29, 66, .55), rgba(6, 14, 36, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .1), 0 40px 80px -50px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.sp-stat:nth-child(2) { transition-delay: .12s; } .sp-stat:nth-child(3) { transition-delay: .24s; }
.sp-stat.is-in { opacity: 1; transform: none; }
.sp-ring { position: absolute; top: 22px; left: 50%; width: 150px; height: 150px; margin-left: -75px; transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke: rgba(169, 220, 255, .1); stroke-width: 2; }
.sp-ring .on { stroke: url(#brand-grad); stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(47, 212, 255, .8)); transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.sp-stat.is-in .sp-ring .on { stroke-dashoffset: 22; }
.sp-num { display: flex; align-items: baseline; justify-content: center; height: 150px; padding-top: 52px; font-family: var(--f-display); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-num span { font-size: 3.25rem; background: linear-gradient(100deg, #fff, #A9DCFF 50%, #2FD4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-num.is-long span { font-size: 2.5rem; }
.sp-num small { margin-left: 2px; font-size: 1.5rem; color: var(--cyan); }
.sp-stat-text { margin-top: 18px; color: #DCE6F7; line-height: 1.55; }
.sp-src { margin-top: auto; padding-top: 14px; font-size: .75rem; color: var(--muted); }

/* ---------- what is inside: the website comes apart into layers (pinned) ---------- */
.sp-layers-track { position: relative; height: 420svh; }
.sp-layers-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2vh, 26px); padding: var(--header-h) var(--gutter) 30px; overflow: hidden; }
.sp-layers-stage::before { content: ""; position: absolute; left: 50%; top: 55%; width: min(1100px, 130vw); height: 70%; transform: translate(-50%, -50%); z-index: -1; filter: blur(80px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 91, 255, .22), transparent); }
.sp-layers-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(20px, 4vw, 70px); max-width: 1240px; width: 100%; margin: 0 auto; min-height: 0; }
.sp-stack { position: relative; height: min(64vh, 560px); perspective: 2000px; }
.sp-stack-in { --open: 0; position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-36deg) translateZ(calc(var(--open) * -60px)); }
.sp-plate { --z: calc((var(--i) - 2) * (14px + var(--open) * 74px)); position: absolute; left: 50%; top: 50%; width: min(78%, 400px); aspect-ratio: 200 / 130; translate: -50% -50%;
  transform: translateZ(var(--z)); transform-style: preserve-3d; transition: filter .5s var(--ease), opacity .5s var(--ease); border-radius: 16px; opacity: .55; filter: saturate(.6); }
.sp-plate[data-i="0"] { --i: 0; } .sp-plate[data-i="1"] { --i: 1; } .sp-plate[data-i="2"] { --i: 2; } .sp-plate[data-i="3"] { --i: 3; } .sp-plate[data-i="4"] { --i: 4; }
.sp-plate svg { width: 100%; height: 100%; border-radius: 16px; overflow: visible;
  background: linear-gradient(140deg, rgba(30, 64, 140, .55), rgba(6, 16, 42, .75)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25), 0 0 0 1px rgba(169, 220, 255, .05), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.sp-plate.is-on { opacity: 1; filter: none; }
.sp-plate.is-on svg { background: linear-gradient(140deg, rgba(40, 100, 220, .65), rgba(8, 22, 60, .85)); box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .8), 0 0 50px rgba(47, 212, 255, .45), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.sp-plate-tag { position: absolute; right: -8px; top: -10px; padding: 6px 12px; border-radius: 99px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #fff; white-space: nowrap;
  background: var(--grad); box-shadow: 0 0 18px rgba(10, 141, 255, .8); opacity: 0; transform: translateZ(2px) scale(.8); transition: opacity .4s, transform .4s var(--ease); }
.sp-plate.is-on .sp-plate-tag { opacity: 1; transform: translateZ(2px) scale(1); }
.sp-plate .pl-f { fill: none; stroke: rgba(169, 220, 255, .18); }
.sp-plate .pl-b { fill: rgba(169, 220, 255, .5); } .sp-plate .dim { opacity: .45; }
.sp-plate .pl-g { fill: #2FB6FF; filter: drop-shadow(0 0 4px #2FD4FF); }
.sp-plate .pl-l { fill: none; stroke: #7BE3FF; stroke-width: 3; stroke-linecap: round; }
.sp-plate .pl-n { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.sp-plate .pl-o { fill: rgba(47, 212, 255, .15); stroke: rgba(123, 227, 255, .7); stroke-width: 1.5; }
.sp-plate .pl-t { fill: #fff; font: 700 13px var(--f-display); text-anchor: middle; }
.sp-plate .pl-c { fill: #fff; }
.sp-plate .ring { fill: none; animation: plRing 1.8s ease-out infinite; transform-origin: 128px 76px; }
@keyframes plRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.sp-steps { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: none; display: grid; gap: 4px; }
.sp-step { position: relative; padding: 14px 18px 14px 58px; border-radius: 18px; cursor: pointer; transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.sp-step-n { position: absolute; left: 18px; top: 17px; font-family: var(--f-display); font-size: .875rem; font-weight: 700; color: var(--muted); transition: color .3s; }
.sp-step h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); letter-spacing: -.025em; color: var(--muted); transition: color .3s; }
.sp-step p { display: grid; grid-template-rows: 0fr; overflow: hidden; color: #C9D6F0; line-height: 1.6; font-size: .9875rem; opacity: 0; max-height: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.sp-step.is-on { background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(47, 212, 255, .25); }
.sp-step.is-on .sp-step-n { color: var(--cyan); }
.sp-step.is-on h3 { color: #fff; }
.sp-step.is-on p { max-height: 9em; opacity: 1; margin-top: 8px; }
.sp-layers-bar { width: min(320px, 60vw); height: 3px; margin: 0 auto; border-radius: 3px; background: rgba(169, 220, 255, .12); overflow: hidden; }
.sp-layers-bar i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }

/* ---------- included in every plan ---------- */
.sp-get { padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.sp-get-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1180px; margin: clamp(32px, 4vw, 52px) auto 0; }
.sp-get-item { position: relative; padding: 28px 26px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(128deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%), rgba(8, 20, 48, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(169, 220, 255, .08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sp-get-item::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 212, 255, .18), transparent); transition: transform .5s var(--ease); }
.sp-get-item:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(47, 212, 255, .3), 0 30px 60px -30px rgba(10, 141, 255, .6); }
.sp-get-item:hover::after { transform: scale(1.6); }
.sp-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: radial-gradient(circle at 30% 20%, rgba(47, 212, 255, .35), rgba(43, 91, 255, .15)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 24px rgba(10, 141, 255, .35); }
.sp-ico svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.7; }
.sp-get-item h3 { margin-top: 18px; font-size: 1.25rem; letter-spacing: -.02em; }
.sp-get-item p { margin-top: 8px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }

/* ---------- plans ---------- */
.sp-plans { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; scroll-margin-top: 20px; }
.sp-plans::before { content: ""; position: absolute; left: 50%; top: 20%; width: min(1100px, 120vw); height: 70%; transform: translateX(-50%); z-index: -1; filter: blur(90px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 141, 255, .22), transparent); }
.sp-plans-in { max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; }
.sp-promise { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding: 20px 24px; border-radius: 22px; background: rgba(8, 20, 48, .45); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.sp-promise p { flex: 1; color: #C9D6F0; line-height: 1.55; }
.sp-promise strong { color: #fff; }
.sp-seal { flex: none; display: grid; place-items: center; align-content: center; width: 70px; height: 70px; border-radius: 50%; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice);
  background: radial-gradient(circle, rgba(47, 212, 255, .2), transparent 70%); box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .6), 0 0 26px rgba(47, 212, 255, .35); }
.sp-seal b { font-family: var(--f-display); font-size: 1.625rem; line-height: 1; color: #fff; letter-spacing: -.04em; }
.sp-promise-link, .sp-rel-go, .sp-all-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ice); white-space: nowrap; }
.sp-promise-link svg, .sp-rel-go svg, .sp-all-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.sp-promise-link:hover svg, .sp-rel:hover .sp-rel-go svg, .sp-all-back:hover svg { transform: translateX(4px); }

/* ---------- timeline with a comet ---------- */
.sp-time { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.sp-tl { --p: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; max-width: 1240px; margin: clamp(50px, 6vw, 80px) auto 0; padding: 0; list-style: none; }
.sp-tl-line { position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; border-radius: 2px; background: rgba(169, 220, 255, .14); }
.sp-tl-line i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--p)); box-shadow: 0 0 12px rgba(47, 212, 255, .7); }
.sp-tl-line b { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(47, 212, 255, .25), 0 0 24px 6px rgba(47, 212, 255, .8), -30px 0 30px -6px rgba(47, 212, 255, .6); }
.sp-tl-step { position: relative; padding-top: 42px; text-align: center; opacity: .45; transition: opacity .5s var(--ease); }
.sp-tl-step.is-lit { opacity: 1; }
.sp-tl-dot { position: absolute; left: 50%; top: 2px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--midnight); box-shadow: inset 0 0 0 2px rgba(169, 220, 255, .35); transition: box-shadow .4s; }
.sp-tl-step.is-lit .sp-tl-dot { box-shadow: inset 0 0 0 5px var(--cyan), 0 0 16px rgba(47, 212, 255, .8); }
.sp-tl-when { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.sp-tl-step h3 { margin-top: 8px; font-size: 1.25rem; letter-spacing: -.02em; }
.sp-tl-step p { margin-top: 8px; color: #C9D6F0; font-size: .9375rem; line-height: 1.55; }

/* ---------- questions: numbered rows that open with a line of light ---------- */
.sp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.sp-faq-side { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.sp-faq-side h2 { margin-top: 12px; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.04em; line-height: 1.06; }
.sp-faq-side p:not(.kicker) { margin: 14px 0 24px; color: #C9D6F0; line-height: 1.6; }
.sp-faq-list { display: grid; gap: 10px; }
.sp-q { position: relative; border-radius: 20px; background: rgba(8, 20, 48, .4); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); transition: background .4s, box-shadow .4s; }
.sp-q::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 14px rgba(47, 212, 255, .9); transform: scaleY(0); transition: transform .5s var(--ease); }
.sp-q[open] { background: linear-gradient(128deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(47, 212, 255, .22); }
.sp-q[open]::before { transform: scaleY(1); }
.sp-q summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q-n { flex: none; font-family: var(--f-display); font-size: .875rem; font-weight: 700; color: var(--muted); }
.sp-q[open] .sp-q-n { color: var(--cyan); }
.sp-q-t { flex: 1; font-family: var(--f-display); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 600; letter-spacing: -.015em; color: #fff; }
.sp-q-x { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .3); transition: transform .4s var(--ease), background .3s; }
.sp-q-x::before, .sp-q-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: #fff; }
.sp-q-x::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.sp-q[open] .sp-q-x { background: var(--grad); box-shadow: none; transform: rotate(180deg); }
.sp-q[open] .sp-q-x::after { transform: rotate(0); }
.sp-q-a { padding: 0 22px 22px 56px; }
.sp-q-a p { color: #C9D6F0; line-height: 1.65; }
.sp-q[open] .sp-q-a { animation: spQ .5s var(--ease); }
@keyframes spQ { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- final call to action ---------- */
.sp-end { padding: clamp(70px, 9vw, 130px) var(--gutter) 0; }
.sp-end-card { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 70px); border-radius: 34px; text-align: center; overflow: hidden; isolation: isolate;
  background: linear-gradient(128deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(16, 40, 92, .75), rgba(6, 14, 36, .8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 60px 120px -60px rgba(10, 141, 255, .9); }
.sp-end-glow { position: absolute; left: 50%; bottom: -60%; width: 120%; aspect-ratio: 2; transform: translateX(-50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 212, 255, .45), rgba(43, 91, 255, .2) 50%, transparent); animation: spGlow 6s ease-in-out infinite alternate; }
@keyframes spGlow { to { transform: translateX(-50%) scale(1.15); opacity: .7; } }
.sp-end h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.sp-end p { max-width: 600px; margin: 16px auto 0; color: #DCE6F7; line-height: 1.6; }
.sp-end .sp-actions { justify-content: center; }
.sp-end-card { overflow: visible; }
.sp-end-glow { left: 0; right: 0; top: 0; bottom: 0; width: auto; aspect-ratio: auto; transform: none; overflow: hidden; border-radius: inherit; animation: none; background: none; }
.sp-end-glow::before { content: ""; position: absolute; left: 50%; bottom: -60%; width: 120%; aspect-ratio: 2; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 212, 255, .45), rgba(43, 91, 255, .2) 50%, transparent); animation: spGlow 6s ease-in-out infinite alternate; }
.sp-end-card:has(.sp-end-bot) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: 30px; text-align: left; padding-right: clamp(20px, 3vw, 40px); }
.sp-end-card:has(.sp-end-bot) p { margin-left: 0; }
.sp-end-card:has(.sp-end-bot) .sp-actions { justify-content: flex-start; }
.sp-end-bot { position: relative; grid-column: 2; grid-row: 1; width: 100%; max-width: 270px; margin: -130px 0 -70px auto; }
.sp-end-bot img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(10, 141, 255, .35)); }
.sp-end-palm { position: absolute; left: 6%; top: 31%; width: 0; height: 0; }
.sp-end-palm::before { content: ""; position: absolute; width: 60px; height: 60px; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(47, 212, 255, .6) 35%, transparent); animation: wbPalm 2.4s ease-in-out infinite; }
.sp-end-text { grid-column: 1; grid-row: 1; }

/* ---------- other services ---------- */
.sp-more { padding: clamp(70px, 9vw, 120px) var(--gutter) clamp(60px, 8vw, 110px); }
.sp-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1180px; margin: clamp(32px, 4vw, 52px) auto 0; }
.sp-rel { display: flex; flex-direction: column; height: 100%; padding: 0 24px 24px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(128deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(13, 29, 66, .55), rgba(6, 14, 36, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sp-rel:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(47, 212, 255, .35), 0 40px 70px -35px rgba(10, 141, 255, .8); }
.sp-rel-viz { display: grid; place-items: center; margin: 0 -24px 18px; padding: 22px 20px; background: radial-gradient(60% 80% at 50% 70%, rgba(10, 141, 255, .28), transparent 70%); border-bottom: 1px solid rgba(169, 220, 255, .1); }
.sp-rel-viz .viz { max-width: 200px; }
.sp-rel-name { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.sp-rel-hook { margin: 8px 0 18px; font-family: var(--f-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.sp-rel-go { margin-top: auto; }
.sp-all { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 1180px; margin: 30px auto 0; padding-top: 26px; border-top: 1px solid rgba(169, 220, 255, .1); }
.sp-all p { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-all ul { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.sp-all ul a { display: inline-block; padding: 7px 14px; border-radius: 99px; font-size: .875rem; color: #C9D6F0; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); transition: color .2s, box-shadow .2s, background .2s; }
.sp-all ul a:hover { color: #fff; background: rgba(47, 212, 255, .1); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .5); }

/* ---------- service pages on tablets and phones ---------- */
@media (max-width: 1000px) {
  .sp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; text-align: left; }
  .sp-hero-viz { order: 2; max-width: 560px; width: 100%; margin: 10px auto 0; }
  .sp-get-grid, .sp-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-faq { grid-template-columns: minmax(0, 1fr); }
  .sp-faq-side { position: static; }
  .sp-tl { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 30px; }
  .sp-tl-line { left: 7px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .sp-tl-line i { transform-origin: top; transform: scaleY(var(--p)); }
  .sp-tl-line b { left: 50%; top: calc(var(--p) * 100%); margin: -8px 0 0 -8px; box-shadow: 0 0 0 5px rgba(47, 212, 255, .25), 0 0 24px 6px rgba(47, 212, 255, .8), 0 -30px 30px -6px rgba(47, 212, 255, .6); }
  .sp-tl-step { padding: 0 0 0 44px; text-align: left; }
  .sp-tl-dot { left: 0; margin-left: 0; top: 2px; }
}
@media (max-width: 900px) {
  .sp-layers-track { height: 380svh; }
  .sp-layers-stage { justify-content: flex-start; gap: 6px; padding-top: calc(var(--header-h) + 6px); }
  .sp-layers-stage .sec-head h2 { font-size: 1.75rem; }
  .sp-layers-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp-stack { height: 38svh; }
  .sp-steps { min-height: 0; }
  .sp-step { display: none; padding: 16px 18px 16px 54px; }
  .sp-step.is-on { display: block; animation: spStep .5s var(--ease); }
  @keyframes spStep { from { opacity: 0; transform: translateY(12px); } }
  .sp-layers-bar { margin-top: 14px; }
}
@media (max-width: 720px) {
  .sp-hero { padding-top: calc(var(--header-h) + 10px); gap: 26px; }
  .crumbs ol { margin-bottom: 14px; }
  .sp-hero h1 { font-size: 2.5rem; }
  .sp-actions .btn { flex: 1 1 100%; }
  .sp-trust { gap: 8px 16px; font-size: .875rem; }
  .spb-chip.c1 { left: -2%; } .spb-chip.c2 { right: -2%; }
  .spb-lead { right: 0; }
  .sp-hero-viz { margin-top: 44px; }
  .sp-stat-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-stat { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 18px 18px; text-align: left; }
  .sp-ring { top: 50%; left: 18px; width: 96px; height: 96px; margin: -48px 0 0; }
  .sp-num { grid-row: span 2; width: 96px; height: 96px; padding: 0; align-items: center; }
  .sp-num span { font-size: 1.875rem; } .sp-num small { font-size: 1rem; }
  .sp-num.is-long span { font-size: 1.375rem; }
  .sp-stat-text { margin: 0; font-size: .9375rem; }
  .sp-src { padding: 0; }
  .sp-get-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-get-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 18px; }
  .sp-ico { grid-row: span 2; width: 44px; height: 44px; }
  .sp-get-item h3 { margin: 0; font-size: 1.0625rem; }
  .sp-get-item p { margin-top: 2px; font-size: .875rem; }
  .sp-promise { flex-wrap: wrap; }
  .sp-promise p { flex-basis: calc(100% - 90px); }
  .sp-q summary { padding: 16px; gap: 12px; }
  .sp-q-a { padding: 0 16px 18px 16px; }
  /* the three cards slide in from the right by themselves as you scroll down */
  .sp-rel-track { position: relative; }
  .sp-rel-stage { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--header-h); }
  .sp-rel-grid { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; min-width: 0; margin: 28px 0 0; will-change: transform; }
  .sp-rel-grid li { flex: 0 0 82%; min-width: 0; }
  .sp-rel-grid .sp-rel { min-width: 0; }
  .sp-all { flex-direction: column; align-items: flex-start; }
  .sp-end-card:has(.sp-end-bot) { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: 0; }
  .sp-end-bot { grid-column: 1; width: 170px; margin: -80px auto 6px; }
  .sp-end-text { grid-row: 2; }
  .sp-end-card:has(.sp-end-bot) .sp-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-hero::before, .spb, .spb *, .sp-end-glow::before, .sp-plate .ring { animation: none !important; }
  .sp-stat { opacity: 1; transform: none; }
  .sp-layers-track { height: auto; }
  .sp-layers-stage { position: relative; height: auto; }
  .sp-step p { max-height: none; opacity: 1; margin-top: 8px; }
  .sp-step { display: block !important; }
}

/* ---------- website design hero: a website builds itself (blueprint > design > 3D > live) ---------- */
.wbh { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); max-width: 1480px; gap: clamp(20px, 3vw, 50px); }
.wbh h1 { font-size: clamp(2.5rem, 4.6vw, 4.375rem); }
.wbh .sp-lead { max-width: 540px; }
.wbh-alt { margin-top: 18px; }
.wbh-alt a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ice); }
.wbh-alt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.wbh-alt a:hover svg { transform: translateX(4px); }
.wbh .sp-trust { margin-top: 22px; }

/* quick quote: two short steps, it never leaves the hero */
.qq { position: relative; margin-top: 28px; max-width: 580px; padding: 8px; border-radius: 22px;
  background: linear-gradient(128deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%), rgba(8, 22, 54, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 30px 70px -30px rgba(10, 141, 255, .8); }
.qq::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.4px; pointer-events: none; opacity: .8;
  background: conic-gradient(from var(--spin), transparent 0 60%, #2FD4FF 75%, #fff 80%, transparent 90%); animation: ringSpin 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.qq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qq-s1, .qq-s2 { display: flex; gap: 8px; align-items: stretch; }
.qq-s2, .qq-done { display: none; }
.qq[data-step="2"] .qq-s1, .qq[data-step="3"] .qq-s1, .qq[data-step="3"] .qq-s2 { display: none; }
.qq[data-step="2"] .qq-s2 { display: flex; flex-wrap: wrap; animation: qqIn .45s var(--ease); }
.qq[data-step="3"] .qq-done { display: flex; animation: qqIn .45s var(--ease); }
.qq[data-step="3"] .qq-note { display: none; }
@keyframes qqIn { from { opacity: 0; transform: translateX(16px); } }
.qq-f { flex: 1 1 0; min-width: 0; }
.qq-need { flex: 1.15 1 0; }
.qq-f input, .qq-f select { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; font: 500 .9375rem var(--f-body); color: #fff; background: rgba(4, 12, 32, .75);
  box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); outline: none; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.qq-f select { padding-right: 36px; cursor: pointer;
  background: rgba(4, 12, 32, .75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A9DCFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; }
.qq-f select option { color: #000; }
.qq-f input::placeholder { color: #8A9CC2; }
.qq-f input:focus, .qq-f select:focus { box-shadow: inset 0 0 0 1.5px var(--cyan), 0 0 0 4px rgba(47, 212, 255, .15); }
.qq-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF6B8A; }
.qq-go, .qq-send { flex: none; height: 52px; padding: 0 22px; border-radius: 14px; white-space: nowrap; }
.qq-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qq-ask { flex: 1 1 100%; padding: 6px 8px 2px; font-weight: 600; color: #fff; }
.qq-back { flex: 1 1 100%; padding: 4px 8px; text-align: left; font-size: .8125rem; color: var(--muted); }
.qq-back:hover { color: #fff; }
.qq-done { align-items: center; gap: 14px; padding: 12px 12px; }
.qq-done p { color: #DCE6F7; line-height: 1.5; }
.qq-tick { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 22px rgba(47, 212, 255, .7); }
.qq-tick svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qq-note { padding: 10px 10px 4px; font-size: .8125rem; color: #AFC0DE; }
.qq-note::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 8px #3DF0A0; vertical-align: 1px; }
.qq-err:empty { display: none; }
.qq-err { padding: 4px 10px 6px; font-size: .875rem; color: #FF8FA6; }
.qq.is-busy .qq-send { opacity: .6; pointer-events: none; }

/* the stage */
.wbh-stage { --t: 0; position: relative; height: min(76vh, 700px); perspective: 2200px; }
.wbh-3d { --rx: 0deg; --ry: 0deg; position: absolute; left: 0; right: 27%; top: 12%; transform-style: preserve-3d;
  transform: rotateX(calc(8deg + var(--rx))) rotateY(calc(-16deg + var(--ry))); transition: transform 1.4s var(--ease); }
.wbh-stage[data-phase="2"] .wbh-3d, .wbh-stage[data-phase="3"] .wbh-3d { transform: rotateX(calc(14deg + var(--rx))) rotateY(calc(-24deg + var(--ry))) rotateZ(2deg); }
.wbh-win { position: relative; border-radius: 18px; transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(14, 34, 80, .92), rgba(5, 12, 32, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 70px 130px -50px rgba(10, 141, 255, .75), 0 30px 60px -30px rgba(0, 0, 0, .9); transition: background .8s; }
.wbh-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(169, 220, 255, .12); }
.wbh-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169, 220, 255, .3); }
.wbh-url { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 14px; border-radius: 99px; font-size: .75rem; color: var(--muted); background: rgba(169, 220, 255, .07); transition: color .5s; }
.wbh-lock { width: 0; height: 9px; overflow: hidden; border-radius: 2px; background: #3DF0A0; transition: width .4s var(--ease); }
.wbh-live { margin-left: auto; padding: 3px 10px; border-radius: 99px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #04130C; background: #3DF0A0; box-shadow: 0 0 16px rgba(61, 240, 160, .7);
  opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); }
.wbh-page { position: relative; padding: 18px 22px 24px; transform-style: preserve-3d; }
.wbh-grid { position: absolute; inset: 0; pointer-events: none; opacity: 1; transition: opacity .8s;
  background: linear-gradient(rgba(47, 182, 255, .09) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(47, 182, 255, .09) 1px, transparent 1px) 0 0 / 24px 24px; }

/* elements: dashed wireframes in the plan, real design after */
.wb-el { position: relative; border-radius: 10px; outline: 1.5px dashed rgba(123, 227, 255, .55); outline-offset: 3px; transition: outline-color .6s, background .7s var(--ease), box-shadow .7s, transform 1s var(--ease); }
.wb-tag { position: absolute; left: 0; top: -22px; padding: 2px 7px; border-radius: 5px; font: 700 .625rem/1.4 var(--f-body); letter-spacing: .06em; text-decoration: none; color: #04122E; background: #7BE3FF; white-space: nowrap; transition: opacity .4s; }
.wbh-nav { display: flex; align-items: center; gap: 12px; padding: 6px 8px; }
.wbh-nav span { width: 40px; height: 6px; border-radius: 3px; background: rgba(169, 220, 255, .18); }
.wbh-nav span:first-of-type { margin-left: auto; }
.wb-logo { width: 30px; height: 12px; border-radius: 4px; background: rgba(169, 220, 255, .25); transition: background .6s; }
.wb-btn { display: inline-block; min-width: 56px; height: 18px; border-radius: 9px; background: rgba(169, 220, 255, .18); font-style: normal; transition: background .6s, box-shadow .6s; }
.wbh-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: center; margin-top: 30px; transform-style: preserve-3d; }
.wbh-copy { padding: 10px 12px 14px; }
.wb-h { font-family: var(--f-display); font-size: clamp(1rem, 1.7vw, 1.625rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; color: transparent; text-shadow: none;
  background: linear-gradient(90deg, rgba(169, 220, 255, .22), rgba(169, 220, 255, .22)) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; transition: color .6s; }
.wb-h span { transition: inherit; }
.wb-p { width: 80%; height: 7px; margin-top: 12px; border-radius: 4px; background: rgba(169, 220, 255, .16); }
.wb-cta { margin-top: 14px; padding: 0 12px; height: 26px; min-width: 0; font: 700 .6875rem/26px var(--f-body); color: transparent; border-radius: 13px; }
.wb-sel u { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #2FB6FF; text-decoration: none; transition: opacity .4s; }
.wb-h1 { left: -7px; top: -7px; } .wb-h2 { right: -7px; top: -7px; } .wb-h3 { left: -7px; bottom: -7px; } .wb-h4 { right: -7px; bottom: -7px; }
.wb-sel { outline: 1.5px solid #2FB6FF; }
.wbh-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; transform-style: preserve-3d; }
.wb-orb { width: 58%; aspect-ratio: 1; border-radius: 50%; background: rgba(169, 220, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .25); transition: all 1s var(--ease); }
.wb-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(169, 220, 255, 0); transform: rotateX(72deg); transition: border-color .8s; }
.wbh-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; transform-style: preserve-3d; }
.wbh-cards i { height: 64px; }
.wbh-cursor { position: absolute; left: 30%; top: 40%; z-index: 4; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; transform: translateZ(40px); animation: wbCursor 9.6s var(--ease) infinite; }
.wbh-cursor svg { width: 18px; height: 18px; fill: #2FB6FF; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.wbh-cursor b { margin-top: 14px; padding: 3px 8px; border-radius: 6px; font-size: .6875rem; color: #fff; background: #2B5BFF; white-space: nowrap; }
@keyframes wbCursor {
  0% { translate: 0 0; } 12% { translate: 120px -60px; } 22% { translate: 40px 40px; } 34% { translate: 260px 20px; }
  48% { translate: 300px -40px; } 62% { translate: 80px 120px; } 78% { translate: 200px 160px; } 100% { translate: 0 0; } }
.wbh-note { position: absolute; z-index: 5; display: grid; gap: 2px; padding: 12px 16px 12px 22px; border-radius: 14px; font-size: .8125rem; color: #C9D6F0; white-space: nowrap;
  background: linear-gradient(128deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%), rgba(10, 26, 62, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 20px 40px -18px rgba(0, 0, 0, .9);
  opacity: 0; translate: 0 18px; transition: opacity .5s var(--ease), translate .6s var(--ease); }
.wbh-note b { color: #fff; font-size: .875rem; }
.wbh-note::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; }
.wbh-note.n1 { left: 18%; top: 3%; }
.wbh-note.n2 { left: -3%; top: 60%; }
.wbh-note.n3 { left: 30%; bottom: 17%; }
.wbh-bot { position: absolute; right: -1%; bottom: 6%; height: 94%; aspect-ratio: 853 / 1497; z-index: 3; pointer-events: none; animation: wbBot 7s ease-in-out infinite; }
.wbh-bot img { width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 50px rgba(10, 141, 255, .3)); }
.wbh-palm { position: absolute; left: 10%; top: 12.4%; width: 0; height: 0; }
.wbh-palm::before, .wbh-palm::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; }
.wbh-palm::before { width: 70px; height: 70px; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(47, 212, 255, .7) 30%, rgba(43, 91, 255, .25) 60%, transparent); mix-blend-mode: screen; animation: wbPalm 2.4s ease-in-out infinite; }
.wbh-palm::after { width: 26px; height: 26px; border: 1.5px solid rgba(123, 227, 255, .9); animation: plRing 2.4s ease-out infinite; }
@keyframes wbPalm { 50% { scale: 1.35; opacity: .75; } }
.wbh-stage[data-phase="1"] .wbh-palm::before, .wbh-stage[data-phase="2"] .wbh-palm::before { scale: 1.6; }
@keyframes wbBot { 50% { translate: 0 -10px; } }
.wbh-rail { position: absolute; left: 4%; right: 30%; bottom: 0; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.wbh-rail::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: rgba(169, 220, 255, .14); }
.wbh-rail::after { content: ""; position: absolute; left: 6px; top: 6px; height: 2px; width: calc((100% - 12px) * var(--t)); background: var(--grad); box-shadow: 0 0 10px rgba(47, 212, 255, .8); transition: width .9s var(--ease); }
.wbh-rail li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; transition: color .4s; }
.wbh-rail li:first-child { justify-items: start; } .wbh-rail li:last-child { justify-items: end; }
.wbh-rail li i { width: 14px; height: 14px; border-radius: 50%; background: var(--midnight); box-shadow: inset 0 0 0 2px rgba(169, 220, 255, .35); transition: box-shadow .4s; }
.wbh-rail li.is-on { color: #fff; }
.wbh-rail li.is-on i { box-shadow: inset 0 0 0 4px var(--cyan), 0 0 14px rgba(47, 212, 255, .9); }

/* phase 1: design arrives */
.wbh-stage:not([data-phase="0"]) .wbh-grid { opacity: .25; }
.wbh-stage:not([data-phase="0"]) .wb-el { outline-color: transparent; }
.wbh-stage:not([data-phase="0"]) .wb-tag, .wbh-stage:not([data-phase="0"]) .wb-sel u { opacity: 0; }
.wbh-stage:not([data-phase="0"]) .wb-logo { background: var(--grad); }
.wbh-stage:not([data-phase="0"]) .wb-btn { background: var(--grad); box-shadow: 0 6px 16px -4px rgba(10, 141, 255, .9); color: #fff; }
.wbh-stage:not([data-phase="0"]) .wb-h { color: #fff; background: none; }
.wbh-stage:not([data-phase="0"]) .wb-h span { color: transparent; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }
.wbh-stage:not([data-phase="0"]) .wbh-cards i { background: linear-gradient(160deg, rgba(169, 220, 255, .16), rgba(169, 220, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .12); }
.wbh-stage:not([data-phase="0"]) .wb-orb { background: radial-gradient(circle at 32% 28%, #fff 0%, #A9DCFF 10%, #2FB6FF 32%, #2B5BFF 62%, #071029 100%); box-shadow: 0 0 40px rgba(47, 212, 255, .55), inset -10px -14px 30px rgba(4, 10, 26, .7); }
/* phase 2: it becomes 3D */
.wbh-stage[data-phase="2"] .wb-orb, .wbh-stage[data-phase="3"] .wb-orb { transform: translateZ(110px) scale(1.12); animation: wbOrb 4s ease-in-out infinite; }
.wbh-stage[data-phase="2"] .wb-ring, .wbh-stage[data-phase="3"] .wb-ring { border-color: rgba(123, 227, 255, .6); transform: translateZ(80px) rotateX(72deg); animation: wbRing 6s linear infinite; }
.wbh-stage[data-phase="2"] .wbh-cards i, .wbh-stage[data-phase="3"] .wbh-cards i { transform: translateZ(50px); }
.wbh-stage[data-phase="2"] .wbh-cards i:nth-child(2), .wbh-stage[data-phase="3"] .wbh-cards i:nth-child(2) { transform: translateZ(80px); }
.wbh-stage[data-phase="2"] .wbh-cards i:nth-child(3), .wbh-stage[data-phase="3"] .wbh-cards i:nth-child(3) { transform: translateZ(110px); }
.wbh-stage[data-phase="2"] .wbh-copy, .wbh-stage[data-phase="3"] .wbh-copy { transform: translateZ(40px); }
@keyframes wbOrb { 50% { translate: 0 -10px; } }
@keyframes wbRing { to { rotate: z 360deg; } }
/* phase 3: live, and the enquiries arrive */
.wbh-stage[data-phase="3"] .wbh-live { opacity: 1; transform: scale(1); }
.wbh-stage[data-phase="3"] .wbh-lock { width: 7px; }
.wbh-stage[data-phase="3"] .wbh-url { color: #fff; }
.wbh-stage[data-phase="3"] .wbh-note { opacity: 1; translate: 0 0; }
.wbh-stage[data-phase="3"] .wbh-note.n2 { transition-delay: .7s; }
.wbh-stage[data-phase="3"] .wbh-note.n3 { transition-delay: 1.3s; }
.wbh-stage[data-phase="3"] .wbh-cursor { opacity: 0; }

/* the offer that follows you down the page */
.sp-float { position: fixed; right: 76px; bottom: 24px; z-index: 55; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: #DCE6F7;
  background: linear-gradient(128deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), rgba(6, 16, 40, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 24px 50px -20px rgba(10, 141, 255, .8);
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease), visibility 0s .5s; }
.sp-float.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sp-float .btn { height: 42px; padding: 0 18px; }
@media (max-width: 720px) { body:has(.sp-float.is-on) .gl-hint { bottom: 86px; } }

@media (max-width: 1000px) {
  .wbh { grid-template-columns: minmax(0, 1fr); }
  .wbh-stage { order: 2; height: auto; aspect-ratio: 1 / .8; width: 100%; }
  .wbh-3d { right: 26%; }
}
@media (max-width: 720px) {
  .wbh-stage { aspect-ratio: auto; height: 470px; margin-top: 10px; }
  .wbh-3d { right: 22%; left: -2%; top: 10%; }
  .wbh-note.n2 { display: none; }
  .wbh-note.n1 { left: 2%; top: 0; } .wbh-note.n3 { left: 4%; bottom: 14%; }
  .wbh-bot { height: 74%; right: -8%; bottom: 14%; }
  .wbh-note.n2 { display: none; }
  .wbh-note.n1 { right: 0; }
  .wbh-rail { right: 4%; font-size: .75rem; }
  .qq-s1 { flex-wrap: wrap; }
  .qq-f, .qq-need { flex: 1 1 100%; }
  .qq-go, .qq-send { flex: 1 1 100%; }
  .sp-float { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .qq::before, .wbh-cursor, .wbh-bot, .wbh-palm::before, .wbh-palm::after, .wb-orb, .wb-ring { animation: none !important; }
}

/* a short call to action between sections */
.sp-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 30px; flex-wrap: wrap; max-width: 1180px; margin: clamp(40px, 5vw, 70px) auto 0; padding: 22px 22px 22px 30px; border-radius: 24px;
  background: radial-gradient(80% 140% at 0% 50%, rgba(10, 141, 255, .25), transparent 60%), linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(8, 20, 48, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(47, 212, 255, .22), 0 30px 70px -40px rgba(10, 141, 255, .9); }
.sp-cta p { font-family: var(--f-display); font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -.025em; color: #fff; }
.sp-cta p span { display: block; margin-top: 4px; font-family: var(--f-body); font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: #C9D6F0; }
.sp-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-cta-wrap { padding: 0 var(--gutter); }
@media (max-width: 720px) { .sp-cta { padding: 20px; } .sp-cta-actions, .sp-cta-actions .btn { width: 100%; } }

/* ---------- why it matters: the three-second test (pinned) ---------- */
.tst-track { position: relative; height: 260svh; }
.tst-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 96px; overflow: hidden; }
.tst-stage::before { content: ""; position: absolute; left: 50%; top: 60%; width: min(1200px, 140vw); height: 70%; translate: -50% -50%; z-index: -1; border-radius: 50%; filter: blur(90px);
  background: radial-gradient(closest-side, rgba(43, 91, 255, .2), transparent); }
.tst .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.tst-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 90px); max-width: 1180px; width: 100%; margin: 0 auto; }
.tst-clock { display: flex; align-items: baseline; font-family: var(--f-display); font-weight: 600; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.tst-sec { font-size: clamp(4.5rem, 9vw, 8rem); background: linear-gradient(100deg, #fff, #A9DCFF 50%, #2FD4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tst-clock small { margin-left: 6px; font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--cyan); }
.tst.is-late .tst-sec { background: linear-gradient(100deg, #fff, #FFB4C4 55%, #FF6B8A); -webkit-background-clip: text; background-clip: text; }
.tst-cap { margin-top: 6px; font-size: .875rem; color: var(--muted); letter-spacing: .02em; }
.tst-facts { position: relative; margin: 26px 0 0; padding: 0; list-style: none; min-height: 150px; }
.tst-fact { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center;
  opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s; pointer-events: none; }
.tst-fact.is-on { opacity: 1; transform: none; filter: none; }
.tst-num { grid-row: span 2; display: flex; align-items: baseline; font-family: var(--f-display); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.tst-num b { font-size: 3.25rem; color: #fff; }
.tst-num small { font-size: 1.375rem; color: var(--cyan); }
.tst-text { font-size: 1.125rem; line-height: 1.5; color: #DCE6F7; }
.tst-src { margin-top: 6px; font-size: .75rem; color: var(--muted); }
.tst-crowd { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(8px, 1vw, 12px); max-width: 360px; margin-left: auto; }
.tst-crowd i { aspect-ratio: 1; border-radius: 50%; background: rgba(169, 220, 255, .14); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2);
  transition: background .5s, box-shadow .5s, transform .9s var(--ease), opacity .9s var(--ease); }
.tst.s1 .tst-crowd i { background: rgba(230, 242, 255, .85); box-shadow: 0 0 10px rgba(169, 220, 255, .55); }
.tst.x-judge .tst-crowd i.j { background: var(--cyan); box-shadow: 0 0 12px rgba(47, 212, 255, .9); }
.tst.x-leave1 .tst-crowd i.l1, .tst.x-leave .tst-crowd i.l { opacity: .08; transform: translate(var(--dx, 30px), 40px) scale(.4); background: #FF6B8A; box-shadow: none; }
.tst-crowd i:nth-child(3n) { --dx: -40px; } .tst-crowd i:nth-child(5n) { --dx: 50px; } .tst-crowd i:nth-child(7n) { --dx: -10px; }
.tst-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; max-width: 360px; margin: 18px 0 0 auto; font-size: .8125rem; color: var(--muted); }
.tst-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tst-legend i { width: 9px; height: 9px; border-radius: 50%; background: rgba(230, 242, 255, .85); }
.tst-legend i.j { background: var(--cyan); } .tst-legend i.l { background: #FF6B8A; opacity: .6; }
.tst-ruler { --p: 0; position: relative; max-width: 1180px; width: 100%; height: 56px; margin: 0 auto; }
.tst-ruler::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(169, 220, 255, .35) 0 1px, transparent 1px calc(100% / 30)); -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.tst-ruler::after { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: rgba(169, 220, 255, .18); }
.tst-fill { position: absolute; left: 0; top: 18px; height: 2px; width: calc(var(--p) * 100%); background: var(--grad); box-shadow: 0 0 12px rgba(47, 212, 255, .9); z-index: 1; }
.tst.is-late .tst-fill { background: linear-gradient(90deg, #2B5BFF, #22C3FF 70%, #FF6B8A); }
.tst-head { position: absolute; top: 4px; left: calc(var(--p) * 100%); width: 2px; height: 30px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px #2FD4FF; z-index: 2; }
.tst-head::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(47, 212, 255, .3), 0 0 16px #2FD4FF; }
.tst-scale { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.tst-scale b { font-weight: 600; }
.tst-mark { position: absolute; top: 0; translate: -50% 0; display: grid; justify-items: center; font-size: .6875rem; color: var(--muted); }

.tst-mark i { display: none; }
.tst-mark b { position: absolute; top: -20px; padding: 2px 7px; border-radius: 6px; font-weight: 700; color: #04122E; background: rgba(169, 220, 255, .3); transition: background .4s; white-space: nowrap; }
.tst-mark.is-on b { background: #7BE3FF; box-shadow: 0 0 12px rgba(47, 212, 255, .7); }
.tst-mark.m-last b { translate: -40% 0; }
.tst-mark.m-first b { translate: 30% 0; }

/* ---------- what is inside: exploded view with labels ---------- */
.xv { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; height: min(66vh, 600px); }
.xv .sp-stack { position: absolute; left: 50%; top: 50%; width: min(46%, 540px); height: 100%; translate: -50% -50%; }
.xv-big { position: absolute; right: 0; top: 0; margin: 0; z-index: -1; font-family: var(--f-display); font-size: clamp(4.5rem, 7vw, 6.5rem); font-weight: 700; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(169, 220, 255, .12); white-space: nowrap; }
.xv-big span { color: transparent; -webkit-text-stroke: 1.5px rgba(47, 212, 255, .7); }
.xv-big { -webkit-text-stroke-color: rgba(169, 220, 255, .25); }
.xv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xv-lines path { fill: none; stroke: rgba(169, 220, 255, .3); stroke-width: 1; stroke-dasharray: 3 4; transition: stroke .4s; }
.xv-lines path.is-on { stroke: #2FD4FF; stroke-dasharray: none; stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(47, 212, 255, .9)); }
.xv-lines circle { fill: #7BE3FF; }
.xv-lines circle.is-on { fill: #fff; filter: drop-shadow(0 0 6px #2FD4FF); }
.xcall { position: absolute; width: min(25%, 300px); translate: 0 -50%; cursor: pointer; transition: opacity .4s var(--ease); opacity: .5; }
.xcall[data-side="l"] { left: 0; text-align: right; }
.xcall[data-side="r"] { right: 0; }
.xcall-dot { display: none; }
.xcall-n { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xcall h3 { margin-top: 4px; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); letter-spacing: -.02em; color: #C9D6F0; transition: color .3s; }
.xcall-d { display: grid; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.xcall.is-on { opacity: 1; }
.xcall.is-on .xcall-n { color: var(--cyan); }
.xcall.is-on h3 { color: #fff; }
.xcall.is-on .xcall-d { max-height: 8em; opacity: 1; margin-top: 8px; }
.xcall.is-done { opacity: .8; }
.xcall.is-done .xcall-n::after { content: "  ✓"; color: #3DF0A0; }

/* ---------- included: moving icons and a light that follows the mouse ---------- */
.sp-get-item { --x: -200px; --y: -200px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .7s var(--ease); }
.sp-get-item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(47, 212, 255, .9), rgba(43, 91, 255, .25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sp-get-item > * { position: relative; z-index: 1; }
.sp-get-grid .sp-get-item::after { background: radial-gradient(closest-side, rgba(47, 212, 255, .16), transparent); right: auto; bottom: auto; left: var(--x); top: var(--y); width: 280px; height: 280px; translate: -50% -50%; transform: none; z-index: 0; }
.sp-get-grid:not(.is-in) .sp-get-item { opacity: 0; transform: translateY(30px); }
.sp-get-grid.is-in .sp-get-item:nth-child(2) { transition-delay: 0s, 0s, .08s; } .sp-get-grid.is-in .sp-get-item:nth-child(3) { transition-delay: 0s, 0s, .16s; }
.sp-get-grid.is-in .sp-get-item:nth-child(4) { transition-delay: 0s, 0s, .24s; } .sp-get-grid.is-in .sp-get-item:nth-child(5) { transition-delay: 0s, 0s, .32s; }
.sp-get-grid.is-in .sp-get-item:nth-child(6) { transition-delay: 0s, 0s, .4s; }
.sp-ico svg * { transform-box: fill-box; transform-origin: center; }
.sp-ico .a-scroll { animation: icScroll 3s ease-in-out infinite; }
.sp-ico .a-flap { animation: icFlap 3s ease-in-out infinite; transform-origin: top; }
.sp-ico .a-dot { fill: #3DF0A0; stroke: none; animation: icPing 3s ease-in-out infinite; }
.sp-ico .a-shackle { animation: icLock 3s var(--ease) infinite; }
.sp-ico .a-scan { animation: icScan 4s ease-in-out infinite; }
.sp-ico .a-turn { transform-origin: 8px 12px; transform-box: view-box; animation: icTurn 3.4s var(--ease) infinite; }
.sp-ico .a-spin { animation: icSpin 8s linear infinite; }
@keyframes icScroll { 0%, 20% { translate: 0 0; } 50%, 70% { translate: 0 -3px; } 100% { translate: 0 0; } }
@keyframes icFlap { 0%, 30%, 100% { scale: 1 1; } 50%, 70% { scale: 1 -1; translate: 0 -1px; } }
@keyframes icPing { 0%, 40% { scale: 0; } 55% { scale: 1.2; } 65%, 100% { scale: 1; } }
@keyframes icLock { 0%, 25% { translate: 0 -2.5px; } 45%, 85% { translate: 0 0; } 100% { translate: 0 -2.5px; } }
@keyframes icScan { 0%, 100% { translate: -2px -1px; } 50% { translate: 2px 1px; } }
@keyframes icTurn { 0%, 30% { rotate: 0deg; } 55%, 80% { rotate: 90deg; } 100% { rotate: 0deg; } }
@keyframes icSpin { to { rotate: 360deg; } }
.sp-get:not(.is-live) .sp-ico * { animation-play-state: paused; }

/* ---------- timeline: steps tick off when the light passes ---------- */
.sp-tl-step { opacity: 1; }
.sp-tl-card { position: relative; margin-top: 4px; padding: 18px 16px 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .08); opacity: .5;
  transition: opacity .5s, background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.sp-tl-step.is-lit .sp-tl-card { opacity: 1; transform: translateY(-6px);
  background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(61, 240, 160, .25), 0 30px 60px -30px rgba(10, 141, 255, .7); }
.sp-tl-dot { display: grid; place-items: center; }
.sp-tl-dot svg { width: 10px; height: 10px; fill: none; stroke: #04130C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.3); transition: opacity .3s, transform .5s var(--ease); }
.sp-tl-step.is-lit .sp-tl-dot { background: #3DF0A0; box-shadow: 0 0 0 5px rgba(61, 240, 160, .2), 0 0 18px rgba(61, 240, 160, .8); width: 22px; height: 22px; margin-left: -11px; top: -1px; }
.sp-tl-step.is-lit .sp-tl-dot svg { opacity: 1; transform: none; }
.sp-tl-step.is-lit .sp-tl-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3DF0A0; animation: tlBurst .9s ease-out forwards; }
@keyframes tlBurst { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.sp-tl-done, .sp-tl-next { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sp-tl-done { color: #04130C; background: #3DF0A0; box-shadow: 0 0 14px rgba(61, 240, 160, .6); opacity: 0; transform: scale(.5); transition: opacity .3s .15s, transform .5s var(--ease) .15s; }
.sp-tl-done svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sp-tl-step.is-lit .sp-tl-done { opacity: 1; transform: none; }
.sp-tl-next { color: var(--ice); background: rgba(10, 26, 62, .9); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .4); opacity: 0; transition: opacity .3s; }
.sp-tl-step.is-next .sp-tl-next { opacity: 1; animation: tlNext 1.6s ease-in-out infinite; }
.sp-tl-step.is-next .sp-tl-card { opacity: .85; }
@keyframes tlNext { 50% { box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .9), 0 0 14px rgba(47, 212, 255, .5); } }

/* ---------- questions: a small browser, each question is a page ---------- */
.sp-faqb { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.fb { max-width: 1180px; margin: clamp(32px, 4vw, 52px) auto 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(14, 34, 80, .7), rgba(5, 12, 32, .85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 60px 120px -60px rgba(10, 141, 255, .8); }
.fb-bar { position: relative; display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(169, 220, 255, .12); background: rgba(4, 12, 32, .5); }
.fb-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(169, 220, 255, .28); }
.fb-bar > i:nth-child(1) { background: #FF6B8A; opacity: .7; } .fb-bar > i:nth-child(2) { background: #FFC56B; opacity: .7; } .fb-bar > i:nth-child(3) { background: #3DF0A0; opacity: .7; }
.fb-url { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 0 auto; padding: 7px 16px; border-radius: 99px; font-size: .8125rem; color: var(--muted); background: rgba(169, 220, 255, .07); overflow: hidden; white-space: nowrap; }
.fb-lock { flex: none; width: 8px; height: 10px; border-radius: 2px; background: #3DF0A0; }
.fb-slug { color: #fff; }
.fb-load { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--grad); box-shadow: 0 0 10px #2FD4FF; transform-origin: left; transform: scaleX(0); opacity: 0; }
.fb.is-loading .fb-load { animation: fbLoad .55s var(--ease) forwards; }
@keyframes fbLoad { 0% { transform: scaleX(0); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.fb-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); min-height: 440px; }
.fb-side { display: grid; align-content: start; gap: 4px; padding: 16px; border-right: 1px solid rgba(169, 220, 255, .1); }
.fb-tab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-align: left; font-size: .9375rem; font-weight: 500; color: #AFC0DE; transition: background .25s, color .25s; }
.fb-tab:hover { background: rgba(169, 220, 255, .06); color: #fff; }
.fb-tab[aria-selected="true"] { color: #fff; background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%), rgba(10, 141, 255, .18); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
.fb-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fb-ico { flex: none; position: relative; width: 14px; height: 17px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .6; }
.fb-ico::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 6px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) 0 4px / 70% 1.5px no-repeat; }
.fb-tab[aria-selected="true"] .fb-ico { color: var(--cyan); opacity: 1; }
.fb-view { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.5vw, 50px); }
.fb-page { flex: 1; outline: none; }
.fb-page:not([hidden]) { animation: fbIn .5s var(--ease); }
@keyframes fbIn { from { opacity: 0; transform: translateY(10px); } }
.fb-crumb { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.fb-page h3 { margin-top: 12px; font-size: clamp(1.625rem, 2.6vw, 2.375rem); letter-spacing: -.035em; line-height: 1.1; }
.fb-a { margin-top: 18px; max-width: 560px; font-size: 1.125rem; line-height: 1.7; color: #DCE6F7; }
.fb-skel { position: absolute; inset: clamp(26px, 3.5vw, 50px); display: none; gap: 14px; align-content: start; }
.fb-skel i { height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(169, 220, 255, .08), rgba(169, 220, 255, .2), rgba(169, 220, 255, .08)) 0 0 / 200% 100%; animation: fbShim 1s linear infinite; }
.fb-skel i:nth-child(1) { width: 20%; } .fb-skel i:nth-child(2) { width: 70%; height: 30px; } .fb-skel i:nth-child(3) { width: 90%; } .fb-skel i:nth-child(4) { width: 60%; }
@keyframes fbShim { to { background-position: -200% 0; } }
.fb.is-loading .fb-skel { display: grid; }
.fb.is-loading .fb-page { visibility: hidden; }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(169, 220, 255, .1); }
.fb-foot p { color: #AFC0DE; }

@media (max-width: 900px) {
  .tst-track { height: 240svh; }
  .tst-stage { justify-content: flex-start; gap: 12px; }
  .tst .sec-head h2 { font-size: 1.75rem; }
  .tst .sec-head > p:not(.kicker) { display: none; }
  .tst-board { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tst-right { order: -1; }
  .tst-crowd { max-width: 250px; margin: 0 auto; gap: 6px; }
  .tst-legend { justify-content: center; margin: 10px auto 0; }
  .tst-sec { font-size: 4rem; }
  .tst-left { text-align: left; }
  .tst-facts { min-height: 120px; margin-top: 12px; }
  .tst-num b { font-size: 2.25rem; }
  .tst-text { font-size: 1rem; }
  .xv { height: auto; display: flex; flex-direction: column; }
  .xv .sp-stack { position: relative; left: auto; top: auto; translate: none; width: 100%; height: 36svh; }
  .xv-lines, .xv-big { display: none; }
  .xv-calls { position: relative; min-height: 150px; }
  .xcall { position: absolute; inset: 0 0 auto 0 !important; width: auto; translate: none; text-align: left !important; opacity: 0; pointer-events: none; padding: 16px 18px; border-radius: 18px;
    background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(47, 212, 255, .25); }
  .xcall.is-on { opacity: 1; pointer-events: auto; }
  .xcall.is-done:not(.is-on) { opacity: 0; }
  .fb-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fb-side { display: flex; overflow-x: auto; gap: 8px; padding: 12px; border-right: 0; border-bottom: 1px solid rgba(169, 220, 255, .1); scrollbar-width: none; }
  .fb-side::-webkit-scrollbar { display: none; }
  .fb-tab { flex: 0 0 auto; max-width: 240px; white-space: normal; font-size: .875rem; padding: 10px 12px; }
  .fb-url { font-size: .75rem; }
}
@media (max-width: 1000px) {
  .sp-tl-card { margin-top: 0; padding: 0 0 26px; box-shadow: none; }
  .sp-tl-step.is-lit .sp-tl-card { padding: 16px 16px 26px; }
  .sp-tl-step.is-lit .sp-tl-dot { margin-left: -3px; }
  .sp-tl-done, .sp-tl-next { left: 16px; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-track { height: auto; } .tst-stage { position: relative; height: auto; }
  .tst-fact { position: relative; opacity: 1; transform: none; filter: none; margin-bottom: 16px; }
  .sp-ico *, .fb-skel i, .sp-tl-step.is-next .sp-tl-next { animation: none !important; }
  .sp-get-grid:not(.is-in) .sp-get-item { opacity: 1; transform: none; }
}

/* hero promises: full words on computers, short words on phones */
.sp-trust .t-s { display: none; }
@media (max-width: 720px) {
  .wbh .qq { display: none; }                     /* phones: a light first screen, the quote form comes later */
  .sp-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
  .sp-trust li { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 14px; text-align: center; font-size: .8125rem; line-height: 1.3; color: #DCE6F7;
    background: rgba(8, 20, 48, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
  .sp-trust svg { width: 22px; height: 22px; padding: 4px; }
  .sp-trust .t-l { display: none; } .sp-trust .t-s { display: block; }
}

/* final call to action: pick a plan right here, then go to checkout */
.sp-pick { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; max-width: 480px; }
.sp-pick .qq-f { flex: 1 1 220px; }
.sp-pick .qq-f select { height: 54px; border-radius: 999px; padding-left: 22px; font-size: 1rem; }
.sp-pick select:invalid { color: #AFC0DE; }
.sp-pick .btn { flex: none; }
.sp-pick .btn[aria-disabled="true"] { opacity: .55; }
.sp-pick.is-wrong select { box-shadow: inset 0 0 0 1.5px #FF6B8A; animation: pickShake .4s; }
@keyframes pickShake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@media (max-width: 720px) { .sp-pick { max-width: none; } .sp-pick .btn { flex: 1 1 100%; } }

/* how we compare, under the plans */
.sp-vs { margin-top: 34px; padding: clamp(26px, 3vw, 40px) clamp(16px, 3vw, 40px) clamp(20px, 2.5vw, 30px); border-radius: 26px;
  background: linear-gradient(128deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%), rgba(8, 20, 48, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(169, 220, 255, .1); }
.sp-vs-title { text-align: center; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.sp-vs-sub { margin-top: 8px; text-align: center; color: #AFC0DE; font-size: .9375rem; }
.sp-vs .vs-wrap { margin-top: 26px; max-width: none; }

/* "how we compare": a panel that phones can fold away */
.sp-vs-sum .sp-vs-title { font-family: var(--f-display); font-weight: 600; color: #fff; }
.sp-vs-sum { display: grid; justify-items: center; gap: 8px; list-style: none; cursor: default; }
.sp-vs-sum::-webkit-details-marker { display: none; }
.sp-vs-sum .sp-vs-sub { margin: 0; }
.sp-vs-x { display: none; }
@media (max-width: 900px) {
  .sp-vs { padding: 0; }
  .sp-vs-sum { position: relative; justify-items: start; text-align: left; gap: 4px; padding: 18px 60px 18px 18px; cursor: pointer; }
  .sp-vs-sum .sp-vs-title { text-align: left; font-size: 1.25rem; }
  .sp-vs-sum .sp-vs-sub { text-align: left; font-size: .8125rem; }
  .sp-vs-x { display: block; position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .3); transition: transform .4s var(--ease), background .3s; }
  .sp-vs-x::before, .sp-vs-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: #fff; }
  .sp-vs-x::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
  .sp-vs[open] .sp-vs-x { background: var(--grad); box-shadow: none; transform: rotate(180deg); }
  .sp-vs[open] .sp-vs-x::after { transform: rotate(0); }
  .sp-vs .vs-wrap { margin: 4px 14px 16px; }
  .sp-vs[open] .vs-wrap { animation: fbIn .45s var(--ease); }
}
@media (min-width: 901px) { .sp-vs-sum { pointer-events: none; } .sp-vs .vs-wrap { margin-top: 26px; } }

/* phones: "compare all features" without sideways scrolling. The plan names stay pinned on top,
   each feature is one row: its name, then the three plans side by side */
@media (max-width: 720px) {
  .cmp-scroll { overflow: visible; padding: 0 10px 14px; }
  .cmp table, .cmp thead, .cmp tbody { display: block; min-width: 0; width: 100%; }
  .cmp thead { position: sticky; top: calc(var(--header-h, 64px) - 2px); z-index: 2; margin: 0 -10px; padding: 0 10px;
    background: rgba(6, 15, 38, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(169, 220, 255, .14); }
  .cmp tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .cmp thead td { display: none; }
  .cmp thead th { padding: 12px 4px; font-size: .875rem; line-height: 1.2; }
  .cmp tbody tr { padding: 12px 0 10px; border-top: 1px solid rgba(169, 220, 255, .1); }
  .cmp tbody tr:first-child { border-top: 0; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; padding: 0 4px 8px; border: 0; text-align: center; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
  .cmp tbody td { padding: 2px 4px; border: 0; font-size: .875rem; line-height: 1.35; }
  .cmp tbody td:nth-child(3) { color: #fff; }
}

/* ---------- app hero: a phone runs a booking flow (book > pay > notify > come back) ---------- */
.aph .aph-3d { left: 4%; right: 34%; top: 4%; bottom: 12%; display: grid; place-items: center; }
.aph-phone { position: relative; width: min(250px, 24vw); aspect-ratio: 9 / 19; border-radius: 40px; padding: 10px; transform-style: preserve-3d;
  background: linear-gradient(150deg, #2a3550, #0b1226 40%, #1a2440); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), inset 0 0 0 5px #05091a, 0 60px 100px -40px rgba(10, 141, 255, .8), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.aph-front { z-index: 2; transform: translateZ(60px); }
.aph-back { position: absolute; width: min(210px, 20vw); transform: translate(-62%, 6%) translateZ(-60px) rotate(-8deg); opacity: .55; filter: blur(1px) saturate(.7); }
.aph-notch { position: absolute; left: 50%; top: 16px; z-index: 3; width: 74px; height: 20px; margin-left: -37px; border-radius: 12px; background: #000; }
.aph-screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, rgba(10, 141, 255, .3), transparent 60%), linear-gradient(180deg, #0c1a3c, #060d22); }
.aph-top { display: flex; justify-content: space-between; padding: 14px 20px 0 22px; font-size: .625rem; font-weight: 700; color: #fff; }
.aph-bat { width: 18px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px #fff; background: linear-gradient(90deg, #fff 70%, transparent 70%) 2px 2px / 12px 4px no-repeat; }
.aph-s { position: absolute; inset: 44px 16px 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.aph-stage[data-phase="0"] .aph-s[data-s="0"], .aph-stage[data-phase="1"] .aph-s[data-s="1"], .aph-stage[data-phase="2"] .aph-s[data-s="2"], .aph-stage[data-phase="3"] .aph-s[data-s="3"] { opacity: 1; transform: none; }
.aph-back .aph-s.on { opacity: 1; transform: none; inset: 30px 14px; }
.aph-back .aph-s i { height: 36px; border-radius: 10px; background: rgba(169, 220, 255, .12); }
.aph-logo { display: block; width: 26px; height: 26px; border-radius: 8px; background: var(--grad); box-shadow: 0 4px 12px -2px rgba(10, 141, 255, .8); }
.aph-h { font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.aph-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.aph-cal i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; font-size: .5625rem; font-style: normal; color: #AFC0DE; background: rgba(169, 220, 255, .07); }
.aph-cal i.sel, .aph-times i.sel { color: #fff; background: var(--grad); box-shadow: 0 0 10px rgba(47, 212, 255, .6); }
.aph-times { display: flex; gap: 5px; }
.aph-times i { flex: 1; padding: 6px 0; border-radius: 8px; text-align: center; font-size: .5625rem; font-style: normal; color: #C9D6F0; background: rgba(169, 220, 255, .08); }
.aph-btn { margin-top: auto; padding: 10px; border-radius: 12px; text-align: center; font-size: .6875rem; font-weight: 700; font-style: normal; color: #fff; background: var(--grad); box-shadow: 0 8px 18px -6px rgba(10, 141, 255, .9); }
.aph-card { position: relative; height: 84px; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; font-size: .625rem; color: #fff; letter-spacing: .1em;
  background: linear-gradient(135deg, #2B5BFF, #0A8DFF 55%, #22C3FF); box-shadow: 0 10px 24px -10px rgba(10, 141, 255, .9); }
.aph-card b { width: 22px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.aph-row { display: flex; justify-content: space-between; gap: 8px; font-size: .625rem; color: #AFC0DE; }
.aph-row b { color: #fff; }
.aph-ok { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 30px rgba(61, 240, 160, .8); transform: scale(0); }
.aph-ok svg { width: 30px; height: 30px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aph-stage[data-phase="1"] .aph-ok { animation: aphOk 2.4s var(--ease) forwards; }
@keyframes aphOk { 0%, 45% { transform: scale(0); } 60% { transform: scale(1.15); } 70%, 100% { transform: scale(1); } }
.aph-ticket { position: relative; padding: 14px; border-radius: 14px; display: grid; gap: 2px; color: #fff; font-size: .625rem; background: rgba(169, 220, 255, .08); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .3); }
.aph-ticket b { font-family: var(--f-display); font-size: .9375rem; }
.aph-qr { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, transparent 0 3px, rgba(4, 12, 32, .9) 3px 6px); }
.aph-ring { position: relative; width: 120px; margin: 4px auto; }
.aph-ring svg { transform: rotate(-90deg); }
.aph-ring circle { fill: none; stroke: rgba(169, 220, 255, .14); stroke-width: 8; }
.aph-ring .on { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(47, 212, 255, .8)); transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.aph-stage[data-phase="3"] .aph-ring .on { stroke-dashoffset: 20; }
.aph-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.75rem; color: #fff; }
.aph-ring small { font-size: .875rem; color: var(--muted); }
.aph-ring b { grid-auto-flow: column; align-content: center; justify-content: center; align-items: baseline; }
.aph-push { position: absolute; left: -18px; right: -18px; top: 30px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; font-size: .625rem; color: #C9D6F0;
  background: rgba(20, 32, 64, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25), 0 20px 40px -12px rgba(0, 0, 0, .8);
  transform: translateY(-30px) translateZ(40px) scale(.9); opacity: 0; transition: opacity .4s, transform .6s var(--ease); }
.aph-push strong { display: block; font-size: .75rem; color: #fff; }
.aph-stage[data-phase="2"] .aph-push { opacity: 1; transform: translateY(0) translateZ(40px); }
.aph .wbh-note.n1 { left: 54%; top: 6%; }
.aph .wbh-note.n2 { left: -2%; top: 18%; }
.aph .wbh-note.n3 { left: 2%; top: auto; bottom: 22%; }
.aph .wbh-rail { right: 34%; }
@media (max-width: 1000px) { .aph .aph-3d { right: 30%; } .aph-phone { width: 210px; } .aph-back { width: 170px; } }
@media (max-width: 720px) {
  .aph .aph-3d { left: 0; right: 30%; top: 2%; bottom: 14%; }
  .aph-phone { width: 180px; border-radius: 32px; padding: 8px; } .aph-screen { border-radius: 25px; }
  .aph-back { width: 140px; }
  .aph .wbh-note.n2 { display: none; }
  .aph .wbh-note.n1 { left: 40%; top: 0; } .aph .wbh-note.n3 { left: 0; bottom: 18%; }
  .aph .wbh-rail { right: 4%; }
}

/* icon movements for the app page */
.sp-ico .a-ring { transform-origin: 12px 4px; transform-box: view-box; animation: icRing 3s ease-in-out infinite; }
.sp-ico .a-bar { transform-origin: bottom; animation: icBar 2.6s ease-in-out infinite; }
.sp-ico .a-bar.b2 { animation-delay: .2s; } .sp-ico .a-bar.b3 { animation-delay: .4s; }
@keyframes icRing { 0%, 60%, 100% { rotate: 0deg; } 66% { rotate: 14deg; } 74% { rotate: -12deg; } 82% { rotate: 8deg; } 90% { rotate: -4deg; } }
@keyframes icBar { 0%, 100% { scale: 1 1; } 50% { scale: 1 .55; } }
.aph-svc { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; font-size: .5625rem; color: #AFC0DE; background: rgba(169, 220, 255, .07); }
.aph-svc i { width: 30px; height: 30px; border-radius: 9px; background: radial-gradient(circle at 30% 30%, #7BE3FF, #2B5BFF); }
.aph-svc span { flex: 1; display: grid; } .aph-svc b { color: #fff; font-size: .625rem; }
.aph-total { padding-top: 8px; border-top: 1px solid rgba(169, 220, 255, .12); } .aph-total b, .aph-total span { color: #fff; font-weight: 700; }
.aph-map { position: relative; flex: 1; min-height: 80px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(35deg, transparent 46%, rgba(47, 212, 255, .35) 47%, rgba(47, 212, 255, .35) 50%, transparent 51%), linear-gradient(rgba(169, 220, 255, .08) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgba(169, 220, 255, .08) 1px, transparent 1px) 0 0 / 14px 14px, rgba(169, 220, 255, .05); }
.aph-map i { position: absolute; left: 58%; top: 34%; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cyan); box-shadow: 0 0 12px #2FD4FF; }
.aph .wbh-bot { aspect-ratio: 722 / 1494; height: 90%; right: 0; }
.aph .wbh-palm { left: 11.7%; top: 20.7%; }
.aph-beam { position: absolute; left: 11.7%; top: 20.7%; width: 140px; height: 4px; transform-origin: left center; rotate: 200deg; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, rgba(123, 227, 255, .9), rgba(47, 212, 255, .35) 50%, transparent); filter: blur(2px); animation: aphBeam 2.4s ease-in-out infinite; }
@keyframes aphBeam { 50% { opacity: .4; } }
@media (max-width: 720px) { .aph .wbh-note.n1 { display: none; } .aph .wbh-bot { right: -6%; } }
.sp-end-bot img { max-height: 600px; width: auto; margin-left: auto; }

/* ---------- automation hero: a live workflow board ---------- */
.flw .flw-3d { left: 0; right: 30%; top: 10%; }
.flw-board { position: relative; border-radius: 22px; padding: 16px 18px 14px;
  background: linear-gradient(160deg, rgba(14, 34, 80, .92), rgba(5, 12, 32, .96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 70px 130px -50px rgba(10, 141, 255, .75), 0 30px 60px -30px rgba(0, 0, 0, .9);
  background-image: linear-gradient(160deg, rgba(14, 34, 80, .92), rgba(5, 12, 32, .96)); }
.flw-head { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); }
.flw-head b { color: #fff; }
.flw-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; }
.flw-live { margin-left: auto; padding: 3px 10px; border-radius: 99px; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3DF0A0; box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .45); }
.flw-area { position: relative; height: 270px; margin: 14px 0; border-radius: 14px;
  background: radial-gradient(circle, rgba(169, 220, 255, .14) 1px, transparent 1.2px) 0 0 / 18px 18px; }
.flw-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flw-lines path { fill: none; stroke: rgba(169, 220, 255, .22); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; transition: stroke .4s; }
.flw-stage:not([data-phase="0"]) .flw-lines .l1, .flw-stage[data-phase="2"] .flw-lines .l2, .flw-stage[data-phase="3"] .flw-lines .l2,
.flw-stage[data-phase="2"] .flw-lines .l3, .flw-stage[data-phase="3"] .flw-lines .l3 { stroke: #2FD4FF; stroke-dasharray: none; filter: drop-shadow(0 0 4px #2FD4FF); }
.flw-n { position: absolute; top: 50%; width: 27%; translate: 0 -50%; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px;
  background: rgba(10, 24, 58, .95); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); transition: box-shadow .5s, background .5s, transform .6s var(--ease); }
.flw-n.p0 { left: 0; } .flw-n.p1 { left: 36%; } .flw-n.p2 { left: 73%; } .flw-n.up { top: 25%; } .flw-n.down { top: 75%; }
.flw-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(169, 220, 255, .1); transition: background .4s; }
.flw-ico svg { width: 17px; height: 17px; fill: none; stroke: #C9D6F0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flw-t { min-width: 0; display: grid; font-size: .625rem; line-height: 1.3; color: var(--muted); }
.flw-t b { font-size: .75rem; line-height: 1.2; color: #fff; }
.flw-ok { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 12px rgba(61, 240, 160, .8); transform: scale(0); transition: transform .5s var(--ease); }
.flw-ok svg { width: 11px; height: 11px; fill: none; stroke: #04130C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.flw-stage .flw-n[data-n="0"], .flw-stage:not([data-phase="0"]) .flw-n[data-n="1"],
.flw-stage[data-phase="2"] .flw-n[data-n="2"], .flw-stage[data-phase="3"] .flw-n[data-n="2"], .flw-stage[data-phase="2"] .flw-n[data-n="3"], .flw-stage[data-phase="3"] .flw-n[data-n="3"] {
  background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 50%), rgba(12, 40, 96, .95); box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .7), 0 0 26px rgba(47, 212, 255, .35); }
.flw-stage .flw-n[data-n="0"] .flw-ico, .flw-stage:not([data-phase="0"]) .flw-n[data-n="1"] .flw-ico,
.flw-stage[data-phase="2"] .flw-n[data-n="2"] .flw-ico, .flw-stage[data-phase="3"] .flw-n[data-n="2"] .flw-ico, .flw-stage[data-phase="2"] .flw-n[data-n="3"] .flw-ico, .flw-stage[data-phase="3"] .flw-n[data-n="3"] .flw-ico { background: var(--grad); }
.flw-stage:not([data-phase="0"]) .flw-n[data-n="0"] .flw-ok, .flw-stage[data-phase="2"] .flw-n[data-n="1"] .flw-ok, .flw-stage[data-phase="3"] .flw-n[data-n="1"] .flw-ok,
.flw-stage[data-phase="3"] .flw-n[data-n="2"] .flw-ok, .flw-stage[data-phase="3"] .flw-n[data-n="3"] .flw-ok { transform: scale(1); }
.flw-pk { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(47, 212, 255, .3), 0 0 16px #2FD4FF; opacity: 0; }
.flw-pk.k1 { top: 50%; left: 27%; }
.flw-stage[data-phase="1"] .flw-pk.k1 { animation: flwK1 1.2s var(--ease) forwards; }
.flw-stage[data-phase="2"] .flw-pk.k2 { top: 50%; left: 63%; animation: flwK2 1.2s var(--ease) forwards; }
.flw-stage[data-phase="2"] .flw-pk.k3 { top: 50%; left: 63%; animation: flwK3 1.2s var(--ease) forwards; }
@keyframes flwK1 { 0% { opacity: 1; left: 27%; } 90% { opacity: 1; left: 36%; } 100% { opacity: 0; left: 36%; } }
@keyframes flwK2 { 0% { opacity: 1; } 50% { left: 68%; top: 38%; } 90% { opacity: 1; left: 73%; top: 25%; } 100% { opacity: 0; left: 73%; top: 25%; } }
@keyframes flwK3 { 0% { opacity: 1; } 50% { left: 68%; top: 62%; } 90% { opacity: 1; left: 73%; top: 75%; } 100% { opacity: 0; left: 73%; top: 75%; } }
.flw-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(169, 220, 255, .1); font-size: .6875rem; color: var(--muted); }
.flw-foot b { color: #fff; font-family: var(--f-display); font-size: .875rem; font-variant-numeric: tabular-nums; }
.flw .wbh-note.n1 { left: 30%; top: 0; }
.flw .wbh-note.n2 { left: 2%; top: auto; bottom: 20%; }
.flw .wbh-note.n3 { left: 42%; top: auto; bottom: 17%; }
.flw .wbh-rail { right: 30%; }
@media (max-width: 720px) {
  .flw .flw-3d { right: 16%; left: -2%; top: 8%; }
  .flw-area { height: 230px; }
  .flw-n { width: 30%; padding: 7px; gap: 5px; } .flw-n.p1 { left: 35%; } .flw-n.p2 { left: 70%; }
  .flw-t > :not(b) { display: none; } .flw-t { font-size: 0; }
  .flw-ico { width: 22px; height: 22px; } .flw-ico svg { width: 13px; height: 13px; }
  .flw-t b { font-size: .625rem; } .flw-t { font-size: .5625rem; }
  .flw .wbh-note.n1, .flw .wbh-note.n3 { display: none; }
  .flw .wbh-note.n2 { bottom: 16%; }
  .flw .wbh-rail { right: 4%; font-size: .625rem; }
  .flw .wbh-bot { right: -14%; height: 70%; }
}
@media (max-width: 720px) { .tst-mark b { transition: opacity .3s, background .4s; } .tst-mark:not(.is-cur):not(.m-last) b { opacity: 0; } }
@media (max-width: 720px) { .sp-end-bot img { max-height: 280px; margin: 0 auto; } }

/* ---------- AI video hero: our robot presents, then speaks four languages, then fills every format ---------- */
.vdo .vdo-3d { left: 0; right: 2%; top: 6%; }
.vdo-win { position: relative; z-index: 2; width: 82%; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(14, 34, 80, .95), rgba(5, 12, 32, .98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 70px 130px -50px rgba(10, 141, 255, .75), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.vdo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: .6875rem; color: var(--muted); border-bottom: 1px solid rgba(169, 220, 255, .12); }
.vdo-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169, 220, 255, .3); }
.vdo-bar span:first-of-type { margin-left: 10px; }
.vdo-rec { margin-left: auto; padding: 2px 8px; border-radius: 99px; font-weight: 700; letter-spacing: .1em; color: #fff; background: #FF4D6D; box-shadow: 0 0 12px rgba(255, 77, 109, .7); opacity: 0; transition: opacity .3s; }
.vdo-stage[data-phase="1"] .vdo-rec { opacity: 1; animation: vdoRec 1s steps(2) infinite; }
@keyframes vdoRec { 50% { opacity: .35; } }
.vdo-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 100%, rgba(10, 141, 255, .45), transparent 70%), radial-gradient(40% 50% at 80% 20%, rgba(47, 212, 255, .2), transparent 70%), linear-gradient(180deg, #0b1a40, #050c22); }
.vdo-host { position: absolute; left: 50%; top: 9%; width: 42%; height: auto; max-width: none; translate: -50% 0; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .7s var(--ease), transform .9s var(--ease);
  filter: drop-shadow(0 0 30px rgba(10, 141, 255, .5)); }
.vdo-stage:not([data-phase="0"]) .vdo-host { opacity: 1; transform: none; }
.vdo-stage:not([data-phase="0"]) .vdo-host { animation: vdoTalk 3.2s ease-in-out infinite; }
@keyframes vdoTalk { 0%, 100% { rotate: 0deg; } 30% { rotate: .8deg; } 70% { rotate: -.6deg; } }
.vdo-script { position: absolute; inset: 12% 16%; display: grid; align-content: center; gap: 9px; padding: 20px 24px; border-radius: 14px; background: rgba(4, 12, 32, .85); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2);
  transition: opacity .5s, transform .6s var(--ease); }
.vdo-sh { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.vdo-script i { height: 8px; border-radius: 4px; background: rgba(169, 220, 255, .25); transform-origin: left; animation: spbType 2.6s var(--ease) both; }
.vdo-script .s1 { width: 90%; } .vdo-script .s2 { width: 70%; animation-delay: .25s; } .vdo-script .s3 { width: 82%; animation-delay: .5s; } .vdo-script .s4 { width: 46%; animation-delay: .75s; }
.vdo-script em { font-family: var(--f-display); font-style: normal; font-size: .9375rem; color: #fff; }
.vdo-stage:not([data-phase="0"]) .vdo-script { opacity: 0; transform: scale(.9) translateY(-10px); }
.vdo-langs { position: absolute; right: 12px; top: 12px; display: flex; gap: 5px; opacity: 0; transition: opacity .4s; }
.vdo-langs i { padding: 3px 8px; border-radius: 99px; font-size: .625rem; font-style: normal; font-weight: 700; color: #C9D6F0; background: rgba(4, 12, 32, .7); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25); }
.vdo-stage[data-phase="2"] .vdo-langs, .vdo-stage[data-phase="3"] .vdo-langs { opacity: 1; }
.vdo-caps { position: absolute; left: 8%; right: 8%; bottom: 12%; height: 30px; }
.vdo-cap { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12px; border-radius: 8px; font-size: .875rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; }
.vdo-stage[data-phase="1"] .vdo-cap[data-l="EN"], .vdo-stage[data-phase="3"] .vdo-cap[data-l="EN"] { opacity: 1; }
.vdo-stage[data-phase="2"] .vdo-cap { animation: vdoCap 2.4s steps(1) both; }
.vdo-stage[data-phase="2"] .vdo-cap[data-l="ES"] { animation-delay: .6s; } .vdo-stage[data-phase="2"] .vdo-cap[data-l="AR"] { animation-delay: 1.2s; } .vdo-stage[data-phase="2"] .vdo-cap[data-l="FR"] { animation-delay: 1.8s; }
@keyframes vdoCap { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.vdo-stage[data-phase="2"] .vdo-cap[data-l="FR"] { animation-name: vdoCapLast; }
@keyframes vdoCapLast { 0%, 100% { opacity: 1; } }
.vdo-stage[data-phase="2"] .vdo-langs i { animation: vdoLang 2.4s steps(1) both; }
.vdo-stage[data-phase="2"] .vdo-langs i:nth-child(2) { animation-delay: .6s; } .vdo-stage[data-phase="2"] .vdo-langs i:nth-child(3) { animation-delay: 1.2s; } .vdo-stage[data-phase="2"] .vdo-langs i:nth-child(4) { animation-delay: 1.8s; animation-name: vdoLangLast; }
@keyframes vdoLang { 0% { color: #fff; background: #0A8DFF; } 25%, 100% { color: #C9D6F0; background: rgba(4, 12, 32, .7); } }
@keyframes vdoLangLast { 0%, 100% { color: #fff; background: #0A8DFF; } }
.vdo-wave { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 2px; height: 22px; opacity: 0; transition: opacity .4s; }
.vdo-stage:not([data-phase="0"]) .vdo-wave { opacity: 1; }
.vdo-wave i { width: 3px; border-radius: 2px; background: var(--cyan); animation: vdoWave 1.1s ease-in-out infinite alternate; }
@keyframes vdoWave { from { scale: 1 .3; } to { scale: 1 1; } }
.vdo-wave i { transform-origin: bottom; }
.vdo-wave i:nth-child(1) { height: 30%; animation-delay: 0.00s; }
.vdo-wave i:nth-child(2) { height: 60%; animation-delay: 0.87s; }
.vdo-wave i:nth-child(3) { height: 45%; animation-delay: 0.74s; }
.vdo-wave i:nth-child(4) { height: 80%; animation-delay: 0.61s; }
.vdo-wave i:nth-child(5) { height: 55%; animation-delay: 0.48s; }
.vdo-wave i:nth-child(6) { height: 95%; animation-delay: 0.35s; }
.vdo-wave i:nth-child(7) { height: 70%; animation-delay: 0.22s; }
.vdo-wave i:nth-child(8) { height: 40%; animation-delay: 0.09s; }
.vdo-wave i:nth-child(9) { height: 85%; animation-delay: 0.96s; }
.vdo-wave i:nth-child(10) { height: 50%; animation-delay: 0.83s; }
.vdo-wave i:nth-child(11) { height: 65%; animation-delay: 0.70s; }
.vdo-wave i:nth-child(12) { height: 35%; animation-delay: 0.57s; }
.vdo-wave i:nth-child(13) { height: 75%; animation-delay: 0.44s; }
.vdo-wave i:nth-child(14) { height: 45%; animation-delay: 0.31s; }
.vdo-wave i:nth-child(15) { height: 25%; animation-delay: 0.18s; }

.vdo-ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: .6875rem; color: var(--muted); }
.vdo-play { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vdo-time { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(169, 220, 255, .15); overflow: hidden; }
.vdo-time i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(calc(var(--t, 0) * .9 + .05)); transition: transform 1s var(--ease); }
.vdo-fmt { position: absolute; z-index: 1; overflow: hidden; border-radius: 12px; opacity: 0; transition: opacity .6s var(--ease), transform .9s var(--ease);
  background: radial-gradient(60% 80% at 50% 100%, rgba(10, 141, 255, .5), transparent 70%), linear-gradient(180deg, #0b1a40, #050c22); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .3), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.vdo-fmt img { position: absolute; left: 50%; top: 8%; width: 120%; max-width: none; translate: -50% 0; }
.vdo-fmt b { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 99px; font-size: .625rem; color: #fff; background: var(--grad); }
.vdo-fmt.f1 { left: 0; top: 18%; width: 22%; aspect-ratio: 9 / 16; transform: translateX(40px) rotate(-4deg); }
.vdo-fmt.f2 { right: 0; top: 0; width: 26%; aspect-ratio: 1; transform: translateX(-40px) rotate(3deg); }
.vdo-fmt.f3 { right: 4%; bottom: -14%; width: 38%; aspect-ratio: 16 / 9; transform: translateY(-30px) rotate(-2deg); }
.vdo-fmt.f3 img { width: 50%; top: 10%; }
.vdo-fmt.f2 img { width: 80%; }
.vdo-stage[data-phase="3"] .vdo-fmt { opacity: 1; }
.vdo-stage[data-phase="3"] .vdo-fmt.f1 { transform: translateX(-10px) rotate(-6deg); }
.vdo-stage[data-phase="3"] .vdo-fmt.f2 { transform: translateX(10px) translateY(-14px) rotate(5deg); transition-delay: .15s; }
.vdo-stage[data-phase="3"] .vdo-fmt.f3 { transform: translateY(10px) rotate(-3deg); transition-delay: .3s; }
.vdo .wbh-note.n1 { left: auto; right: 0; top: 30%; }
.vdo .wbh-note.n2 { left: 0; top: 72%; }
.vdo .wbh-note.n3 { left: 44%; top: auto; bottom: 13%; z-index: 6; }
.vdo .wbh-rail { right: 6%; }
@media (max-width: 720px) {
  .vdo .vdo-3d { right: 0; left: 0; top: 8%; }
  .vdo-win { width: 86%; }
  .vdo-caps { height: 24px; } .vdo-cap { font-size: .6875rem; }
  .vdo-script { inset: 8% 8%; padding: 12px; gap: 6px; } .vdo-script em { font-size: .75rem; }
  .vdo .wbh-note.n1, .vdo .wbh-note.n3 { display: none; }
  .vdo .wbh-note.n2 { top: auto; bottom: 18%; }
  .vdo .wbh-rail { right: 4%; font-size: .625rem; }
}
.sp-ico .a-ping2 { animation: icPlay 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes icPlay { 50% { scale: 1.25; } }
.tst-ruler { flex: none; }

/* ---------- AI avatars: a row of phones playing UGC-style Reels ---------- */
.av { padding: clamp(50px, 7vw, 100px) var(--gutter) 0; }
.av-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); max-width: 1320px; margin: clamp(36px, 4vw, 56px) auto 0; perspective: 1600px; }
.av-tile { transition: transform .6s var(--ease); }
.av-tile:nth-child(odd) { transform: translateY(26px); }
.av-tile:hover { transform: translateY(-8px) scale(1.03); z-index: 2; }
.av-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; padding: 0;
  background: radial-gradient(70% 60% at 50% 30%, rgba(47, 182, 255, .35), transparent 70%), linear-gradient(180deg, #13244e, #060d22);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 0 0 5px #070d1f, 0 0 0 6px rgba(169, 220, 255, .2), 0 40px 70px -30px rgba(10, 141, 255, .6); }
.av-phone img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 22%; transform: scale(1.04); animation: avBreathe 7s ease-in-out infinite; }
.av-tile:nth-child(2n) .av-phone img { animation-delay: -2.5s; } .av-tile:nth-child(3n) .av-phone img { animation-delay: -4.5s; }
@keyframes avBreathe { 50% { transform: scale(1.09) translateY(-1%); } }
.av-ph { position: absolute; inset: 0;
  background: radial-gradient(18% 11% at 50% 30%, rgba(169, 220, 255, .28), transparent 70%), radial-gradient(38% 26% at 50% 62%, rgba(169, 220, 255, .16), transparent 70%); }
.av-phone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 55%, rgba(0, 0, 0, .75)); }
.av-fmt, .av-ai { position: absolute; z-index: 2; top: 10px; padding: 3px 8px; border-radius: 99px; font-size: .625rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.av-fmt { left: 10px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.av-ai { right: 10px; background: rgba(10, 141, 255, .75); }
.av-side { position: absolute; z-index: 2; right: 8px; bottom: 26%; display: grid; gap: 10px; }
.av-side i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .85); -webkit-mask: radial-gradient(circle, #000 55%, transparent 56%); mask: radial-gradient(circle, #000 55%, transparent 56%); opacity: .9; }
.av-side .h { background: #FF4D6D; animation: avHeart 3s ease-in-out infinite; }
@keyframes avHeart { 0%, 70%, 100% { scale: 1; } 78% { scale: 1.35; } 86% { scale: .95; } }
.av-cap { position: absolute; z-index: 2; left: 10px; right: 34px; bottom: 16px; display: grid; gap: 2px; font-size: .6875rem; line-height: 1.35; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.av-cap b { font-size: .6875rem; }
.av-bar { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.av-bar i { display: block; height: 100%; background: #fff; transform-origin: left; animation: avPlay 8s linear infinite; }
.av-tile:nth-child(2n) .av-bar i { animation-delay: -3s; } .av-tile:nth-child(3n) .av-bar i { animation-delay: -5.5s; }
@keyframes avPlay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.av-job { margin-top: 12px; text-align: center; font-size: .875rem; font-weight: 600; color: #C9D6F0; }
.av-note { max-width: 680px; margin: clamp(40px, 4vw, 56px) auto 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.av:not(.is-live) * { animation-play-state: paused !important; }

/* ---------- posting on autopilot: pick how often, the week fills itself ---------- */
.ap { padding: clamp(60px, 8vw, 110px) var(--gutter) 0; }
.ap-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(30px, 5vw, 70px); max-width: 1180px; margin: 0 auto; }
.ap-text h2 { margin-top: 12px; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.04em; line-height: 1.06; }
.ap-text > p:not(.kicker) { margin-top: 14px; color: #C9D6F0; line-height: 1.65; }
.ap-text a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.ap-pick { display: inline-flex; gap: 4px; margin: 24px 0 22px; padding: 4px; border-radius: 99px; background: rgba(8, 20, 48, .7); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.ap-pick button { padding: 10px 16px; border-radius: 99px; font-size: .875rem; font-weight: 600; color: #AFC0DE; transition: background .3s, color .3s; }
.ap-pick button[aria-checked="true"] { color: #fff; background: var(--grad); box-shadow: 0 6px 18px -6px rgba(10, 141, 255, .9); }
.ap-text .btn { display: flex; width: max-content; }
.ap-cal { padding: 18px; border-radius: 24px; background: linear-gradient(160deg, rgba(14, 34, 80, .85), rgba(5, 12, 32, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 50px 100px -50px rgba(10, 141, 255, .8); }
.ap-head { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: #fff; }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; }
.ap-count { margin-left: auto; font-weight: 500; color: var(--muted); } .ap-count b { color: #fff; font-family: var(--f-display); }
.ap-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 16px 0 14px; padding: 0; list-style: none; }
.ap-day { display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 8px 6px; border-radius: 12px; background: rgba(169, 220, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .08); }
.ap-day b { text-align: center; font-size: .75rem; color: #C9D6F0; }
.ap-slot { display: grid; gap: 4px; padding: 6px; border-radius: 8px; font-size: .5625rem; font-weight: 600; line-height: 1.3; color: #fff; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s, transform .45s var(--ease); }
.ap-slot i { height: 26px; border-radius: 5px; background: radial-gradient(40% 50% at 50% 40%, rgba(255, 255, 255, .5), transparent 70%), var(--grad); }
.ap-reel { background: rgba(10, 141, 255, .22); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .4); }
.ap-story { background: rgba(255, 77, 109, .16); box-shadow: inset 0 0 0 1px rgba(255, 120, 150, .35); }
.ap-story i { background: radial-gradient(40% 50% at 50% 40%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(135deg, #FF4D6D, #8B5BFF); }
.ap-days[data-n="3"] .ap-day:is([data-d="0"], [data-d="2"], [data-d="4"]) .ap-slot,
.ap-days[data-n="5"] .ap-day:is([data-d="0"], [data-d="1"], [data-d="2"], [data-d="3"], [data-d="4"]) .ap-slot,
.ap-days[data-n="7"] .ap-day .ap-slot { opacity: 1; transform: none; }
.ap-day:nth-child(2) .ap-slot { transition-delay: .05s; } .ap-day:nth-child(3) .ap-slot { transition-delay: .1s; } .ap-day:nth-child(4) .ap-slot { transition-delay: .15s; }
.ap-day:nth-child(5) .ap-slot { transition-delay: .2s; } .ap-day:nth-child(6) .ap-slot { transition-delay: .25s; } .ap-day:nth-child(7) .ap-slot { transition-delay: .3s; }
.ap-plats { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-plats span { padding: 5px 10px; border-radius: 99px; font-size: .6875rem; font-weight: 600; color: #C9D6F0; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); }
.vdo-host.is-real { top: 0; left: 0; width: 100%; height: 100%; translate: none; object-fit: cover; object-position: 50% 20%; filter: none; }
@media (max-width: 1000px) {
  .av-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .ap-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .av-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 30px; scrollbar-width: none; }
  .av-row::-webkit-scrollbar { display: none; }
  .av-tile { flex: 0 0 56%; scroll-snap-align: center; }
  .av-tile:nth-child(odd) { transform: none; }
  .ap-days { gap: 3px; } .ap-day { min-height: 120px; padding: 6px 3px; }
  .ap-slot { font-size: 0; padding: 4px; } .ap-slot i { height: 20px; }
  .ap-pick button { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) { .av *, .ap * { animation: none !important; } }

/* ---------- why it matters, feed version: posts scroll past, your avatar stops the thumb ---------- */
.fd-track { position: relative; height: 300svh; }
.fd-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 30px); padding: calc(var(--header-h) + 4px) var(--gutter) 24px; overflow: hidden; }
.fd .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.fd-body { position: relative; display: grid; place-items: center; max-width: 1180px; width: 100%; margin: 0 auto; min-height: 0; }
.fd-phone { position: relative; z-index: 2; width: min(270px, 60vw); aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 10px; overflow: hidden;
  background: #05091a; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 0 6px #0b1226, 0 0 0 7px rgba(169, 220, 255, .22), 0 60px 120px -40px rgba(10, 141, 255, .8); }
.fd-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 22px 22px 30px; font-size: .75rem; font-weight: 700; color: #fff; background: linear-gradient(#05091a, transparent); }
.fd-live { width: 8px; height: 8px; border-radius: 50%; background: #FF4D6D; box-shadow: 0 0 8px #FF4D6D; }
.fd-feed { --y: 0; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; transform: translateY(calc(var(--y) * -1px)); will-change: transform; }
.fd-post { position: relative; height: 340px; border-radius: 26px; overflow: hidden; display: grid; align-content: end; gap: 6px; padding: 18px; background: #101b38; filter: saturate(.5) brightness(.7); }
.fd-post.p0 { background: linear-gradient(160deg, #2a2f4a, #121a33); } .fd-post.p1 { background: linear-gradient(160deg, #3a2a3f, #15142a); }
.fd-post.p2 { background: linear-gradient(160deg, #22394a, #0f1a2c); } .fd-post.p3 { background: linear-gradient(160deg, #3b3526, #191712); }
.fd-post i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); } .fd-post i:nth-child(1) { width: 50%; } .fd-post i:nth-child(2) { width: 80%; } .fd-post i:nth-child(3) { width: 30%; }
.fd-post.is-ours { filter: none; box-shadow: inset 0 0 0 2px rgba(47, 212, 255, .8), 0 0 40px rgba(47, 212, 255, .4); }
.fd-post.is-ours img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; }
.fd-post.is-ours img.is-bot { object-fit: contain; object-position: 50% 10%; transform: scale(1.5) translateY(14%); }
.fd-post.is-ours::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .7)); }
.fd-cap { position: relative; z-index: 2; display: grid; font-size: .75rem; color: #fff; } .fd-cap b { font-size: .8125rem; }
.fd-play { position: absolute; z-index: 2; left: 50%; top: 45%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; }
.fd-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.fd-watch { position: absolute; z-index: 2; left: 50%; top: 18px; translate: -50% 0; padding: 4px 10px; border-radius: 99px; white-space: nowrap; font-size: .625rem; font-weight: 700; color: #04130C; background: #3DF0A0; box-shadow: 0 0 14px rgba(61, 240, 160, .7); opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); }
.fd.is-stopped .fd-watch { opacity: 1; transform: none; }
.fd.is-stopped .fd-play { opacity: 0; }
.fd-thumb { position: absolute; z-index: 4; right: 26px; bottom: 60px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 8px rgba(255, 255, 255, .15); opacity: .9; transition: opacity .4s; animation: fdSwipe 1.1s ease-in-out infinite; }
.fd.is-stopped .fd-thumb { opacity: 0; }
@keyframes fdSwipe { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-50px); opacity: 0; } }
.fd-facts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.fd-fact { position: absolute; width: min(330px, 30%); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .9);
  opacity: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.fd-fact .tst-num b { font-size: 2.5rem; } .fd-fact .tst-text { font-size: .9375rem; }
.fd-fact[data-side="l"] { left: 0; transform: translateX(-30px); } .fd-fact[data-side="r"] { right: 0; transform: translateX(30px); }
.fd-fact:nth-child(1) { top: 4%; } .fd-fact:nth-child(2) { top: 18%; } .fd-fact:nth-child(3) { top: 52%; } .fd-fact:nth-child(4) { top: 64%; }
.fd-fact.is-on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .fd-track { height: 320svh; }
  .fd-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); }
  .fd .sec-head h2 { font-size: 1.75rem; }
  .fd-body { flex: 1; display: block; }
  .fd-phone { width: 52vw; margin: 0 auto; }
  .fd-facts { inset: auto 0 0 0; top: auto; height: 130px; }
  .fd-fact { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto; transform: translateY(20px) !important; }
  .fd-fact.is-on { transform: none !important; }
  .fd-fact .tst-num b { font-size: 2rem; }
}

/* ---------- what is inside, builder version: switches turn on and the avatar video comes together ---------- */
.bd-track { position: relative; height: 340svh; }
.bd-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 24px; overflow: hidden; }
.bd-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 70px); max-width: 1180px; width: 100%; margin: 0 auto; }
.bd-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bd-item { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; cursor: pointer; transition: background .4s, box-shadow .4s, opacity .4s; opacity: .55; }
.bd-sw { flex: none; position: relative; width: 44px; height: 26px; margin-top: 2px; border-radius: 99px; background: rgba(169, 220, 255, .14); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); transition: background .4s; }
.bd-sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #C9D6F0; transition: transform .45s var(--ease), background .3s; }
.bd-t { display: grid; gap: 2px; } .bd-t b { font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; color: #fff; }
.bd-t span { max-height: 0; overflow: hidden; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.bd-item.is-done { opacity: .9; }
.bd-item.is-done .bd-sw, .bd-item.is-on .bd-sw { background: var(--grad); box-shadow: 0 0 14px rgba(47, 212, 255, .5); }
.bd-item.is-done .bd-sw i, .bd-item.is-on .bd-sw i { transform: translateX(18px); background: #fff; }
.bd-item.is-on { opacity: 1; background: linear-gradient(128deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(47, 212, 255, .25); }
.bd-item.is-on .bd-t span { max-height: 7em; opacity: 1; margin-top: 4px; }
.bd-card { width: min(100%, 520px); margin: 0 auto; padding: 12px; border-radius: 26px; background: linear-gradient(160deg, rgba(14, 34, 80, .9), rgba(5, 12, 32, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 60px 120px -50px rgba(10, 141, 255, .8); }
.bd-screen { position: relative; aspect-ratio: 4 / 4.2; border-radius: 18px; overflow: hidden; background: radial-gradient(60% 70% at 50% 100%, rgba(10, 141, 255, .4), transparent 70%), linear-gradient(180deg, #0b1a40, #050c22); }
.bd-face { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; opacity: 0; transform: scale(1.06); filter: blur(10px); transition: opacity .7s, transform .9s var(--ease), filter .8s; }
.bd-face.is-bot { object-fit: contain; object-position: 50% 0; transform: scale(1.6) translateY(22%); }
.bd-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(transparent 46%, rgba(47, 212, 255, .7) 50%, transparent 54%) 0 0 / 100% 200%; }
.bd-stage[data-on="1"] .bd-scan { opacity: 1; animation: bdScan 1.6s linear infinite; }
@keyframes bdScan { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.bd-script { position: absolute; z-index: 3; inset: 18% 12% auto; padding: 16px; border-radius: 14px; font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.35; color: #fff; text-align: center;
  background: rgba(4, 12, 32, .82); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease); }
.bd-wave { position: absolute; z-index: 3; left: 14px; bottom: 54px; display: flex; align-items: flex-end; gap: 3px; height: 26px; opacity: 0; transition: opacity .4s; }
.bd-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--cyan); transform-origin: bottom; animation: vdoWave 1s ease-in-out infinite alternate; }
.bd-wave i:nth-child(3n) { animation-delay: -.3s; height: 60%; } .bd-wave i:nth-child(3n+1) { animation-delay: -.6s; height: 80%; } .bd-wave i:nth-child(4n) { height: 40%; }
.bd-langs { position: absolute; z-index: 3; right: 12px; top: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity .4s; }
.bd-langs i { padding: 3px 8px; border-radius: 99px; font-size: .625rem; font-weight: 700; font-style: normal; color: #fff; background: rgba(4, 12, 32, .7); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .3); }
.bd-langs i:first-child { background: #0A8DFF; }
.bd-cap { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 14px; height: 30px; opacity: 0; transition: opacity .4s; }
.bd-cap span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; font-size: .8125rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); }
.bd-cap span:last-child { animation: bdCap 3s steps(1) infinite; }
@keyframes bdCap { 0% { opacity: 0; } 50% { opacity: 1; } }
.bd-out { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bd-out span { padding: 6px 12px; border-radius: 99px; font-size: .75rem; font-weight: 600; color: #fff; background: rgba(169, 220, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); opacity: .25; transition: opacity .4s, background .4s; }
.bd-out .bd-sched { margin-left: auto; color: #04130C; background: #3DF0A0; }
/* states: 0 script, 1 avatar, 2 voice, 3 languages, 4 formats */
.bd-stage:not([data-on="-1"]) .bd-script { opacity: 1; transform: none; }
.bd-stage[data-on="1"] .bd-face, .bd-stage[data-on="2"] .bd-face, .bd-stage[data-on="3"] .bd-face, .bd-stage[data-on="4"] .bd-face { opacity: 1; transform: none; filter: none; }
.bd-stage[data-on="1"] .bd-script, .bd-stage[data-on="2"] .bd-script, .bd-stage[data-on="3"] .bd-script, .bd-stage[data-on="4"] .bd-script { opacity: 0; transform: translateY(-12px); }
.bd-stage[data-on="2"] .bd-wave, .bd-stage[data-on="3"] .bd-wave, .bd-stage[data-on="4"] .bd-wave,
.bd-stage[data-on="2"] .bd-cap, .bd-stage[data-on="3"] .bd-cap, .bd-stage[data-on="4"] .bd-cap { opacity: 1; }
.bd-stage[data-on="2"] .bd-cap span:last-child { display: none; }
.bd-stage[data-on="3"] .bd-langs, .bd-stage[data-on="4"] .bd-langs { opacity: 1; }
.bd-stage[data-on="4"] .bd-out span { opacity: 1; }
.bd-stage[data-on="4"] .bd-out span:not(.bd-sched) { background: rgba(10, 141, 255, .35); }
@media (max-width: 900px) {
  .bd-track { height: 320svh; }
  .bd-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); gap: 10px; }
  .bd .sec-head h2 { font-size: 1.75rem; }
  .bd-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bd-card { order: -1; width: min(100%, 300px); padding: 8px; }
  .bd-list { position: relative; min-height: 120px; }
  .bd-item { display: none; } .bd-item.is-on { display: flex; }
  .bd-out span { font-size: .625rem; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-track, .bd-track { height: auto; } .fd-stage, .bd-stage { position: relative; height: auto; }
  .fd-fact { position: relative; opacity: 1; transform: none; width: auto; margin-bottom: 12px; } .fd-facts { position: relative; }
}
.bd-cap span:first-child { animation: bdCap1 3s steps(1) infinite; }
@keyframes bdCap1 { 0% { opacity: 1; } 50% { opacity: 0; } }
.bd-stage[data-on="2"] .bd-cap span:first-child { animation: none; opacity: 1; }
@media (min-width: 901px) { .bd-stage { padding-bottom: 96px; } .bd-screen { aspect-ratio: 4 / 3.7; } }
/* real avatar videos */
.av-phone video, .fd-post.is-ours video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.av-phone video { animation: none; }
video.vdo-host.is-real { top: 0; left: 0; width: 100%; height: 100%; translate: none; object-fit: cover; object-position: 50% 28%; filter: none; }
video.bd-face { object-fit: cover; object-position: 50% 25%; }
.vdo-fmt.is-real img { left: 0; top: 0; width: 100%; height: 100%; translate: none; object-fit: cover; object-position: 50% 25%; }
.vdo-fmt.is-real.f3 img { width: 100%; }
.fd.is-stopped .fd-thumb { display: none; }

/* feed: the other posts are real Reels too, dimmed, so yours stands out */
.fd-post img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; }
.fd-post:not(.is-ours)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .65)); }
.fd-post:not(.is-ours) i { position: relative; z-index: 1; }
.fd-post:not(.is-ours) { filter: saturate(.55) brightness(.62); }

/* ---------- questions as comments under a Reel ---------- */
.cm { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.cm-box { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; max-width: 1080px; margin: clamp(32px, 4vw, 52px) auto 0; }
.cm-reel { position: sticky; top: calc(var(--header-h) + 20px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #0b1a40;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 0 0 5px #070d1f, 0 0 0 6px rgba(169, 220, 255, .2), 0 40px 80px -30px rgba(10, 141, 255, .7); }
.cm-reel video, .cm-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.cm-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .3), transparent 20%, transparent 60%, rgba(0, 0, 0, .75)); }
.cm-tag { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 3px 9px; border-radius: 99px; font-size: .6875rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); }
.cm-reel-cap { position: absolute; z-index: 2; left: 14px; right: 60px; bottom: 16px; display: grid; gap: 2px; font-size: .8125rem; color: #fff; }
.cm-side { position: absolute; z-index: 2; right: 10px; bottom: 16px; display: grid; gap: 12px; text-align: center; font-size: 1.125rem; color: #fff; }
.cm-side span { display: grid; } .cm-side b { font-size: .625rem; font-weight: 600; }
.cm-panel { border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(14, 34, 80, .7), rgba(5, 12, 32, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 50px 100px -60px rgba(10, 141, 255, .8); }
.cm-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid rgba(169, 220, 255, .1); color: #fff; }
.cm-head span { padding: 1px 8px; border-radius: 99px; font-size: .75rem; color: var(--muted); background: rgba(169, 220, 255, .08); }
.cm-list { display: grid; gap: 0; padding: 6px 0; }
.cm-c { display: flex; gap: 12px; padding: 14px 20px; transition: background .3s; }
.cm-c:hover { background: rgba(169, 220, 255, .03); }
.cm-pic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #fff; }
.c-a { background: linear-gradient(135deg, #FF8A5B, #FF4D6D); } .c-b { background: linear-gradient(135deg, #34D399, #059669); } .c-c { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.c-d { background: linear-gradient(135deg, #FBBF24, #D97706); } .c-e { background: linear-gradient(135deg, #38BDF8, #2563EB); } .c-me { background: rgba(169, 220, 255, .15); font-size: .625rem; color: #C9D6F0; }
.cm-body { flex: 1; min-width: 0; }
.cm-who { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--muted); }
.cm-who b { color: #fff; font-weight: 700; }
.cm-q { margin-top: 3px; font-size: 1rem; line-height: 1.45; color: #E6EEFC; }
.cm-meta { display: flex; align-items: center; gap: 16px; margin-top: 6px; font-size: .8125rem; color: var(--muted); }
.cm-like::before { content: "♥ "; color: #FF4D6D; }
.cm-more { font-size: .8125rem; font-weight: 700; color: var(--ice); }
.cm-more::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 8px; vertical-align: middle; background: rgba(169, 220, 255, .4); }
.cm-more[aria-expanded="true"] .cm-open, .cm-more[aria-expanded="false"] .cm-close { display: none; }
.cm-reply { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(10, 141, 255, .1); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .2); animation: fbIn .4s var(--ease); }
.cm-logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #071029; box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .5); }
.cm-logo img { width: 20px; height: 20px; }
.cm-tick { width: 14px; height: 14px; border-radius: 50%; background: #0A8DFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cm-a { margin-top: 3px; font-size: .9375rem; line-height: 1.6; color: #DCE6F7; }
.cm-typing { display: none; gap: 4px; padding: 8px 0 4px; }
.cm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); animation: cmDot 1s ease-in-out infinite; }
.cm-typing i:nth-child(2) { animation-delay: .15s; } .cm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cmDot { 50% { transform: translateY(-4px); opacity: .4; } }
.cm-reply.is-typing .cm-typing { display: flex; } .cm-reply.is-typing .cm-a { display: none; }
.cm-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(169, 220, 255, .1); }
.cm-field { flex: 1; padding: 11px 16px; border-radius: 99px; font-size: .875rem; color: var(--muted); background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.cm-input .btn { height: 42px; padding: 0 18px; }

@media (max-width: 900px) {
  /* feed: the facts sit right under the phone */
  .fd-body { flex: none; display: grid; justify-items: center; gap: 14px; }
  .fd-phone { width: min(230px, 56vw); }
  .fd-facts { position: relative; inset: auto; width: 100%; height: 130px; }
  .fd-fact { bottom: auto; top: 0 !important; }
  /* builder: all switches visible, the card a little smaller */
  .bd-stage { gap: 8px; }
  .bd-card { width: min(100%, 250px); padding: 8px; }
  .bd-screen { aspect-ratio: 4 / 3.6; }
  .bd-list { min-height: 0; gap: 4px; }
  .bd-item { display: flex !important; padding: 7px 10px; gap: 10px; }
  .bd-t b { font-size: .9375rem; } .bd-t span { font-size: .8125rem; }
  .bd-sw { width: 36px; height: 22px; } .bd-sw i { width: 16px; height: 16px; }
  .bd-item.is-done .bd-sw i, .bd-item.is-on .bd-sw i { transform: translateX(14px); }
  .cm-box { grid-template-columns: minmax(0, 1fr); }
  .cm-reel { position: relative; top: 0; width: min(100%, 260px); margin: 0 auto; aspect-ratio: 9 / 12; }
}
@media (max-width: 720px) {
  /* the six avatars slide sideways by themselves as you scroll down */
  .av-track { position: relative; }
  .av-stage { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--header-h); }
  .av-row { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; overflow: visible; scroll-snap-type: none; margin: 28px 0 0; padding: 4px 0 10px; will-change: transform; }
  .av-tile { flex: 0 0 52%; min-width: 0; }
  .av-note { margin-top: 18px; }
  .cm-c { padding: 12px 14px; } .cm-q { font-size: .9375rem; }
}
.cm-reply[hidden] { display: none; }
@media (max-width: 900px) { .fd-facts { order: 2; } }
/* computers: the avatars as a carousel. One large in the middle, the ones before and after small and blurred, moving with the scroll */
@media (min-width: 721px) {
  .av-track { position: relative; height: 420svh; }
  .av-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--header-h); }
  .av .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .av .sec-head > p:not(.kicker) { margin-top: 8px; }
  .av-row.is-flow { position: relative; display: block; height: min(58vh, 560px); margin-top: clamp(18px, 3vh, 34px); }
  .av-row.is-flow .av-tile { position: absolute; left: 50%; top: 0; width: calc(min(58vh, 560px) * .5); margin-left: calc(min(58vh, 560px) * -.25);
    transition: none; will-change: transform, filter, opacity; }
  .av-row.is-flow .av-tile:hover { transform: none; }
  .av-row.is-flow .av-job { transition: opacity .3s; }
  .av-row.is-flow .av-tile:not(.is-mid) .av-job { opacity: 0; }
  .av-note { margin-top: 14px; }
}

/* ---------- AI optimization hero: same tool, before and after ---------- */
.cht .cht-3d { left: 0; right: 33%; top: 6%; }
.cht-win { border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, rgba(14, 34, 80, .95), rgba(5, 12, 32, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 70px 130px -50px rgba(10, 141, 255, .75), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.cht-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(169, 220, 255, .12); font-size: .8125rem; font-weight: 700; color: #fff; }
.cht-mode em { font-style: normal; font-weight: 500; color: var(--cyan); }
.cht-timer { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .75rem; background: rgba(255, 107, 138, .14); color: #FF9BB0; transition: background .5s, color .5s; }
.cht-timer i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.cht-body { position: relative; display: grid; align-content: start; gap: 12px; height: 330px; padding: 18px; }
.cht-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .8125rem; line-height: 1.5; }
.cht-msg.me { justify-self: end; color: #fff; background: rgba(10, 141, 255, .35); border-bottom-right-radius: 4px; }
.cht-msg.ai { position: relative; color: #DCE6F7; background: rgba(169, 220, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); border-bottom-left-radius: 4px; }
.cht-flag { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 99px; font-size: .6875rem; font-weight: 700; color: #FF9BB0; background: rgba(255, 107, 138, .14); }
.cht-flag.ok { color: #04130C; background: #3DF0A0; }
.cht-dots { display: none; gap: 4px; padding: 4px 0; }
.cht-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); animation: cmDot 1s ease-in-out infinite; }
.cht-dots i:nth-child(2) { animation-delay: .15s; } .cht-dots i:nth-child(3) { animation-delay: .3s; }
.cht-input { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 10px 10px 16px; border-radius: 14px; font-size: .8125rem; color: var(--muted); background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.cht-send { margin-left: auto; padding: 6px 14px; border-radius: 10px; font-style: normal; font-weight: 700; color: #fff; background: var(--grad); opacity: .35; transition: opacity .4s, box-shadow .4s; }
/* phases: 0 vague prompt, 1 generic answer, 2 your assistant, 3 ready to send */
.cht-body .cht-msg { display: none; }
.cht-stage[data-phase="0"] .cht-msg.me.m0, .cht-stage[data-phase="1"] .m0, .cht-stage[data-phase="2"] .m1, .cht-stage[data-phase="3"] .m1 { display: block; animation: fbIn .45s var(--ease); }
.cht-stage[data-phase="2"] .cht-msg.ai.m1 .cht-txt, .cht-stage[data-phase="2"] .cht-msg.ai.m1 .cht-flag { display: none; }
.cht-stage[data-phase="2"] .cht-msg.ai.m1 .cht-dots { display: flex; }
.cht-bar .m1, .cht-stage[data-phase="2"] .cht-bar .m0, .cht-stage[data-phase="3"] .cht-bar .m0 { display: none; }
.cht-stage[data-phase="2"] .cht-bar .m1, .cht-stage[data-phase="3"] .cht-bar .m1 { display: inline; }
.cht-timer .t1, .cht-stage[data-phase="3"] .cht-timer .t0 { display: none; }
.cht-stage[data-phase="3"] .cht-timer .t1 { display: inline; }
.cht-stage[data-phase="3"] .cht-timer { color: #04130C; background: #3DF0A0; }
.cht-stage[data-phase="3"] .cht-send { opacity: 1; box-shadow: 0 8px 20px -6px rgba(10, 141, 255, .9); }
.cht-stage[data-phase="1"] .cht-msg.ai.m0 { animation: chtShake .5s .6s; }
@keyframes chtShake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.cht-stage[data-phase="3"] .cht-win { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1.5px rgba(61, 240, 160, .5), 0 70px 130px -50px rgba(10, 141, 255, .75); }
.cht .wbh-note { opacity: 0; } .cht-stage[data-phase="3"] ~ * .wbh-note, .cht-stage[data-phase="3"] .wbh-note { opacity: 1; translate: 0 0; }
.cht .wbh-note.n1 { left: 26%; top: 0; } .cht .wbh-note.n2 { left: -2%; top: auto; bottom: 22%; } .cht .wbh-note.n3 { left: 44%; top: auto; bottom: 16%; }
.cht .wbh-rail { right: 30%; }
@media (max-width: 720px) {
  .cht .cht-3d { right: 18%; left: -2%; top: 8%; }
  .cht-body { height: 280px; padding: 12px; } .cht-msg { font-size: .75rem; max-width: 90%; }
  .cht .wbh-note.n1, .cht .wbh-note.n3 { display: none; }
  .cht .wbh-rail { right: 4%; font-size: .625rem; }
  .cht .wbh-bot { right: -14%; height: 70%; }
}

/* ---------- why it matters, hours version: a week of tasks shrinks as AI takes over ---------- */
.hr-track { position: relative; height: 260svh; }
.hr-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 28px; overflow: hidden; }
.hr .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.hr-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(24px, 4vw, 60px); max-width: 1180px; width: 100%; margin: 0 auto; }
.hr-board { padding: 22px; border-radius: 24px; background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(5, 12, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 50px 100px -60px rgba(10, 141, 255, .8); }
.hr-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); }
.hr-mode { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(169, 220, 255, .06); }
.hr-mode i { padding: 3px 10px; border-radius: 99px; font-style: normal; font-weight: 700; font-size: .6875rem; transition: background .4s, color .4s; }
.hr-mode .off { color: #fff; background: rgba(255, 107, 138, .35); }
.hr.is-ai .hr-mode .off { color: var(--muted); background: none; } .hr.is-ai .hr-mode .on { color: #04130C; background: #3DF0A0; }
.hr-rows { display: grid; gap: 14px; margin: 18px 0; padding: 0; list-style: none; }
.hr-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 48px; align-items: center; gap: 14px; font-size: .875rem; color: #DCE6F7; }
.hr-bar { position: relative; height: 14px; border-radius: 7px; background: rgba(169, 220, 255, .08); overflow: hidden; }
.hr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.hr-old { width: calc(var(--wb, 1) * 100%); background: linear-gradient(90deg, #FF6B8A, #FF9BB0); opacity: calc(.9 - var(--e, 0) * .7); }
.hr-ai { width: calc(var(--w, 1) * 100%); opacity: var(--e, 0); background: var(--grad); box-shadow: 0 0 10px rgba(47, 212, 255, .6); z-index: 1; }
.hr-val { text-align: right; font-family: var(--f-display); color: #fff; font-variant-numeric: tabular-nums; } .hr-val b { font-size: 1.125rem; }
.hr-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(169, 220, 255, .1); font-size: .875rem; color: var(--muted); }
.hr-sum { font-family: var(--f-display); font-size: 2.25rem; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.hr-saved { margin-left: auto; padding: 5px 12px; border-radius: 99px; font-weight: 700; color: #04130C; background: #3DF0A0; box-shadow: 0 0 16px rgba(61, 240, 160, .5); }
.hr-saved b { font-family: var(--f-display); }
.hr-facts { position: relative; min-height: 170px; margin: 0; padding: 0; list-style: none; }
.hr-fact { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; border-radius: 20px;
  background: linear-gradient(128deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .16);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.hr-fact .tst-num { grid-row: span 2; } .hr-fact .tst-num b { font-size: 2.75rem; }
.hr-fact.is-on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .hr-track { height: 240svh; }
  .hr-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); gap: 12px; }
  .hr .sec-head h2 { font-size: 1.75rem; } .hr .sec-head > p:not(.kicker) { display: none; }
  .hr-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hr-board { padding: 16px; } .hr-rows { gap: 10px; margin: 12px 0; }
  .hr-row { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 4px; font-size: .8125rem; }
  .hr-bar { grid-column: 1 / -1; grid-row: 2; height: 10px; }
  .hr-sum { font-size: 1.75rem; }
  .hr-facts { min-height: 140px; } .hr-fact { padding: 14px; } .hr-fact .tst-num b { font-size: 2rem; } .hr-fact .tst-text { font-size: .875rem; }
}

/* ---------- what is inside, terminal version ---------- */
.tm-track { position: relative; height: 340svh; }
.tm-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 28px; overflow: hidden; }
.tm-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 4vw, 60px); max-width: 1180px; width: 100%; margin: 0 auto; }
.tm-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tm-step { display: flex; gap: 14px; padding: 12px 14px; border-radius: 16px; opacity: .45; cursor: pointer; transition: opacity .4s, background .4s, box-shadow .4s; }
.tm-n { flex: none; font-family: var(--f-display); font-weight: 700; font-size: .875rem; color: var(--muted); padding-top: 2px; }
.tm-t { display: grid; } .tm-t b { font-family: var(--f-display); font-size: 1.0625rem; color: #fff; }
.tm-t span { max-height: 0; overflow: hidden; opacity: 0; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.tm-step.is-done { opacity: .85; } .tm-step.is-done .tm-n { color: #3DF0A0; }
.tm-step.is-on { opacity: 1; background: linear-gradient(128deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(47, 212, 255, .25); }
.tm-step.is-on .tm-n { color: var(--cyan); } .tm-step.is-on .tm-t span { max-height: 6em; opacity: 1; margin-top: 4px; }
.tm-win { border-radius: 18px; overflow: hidden; background: #030817; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18), 0 60px 120px -50px rgba(10, 141, 255, .8); }
.tm-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; font-size: .75rem; color: var(--muted); background: rgba(169, 220, 255, .05); border-bottom: 1px solid rgba(169, 220, 255, .1); }
.tm-bar > i { width: 10px; height: 10px; border-radius: 50%; } .tm-bar > i:nth-child(1) { background: #FF6B8A; } .tm-bar > i:nth-child(2) { background: #FFC56B; } .tm-bar > i:nth-child(3) { background: #3DF0A0; }
.tm-bar span { margin-left: 10px; }
.tm-screen { min-height: 340px; padding: 18px 20px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.6; }
.tm-line { display: none; margin-bottom: 12px; }
.tm-cmd { color: #7BE3FF; } .tm-out { color: #3DF0A0; opacity: 0; transition: opacity .4s .5s; }
.tm-caret { display: inline-block; width: 8px; height: 14px; margin-left: 4px; vertical-align: -2px; background: #7BE3FF; animation: tmBlink 1s steps(1) infinite; }
@keyframes tmBlink { 50% { opacity: 0; } }
.tm-line.is-shown { display: block; } .tm-line.is-shown .tm-out { opacity: 1; } .tm-line.is-shown:not(.is-last) .tm-caret { display: none; }
.tm-line.is-last .tm-cmd { overflow: hidden; white-space: nowrap; animation: tmType .6s steps(30) both; }
@keyframes tmType { from { max-width: 0; } to { max-width: 100%; } }
.tm-done { display: none; margin-top: 16px; padding: 10px 14px; border-radius: 10px; color: #fff; background: rgba(61, 240, 160, .12); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .4); }
.tm-stage[data-on="4"] .tm-done { display: block; animation: fbIn .5s var(--ease); }
@media (max-width: 900px) {
  .tm-track { height: 320svh; }
  .tm-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); gap: 10px; }
  .tm .sec-head h2 { font-size: 1.75rem; }
  .tm-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tm-win { order: -1; } .tm-screen { min-height: 190px; padding: 12px; font-size: .6875rem; }
  .tm-step { padding: 7px 10px; } .tm-t b { font-size: .9375rem; } .tm-t span { font-size: .8125rem; }
}

/* ---------- questions as a search box ---------- */
.sr { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.sr-box { max-width: 820px; margin: clamp(30px, 4vw, 48px) auto 0; }
.sr-field { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 20px; border-radius: 999px;
  background: linear-gradient(128deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%), rgba(8, 22, 54, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(47, 212, 255, .3), 0 30px 60px -30px rgba(10, 141, 255, .8); }
.sr-field input { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: none; font: 500 1.0625rem var(--f-body); color: #fff; }
.sr-field input::placeholder { color: #8A9CC2; }
.sr-count { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.sr-ico { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cyan); }
.sr-ico::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 7px; height: 2px; border-radius: 2px; background: var(--cyan); rotate: 45deg; }
.sr-list { display: grid; gap: 6px; margin-top: 16px; }
.sr-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border-radius: 16px; text-align: left; font-size: 1rem; font-weight: 600; color: #E6EEFC; transition: background .25s; }
.sr-q:hover { background: rgba(169, 220, 255, .05); }
.sr-q .sr-ico { width: 14px; height: 14px; opacity: .55; } .sr-q .sr-ico::after { width: 5px; right: -3px; bottom: -2px; }
.sr-q span:nth-child(2) { flex: 1; }
.sr-arrow { width: 9px; height: 9px; border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice); rotate: -45deg; transition: rotate .3s var(--ease); }
.sr-q[aria-expanded="true"] .sr-arrow { rotate: 45deg; }
.sr-q[aria-expanded="true"] { color: #fff; }
.sr-a { margin: 2px 6px 10px 46px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(128deg, rgba(47, 212, 255, .1), rgba(43, 91, 255, .06)); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .28); animation: fbIn .4s var(--ease); }
.sr-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.sr-spark { width: 12px; height: 12px; background: var(--grad); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.sr-a p:last-child { color: #DCE6F7; line-height: 1.65; }
.sr-a[hidden] { display: none; }
.sr mark { padding: 0 2px; border-radius: 3px; color: #fff; background: rgba(47, 212, 255, .35); }
.sr-none { margin-top: 16px; text-align: center; color: #AFC0DE; }
.sr-none button { font-weight: 700; color: var(--ice); text-decoration: underline; }
@media (max-width: 720px) { .sr-a { margin-left: 6px; } .sr-q { font-size: .9375rem; padding: 13px 12px; } .sr-count { display: none; } }
@media (prefers-reduced-motion: reduce) { .hr-track, .tm-track { height: auto; } .hr-stage, .tm-stage { position: relative; height: auto; } }
.wbh-bot.vr { aspect-ratio: 887 / 1499; height: 88%; right: -2%; }
.wbh-bot.vr .wbh-palm { left: 4%; top: 3.5%; }
.cht .cht-3d { right: 36%; }
@media (max-width: 720px) { .wbh-bot.vr { right: -16%; height: 64%; } }
.cht-timer { white-space: nowrap; flex: none; }

/* ---------- Google Ads: a bright search page inside the dark site ---------- */
.srp { --g-blue: #4285F4; --g-red: #EA4335; --g-yellow: #FBBC05; --g-green: #34A853; }
.srp .srp-3d { left: 0; right: 30%; top: 4%; }
.srp-win { position: relative; border-radius: 18px; overflow: hidden; color: #202124; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 70px 130px -50px rgba(10, 141, 255, .8), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.srp-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px 10px; }
.srp-dots { display: flex; gap: 4px; } .srp-dots i { width: 10px; height: 10px; border-radius: 50%; }
.srp-dots i:nth-child(1) { background: var(--g-blue); } .srp-dots i:nth-child(2) { background: var(--g-red); } .srp-dots i:nth-child(3) { background: var(--g-yellow); } .srp-dots i:nth-child(4) { background: var(--g-green); }
.srp-box { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 99px; font-size: .875rem; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.srp-box .sr-ico { box-shadow: inset 0 0 0 2px #9AA0A6; width: 14px; height: 14px; } .srp-box .sr-ico::after { background: #9AA0A6; width: 5px; right: -3px; bottom: -2px; }
.srp-q { white-space: nowrap; overflow: hidden; }
.srp-caret { width: 1.5px; height: 16px; background: var(--g-blue); animation: tmBlink 1s steps(1) infinite; }
.srp-mic { margin-left: auto; width: 10px; height: 16px; border-radius: 5px; background: var(--g-blue); box-shadow: 0 0 0 0 transparent; }
.srp-tabs { display: flex; gap: 20px; padding: 0 18px 0 70px; font-size: .75rem; color: #5F6368; border-bottom: 1px solid #ECEDEF; }
.srp-tabs b { padding-bottom: 8px; color: var(--g-blue); border-bottom: 2px solid var(--g-blue); }
.srp-res { position: relative; display: grid; gap: 16px; min-height: 300px; padding: 16px 18px 20px 70px; }
.srp-ad, .sp-org { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.srp-stage:not([data-phase="0"]) .srp-ad, .srp-stage:not([data-phase="0"]) .sp-org { opacity: 1; transform: none; }
.srp-stage:not([data-phase="0"]) .sp-org:nth-of-type(2) { transition-delay: .15s; } .srp-stage:not([data-phase="0"]) .sp-org:nth-of-type(3) { transition-delay: .3s; }
.srp-ad { position: relative; margin: -8px -10px 0; padding: 8px 10px; border-radius: 12px; transition: opacity .5s, transform .6s var(--ease), background .4s, box-shadow .4s; }
.srp-stage[data-phase="1"] .srp-ad, .srp-stage[data-phase="2"] .srp-ad { background: rgba(66, 133, 244, .07); box-shadow: 0 0 0 2px rgba(66, 133, 244, .5); }
.sp-site { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: #202124; }
.sp-site i { width: 18px; height: 18px; border-radius: 50%; background: #E8EAED; } .sp-site i.me { background: var(--grad); }
.srp-spons { font-size: .75rem; font-weight: 700; }
.sp-h { margin-top: 4px; font-size: 1.0625rem; line-height: 1.3; color: #1A0DAB; }
.sp-h.me { font-weight: 500; }
.srp-stage[data-phase="2"] .sp-h.me, .srp-stage[data-phase="3"] .sp-h.me { text-decoration: underline; color: #681DA8; }
.sp-t { margin-top: 3px; font-size: .8125rem; line-height: 1.45; color: #4D5156; }
.sp-d { height: 8px; width: 80%; margin-top: 8px; border-radius: 4px; background: #ECEDEF; }
.srp-links { display: flex; gap: 14px; margin-top: 6px; font-size: .8125rem; color: #1A0DAB; }
.sp-org { filter: saturate(.5); opacity: .9; } .srp-stage:not([data-phase="0"]) .sp-org { opacity: .55; }
.srp-cursor { position: absolute; left: 60%; top: 120%; width: 18px; opacity: 0; transition: left .9s var(--ease), top .9s var(--ease), opacity .3s; }
.srp-cursor svg { width: 18px; fill: #202124; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.srp-stage[data-phase="1"] .srp-cursor { opacity: 1; left: 60%; top: 90%; }
.srp-stage[data-phase="2"] .srp-cursor { opacity: 1; left: 40%; top: 46%; animation: srpClick .3s .9s; }
@keyframes srpClick { 50% { scale: .8; } }
.srp-call { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 99px; white-space: nowrap; color: #fff; font-size: .75rem;
  background: #0F9D58; box-shadow: 0 20px 40px -10px rgba(15, 157, 88, .7); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .4s, transform .6s var(--ease); }
.srp-call b { display: block; font-size: .875rem; }
.srp-ring { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.srp-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: plRing 1.2s ease-out infinite; }
.srp-ring::before { content: ""; position: absolute; left: 10px; top: 9px; width: 14px; height: 16px; background: #0F9D58; clip-path: polygon(0 10%, 30% 0, 45% 30%, 30% 45%, 55% 70%, 70% 55%, 100% 70%, 90% 100%, 60% 100%, 0 40%); }
.srp-stage[data-phase="3"] .srp-call { opacity: 1; transform: none; }
.srp-cpl { position: absolute; z-index: 5; right: -14%; top: 30%; display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; color: #DCE6F7; font-size: .8125rem;
  background: linear-gradient(128deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), rgba(10, 26, 62, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.srp-cpl b { font-family: var(--f-display); font-size: 2rem; line-height: 1; letter-spacing: -.04em; color: #fff; }
.srp-to, .srp-stage[data-phase="3"] .srp-from { display: none; } .srp-stage[data-phase="3"] .srp-to { display: block; color: #3DF0A0; }
.srp-from { color: #FF9BB0 !important; }
.srp-down { justify-self: start; padding: 2px 8px; border-radius: 99px; font-weight: 700; color: #04130C; background: #3DF0A0; opacity: 0; transition: opacity .4s; }
.srp-stage[data-phase="3"] .srp-down { opacity: 1; }
.srp .wbh-note.n1 { left: 18%; top: -2%; } .srp .wbh-note.n2 { left: -2%; top: auto; bottom: 18%; }
.srp .wbh-rail { right: 30%; }
@media (max-width: 720px) {
  .srp .srp-3d { right: 14%; left: -2%; top: 6%; }
  .srp-res { padding-left: 16px; min-height: 250px; } .srp-tabs { padding-left: 16px; }
  .sp-h { font-size: .9375rem; } .sp-t, .srp-links { font-size: .6875rem; }
  .srp-cpl { right: -8%; top: auto; bottom: 18%; padding: 10px 12px; } .srp-cpl b { font-size: 1.375rem; }
  .srp .wbh-note { display: none; } .srp .wbh-rail { right: 4%; font-size: .625rem; }
  .srp .wbh-bot { right: -16%; height: 64%; }
}

/* ---------- why it matters: the budget bar ---------- */
.bg-track { position: relative; height: 240svh; }
.bg-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 28px; overflow: hidden; }
.bg .sec-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.bg-card { width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(18px, 2.5vw, 30px); border-radius: 26px; background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(5, 12, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 50px 100px -60px rgba(10, 141, 255, .8); }
.bg-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.bg-title { color: #C9D6F0; } .bg-title b { font-family: var(--f-display); font-size: 1.5rem; color: #fff; margin-left: 6px; }
.bg-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(169, 220, 255, .06); }
.bg-tabs i { padding: 4px 12px; border-radius: 99px; font-style: normal; font-size: .75rem; font-weight: 700; transition: background .4s, color .4s; }
.bg-tabs .t0 { color: #fff; background: rgba(234, 67, 53, .45); } .bg.is-ok .bg-tabs .t0 { color: var(--muted); background: none; } .bg.is-ok .bg-tabs .t1 { color: #04130C; background: #3DF0A0; }
.bg-bar { display: flex; gap: 3px; height: 54px; margin: 22px 0; }
.bg-seg { flex-basis: 0; flex-grow: var(--v, 1); min-width: 0; border-radius: 10px; transition: flex-grow .15s linear; }
.bg-seg.s0, .bg-key.s0 .bg-dot { background: #EA4335; } .bg-seg.s1, .bg-key.s1 .bg-dot { background: #FB8C3C; } .bg-seg.s2, .bg-key.s2 .bg-dot { background: #FBBC05; } .bg-seg.s3, .bg-key.s3 .bg-dot { background: #8A93A8; }
.bg-seg.good, .bg-key.good .bg-dot { background: linear-gradient(90deg, #34A853, #3DF0A0); box-shadow: 0 0 20px rgba(61, 240, 160, .45); }
.bg-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.bg-legend { display: grid; gap: 10px; }
.bg-key { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: #DCE6F7; }
.bg-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.bg-k { flex: 1; } .bg-key b { font-family: var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.bg-key:not(.good) b { color: #FF9BB0; } .bg-key.good b { color: #3DF0A0; }
.bg-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bg-kpi { padding: 16px; border-radius: 18px; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.bg-kpi p { font-size: .8125rem; color: var(--muted); }
.bg-kpi b { display: block; margin-top: 4px; font-family: var(--f-display); font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.bg.is-ok .bg-kpi b { color: #3DF0A0; }
@media (max-width: 900px) {
  .bg-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); gap: 12px; }
  .bg .sec-head h2 { font-size: 1.75rem; }
  .bg-bar { height: 36px; margin: 14px 0; } .bg-cols { grid-template-columns: minmax(0, 1fr); }
  .bg-key { font-size: .8125rem; } .bg-kpi b { font-size: 1.875rem; } .bg-kpi { padding: 12px; }
}

/* ---------- what is inside: account score gauge ---------- */
.sc-track { position: relative; height: 340svh; }
.sc-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 34px); padding: calc(var(--header-h) + 4px) var(--gutter) 28px; overflow: hidden; }
.sc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 60px); max-width: 1180px; width: 100%; margin: 0 auto; }
.sc-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-step { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 16px; opacity: .5; cursor: pointer; transition: opacity .4s, background .4s, box-shadow .4s; }
.sc-chk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .35); transition: background .3s, box-shadow .3s; }
.sc-chk svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); }
.sc-t { flex: 1; display: grid; } .sc-t b { font-family: var(--f-display); font-size: 1.0625rem; color: #fff; }
.sc-t span { max-height: 0; overflow: hidden; opacity: 0; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.sc-pts { flex: none; padding: 3px 8px; border-radius: 99px; font-size: .75rem; font-weight: 700; color: #3DF0A0; background: rgba(61, 240, 160, .12); opacity: 0; transition: opacity .4s; }
.sc-step.is-done, .sc-step.is-on { opacity: 1; }
.sc-step.is-done .sc-chk, .sc-step.is-on .sc-chk { background: #34A853; box-shadow: none; } .sc-step.is-done .sc-chk svg, .sc-step.is-on .sc-chk svg { opacity: 1; transform: none; }
.sc-step.is-done .sc-pts, .sc-step.is-on .sc-pts { opacity: 1; }
.sc-step.is-on { background: linear-gradient(128deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), rgba(10, 26, 62, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(61, 240, 160, .3); }
.sc-step.is-on .sc-t span { max-height: 6em; opacity: 1; margin-top: 4px; }
.sc-panel { padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(14, 34, 80, .85), rgba(5, 12, 32, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 60px 120px -50px rgba(10, 141, 255, .8); }
.sc-gauge { position: relative; max-width: 360px; margin: 0 auto; }
.sc-gauge svg { width: 100%; overflow: visible; }
.sc-track-arc, .sc-fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.sc-track-arc { stroke: rgba(169, 220, 255, .12); }
.sc-fill { stroke: url(#none); stroke: var(--sc-col, #EA4335); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--s, 30)); transition: stroke-dashoffset .8s var(--ease), stroke .6s; filter: drop-shadow(0 0 8px var(--sc-col, #EA4335)); }
.sc-val { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font-family: var(--f-display); font-size: 1.5rem; color: var(--muted); }
.sc-val b { font-size: 3.5rem; letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; }
.sc-lbl { position: absolute; left: 0; right: 0; bottom: -4%; text-align: center; font-size: .8125rem; color: var(--muted); }
.sc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
.sc-kpi { padding: 12px; border-radius: 14px; text-align: center; background: rgba(169, 220, 255, .06); }
.sc-kpi p { font-size: .75rem; color: var(--muted); }
.sc-kpi b { display: block; margin-top: 4px; font-family: var(--f-display); font-size: 1.375rem; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .sc-track { height: 320svh; }
  .sc-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); gap: 10px; }
  .sc .sec-head h2 { font-size: 1.75rem; }
  .sc-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sc-panel { order: -1; padding: 14px; } .sc-gauge { max-width: 210px; } .sc-val b { font-size: 2.25rem; }
  .sc-kpis { margin-top: 14px; } .sc-kpi { padding: 8px; } .sc-kpi b { font-size: 1rem; } .sc-kpi p { font-size: .625rem; }
  .sc-step { padding: 7px 10px; } .sc-t b { font-size: .9375rem; } .sc-t span { font-size: .8125rem; }
}

/* ---------- questions: People also ask ---------- */
.pa { padding: clamp(60px, 8vw, 120px) var(--gutter) 0; }
.pa-box { max-width: 780px; margin: clamp(30px, 4vw, 48px) auto 0; padding: 8px 22px; border-radius: 22px; color: #202124; background: #fff; box-shadow: 0 50px 100px -50px rgba(10, 141, 255, .8); }
.pa-item { border-bottom: 1px solid #ECEDEF; animation: paIn .5s var(--ease); }
@keyframes paIn { from { opacity: 0; transform: translateY(-8px); } }
.pa-item[hidden] { display: none; }
.pa-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 2px; text-align: left; font-size: 1.0625rem; color: #202124; }
.pa-q span:first-child { flex: 1; }
.pa-chev { width: 9px; height: 9px; border-right: 2px solid #5F6368; border-bottom: 2px solid #5F6368; rotate: 45deg; transition: rotate .3s var(--ease); }
.pa-q[aria-expanded="true"] .pa-chev { rotate: 225deg; }
.pa-a { padding: 0 2px 18px; animation: fbIn .4s var(--ease); }
.pa-a[hidden] { display: none; }
.pa-a p:first-child { font-size: .9688rem; line-height: 1.6; color: #202124; }
.pa-src { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; color: #202124; }
.pa-src span:last-child { color: #5F6368; }
.pa-fav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #071029; }
.pa-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px 12px; color: #5F6368; }
.pa-foot .btn-ghost { color: #1A73E8; box-shadow: inset 0 0 0 1px #DADCE0; background: #fff; }
@media (max-width: 720px) { .pa-box { padding: 6px 14px; } .pa-q { font-size: .9688rem; } }
@media (prefers-reduced-motion: reduce) { .bg-track, .sc-track { height: auto; } .bg-stage, .sc-stage { position: relative; height: auto; } }

/* ---------- Google Ads hero: a search home page. The searches are the problems, the answer is us. Google-style widgets float around ---------- */
.gsh { display: block; max-width: none; text-align: center; --mx: 0; --my: 0;
  min-height: min(100svh, 940px); padding-top: calc(var(--header-h) + clamp(12px, 2.4vw, 30px)); }
.gsh::before { right: auto; left: 50%; top: 14%; translate: -50% 0; width: min(1100px, 100vw); height: 70%; }
.gsh-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; }
.gsh .crumbs ol { justify-content: center; margin-bottom: 18px; }
.gsh-brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 13px; border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--mist);
  background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px var(--line-strong); }
.gsh-dots { display: inline-flex; gap: 5px; }
.gsh-dots i { width: 9px; height: 9px; border-radius: 50%; background: #4285F4; animation: gshHop 2.6s var(--ease) infinite; }
.gsh-dots i:nth-child(2) { background: #EA4335; animation-delay: .12s; }
.gsh-dots i:nth-child(3) { background: #FBBC05; animation-delay: .24s; }
.gsh-dots i:nth-child(4) { background: #34A853; animation-delay: .36s; }
@keyframes gshHop { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-5px); } }
.gsh h1 { margin-top: 18px; font-size: clamp(2.5rem, 4.9vw, 4.5rem); }
.gsh .sp-lead { margin: 16px auto 0; max-width: 600px; text-wrap: balance; }
.gsh-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the search bar: white like the real thing, a four-color glow around it */
.gsh-search { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 660px; height: 62px; margin-top: 30px; padding: 0 18px 0 22px;
  border-radius: 999px; text-align: left; color: #202124; background: #fff; box-shadow: 0 24px 60px -24px rgba(10, 141, 255, .9); }
.gsh-search::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; opacity: .6; filter: blur(7px);
  background: conic-gradient(from var(--spin), #4285F4, #EA4335, #FBBC05, #34A853, #4285F4); animation: ringSpin 5s linear infinite; transition: opacity .4s, filter .4s; }
.gsh-search.is-go::before { opacity: 1; filter: blur(12px); }
.gsh-ico { flex: none; width: 21px; height: 21px; fill: none; stroke: #5F6368; stroke-width: 2.2; stroke-linecap: round; }
.gsh-qw { display: flex; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
.gsh-q { white-space: nowrap; font-size: 1.125rem; }
.gsh-caret { flex: none; width: 2px; height: 24px; margin-left: 2px; background: #1A73E8; animation: gshBlink 1s steps(1) infinite; }
@keyframes gshBlink { 50% { opacity: 0; } }
.gsh-mic { flex: none; display: flex; align-items: center; gap: 3px; height: 22px; }
.gsh-mic i { width: 4px; height: 8px; border-radius: 4px; background: #4285F4; animation: gshEq 1.1s ease-in-out infinite; }
.gsh-mic i:nth-child(2) { background: #EA4335; animation-delay: .15s; }
.gsh-mic i:nth-child(3) { background: #FBBC05; animation-delay: .3s; }
.gsh-mic i:nth-child(4) { background: #34A853; animation-delay: .45s; }
@keyframes gshEq { 50% { height: 20px; } }

/* the answer under the bar: it is us */
.gsh-ans { display: grid; width: 100%; max-width: 660px; margin-top: 14px; text-align: left; }
.gsh-a { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 18px; font-size: .9688rem; line-height: 1.55; color: #DCE6F7;
  background: rgba(8, 20, 48, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .5s var(--ease); }
.gsh-a.is-on { opacity: 1; transform: none; }
.gsh-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 1px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--grad); }
.gsh-tag img { width: 14px; height: 14px; filter: brightness(10); }
.gsh .qq { width: 100%; max-width: 660px; margin: 20px auto 0; text-align: left; }
.gsh .qq-note { text-align: center; }
.gsh-go { display: none; }
.gsh .sp-trust { justify-content: center; margin-top: 20px; }

/* the widgets: glass cards that float around and lean toward the mouse */
.gsh-wid { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1400px; }
.gw { position: absolute; width: clamp(196px, 16vw, 240px); --d: 1; --ry: 16deg; transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx) * var(--d) * 46px), calc(var(--my) * var(--d) * 34px), 0) rotateY(calc(var(--ry) + var(--mx) * 8deg)) rotateX(calc(var(--my) * -6deg)); }
.gw.w1 { left: max(3vw, calc(50% - 690px)); top: 27%; --d: 1.2; }
.gw.w2 { right: max(5.5vw, calc(50% - 670px)); top: 23%; --ry: -16deg; --d: .9; }
.gw.w3 { left: max(4.5vw, calc(50% - 650px)); top: 61%; --d: .8; }
.gw.w4 { right: max(6.5vw, calc(50% - 640px)); top: 60%; --ry: -16deg; --d: 1.1; }
.gw-in { --hc: #4285F4; padding: 15px; border-radius: 20px; text-align: left; color: var(--mist);
  background: linear-gradient(140deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 50%), rgba(9, 22, 52, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 30px 60px -28px rgba(0, 0, 0, .85);
  animation: gwIn .9s var(--ease) both, gwBob 7s ease-in-out 1.5s infinite; transition: scale .5s var(--ease), box-shadow .5s; }
.w1 .gw-in { animation-delay: .35s, 1.6s; --hc: #34A853; }
.w2 .gw-in { animation-delay: .5s, 2.6s; --hc: #FBBC05; }
.w3 .gw-in { animation-delay: .65s, 3.4s; --hc: #EA4335; }
.w4 .gw-in { animation-delay: .8s, 2.1s; --hc: #4285F4; }
@keyframes gwIn { from { opacity: 0; transform: translateY(34px) scale(.9); } }
@keyframes gwBob { 50% { translate: 0 -10px; } }
.gsh[data-q="0"] .w2 .gw-in, .gsh[data-q="1"] .w3 .gw-in, .gsh[data-q="2"] .w4 .gw-in, .gsh[data-q="3"] .w1 .gw-in {
  scale: 1.07; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1.5px var(--hc), 0 0 46px -8px var(--hc), 0 30px 60px -28px rgba(0, 0, 0, .85); }
.gw-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); }
.gw-h span:first-child { color: #DCE6F7; font-weight: 700; }
.gw-live { display: inline-flex; align-items: center; gap: 5px; font-style: normal; color: #34A853; font-weight: 700; }
.gw-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: gshBlink 1.4s steps(1) infinite; }
.gw-n { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
/* 1: stock style, cost per lead going down */
.gw-big { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.gw-big b { font-size: 2.125rem; letter-spacing: -.03em; }
.gw-chg { padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #34A853; background: rgba(52, 168, 83, .14); }
.gw-spark { display: block; width: 100%; height: 56px; margin-top: 8px; overflow: visible; }
.gw-area { fill: url(#gwg); }
.gw-line { fill: none; stroke: #34A853; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gwDraw 1.8s .9s var(--ease) forwards; vector-effect: non-scaling-stroke; }
@keyframes gwDraw { to { stroke-dashoffset: 0; } }
.gw-tabs { display: flex; gap: 4px; margin-top: 8px; font-size: .6875rem; color: var(--muted); }
.gw-tabs > * { padding: 2px 8px; border-radius: 999px; }
.gw-tabs b { color: #8AB4F8; background: rgba(66, 133, 244, .16); }
/* 2: weather style, wasted spend clearing up */
.gw-now { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gw-sun { width: 40px; height: 40px; flex: none; }
.gw-sun svg { width: 100%; height: 100%; animation: gwSpin 14s linear infinite; }
@keyframes gwSpin { to { transform: rotate(360deg); } }
.gw-now b { font-size: 2.125rem; letter-spacing: -.03em; }
.gw-sky { display: flex; flex-direction: column; font-size: .8125rem; font-weight: 700; line-height: 1.25; }
.gw-sky small { font-size: .6875rem; font-weight: 500; color: var(--muted); }
.gw-fc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 12px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line); text-align: center; }
.gw-fc li { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .6875rem; color: var(--muted); }
.gw-fc svg { width: 22px; height: 22px; }
.gw-fc b { color: #DCE6F7; font-size: .6875rem; }
/* 3: maps style, your business and the calls */
.gw-map { position: relative; height: 84px; margin: -3px -3px 0; border-radius: 13px; overflow: hidden; background: #1C2A48; }
.gw-map i { position: absolute; display: block; }
.gw-park { left: 8%; top: 14%; width: 34%; height: 46%; border-radius: 40% 60% 50% 50%; background: #1F4D3A; }
.gw-water { right: -10%; bottom: -30%; width: 46%; height: 80%; border-radius: 50%; background: #1A3D6E; }
.gw-road { height: 5px; width: 140%; left: -20%; background: #3A4A6C; }
.gw-road.a { top: 62%; transform: rotate(-8deg); }
.gw-road.b { top: 30%; transform: rotate(14deg); background: #C99A2E; height: 4px; opacity: .8; }
.gw-road.c { top: 0; left: 58%; width: 5px; height: 100%; transform: rotate(10deg); }
.gw-pin { position: absolute; left: 50%; top: 18%; width: 22px; height: 30px; margin-left: -11px; animation: gwPin 2.4s var(--ease) infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); }
@keyframes gwPin { 0%, 70%, 100% { transform: none; } 20% { transform: translateY(-8px); } 40% { transform: translateY(0) scale(1.05, .95); } }
.gw-ripple { position: absolute; left: 50%; top: 66%; width: 30px; height: 12px; margin: -6px 0 0 -15px; border-radius: 50%; border: 2px solid rgba(234, 67, 53, .7); animation: gwRip 2.4s ease-out infinite; }
@keyframes gwRip { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.gw-name { margin-top: 10px; font-weight: 700; font-size: .9375rem; }
.gw-rate { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .75rem; color: #DCE6F7; }
.gw-stars { color: #FBBC05; letter-spacing: 1px; }
.gw-rate em { font-style: normal; color: #34A853; font-weight: 700; }
.gw-calls { margin-top: 8px; font-size: .75rem; color: var(--muted); }
.gw-calls b { margin-right: 4px; font-size: 1.25rem; color: var(--mist); }
.gw-btns { display: flex; gap: 5px; margin-top: 8px; }
.gw-btns span { flex: 1; padding: 5px 0; border-radius: 999px; text-align: center; font-size: .6875rem; font-weight: 700; color: #8AB4F8; box-shadow: inset 0 0 0 1px rgba(138, 180, 248, .4); }
.gw-btns span:first-child { color: #0B1A3A; background: #8AB4F8; }
/* 4: calculator, same budget, more leads */
.gw-disp { margin-top: 8px; padding: 10px 12px; border-radius: 12px; text-align: right; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line); }
.gw-disp small { display: block; font-size: .75rem; color: var(--muted); }
.gw-disp p { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; }
.gw-disp b { font-size: 2rem; letter-spacing: -.03em; }
.gw-disp em { font-style: normal; font-size: .8125rem; color: #34A853; font-weight: 700; }
.gw-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.gw-keys i { display: grid; place-items: center; height: 22px; border-radius: 8px; font-style: normal; font-size: .75rem; color: #C9D6F0; background: rgba(255, 255, 255, .06); }
.gw-keys i:nth-child(4n) { color: #8AB4F8; background: rgba(66, 133, 244, .14); }
.gw-keys .eq { color: #fff !important; background: #4285F4 !important; animation: gwKey 4s ease-in-out infinite; }
@keyframes gwKey { 0%, 86%, 100% { transform: none; } 90% { transform: scale(.86); filter: brightness(1.4); } }

@media (max-width: 1400px) { .gsh-in { max-width: 700px; } .gsh h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); } }
@media (max-width: 1180px) {
  .gsh-wid { position: relative; inset: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 50px auto 0; perspective: none; }
  .gw { position: relative; left: auto !important; right: auto !important; top: auto !important; width: auto; transform: none; }
}
@media (max-width: 720px) {
  .gsh { text-align: center; }
  .gsh h1 { font-size: 2.375rem; }
  .gsh .sp-lead { display: none; }
  .gsh-search { height: 54px; margin-top: 22px; padding: 0 14px 0 18px; gap: 10px; }
  .gsh-q { font-size: 1rem; }
  .gsh-a { padding: 12px 14px; font-size: .875rem; flex-direction: column; gap: 6px; }
  .gsh .qq { display: none; }
  .gsh-go { display: inline-flex; justify-content: center; width: 100%; margin-top: 18px; }
  .gsh-wid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
  .gw-in { padding: 12px; border-radius: 16px; }
  .gw-fc, .gw-keys, .gw-tabs, .gw-btns { display: none; }
  .gw-big b, .gw-now b, .gw-disp b { font-size: 1.625rem; }
  .gw-sun { width: 30px; height: 30px; }
  .gw-sky small { display: none; }
  .gsh[data-q] .gw-in { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gsh-dots i, .gsh-mic i, .gsh-caret, .gsh-search::before, .gw-in, .gw-sun svg, .gw-pin, .gw-ripple, .gw-keys .eq { animation: none !important; }
  .gw-line { animation: none; stroke-dashoffset: 0; }
}

/* ---------- no surprises: the monthly receipt prints as you scroll, a stamp lands at the end ---------- */
.rcs { padding-top: clamp(30px, 4vw, 60px); }
.rcs-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; gap: clamp(30px, 6vw, 90px); max-width: 1160px; margin: 0 auto; }
.rcs-text { position: sticky; top: calc(var(--header-h) + 60px); }
.rcs-text h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.rcs-text > p:not(.kicker) { margin-top: 16px; max-width: 460px; font-size: 1.0625rem; line-height: 1.65; color: #C9D6F0; }
.rcs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.rcs-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--mist);
  background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rcs-chips svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; fill: none; stroke: #34A853; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: rgba(52, 168, 83, .16); }
.rc { --p: 0; position: relative; max-width: 470px; width: 100%; margin: 0 auto; }
.rc-printer { position: relative; z-index: 2; height: 54px; border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, #1B2C55, #0B1838); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 24px 40px -20px rgba(0, 0, 0, .9); }
.rc-slot { position: absolute; left: 6%; right: 6%; bottom: 12px; height: 6px; border-radius: 6px; background: #020713; box-shadow: 0 0 0 1px rgba(47, 212, 255, .25), 0 0 18px rgba(47, 212, 255, .45); }
.rc-led { position: absolute; right: 22px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #34A853; box-shadow: 0 0 10px #34A853; }
.rc.is-printing .rc-led { background: #FBBC05; box-shadow: 0 0 10px #FBBC05; animation: gshBlink .5s steps(1) infinite; }
.rc-paper { position: relative; z-index: 1; margin: -18px 6% 0; padding: 40px 26px 30px; color: #1D2433;
  background: linear-gradient(180deg, #E9EEF7 0, #FBFCFE 26px) no-repeat, #FBFCFE; border-radius: 0 0 4px 4px;
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); translate: 0 calc((1 - var(--p)) * -20px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.rc-rv { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.rc-rv.is-on { opacity: 1; transform: none; }
.rc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 2px dashed #CBD3E2; }

.rc-head span { display: flex; flex-direction: column; }
.rc-head b { font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; }
.rc-head small { font-size: .75rem; color: #5D6B85; }
.rc-list { margin: 8px 0 0; padding: 0; list-style: none; }
.rc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dotted #CBD3E2; }
.rc-row .sp-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #E8F0FE; }
.rc-row .sp-ico svg { width: 20px; height: 20px; stroke: #1A73E8; }
.rc-what { display: flex; flex-direction: column; min-width: 0; }
.rc-what b { font-size: .9375rem; }
.rc-what small { font-size: .75rem; line-height: 1.45; color: #5D6B85; }
.rc-row em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .75rem; font-weight: 700; color: #188038; }
.rc-row em svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rc-zero { margin: 14px 0 0; }
.rc-zero div { display: flex; justify-content: space-between; padding: 5px 0; font-size: .875rem; color: #3C4659; }
.rc-zero dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: #188038; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 2px solid #1D2433; }
.rc-total span { font-weight: 700; }
.rc-total b { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.02em; }
.rc-note { margin-top: 6px; font-size: .75rem; color: #5D6B85; }
.rc-bar { display: flex; justify-content: flex-start; align-items: stretch; gap: 2px; height: 34px; margin-top: 18px; }
.rc-bar i { width: 2px; background: #1D2433; }
.rc-bar i.b1 { width: 1px; } .rc-bar i.b2 { width: 3px; } .rc-bar i.b3 { width: 1px; opacity: .6; }
.rc-stamp { position: absolute; right: 20px; bottom: 30px; padding: 8px 14px; border: 3px solid #D93025; border-radius: 10px; font-family: var(--f-display); font-weight: 800; font-size: 1.125rem;
  letter-spacing: .02em; text-transform: uppercase; color: #D93025; rotate: -12deg; opacity: 0; scale: 2.2; mix-blend-mode: multiply; transition: opacity .25s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.rc.is-done .rc-stamp { opacity: .9; scale: 1; }
@media (max-width: 900px) {
  .rcs-in { grid-template-columns: minmax(0, 1fr); }
  .rcs-text { position: static; text-align: center; }
  .rcs-text .kicker { justify-content: center; }
  .rcs-text > p:not(.kicker) { margin-left: auto; margin-right: auto; }
  .rcs-chips { justify-content: center; }
}
@media (max-width: 720px) {
  .rc-paper { margin: -18px 3% 0; padding: 34px 16px 26px; }
  .rc-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  .rc-row .sp-ico { width: 30px; height: 30px; }
  .rc-row em { font-size: 0; gap: 0; } .rc-row em svg { width: 18px; height: 18px; }
  .rc-stamp { right: 12px; bottom: 26px; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) { .rc-paper { clip-path: none; translate: none; } .rc-rv { opacity: 1; transform: none; } }

/* ---------- how it works: your first month as a calendar, the days pass as you scroll ---------- */
.sp-time.cal { padding: clamp(40px, 6vw, 80px) 0 0; }
.cal-track { position: relative; height: 300vh; }
.cal-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 6px) var(--gutter) 24px; }
.cal .sec-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.875rem); }
.cal .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.cal-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(18px, 2.4vw, 32px); width: 100%; max-width: 1140px; margin: clamp(22px, 3.4vh, 40px) auto 0; }
.cal-box { padding: 16px; border-radius: 24px; background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%), rgba(8, 20, 48, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 40px 80px -40px rgba(10, 141, 255, .55); }
.cal-top { display: flex; align-items: center; gap: 12px; padding: 0 4px 12px; }
.cal-top > b { font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; }
.cal-dots { display: inline-flex; gap: 4px; }
.cal-dots i { width: 8px; height: 8px; border-radius: 50%; background: #4285F4; }
.cal-dots i:nth-child(2) { background: #EA4335; } .cal-dots i:nth-child(3) { background: #FBBC05; } .cal-dots i:nth-child(4) { background: #34A853; }
.cal-today { margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; color: #C9D6F0; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-today b { color: #fff; font-variant-numeric: tabular-nums; }
.cal-wk, .cal-days, .cal-evs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid { position: relative; }
.cal-evs { position: absolute; inset: 0; pointer-events: none; }
.cal-wk span { padding: 0 0 8px; text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-days, .cal-evs { grid-template-rows: repeat(5, clamp(52px, 8.6vh, 86px)); }
.cal-grid { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cal-d { grid-row: auto; display: flex; justify-content: center; padding-top: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; }
.cal-d:nth-child(7n) { border-right: 0; }
.cal-d:nth-child(n+29) { border-bottom: 0; }
.cal-d.we { background: rgba(255, 255, 255, .025); }
.cal-d b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8125rem; font-weight: 600; color: #C9D6F0; transition: background .25s, color .25s; }
.cal-d.nx b { color: #56658A; }
.cal-d.is-past b { color: #6F7FA3; }
.cal-d.is-today b { color: #fff; background: #1A73E8; box-shadow: 0 0 0 4px rgba(26, 115, 232, .3), 0 0 22px rgba(26, 115, 232, .9); }
.cal-d.is-today { background: rgba(26, 115, 232, .1); }
/* events sit on the same grid as the days */
.cal-ev { --c: #4285F4; --t: #fff; display: flex; align-items: center; gap: 6px; align-self: end; min-width: 0; height: clamp(20px, 3vh, 28px); margin: 0 5px clamp(6px, 1.2vh, 12px);
  padding: 0 8px; border-radius: 7px; font-size: .75rem; font-weight: 700; color: var(--t); background: var(--c); white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.9); transform-origin: left center; transition: opacity .35s, transform .5s cubic-bezier(.3, 1.5, .5, 1), filter .4s; }
.cal-ev em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.cal-ev svg { display: none; flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cal-ev.is-on { opacity: 1; transform: none; box-shadow: 0 8px 22px -8px var(--c); }
.cal-ev.is-done { filter: saturate(.55) brightness(.8); box-shadow: none; }
.cal-ev.is-done svg { display: block; }
.cal-ev.s0 { --c: #4285F4; } .cal-ev.s1 { --c: #FBBC05; --t: #3A2A00; } .cal-ev.s2 { --c: #34A853; } .cal-ev.s3 { --c: #EA4335; } .cal-ev.s4 { --c: #2FD4FF; --t: #041633; }
.cal-ev.s4 { background: linear-gradient(90deg, #2B5BFF, #2FD4FF 70%, rgba(47, 212, 255, .2)); }
.cal-ev.r1 { grid-row: 1; } .cal-ev.r2 { grid-row: 2; } .cal-ev.r3 { grid-row: 3; } .cal-ev.r4 { grid-row: 4; } .cal-ev.r5 { grid-row: 5; }
.cal-ev.cs1 { grid-column-start: 1; } .cal-ev.cs2 { grid-column-start: 2; } .cal-ev.cs3 { grid-column-start: 3; } .cal-ev.cs4 { grid-column-start: 4; } .cal-ev.cs5 { grid-column-start: 5; } .cal-ev.cs6 { grid-column-start: 6; } .cal-ev.cs7 { grid-column-start: 7; }
.cal-ev.ce2 { grid-column-end: 2; } .cal-ev.ce3 { grid-column-end: 3; } .cal-ev.ce4 { grid-column-end: 4; } .cal-ev.ce5 { grid-column-end: 5; } .cal-ev.ce6 { grid-column-end: 6; } .cal-ev.ce7 { grid-column-end: 7; } .cal-ev.ce8 { grid-column-end: 8; }
/* the side: the step of the day, like an event card, and the whole month as a short agenda */
.cal-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cal-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.cal-step { grid-area: 1 / 1; padding: 22px 22px 20px; border-radius: 22px; background: #FBFCFE; color: #1D2433; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.cal-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cal-when { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; color: #5D6B85; }
.cal-when i { width: 14px; height: 14px; border-radius: 4px; background: var(--c, #4285F4); }
.cal-step.s1 .cal-when i { background: #FBBC05; } .cal-step.s2 .cal-when i { background: #34A853; } .cal-step.s3 .cal-when i { background: #EA4335; } .cal-step.s4 .cal-when i { background: #2FD4FF; }
.cal-step h3 { margin-top: 10px; font-size: 1.375rem; letter-spacing: -.02em; color: #0A1430; }
.cal-x { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: #3C4659; }
.cal-st { margin-top: 14px; }
.cal-st span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.cal-st .now { color: #1A73E8; background: #E8F0FE; }
.cal-st .now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: gshBlink 1s steps(1) infinite; }
.cal-st .ok { display: none; color: #188038; background: #E6F4EA; }
.cal-st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cal-step.is-last .cal-st .now { display: none; } .cal-step.is-last .cal-st .ok { display: inline-flex; }
.cal-agenda { margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px var(--line); }
.cal-ag { display: grid; grid-template-columns: 12px 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font-size: .8125rem; color: var(--muted); transition: background .3s, color .3s; }
.cal-ag i { width: 10px; height: 10px; border-radius: 50%; background: #4285F4; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.cal-ag.s1 i { background: #FBBC05; } .cal-ag.s2 i { background: #34A853; } .cal-ag.s3 i { background: #EA4335; } .cal-ag.s4 i { background: #2FD4FF; }
.cal-ag b { font-weight: 600; color: #DCE6F7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ag.is-done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(138, 156, 194, .6); }
.cal-ag.is-on { color: #C9D6F0; background: rgba(26, 115, 232, .16); box-shadow: inset 0 0 0 1px rgba(66, 133, 244, .4); }
.cal-ag.is-on b { color: #fff; }
@media (max-width: 900px) {
  .cal-in { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-top: 16px; }
  .cal-agenda { display: none; }
  .cal-track { height: 280vh; }
  .cal-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 4px); padding-bottom: 12px; }
  .cal .sec-head p:not(.kicker) { display: none; }
  .cal .sec-head h2 { font-size: 1.625rem; margin-top: 6px; }
  .cal-box { padding: 10px; border-radius: 18px; }
  .cal-top { padding-bottom: 8px; } .cal-top > b { font-size: .9375rem; }
  .cal-days, .cal-evs { grid-template-rows: repeat(5, clamp(40px, 6.2vh, 54px)); }
  .cal-d { padding-top: 3px; } .cal-d b { width: 22px; height: 22px; font-size: .6875rem; }
  .cal-ev { height: 15px; margin: 0 2px 4px; padding: 0 4px; border-radius: 4px; font-size: .5625rem; }
  .cal-ev.is-done svg { display: none; }
  .cal-step { padding: 16px 18px; border-radius: 18px; }
  .cal-step h3 { font-size: 1.125rem; margin-top: 6px; }
  .cal-x { font-size: .875rem; margin-top: 4px; }
  .cal-st { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-track { height: auto; } .cal-stage { position: relative; height: auto; }
  .cal-steps { gap: 12px; } .cal-step { grid-area: auto; opacity: 1; transform: none; }
}
.rc { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.rc-paper { filter: none; }

/* ---------- Google Ads: tighter start, the budget section follows the hero closely ---------- */
.gsh + .bg { margin-top: 0; }
@media (min-width: 1181px) { .gsh { min-height: 0; padding-bottom: 70px; } }
@media (min-width: 721px) {
  .gsh { padding-bottom: 40px; }
  .bg-stage, .sc-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + clamp(16px, 3vh, 36px)); }
}
@media (max-width: 720px) {   /* phones: the pinned panels are only as tall as their content, so no empty band after them */
  .gsh ~ .bg .bg-stage, .gsh ~ .sc .sc-stage { height: auto; min-height: 0; justify-content: flex-start; padding-bottom: 6px; }
  .sc + .rcs { padding-top: 0; }
}

/* ---------- CTA "where your budget leaks": money flows through a pipe, three leaks get patched, more reaches the customers ---------- */
.lkc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 24px 40px; overflow: hidden; }
.lkc .sp-cta-actions { margin-top: 18px; }
.lk { position: relative; height: 170px; }
.lk-src { position: absolute; left: 0; top: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.lk-src b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--f-display); font-size: 1.5rem; color: #3A2A00;
  background: radial-gradient(circle at 35% 30%, #FFE08A, #FBBC05 60%, #C48A00); box-shadow: 0 0 26px rgba(251, 188, 5, .45); }
.lk small { font-size: .6875rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lk-pipe { position: absolute; left: 60px; right: 74px; top: 36px; height: 24px; border-radius: 12px;
  background: linear-gradient(180deg, #2A3D6B, #13213F 60%, #0B1530); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .2); }
.lk-flow { position: absolute; inset: 5px 8px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle, #FBBC05 0 3.5px, transparent 4.5px) 0 50% / 22px 100% repeat-x; animation: lkFlow 1.1s linear infinite; }
@keyframes lkFlow { to { background-position: 22px 50%; } }
.lk-crack { position: absolute; top: 0; width: 0; height: 100%; }
.lk-crack.k1 { left: 22%; } .lk-crack.k2 { left: 50%; } .lk-crack.k3 { left: 78%; }
.lk-hole { position: absolute; left: -5px; bottom: -3px; width: 10px; height: 8px; background: #EA4335; clip-path: polygon(0 0, 30% 100%, 50% 30%, 70% 100%, 100% 0); }
.lk-drip { position: absolute; left: -4px; top: 26px; width: 8px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #FBBC05; animation: lkDrip 1s ease-in infinite; }
.lk-drip.d2 { animation-delay: .5s; }
@keyframes lkDrip { from { transform: translateY(0) scale(.5); opacity: 1; } to { transform: translateY(56px) scale(1); opacity: 0; } }
.lk-patch { position: absolute; left: -12px; top: -4px; width: 24px; height: 32px; border-radius: 6px; background: linear-gradient(180deg, #4ADE80, #188038); box-shadow: 0 0 18px rgba(52, 168, 83, .7); }
.lk-crack em { position: absolute; left: 50%; top: 92px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-style: normal; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.lk-bad { color: #FFB4AB; background: rgba(234, 67, 53, .16); box-shadow: inset 0 0 0 1px rgba(234, 67, 53, .4); }
.lk-ok { color: #81E2A0; background: rgba(52, 168, 83, .16); box-shadow: inset 0 0 0 1px rgba(52, 168, 83, .45); }
.lk-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lk-cup { position: absolute; right: 0; top: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; }
.lk-cup::before { content: ""; order: 1; width: 58px; height: 52px; border-radius: 4px 4px 18px 18px; box-shadow: inset 0 0 0 2px rgba(169, 220, 255, .45); }
.lk-cup small { order: 2; }
.lk-fill { position: absolute; left: 10px; width: 54px; top: 2px; height: 48px; border-radius: 3px 3px 16px 16px; overflow: hidden; }
.lk-fill::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, #4ADE80, #188038); transform-origin: bottom; animation: lkFill 9s ease-in-out infinite; }
.lk-saved { position: absolute; left: 50%; top: -18px; translate: -50% 0; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #04130C; background: #3DF0A0; box-shadow: 0 0 24px rgba(61, 240, 160, .5);
  animation: lkSaved 9s ease-in-out infinite; }
/* one 9 second story: all three leak, each gets patched, the cup fills, then it starts again */
.k1 .lk-drip, .k1 .lk-hole, .k1 .lk-bad { animation-name: lkDrip, lkGone1; animation-duration: 1s, 9s; animation-timing-function: ease-in, linear; animation-iteration-count: infinite; }
.k2 .lk-drip, .k2 .lk-hole, .k2 .lk-bad { animation-name: lkDrip, lkGone2; animation-duration: 1s, 9s; animation-timing-function: ease-in, linear; animation-iteration-count: infinite; }
.k3 .lk-drip, .k3 .lk-hole, .k3 .lk-bad { animation-name: lkDrip, lkGone3; animation-duration: 1s, 9s; animation-timing-function: ease-in, linear; animation-iteration-count: infinite; }
.lk-hole, .lk-bad { animation-name: lkGone1 !important; animation-duration: 9s !important; }
.k2 .lk-hole, .k2 .lk-bad { animation-name: lkGone2 !important; }
.k3 .lk-hole, .k3 .lk-bad { animation-name: lkGone3 !important; }
.lk-drip.d2 { animation-delay: .5s, 0s; }
.k1 .lk-patch, .k1 .lk-ok { animation: lkShow1 9s ease-out infinite; }
.k2 .lk-patch, .k2 .lk-ok { animation: lkShow2 9s ease-out infinite; }
.k3 .lk-patch, .k3 .lk-ok { animation: lkShow3 9s ease-out infinite; }
@keyframes lkGone1 { 0%, 29% { visibility: visible; } 30%, 97% { visibility: hidden; } }
@keyframes lkGone2 { 0%, 41% { visibility: visible; } 42%, 97% { visibility: hidden; } }
@keyframes lkGone3 { 0%, 53% { visibility: visible; } 54%, 97% { visibility: hidden; } }
@keyframes lkShow1 { 0%, 29% { opacity: 0; transform: scale(.3); } 33%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lkShow2 { 0%, 41% { opacity: 0; transform: scale(.3); } 45%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lkShow3 { 0%, 53% { opacity: 0; transform: scale(.3); } 57%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lkFill { 0%, 30% { transform: scaleY(.22); } 42% { transform: scaleY(.4); } 54% { transform: scaleY(.6); } 72%, 95% { transform: scaleY(1); } 100% { transform: scaleY(.22); } }
@keyframes lkSaved { 0%, 64% { opacity: 0; transform: translateY(8px); } 70%, 94% { opacity: 1; transform: none; } 99% { opacity: 0; } }
@media (max-width: 900px) { .lkc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .lkc { padding: 22px 16px 18px; }
  .lk { height: 176px; margin: 0 -4px; }
  .lk-src { width: 46px; } .lk-src b { width: 40px; height: 40px; font-size: 1.125rem; }
  .lk-pipe { left: 44px; right: 58px; }
  .lk-cup { width: 58px; } .lk-cup::before { width: 46px; height: 44px; } .lk-fill { left: 6px; width: 46px; height: 40px; }
  .lk-crack em { font-size: .625rem; padding: 3px 7px; }
  .lk-crack.k2 em { top: 78px; translate: -50% 26px; }
  .lk-crack.k1 em, .lk-crack.k3 em { top: 84px; }
  .lk-crack.k2 em { top: auto; bottom: 34px; translate: -50% 0; }
  .lk-saved { top: auto; bottom: 0; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .lk *, .lk-saved, .lk-fill::before { animation: none !important; } .lk-patch, .lk-ok { opacity: 1; } .lk-hole, .lk-bad, .lk-drip { visibility: hidden; } }

/* =====================================================================
   META ADS PAGE: Facebook and Instagram inspired sections
   ===================================================================== */
:root { --ig: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%); --fb: #0866FF;
  --msg: linear-gradient(135deg, #0099FF 0%, #A033FF 55%, #FF5280 85%, #FF7061 100%); }

/* ---------- hero: three phones (feed, story, reel), reactions float up, a message and a lead arrive ---------- */
.mth .mt-stage { height: min(78vh, 720px); }
.mt-3d { left: 4%; right: 4%; top: 2%; bottom: 12%; transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-6deg + var(--ry))); }
.wbh-stage.mt-stage[data-phase] .mt-3d { transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-6deg + var(--ry))); }
.mt-ph { position: absolute; top: 50%; width: 42%; max-width: 280px; aspect-ratio: 9 / 18.5; padding: 8px; border-radius: 34px; background: linear-gradient(160deg, #2A3655, #0B1226);
  box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .35), 0 40px 80px -30px rgba(0, 0, 0, .9); transition: transform 1s var(--ease), filter 1s; }
.mt-scr { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; }
.mt-reel { left: 50%; z-index: 3; transform: translate(-50%, -50%) translateZ(60px); width: 46%; }
.mt-fb { left: 0; z-index: 1; transform: translate(0, -46%) rotateY(18deg) scale(.86); filter: brightness(.72); }
.mt-story { right: 0; z-index: 2; transform: translate(0, -54%) rotateY(-18deg) scale(.86); filter: brightness(.72); }
.mt-stage[data-phase="0"] .mt-fb { filter: none; transform: translate(4%, -48%) rotateY(10deg) scale(.92); z-index: 4; }
.mt-stage[data-phase="0"] .mt-reel { filter: brightness(.75); }
/* feed phone */
.mt-fb .mt-scr { background: #F0F2F5; }
.mt-top { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; background: #fff; }
.mt-logo { width: 20px; height: 20px; border-radius: 50%; background: var(--fb); }
.mt-search { flex: 1; height: 18px; border-radius: 9px; background: #F0F2F5; }
.mt-top i { width: 18px; height: 18px; border-radius: 50%; background: #E4E6EB; }
.mt-feed { display: grid; gap: 8px; padding-top: 8px; animation: mtScroll 2.6s cubic-bezier(.5, 0, .2, 1) infinite; }
.mt-stage:not([data-phase="0"]) .mt-feed { animation: none; transform: translateY(-24%); transition: transform .8s var(--ease); }
@keyframes mtScroll { 0% { transform: translateY(0); } 100% { transform: translateY(-36%); } }
.mt-post { padding: 10px; background: #fff; color: #050505; }
.mt-ph-h { display: flex; align-items: center; gap: 6px; } .mt-ph-h i { width: 22px; height: 22px; border-radius: 50%; background: #E4E6EB; } .mt-ph-h span { width: 50%; height: 8px; border-radius: 4px; background: #E4E6EB; }
.mt-ph-img { display: block; height: 90px; margin-top: 8px; border-radius: 6px; background: #E4E6EB; }
.mt-who { display: flex; align-items: center; gap: 7px; font-size: .6875rem; line-height: 1.15; }
.mt-who b { display: block; font-weight: 700; } .mt-who small { color: #65676B; font-size: .5625rem; }
.mt-av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px #fff; }
.mt-txt { margin: 6px 0; font-size: .625rem; line-height: 1.35; }
.mt-media { display: block; height: 130px; margin: 0 -10px; overflow: hidden; }
.mt-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mt-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 -10px; padding: 7px 10px; background: #F0F2F5; }
.mt-link small { display: block; font-size: .5rem; color: #65676B; } .mt-link b { font-size: .6875rem; }
.mt-link em { padding: 5px 8px; border-radius: 5px; font-style: normal; font-size: .5625rem; font-weight: 700; background: #E4E6EB; }
.mt-rc { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .5625rem; color: #65676B; }
.mt-rcs { display: flex; } .mt-rcs svg { width: 14px; height: 14px; margin-right: -3px; box-shadow: 0 0 0 1.5px #fff; border-radius: 50%; }
.mt-rc b { margin-left: 4px; color: #65676B; } .mt-rc small { margin-left: auto; }
/* story phone */
.mt-story .mt-scr { background: #111; }
.mt-story img, .mt-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-bars { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 3px; }
.mt-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .4); overflow: hidden; }
.mt-bars i:first-child { background: #fff; }
.mt-bars i:nth-child(2)::before { content: ""; display: block; height: 100%; background: #fff; transform-origin: left; animation: mtBar 5s linear infinite; }
@keyframes mtBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mt-who.lt { position: absolute; left: 10px; top: 20px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.mt-who.lt small { color: rgba(255, 255, 255, .85); }
.mt-who.lt .mt-av { width: 22px; height: 22px; box-shadow: 0 0 0 2px #fff; background: var(--ig); }
.mt-up { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 0; font-size: .6875rem; font-weight: 700; color: #fff; }
.mt-up svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; animation: mtUp 1.4s ease-in-out infinite; }
@keyframes mtUp { 50% { transform: translateY(-4px); } }
.mt-up { background: rgba(255, 255, 255, .95); color: #111; padding: 6px 14px 7px; border-radius: 999px; flex-direction: row; }
.mt-up svg { stroke: #111; width: 13px; height: 13px; }
/* reel phone */
.mt-reel .mt-scr { background: #000; }
.mt-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 55%, rgba(0, 0, 0, .7)); }
.mt-fb .mt-scr::after { display: none; }
.mt-reel-top { position: absolute; z-index: 2; left: 14px; top: 14px; font-family: var(--f-display); font-size: .9375rem; font-weight: 700; color: #fff; }
.mt-side { position: absolute; z-index: 2; right: 8px; bottom: 110px; display: grid; gap: 12px; justify-items: center; color: #fff; }
.mt-side span { display: grid; justify-items: center; gap: 2px; font-size: .5625rem; font-weight: 700; }
.mt-side svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.mt-stage:not([data-phase="0"]) .mt-heart svg { fill: #FF3040; stroke: #FF3040; animation: mtPop .5s var(--ease); }
@keyframes mtPop { 40% { transform: scale(1.4); } }
.mt-cap { position: absolute; z-index: 2; left: 12px; right: 42px; bottom: 14px; color: #fff; }
.mt-cap .mt-who.lt { position: static; }
.mt-ctext { margin: 6px 0 8px; font-size: .6875rem; line-height: 1.35; }
.mt-btn { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-size: .6875rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .4s; }
.mt-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mt-stage[data-phase="2"] .mt-btn, .mt-stage[data-phase="3"] .mt-btn { background: var(--fb); }
.mt-tap { position: absolute; z-index: 3; left: 42%; bottom: 22px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); opacity: 0; transform: scale(.4); }
.mt-stage[data-phase="2"] .mt-tap { animation: mtTap 1.1s .3s ease-out both; }
@keyframes mtTap { 0% { opacity: 0; transform: scale(1.4); } 30% { opacity: 1; transform: scale(.7); } 60% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { opacity: 0; transform: scale(.9); } }
/* reactions that float up from the reel */
.mt-rx { position: absolute; left: 50%; bottom: 22%; width: 120px; height: 0; z-index: 5; pointer-events: none; }
.mt-rx i { position: absolute; bottom: 0; width: 30px; height: 30px; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.mt-rx svg { width: 100%; height: 100%; }
.mt-stage:not([data-phase="0"]) .mt-rx i { animation: mtFloat 2.6s ease-out infinite; }
.mt-rx .r0 { left: 70px; } .mt-rx .r1 { left: 95px; animation-delay: .3s !important; } .mt-rx .r2 { left: 80px; animation-delay: .6s !important; width: 24px; height: 24px; }
.mt-rx .r3 { left: 105px; animation-delay: .9s !important; } .mt-rx .r4 { left: 64px; animation-delay: 1.2s !important; width: 22px; height: 22px; }
.mt-rx .r5 { left: 100px; animation-delay: 1.5s !important; } .mt-rx .r6 { left: 86px; animation-delay: 1.8s !important; width: 26px; height: 26px; } .mt-rx .r7 { left: 110px; animation-delay: 2.1s !important; width: 22px; height: 22px; }
@keyframes mtFloat { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; transform: translate(-6px, -40px) scale(1); } 60% { opacity: 1; transform: translate(10px, -180px) scale(1); } 100% { opacity: 0; transform: translate(-4px, -280px) scale(.8); } }
/* the notes: a message, a lead, the cost */
.mt-n { position: absolute; z-index: 6; margin: 0; opacity: 0; translate: 0 14px; transition: opacity .5s, translate .6s var(--ease); white-space: nowrap; }
.mt-n.n1 { right: -2%; top: 14%; display: grid; gap: 2px; max-width: 230px; padding: 10px 14px; border-radius: 18px 18px 4px 18px; font-size: .8125rem; color: #fff; background: var(--msg); box-shadow: 0 16px 40px -14px rgba(160, 51, 255, .8); white-space: normal; }
.mt-n.n1 b { font-size: .6875rem; font-weight: 700; opacity: .85; }
.mt-n.n2 { left: -4%; top: 30%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; font-size: .8125rem; color: #C9D6F0;
  background: rgba(8, 20, 48, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25), 0 20px 40px -20px rgba(0, 0, 0, .8); }
.mt-n.n2 b { display: block; color: #fff; font-size: .875rem; }
.mt-ic svg { width: 30px; height: 30px; display: block; }
.mt-n.n3 { right: 4%; bottom: 20%; display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgba(8, 20, 48, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.mt-n.n3 small { font-size: .75rem; color: #C9D6F0; } .mt-n.n3 b { font-family: var(--f-display); font-size: 1.5rem; color: #3DF0A0; } .mt-n.n3 s { font-size: .8125rem; color: #FF9BB0; }
.mt-stage[data-phase="2"] .n1, .mt-stage[data-phase="3"] .n1, .mt-stage[data-phase="3"] .n2, .mt-stage[data-phase="3"] .n3 { opacity: 1; translate: 0 0; }
.mt-stage[data-phase="3"] .n3 { transition-delay: .5s; }
.mth .wbh-rail { left: 8%; right: 8%; }
@media (max-width: 1000px) { .mth .mt-stage { height: auto; aspect-ratio: 1 / .95; } }
@media (max-width: 720px) {
  .mth .mt-stage { aspect-ratio: auto; height: 500px; }
  .mt-3d { left: -2%; right: -2%; top: 0; bottom: 14%; }
  .mt-ph { padding: 6px; border-radius: 26px; } .mt-scr { border-radius: 21px; }
  .mt-reel { width: 52%; } .mt-fb, .mt-story { width: 44%; }
  .mt-media { height: 96px; } .mt-ph-img { height: 60px; }
  .mt-n.n1 { right: 0; top: 4%; max-width: 190px; font-size: .75rem; }
  .mt-n.n2 { left: 0; top: auto; bottom: 24%; font-size: .75rem; }
  .mt-n.n3 { display: none; }
  .mth .wbh-rail { left: 2%; right: 2%; }
}
@media (prefers-reduced-motion: reduce) { .mt-feed, .mt-rx i, .mt-bars i::before, .mt-up svg, .mt-tap { animation: none !important; } }

/* ---------- why it matters: the audience narrows, the gauge moves to "well defined", cost per lead falls ---------- */
.au-track { position: relative; height: 300svh; }
.au-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(16px, 3vh, 34px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.au .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.au .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.au-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); align-items: center; width: 100%; max-width: 1180px; margin: 0 auto; }
.au-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.au-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; color: var(--muted); transition: background .4s, color .4s, box-shadow .4s; }
.au-step b { display: block; font-size: 1.0625rem; color: #8FA0C4; transition: color .4s; } .au-step small { font-size: .8125rem; }
.au-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: .8125rem; box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .3); transition: background .4s, box-shadow .4s, color .4s; }
.au-step.is-on { color: #C9D6F0; background: rgba(8, 102, 255, .12); box-shadow: inset 0 0 0 1px rgba(8, 102, 255, .45); }
.au-step.is-on b, .au-step.is-done b { color: #fff; }
.au-step.is-on .au-n, .au-step.is-done .au-n { color: #fff; background: var(--fb); box-shadow: 0 0 16px rgba(8, 102, 255, .7); }
.au-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: clamp(18px, 2.4vw, 28px); border-radius: 26px;
  background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(5, 12, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 50px 100px -60px rgba(8, 102, 255, .9); }
.au-dots { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(5px, .7vw, 9px); }
.au-dots i { aspect-ratio: 1; border-radius: 50%; background: #8FA0C4; transition: opacity .5s, transform .5s var(--ease), background .5s, box-shadow .5s; }
.au-stage[data-s="1"] .au-dots i.l0, .au-stage[data-s="2"] .au-dots i:is(.l0, .l1), .au-stage[data-s="3"] .au-dots i:is(.l0, .l1, .l2) { opacity: .12; transform: scale(.6); }
.au-stage[data-s="1"] .au-dots i:not(.l0) { background: #5B9BFF; }
.au-stage[data-s="2"] .au-dots i:is(.l2, .l3) { background: #3D8BFF; box-shadow: 0 0 8px rgba(61, 139, 255, .7); }
.au-stage[data-s="3"] .au-dots i.l3 { background: #3DF0A0; box-shadow: 0 0 12px rgba(61, 240, 160, .9); transform: scale(1.25); }
.au-lbl { font-size: .875rem; font-weight: 700; color: #DCE6F7; }
.au-gauge { position: relative; width: 100%; max-width: 220px; margin: 10px auto 0; }
.au-gauge svg { display: block; width: 100%; overflow: visible; }
.au-arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.au-arc.a1 { stroke: #FBBC05; } .au-arc.a2 { stroke: #3DF0A0; } .au-arc.a3 { stroke: #EA4335; }
.au-needle { position: absolute; left: 50%; bottom: 9%; width: 4px; height: 62%; margin-left: -2px; border-radius: 4px; background: #fff; transform-origin: 50% 100%; transform: rotate(var(--a, 70deg)); transition: transform .9s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.au-needle::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; }
.au-g { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .6875rem; color: var(--muted); }
.au-g b { font-size: .875rem; color: #fff; }
.au-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.au-kpis p { padding: 12px 14px; border-radius: 14px; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.au-kpis small { display: block; font-size: .75rem; color: var(--muted); }
.au-kpis b { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.75rem); color: #fff; font-variant-numeric: tabular-nums; }
.au-stage[data-s="3"] .au-cpl { color: #3DF0A0; }
@media (max-width: 900px) {
  .au-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .au-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .au-step { flex-direction: column; text-align: center; gap: 6px; padding: 8px 4px; }
  .au-step b { font-size: .6875rem; line-height: 1.2; } .au-step small { display: none; }
  .au-n { width: 24px; height: 24px; }
}
@media (max-width: 720px) {
  .gsh ~ .au .au-stage, .au-stage { height: auto; min-height: 0; padding-bottom: 6px; }
  .au .sec-head p:not(.kicker) { display: none; }
  .au .sec-head h2 { font-size: 1.625rem; }
  .au-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .au-dots { gap: 5px; }
  .au-gauge { max-width: 150px; margin-top: 0; }
  .au-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: center; }
  .au-lbl { grid-column: 1 / -1; }
  .au-g { grid-column: 1; margin-top: 4px; }
  .au-kpis { grid-column: 2; grid-row: 2 / span 2; grid-template-columns: 1fr; margin-top: 0; gap: 6px; }
  .au-kpis p { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .au-track { height: auto; } .au-stage { position: relative; height: auto; } }

/* ---------- first CTA: a sponsored post, it knows you stopped for it ---------- */
.spo { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.spo-media { position: relative; min-height: 260px; background: #000; overflow: hidden; }
.spo-media video, .spo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spo-stop { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.spo-stop::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #FF3040; animation: gshBlink 1s steps(1) infinite; }
.spo-body { padding: clamp(20px, 2.4vw, 30px); }
.spo-who { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: #fff; line-height: 1.2; }
.spo-who small { display: block; font-size: .75rem; color: var(--muted); }
.spo-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #0B1530; box-shadow: 0 0 0 2px #0B1530, 0 0 0 4px var(--fb); }
.spo-av img { filter: brightness(1.4); }
.spo .spo-h { margin-top: 14px; font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
.spo .spo-t { margin-top: 8px; font-family: var(--f-body); font-size: .9688rem; font-weight: 500; letter-spacing: 0; line-height: 1.55; color: #C9D6F0; }
.spo .sp-cta-actions { margin-top: 18px; }
.spo-rc { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-body); font-size: .875rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.spo-rcs { display: flex; } .spo-rcs svg { width: 20px; height: 20px; margin-right: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #0B1838; }
.spo-cnt { margin-left: 6px; font-variant-numeric: tabular-nums; }
.spo-like { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 14px; border: 0; border-radius: 10px; font: 700 .875rem var(--f-body); color: #C9D6F0; background: rgba(169, 220, 255, .06); cursor: pointer; transition: color .3s, background .3s; }
.spo-like svg { width: 20px; height: 20px; filter: grayscale(1) brightness(1.6); transition: filter .3s, transform .3s; }
.spo-like:hover { background: rgba(169, 220, 255, .12); }
.spo-like[aria-pressed="true"] { color: #4C9BFF; }
.spo-like[aria-pressed="true"] svg { filter: none; animation: mtPop .5s var(--ease); }
@media (max-width: 720px) {
  .spo { grid-template-columns: minmax(0, 1fr); }
  .spo-media { min-height: 0; aspect-ratio: 16 / 10; }
  .spo-media video, .spo-media img { object-position: 50% 25%; }
  .spo-body { padding: 18px 16px; }
}

/* ---------- what is inside: four ads race week by week, the winner gets the budget ---------- */
.ab-track { position: relative; height: 320svh; }
.ab-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(16px, 3vh, 30px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.ab .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.ab .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.ab-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 44px); align-items: center; width: 100%; max-width: 1180px; margin: 0 auto; }
.ab-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ab-step { display: flex; gap: 14px; padding: 12px 14px; border-radius: 16px; cursor: pointer; transition: background .4s, box-shadow .4s; }
.ab-wk { flex: none; width: 58px; padding-top: 2px; font-size: .75rem; font-weight: 700; color: var(--muted); transition: color .4s; }
.ab-t b { display: block; font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.02em; color: #8FA0C4; transition: color .4s; }
.ab-t span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .875rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.ab-step.is-done b { color: #DCE6F7; }
.ab-step.is-on { background: rgba(8, 102, 255, .1); box-shadow: inset 0 0 0 1px rgba(8, 102, 255, .45); }
.ab-step.is-on .ab-wk { color: #6FA8FF; } .ab-step.is-on b { color: #fff; }
.ab-step.is-on .ab-t span { max-height: 90px; opacity: 1; margin-top: 6px; }
.ab-board { display: grid; gap: 10px; padding: clamp(16px, 2vw, 24px); border-radius: 26px; background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(5, 12, 32, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 50px 100px -60px rgba(8, 102, 255, .9); }
.ab-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: .8125rem; color: var(--muted); }
.ab-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #DCE6F7; }
.ab-live i { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 8px #3DF0A0; animation: gshBlink 1.2s steps(1) infinite; }
.ab-week { padding: 3px 10px; border-radius: 999px; color: #fff; background: rgba(8, 102, 255, .35); font-size: .75rem; }
.ab-budget { margin-left: auto; } .ab-budget b { color: #fff; }
.ab-ad { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px var(--line);
  transition: opacity .5s, filter .5s, transform .6s var(--ease), box-shadow .5s, background .5s; }
.ab-img { position: relative; height: 64px; border-radius: 12px; overflow: hidden; }
.ab-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ab-img b { position: absolute; left: 5px; top: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: .6875rem; color: #fff; background: rgba(0, 0, 0, .6); }
.ab-h { display: block; font-size: .9375rem; font-weight: 700; color: #fff; }
.ab-bar { display: block; height: 8px; margin: 8px 0 6px; border-radius: 8px; background: rgba(169, 220, 255, .08); overflow: hidden; }
.ab-bar i { display: block; height: 100%; width: calc(var(--w, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, #2B5BFF, #2FD4FF); transition: width .8s var(--ease); }
.ab-res { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); }
.ab-res b { font-family: var(--f-display); font-size: 1rem; color: #fff; font-variant-numeric: tabular-nums; }
.ab-tag { display: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: .6875rem; }
.ab-tag.win { color: #04130C; background: #3DF0A0; } .ab-tag.off { color: #C9D6F0; background: rgba(169, 220, 255, .1); }
.ab.is-end .ab-ad:not(.is-best) { opacity: .45; filter: grayscale(.8); }
.ab.is-end .ab-ad:not(.is-best) .ab-tag.off { display: inline-block; }
.ab.is-end .ab-ad.is-best { transform: scale(1.03); background: rgba(61, 240, 160, .08); box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .6), 0 20px 50px -20px rgba(61, 240, 160, .5); }
.ab.is-end .ab-ad.is-best .ab-bar i { background: linear-gradient(90deg, #34A853, #3DF0A0); }
.ab.is-end .ab-ad.is-best .ab-tag.win { display: inline-block; }
.ab-ad.is-lead .ab-bar i { background: linear-gradient(90deg, #2B5BFF, #3DF0A0); }
@media (max-width: 900px) {
  .ab-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-list { order: 2; }
  .ab-step:not(.is-on) { display: none; }
  .ab-step.is-on { padding: 12px 14px; }
}
@media (max-width: 720px) {
  .ab-stage { height: auto; min-height: 0; padding-bottom: 6px; }
  .ab .sec-head p:not(.kicker) { display: none; }
  .ab .sec-head h2 { font-size: 1.625rem; }
  .ab-board { gap: 8px; padding: 12px; border-radius: 20px; }
  .ab-ad { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .ab-img { height: 48px; }
  .ab-h { font-size: .8125rem; } .ab-bar { margin: 5px 0 4px; height: 6px; }
  .ab-budget { display: none; }
  .ab-tag.win { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) { .ab-track { height: auto; } .ab-stage { position: relative; height: auto; } }

/* ---------- no surprises: story highlights, the stories play by themselves ---------- */
.sts { padding-top: clamp(40px, 6vw, 90px); }
.sts-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: clamp(30px, 6vw, 90px); max-width: 1120px; margin: 0 auto; }
.sts-text h2 { margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.06; text-wrap: balance; }
.sts-text > p:not(.kicker) { margin-top: 16px; max-width: 460px; font-size: 1.0625rem; line-height: 1.65; color: #C9D6F0; }
.st-hls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; max-width: 460px; margin: 30px 0 0; padding: 0; list-style: none; }
.st-hl { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: #C9D6F0; font: 600 .8125rem var(--f-body); cursor: pointer; }
.st-ring { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; padding: 3px; background: rgba(169, 220, 255, .25); transition: transform .3s var(--ease); }
.st-hl.is-new .st-ring, .st-hl.is-on .st-ring { background: var(--ig); }
.st-ring .sp-ico { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #0B1530; box-shadow: 0 0 0 3px var(--midnight); }
.st-ring svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-hl:hover .st-ring { transform: scale(1.06); }
.st-hl.is-on { color: #fff; }
.st-hl.is-on .st-ring { transform: scale(1.08); box-shadow: 0 0 30px rgba(214, 41, 118, .5); }
.st-hl small { font-size: .8125rem; text-align: center; line-height: 1.25; }
.st-view { position: relative; aspect-ratio: 9 / 15; width: 100%; border-radius: 30px; overflow: hidden; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 50px 100px -40px rgba(214, 41, 118, .6); background: #111; }
.st-bars { position: absolute; z-index: 3; left: 14px; right: 14px; top: 14px; display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.st-bars b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.st-bars i.is-done b { transform: scaleX(1); }
.st-bars i.is-on b { animation: stBar var(--dur, 5s) linear forwards; }
.st-view.is-paused .st-bars i.is-on b { animation-play-state: paused; }
@keyframes stBar { to { transform: scaleX(1); } }
.st-who { position: absolute; z-index: 3; left: 14px; top: 28px; display: flex; align-items: center; gap: 8px; font-size: .8125rem; }
.st-who small { color: rgba(255, 255, 255, .75); }
.st-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0B1530; box-shadow: 0 0 0 2px #fff; }
.st-pages { position: absolute; inset: 0; }
.st-s { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 26px 40px; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .7s var(--ease); }
.st-s.is-on { opacity: 1; transform: none; }
.st-s.c0 { background: radial-gradient(120% 80% at 20% 10%, #FA7E1E, transparent 60%), linear-gradient(160deg, #D62976, #4F1A6E); }
.st-s.c1 { background: radial-gradient(120% 80% at 80% 10%, #4F5BD5, transparent 60%), linear-gradient(160deg, #962FBF, #1B1550); }
.st-s.c2 { background: radial-gradient(120% 80% at 20% 10%, #22C3FF, transparent 60%), linear-gradient(160deg, #0866FF, #0A1C4F); }
.st-s.c3 { background: radial-gradient(120% 80% at 80% 10%, #FEDA75, transparent 55%), linear-gradient(160deg, #FA7E1E, #7A1F3D); }
.st-s.c4 { background: radial-gradient(120% 80% at 20% 10%, #3DF0A0, transparent 55%), linear-gradient(160deg, #0F8F6A, #0A2A40); }
.st-s.c5 { background: radial-gradient(120% 80% at 80% 10%, #FF7061, transparent 55%), linear-gradient(160deg, #A033FF, #2A0F4F); }
.st-big { position: absolute; left: 50%; top: 36%; translate: -50% -50%; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 40px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.st-big svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-s.is-on .st-big { animation: stBig .9s var(--ease) both; }
@keyframes stBig { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
.st-k { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .2); }
.st-s h3 { margin-top: 10px; font-size: 1.75rem; letter-spacing: -.03em; }
.st-s p:last-child { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.st-nav { position: absolute; z-index: 4; top: 0; bottom: 0; width: 35%; border: 0; background: none; cursor: pointer; }
.st-nav.prev { left: 0; } .st-nav.next { right: 0; width: 65%; }
.st-nav:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 30px; }
@media (max-width: 900px) {
  .sts-in { grid-template-columns: minmax(0, 1fr); }
  .sts-text { text-align: center; } .sts-text .kicker { justify-content: center; } .sts-text > p:not(.kicker) { margin-left: auto; margin-right: auto; }
  .st-hls { display: flex; gap: 12px; max-width: none; margin: 22px -16px 0; padding: 4px 16px 6px; overflow-x: auto; scrollbar-width: none; }
  .st-hls::-webkit-scrollbar { display: none; }
  .st-hls li { flex: none; width: 76px; }
  .st-ring { width: 64px; height: 64px; } .st-ring svg { width: 24px; height: 24px; }
  .st-hl small { font-size: .6875rem; }
  .st-view { max-width: 340px; margin: 0 auto; aspect-ratio: 9 / 13; }
}
@media (prefers-reduced-motion: reduce) { .st-bars i.is-on b { animation: none; transform: scaleX(1); } }

/* ---------- how it works: your profile fills up, one post for every step ---------- */
.sp-time.pf { padding: clamp(40px, 6vw, 80px) 0 0; }
.pf-track { position: relative; height: 320vh; }
.pf-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--header-h) + clamp(14px, 3vh, 34px)) var(--gutter) 24px; }
.pf .sec-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.875rem); }
.pf .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.pf-in { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 420px); justify-content: center; align-items: center; gap: clamp(24px, 5vw, 70px); width: 100%; margin: clamp(18px, 3vh, 36px) auto 0; }
.pf-phone { padding: 18px 16px 16px; border-radius: 30px; color: #F5F5F5; background: #000; box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .22), 0 50px 100px -40px rgba(214, 41, 118, .55); }
.pf-head { display: flex; align-items: center; gap: 18px; }
.pf-av { flex: none; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: var(--ig); }
.pf-av img { width: 100%; height: 100%; padding: 14px; border-radius: 50%; background: #0B1530; box-shadow: 0 0 0 3px #000; }
.pf-stats { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; font-size: .75rem; color: #A8A8A8; }
.pf-stats b { display: block; font-family: var(--f-display); font-size: 1.125rem; color: #fff; font-variant-numeric: tabular-nums; }
.pf-stats b.bump { animation: mtPop .5s var(--ease); }
.pf-name { margin-top: 10px; font-size: .875rem; line-height: 1.3; } .pf-name small { display: block; color: #A8A8A8; font-size: .75rem; }
.pf-tabs { display: flex; justify-content: space-around; margin: 12px -16px 2px; padding-top: 10px; border-top: 1px solid #262626; font-size: .75rem; color: #737373; }
.pf-tabs b { color: #fff; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 -16px; padding: 0; list-style: none; }
.pf-tile { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; overflow: hidden; background: #121212; color: #fff;
  font-size: .6875rem; line-height: 1.2; }
.pf-tile > * { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.pf-tile::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.pf-tile.c0::before { background: linear-gradient(150deg, #FEDA75, #FA7E1E); } .pf-tile.c1::before { background: linear-gradient(150deg, #FA7E1E, #D62976); }
.pf-tile.c2::before { background: linear-gradient(150deg, #D62976, #962FBF); } .pf-tile.c3::before { background: linear-gradient(150deg, #962FBF, #4F5BD5); }
.pf-tile.c4::before { background: linear-gradient(150deg, #4F5BD5, #0866FF); } .pf-tile.c5::before { background: linear-gradient(150deg, #0866FF, #22C3FF); }
.pf-tile.is-in::before { opacity: 1; }
.pf-tile.is-in > * { opacity: 1; transform: none; }
.pf-tile.is-in { animation: pfIn .6s var(--ease); }
@keyframes pfIn { from { transform: scale(.85); } }
.pf-tile > * { position: relative; }
.pf-num { position: absolute !important; left: 10px; top: 8px; font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; opacity: .9; }
.pf-when { font-size: .625rem; opacity: .85; }
.pf-tile b { margin-top: 2px; font-size: .8125rem; }
.pf-like { position: absolute !important; right: 8px; top: 10px; width: 16px; height: 16px; }
.pf-like svg { width: 100%; height: 100%; fill: #fff; }
.pf-tile.is-on { outline: 3px solid #fff; outline-offset: -3px; z-index: 1; }
.pf-caps { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.pf-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.pf-cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.pf-cw { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; color: #F48FB1; }
.pf-cn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--ig); font-family: var(--f-display); }
.pf-cap h3 { margin-top: 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.pf-cap p:last-child { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: #C9D6F0; }
@media (max-width: 900px) {
  .pf-track { height: 300vh; }
  .pf-stage { height: auto; min-height: 0; padding-top: calc(var(--header-h) + 4px); padding-bottom: 8px; }
  .pf .sec-head p:not(.kicker) { display: none; }
  .pf .sec-head h2 { font-size: 1.625rem; margin-top: 6px; }
  .pf-in { grid-template-columns: minmax(0, 360px); gap: 14px; margin-top: 12px; }
  .pf-phone { padding: 14px 12px 12px; border-radius: 24px; }
  .pf-av { width: 54px; height: 54px; } .pf-av img { padding: 10px; }
  .pf-head { gap: 12px; } .pf-stats b { font-size: 1rem; }
  .pf-grid, .pf-tabs { margin-left: -12px; margin-right: -12px; }
  .pf-tile { padding: 7px; } .pf-num { font-size: 1.125rem; left: 7px; top: 5px; } .pf-tile b { font-size: .6875rem; } .pf-when { font-size: .5625rem; }
  .pf-cap h3 { font-size: 1.375rem; margin-top: 8px; } .pf-cap p:last-child { font-size: .9375rem; margin-top: 6px; }
  .pf-cn { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .pf-track { height: auto; } .pf-stage { position: relative; height: auto; } .pf-tile::before, .pf-tile > * { opacity: 1; transform: none; } .pf-caps { gap: 18px; } .pf-cap { grid-area: auto; opacity: 1; transform: none; } }

/* ---------- questions: a chat with quick replies ---------- */
.ms { padding: clamp(60px, 8vw, 110px) var(--gutter) 0; }
.ms-win { max-width: 720px; margin: clamp(30px, 4vw, 50px) auto 0; border-radius: 26px; overflow: hidden; background: #0B1328; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16), 0 50px 100px -50px rgba(160, 51, 255, .55); }
.ms-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ms-hav { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0B1530; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ms-hav i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #31A24C; box-shadow: 0 0 0 2.5px #0B1328; }
.ms-head p { line-height: 1.25; } .ms-head b { display: block; color: #fff; } .ms-head small { color: var(--muted); font-size: .8125rem; }
.ms-body { display: flex; flex-direction: column; gap: 10px; max-height: 440px; min-height: 260px; padding: 20px 18px; overflow-y: auto; scroll-behavior: smooth; }
.ms-row { display: flex; align-items: flex-end; gap: 8px; }
.ms-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0B1530; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ms-b { max-width: 78%; padding: 10px 14px; border-radius: 20px; font-size: .9688rem; line-height: 1.5; }
.ms-b.them { color: #E4E6EB; background: #242B3D; border-bottom-left-radius: 6px; }
.ms-b.me { align-self: flex-end; color: #fff; background: var(--msg); border-bottom-right-radius: 6px; }
.ms-qa { display: flex; flex-direction: column; gap: 10px; }
.ms-qa.is-new .me { animation: msIn .4s var(--ease) both; }
.ms-qa.is-new .ms-row { animation: msIn .4s .1s var(--ease) both; }
@keyframes msIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.ms-typing .ms-b { display: flex; gap: 4px; padding: 14px; }
.ms-typing .ms-b i { width: 7px; height: 7px; border-radius: 50%; background: #B0B3B8; animation: msDot 1s ease-in-out infinite; }
.ms-typing .ms-b i:nth-child(2) { animation-delay: .15s; } .ms-typing .ms-b i:nth-child(3) { animation-delay: .3s; }
@keyframes msDot { 50% { transform: translateY(-4px); opacity: .5; } }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 18px; list-style: none; border-top: 1px solid var(--line); }
.ms-chip { padding: 9px 14px; border: 0; border-radius: 999px; font: 600 .875rem var(--f-body); color: #6FB0FF; background: rgba(8, 102, 255, .12); box-shadow: inset 0 0 0 1px rgba(8, 102, 255, .45); cursor: pointer; text-align: left; transition: background .25s, transform .2s; }
.ms-chip:hover { background: rgba(8, 102, 255, .22); transform: translateY(-1px); }
.ms-chip:disabled { display: none; }
.ms-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
@media (max-width: 720px) {
  .ms-win { border-radius: 20px; }
  .ms-body { max-height: 380px; padding: 16px 12px; }
  .ms-b { max-width: 86%; font-size: .9063rem; }
  .ms-chips { flex-wrap: nowrap; overflow-x: auto; padding: 12px; scrollbar-width: none; }
  .ms-chips::-webkit-scrollbar { display: none; }
  .ms-chip { flex: none; white-space: nowrap; }
  .ms-foot { flex-direction: column; align-items: stretch; text-align: center; }
}
.ms [hidden] { display: none !important; }
/* Meta fixes */
.mt-stage[data-phase="0"] .mt-fb { transform: translate(8%, -48%) translateZ(120px) rotateY(6deg) scale(.96); }
.mt-stage[data-phase="0"] .mt-reel { transform: translate(-50%, -50%) translateZ(0); }
.mt-rx { left: 44%; }
.mt-n.n1 { right: 3%; }
.spo p span { display: inline; margin-top: 0; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.spo p .spo-rcs { display: flex; }
.spo p .spo-who > span:last-child { display: block; }
.ms-chips li:has(.ms-chip:disabled) { display: none; }
.spo p.spo-who, .spo p.spo-rc { font-family: var(--f-body); font-size: .875rem; font-weight: 500; letter-spacing: 0; }
.spo p.spo-who b { font-weight: 700; }

/* the scroll guide: inside a section that plays as you scroll, it stays on and fills up */
.sh-body { display: flex; flex-direction: column; gap: 0; }
.sh-prog { display: block; height: 3px; max-height: 0; margin-top: 0; border-radius: 3px; overflow: hidden; background: rgba(169, 220, 255, .16); transition: max-height .3s, margin .3s; }
.sh-prog i { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 8px rgba(47, 212, 255, .8); transform-origin: left; transform: scaleX(0); transition: transform .15s linear; }
.gl-hint.is-sec { padding-right: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(47, 212, 255, .45), 0 20px 40px -18px rgba(10, 141, 255, 1); }
.gl-hint.is-sec .sh-prog { max-height: 3px; margin-top: 7px; }
@media (max-width: 720px) { .gl-hint { max-width: calc(100vw - 32px); } .gl-hint .sh-text { white-space: normal; line-height: 1.25; } }

/* ---------- Meta: the real difference. Same $500, likes vs customers ---------- */
.gv { padding: clamp(50px, 7vw, 100px) var(--gutter) 0; }
.gv-duel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 26px); max-width: 1080px; margin: clamp(30px, 4vw, 50px) auto 0; }
.gv-card { position: relative; padding: clamp(22px, 2.6vw, 32px); border-radius: 26px; transition: transform .8s var(--ease), opacity .8s; }
.gv-card.bad { background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.gv-card.good { background: linear-gradient(160deg, rgba(16, 60, 50, .55), rgba(5, 14, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1.5px rgba(61, 240, 160, .45), 0 40px 90px -40px rgba(61, 240, 160, .55); }
.gv-tag { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #C9D6F0; background: rgba(169, 220, 255, .1); }
.good .gv-tag { color: #04130C; background: #3DF0A0; }
.gv-card h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.bad h3 { color: #AFC0DE; }
.gv-goal { margin-top: 4px; font-size: .9375rem; color: var(--muted); }
.good .gv-goal { color: #9FF5CB; }
.gv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.gv-stats li { padding: 14px 16px; border-radius: 16px; background: rgba(169, 220, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
.gv-stats b { display: block; font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.bad .gv-stats b { color: #AFC0DE; }
.gv-stats span { font-size: .8125rem; color: var(--muted); }
.bad .gv-stats li.key { background: rgba(234, 67, 53, .1); box-shadow: inset 0 0 0 1.5px rgba(234, 67, 53, .5); }
.bad .gv-stats li.key b { color: #FF8A80; }
.good .gv-stats li.key { background: rgba(61, 240, 160, .12); box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .6); }
.good .gv-stats li.key b { color: #3DF0A0; }
.gv-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.gv-foot b { color: #fff; } .bad .gv-foot span:last-child b { color: #FF8A80; } .good .gv-foot span:last-child b { color: #3DF0A0; }
.gv-vs { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-family: var(--f-display); font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 0 30px rgba(10, 141, 255, .7); }
.gv:not(.is-in) .gv-card.bad { transform: translateX(-30px); opacity: 0; }
.gv:not(.is-in) .gv-card.good { transform: translateX(30px); opacity: 0; }
.gv.is-in .gv-card.bad { transition-delay: .1s; }
.gv.is-in .gv-card.good { transition-delay: .5s; }
.gv.is-done .gv-card.bad { opacity: .78; }
.gv-note { max-width: 1080px; margin: 14px auto 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.gv-types-wrap { max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; }
.gv-sub { text-align: center; font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -.02em; }
.gv-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.gv-type { padding: 22px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(14, 34, 80, .7), rgba(5, 12, 32, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(169, 220, 255, .12); transition: transform .4s var(--ease), box-shadow .4s; }
.gv-type:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(8, 102, 255, .5), 0 30px 60px -30px rgba(8, 102, 255, .7); }
.gv-type .sp-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(8, 102, 255, .16); }
.gv-type .sp-ico svg { width: 24px; height: 24px; }
.gv-who { margin-top: 14px; font-size: .8125rem; font-weight: 700; color: #6FA8FF; }
.gv-type h4 { margin-top: 4px; font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.gv-type p:last-child { margin-top: 8px; font-size: .875rem; line-height: 1.55; color: #C9D6F0; }
@media (max-width: 1000px) { .gv-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .gv-duel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gv-vs { margin: -12px auto; position: relative; z-index: 1; width: 46px; height: 46px; font-size: .875rem; }
  .gv-card { padding: 20px 16px; border-radius: 22px; }
  .gv-stats { gap: 8px; margin-top: 14px; } .gv-stats li { padding: 10px 12px; }
  .gv-types { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gv-type { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .gv-type .sp-ico { grid-row: 1 / span 3; }
  .gv-who { margin-top: 0; }
  .gv:not(.is-in) .gv-card.bad, .gv:not(.is-in) .gv-card.good { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) { .gv:not(.is-in) .gv-card { transform: none !important; opacity: 1 !important; } }

/* how it works (profile): a complete phone, posts stay inside the screen */
.pf-in { grid-template-columns: auto minmax(0, 420px); }
.pf-phone { --pw: min(310px, calc((100svh - var(--header-h) - 250px) * 9 / 19)); width: var(--pw); aspect-ratio: 9 / 19; padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #34446A, #0C1630 45%, #1C2A4E); box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .4), 0 50px 100px -40px rgba(214, 41, 118, .5), 0 0 0 1px rgba(0, 0, 0, .6); }
.pf-scr { position: relative; display: flex; flex-direction: column; height: 100%; padding: 8px 12px 0; border-radius: 38px; overflow: hidden; background: #000; }
.pf-scr::before { content: ""; position: absolute; left: 50%; top: 8px; width: 34%; height: 22px; margin-left: -17%; border-radius: 14px; background: #000; box-shadow: 0 0 0 1px #111; z-index: 2; }
.pf-sb { display: flex; justify-content: space-between; align-items: center; padding: 3px 10px 12px; font-size: .6875rem; color: #fff; }
.pf-sb span { display: flex; gap: 3px; } .pf-sb i { width: 12px; height: 7px; border-radius: 2px; background: #fff; opacity: .85; } .pf-sb i:first-child { width: 10px; opacity: .6; }
.pf-head { gap: 12px; } .pf-av { width: 58px; height: 58px; } .pf-av img { padding: 11px; }
.pf-stats b { font-size: 1rem; } .pf-stats { font-size: .6875rem; }
.pf-name { margin-top: 8px; font-size: .8125rem; }
.pf-tabs { margin: 10px -12px 3px; padding-top: 8px; }
.pf-grid { flex: 1; min-height: 0; margin: 0 -12px; overflow: hidden; align-content: start; }
.pf-tile { padding: 8px; font-size: .625rem; background: linear-gradient(150deg, #13285A, #0A1534); box-shadow: inset 0 0 0 1px rgba(111, 168, 255, .16); }
.pf-tile:not(.is-in) > * { opacity: .55; transform: none; }
.pf-tile:not(.is-in) b { opacity: .35; }
.pf-tile:not(.is-in) .pf-like { opacity: 0; }
.pf-num { font-size: 1.25rem; left: 8px; top: 6px; } .pf-tile b { font-size: .75rem; } .pf-when { font-size: .5625rem; }
.pf-tile.is-on { outline: 2px solid #fff; outline-offset: -2px; }
.pf-old { aspect-ratio: 1; background: linear-gradient(150deg, #0F2150, #081230); box-shadow: inset 0 0 0 1px rgba(111, 168, 255, .1); position: relative; overflow: hidden; }
.pf-old::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(111, 168, 255, .12) 50%, transparent 70%); background-size: 250% 100%; animation: pfShine 2.8s linear infinite; }
@keyframes pfShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pf-nav { display: flex; justify-content: space-around; align-items: center; margin: 0 -12px; padding: 12px 14px 20px; background: #000; border-top: 1px solid #1E1E1E; position: relative; }
.pf-nav i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 2px #E4E4E4; }
.pf-nav i:nth-child(3) { border-radius: 6px; box-shadow: inset 0 0 0 2px #fff; }
.pf-nav i:last-child { border-radius: 50%; background: var(--ig); box-shadow: none; }
.pf-nav::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 34%; height: 4px; margin-left: -17%; border-radius: 4px; background: #fff; opacity: .8; }
@media (max-width: 900px) {
  .pf-in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pf-phone { --pw: min(280px, calc((100svh - var(--header-h) - 300px) * 9 / 19)); padding: 7px; border-radius: 38px; }
  .pf-scr { border-radius: 31px; padding: 6px 10px 0; }
  .pf-grid, .pf-tabs, .pf-nav { margin-left: -10px; margin-right: -10px; }
  .pf-caps { width: 100%; }
  .pf-head { gap: 10px; } .pf-av { width: 46px; height: 46px; } .pf-av img { padding: 9px; }
  .pf-stats b { font-size: .875rem; } .pf-stats { font-size: .625rem; }
  .pf-tile { padding: 6px; } .pf-num { font-size: 1rem; left: 6px; top: 4px; } .pf-tile b { font-size: .625rem; } .pf-when { display: none; }
  .pf-nav { padding: 9px 12px 16px; } .pf-nav i { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pf-old::after { animation: none; } }
.pf-when { display: none; }
.pf-tile b { font-size: .6875rem; line-height: 1.15; }
.pf-like { width: 13px; height: 13px; right: 7px; top: 8px; }
@media (max-height: 820px) and (min-width: 901px) { .pf-tile b { font-size: .5938rem; } .pf-num { font-size: 1rem; } .pf-stats { font-size: .625rem; } }
@media (max-width: 900px) {
  .pf-phone { --pw: min(250px, calc((100svh - var(--header-h) - 390px) * 9 / 19)); padding: 6px; border-radius: 32px; }
  .pf-scr { border-radius: 26px; padding: 5px 8px 0; }
  .pf-grid, .pf-tabs, .pf-nav { margin-left: -8px; margin-right: -8px; }
  .pf-sb { padding-bottom: 6px; } .pf-name { margin-top: 4px; font-size: .6875rem; } .pf-name small { font-size: .625rem; }
  .pf-av { width: 38px; height: 38px; } .pf-av img { padding: 7px; }
  .pf-tabs { margin-top: 6px; padding-top: 6px; font-size: .625rem; }
  .pf-tile b { font-size: .5625rem; } .pf-like { display: none; }
  .pf-nav { padding: 7px 10px 13px; } .pf-nav i { width: 13px; height: 13px; }
  .pf-in { gap: 10px; margin-top: 8px; }
}

/* =====================================================================
   SEO PAGE
   ===================================================================== */
/* ---------- hero: a search performance dashboard ---------- */
.csh .cs-stage { height: min(74vh, 660px); }
.cs-3d { left: 0; right: 0; top: 4%; }
.cs-win { border-radius: 20px; overflow: hidden; color: #202124; background: #fff; box-shadow: 0 50px 100px -40px rgba(10, 141, 255, .9), 0 0 0 1px rgba(255, 255, 255, .2); }
.cs-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #E8EAED; font-size: .875rem; }
.cs-dots { display: flex; gap: 4px; } .cs-dots i { width: 9px; height: 9px; border-radius: 50%; background: #4285F4; } .cs-dots i:nth-child(2) { background: #EA4335; } .cs-dots i:nth-child(3) { background: #FBBC05; } .cs-dots i:nth-child(4) { background: #34A853; }
.cs-site { margin-left: auto; padding: 4px 10px; border-radius: 6px; font-size: .75rem; color: #3C4043; background: #F1F3F4; }
.cs-range { font-size: .75rem; color: #5F6368; }
.cs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-card { position: relative; display: grid; padding: 12px 14px; color: #fff; }
.cs-card small { font-size: .6875rem; opacity: .9; }
.cs-card.c1 { background: #4285F4; } .cs-card.c2 { background: #5E35B1; } .cs-card.c3 { background: #00897B; } .cs-card.c4 { background: #E8710A; }
.cs-v { grid-area: 2 / 1; font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -.02em; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.cs-card small { grid-area: 1 / 1; }
.cs-stage[data-phase="0"] .v0, .cs-stage[data-phase="1"] .v1, .cs-stage[data-phase="2"] .v2, .cs-stage[data-phase="3"] .v3 { opacity: 1; transform: none; }
.cs-chart { padding: 14px 18px 4px; }
.cs-chart svg { display: block; width: 100%; height: 120px; overflow: visible; }
.cs-grid { stroke: #E8EAED; stroke-width: 1; fill: none; }
.cs-area { fill: url(#csg); clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); transition: clip-path 1.4s var(--ease); }
.cs-line { fill: none; stroke: #4285F4; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - max(.08, var(--t))); transition: stroke-dashoffset 1.4s var(--ease); }
.cs-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cs-table th { padding: 8px 18px; text-align: left; font-size: .6875rem; font-weight: 600; color: #5F6368; border-top: 1px solid #E8EAED; border-bottom: 1px solid #E8EAED; }
.cs-table th:not(:first-child), .cs-table td:not(:first-child) { text-align: right; }
.cs-table td { padding: 9px 18px; border-bottom: 1px solid #F1F3F4; }
.cs-pos { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.cs-pos .cs-v { grid-area: 1 / 1; font-family: var(--f-body); font-size: .875rem; font-weight: 700; color: #202124; }
.cs-stage[data-phase="3"] .cs-pos .v3 { color: #188038; }
.cs-up { font-weight: 700; color: #188038; opacity: 0; transition: opacity .5s; }
.cs-stage[data-phase="3"] .cs-up { opacity: 1; }
.csh .wbh-note.n1 { left: auto; right: -2%; top: -3%; } .csh .wbh-note.n2 { left: -4%; top: auto; bottom: 18%; }
.csh .wbh-rail { left: 6%; right: 6%; }
@media (max-width: 1000px) { .csh .cs-stage { height: auto; aspect-ratio: 1 / .95; } }
@media (max-width: 720px) {
  .csh .cs-stage { aspect-ratio: auto; height: 480px; }
  .cs-3d { left: -2%; right: -2%; }
  .cs-top { padding: 10px 12px; gap: 8px; font-size: .75rem; } .cs-range { display: none; }
  .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-card { padding: 8px 10px; } .cs-v { font-size: 1.125rem; }
  .cs-chart { padding: 8px 12px 0; } .cs-chart svg { height: 80px; }
  .cs-table th, .cs-table td { padding: 7px 10px; font-size: .6875rem; }
  .cs-table tr > :last-child { display: none; }
  .csh .wbh-note.n1 { right: 0; top: -6%; } .csh .wbh-note.n2 { left: 0; bottom: 12%; }
}

/* ---------- why it matters: your page climbs, the click share grows ---------- */
.cr-track { position: relative; height: 300svh; }
.cr-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: clamp(16px, 3vh, 34px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.cr .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.cr .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.cr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; width: 100%; max-width: 1100px; margin: 0 auto; }
.cr-ladder { --s: 0; position: relative; height: clamp(300px, 50vh, 460px); padding-left: 0; }
.cr-marks { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.cr-mk { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; border-radius: 14px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: .875rem; transition: color .4s, background .4s; }
.cr-pos { width: 42px; font-family: var(--f-display); font-weight: 700; color: #8FA0C4; }
.cr-mk.is-on { color: #fff; background: rgba(66, 133, 244, .1); }
.cr-you { position: absolute; left: 110px; right: -10px; bottom: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; background: #fff; color: #202124;
  box-shadow: 0 20px 40px -14px rgba(10, 141, 255, .9); transform: translateY(calc(var(--s) * (52px - (clamp(300px, 50vh, 460px))) / 4)); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1), box-shadow .5s; }
.cr-you b { display: block; font-size: .9375rem; color: #1A0DAB; } .cr-you small { font-size: .75rem; color: #188038; }
.cr-fav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0B1530; }
.cr-stage[data-s="4"] .cr-you { box-shadow: 0 0 0 3px #3DF0A0, 0 24px 50px -14px rgba(61, 240, 160, .9); }
.cr-side { position: relative; }
.cr-facts { display: grid; margin: 0; padding: 0; list-style: none; }
.cr-f { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease); }
.cr-f.is-on { opacity: 1; transform: none; }
.cr-big { font-family: var(--f-display); font-size: clamp(4rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -.05em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-f[data-i="4"] .cr-big { background: linear-gradient(100deg, #3DF0A0, #7BE3FF); -webkit-background-clip: text; background-clip: text; }
.cr-of { margin-top: 6px; font-size: 1.125rem; font-weight: 700; color: #fff; }
.cr-x { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: #C9D6F0; }
.cr-bar { height: 10px; margin-top: 24px; border-radius: 10px; background: rgba(169, 220, 255, .08); overflow: hidden; }
.cr-bar i { display: block; height: 100%; width: var(--w, 2%); border-radius: inherit; background: linear-gradient(90deg, #2B5BFF, #22C3FF, #3DF0A0); transition: width .8s var(--ease); }
.cr-src { margin-top: 12px; font-size: .75rem; color: var(--muted); }
@media (max-width: 900px) {
  .cr-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cr-ladder { height: 260px; }
  .cr-mk { height: 40px; font-size: .75rem; }
  .cr-you { left: 92px; right: 0; height: 40px; transform: translateY(calc(var(--s) * (40px - 260px) / 4)); }
  .cr-you b { font-size: .8125rem; }
  .cr-big { font-size: 3.5rem; }
}
@media (max-width: 720px) {
  .cr-stage { height: auto; min-height: 0; padding-bottom: 6px; }
  .cr .sec-head p:not(.kicker) { display: none; }
  .cr .sec-head h2 { font-size: 1.625rem; }
  .cr-of { font-size: 1rem; } .cr-x { font-size: .875rem; } .cr-bar { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cr-track { height: auto; } .cr-stage { position: relative; height: auto; } }

/* ---------- what is inside: SEO grows like a tree ---------- */
.tr-track { position: relative; height: 320svh; }
.tr-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.tr .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.tr .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.tr-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 50px); align-items: center; width: 100%; max-width: 1140px; margin: 0 auto; }
.tr-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tr-step { display: flex; gap: 14px; padding: 12px 14px; border-radius: 16px; color: var(--muted); cursor: pointer; transition: background .4s, box-shadow .4s; }
.tr-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .8125rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .3); transition: background .4s, color .4s, box-shadow .4s; }
.tr-t b { display: block; font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.02em; color: #8FA0C4; transition: color .4s; }
.tr-t span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .875rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.tr-step.is-done b, .tr-step.is-on b { color: #fff; }
.tr-step.is-done .tr-n, .tr-step.is-on .tr-n { color: #fff; background: var(--grad); box-shadow: 0 0 14px rgba(47, 212, 255, .6); }
.tr-step.is-on { background: rgba(10, 141, 255, .08); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
.tr-step.is-on .tr-t span { max-height: 80px; opacity: 1; margin-top: 4px; }
.tr-art { position: relative; }
.tr-art svg { display: block; width: 100%; max-height: 54vh; margin: 0 auto; overflow: visible; }
.tr-ground { stroke: rgba(169, 220, 255, .3); stroke-width: 2; stroke-dasharray: 4 6; fill: none; }
.tr-g path { fill: none; stroke-linecap: round; }
.tr-g.g0 path { stroke: #22C3FF; stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); filter: drop-shadow(0 0 6px rgba(34, 195, 255, .7)); }
.tr-g.g1 .tr-trunk { fill: url(#trk); transform-origin: 205px 285px; transform: scaleY(0); transition: transform .9s var(--ease); }
.tr-g.g2 path { stroke: url(#trk); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.tr-leaves circle { fill: url(#tlf); opacity: .9; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.tr-leaves circle:nth-child(2n) { transition-delay: .1s; } .tr-leaves circle:nth-child(3n) { transition-delay: .2s; }
.tr-fr circle { fill: #3DF0A0; filter: drop-shadow(0 0 8px rgba(61, 240, 160, .9)); }
.tr-fr text { font: 700 13px var(--f-display); fill: #04130C; text-anchor: middle; }
.tr-fr { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--d) cubic-bezier(.3, 1.6, .5, 1), opacity .3s var(--d); }
.tr-stage[data-s="0"] .g0 path, .tr-stage[data-s="1"] .g0 path, .tr-stage[data-s="2"] .g0 path, .tr-stage[data-s="3"] .g0 path, .tr-stage[data-s="4"] .g0 path { stroke-dashoffset: 0; }
.tr-stage[data-s="1"] .tr-trunk, .tr-stage[data-s="2"] .tr-trunk, .tr-stage[data-s="3"] .tr-trunk, .tr-stage[data-s="4"] .tr-trunk { transform: scaleY(1); }
.tr-stage[data-s="2"] .g2 path, .tr-stage[data-s="3"] .g2 path, .tr-stage[data-s="4"] .g2 path { stroke-dashoffset: 0; }
.tr-stage[data-s="3"] .tr-leaves circle, .tr-stage[data-s="4"] .tr-leaves circle { transform: scale(1); }
.tr-stage[data-s="4"] .tr-fr { opacity: 1; transform: scale(1); }
.tr-stage[data-s="4"] .tr-fr circle { animation: trBob 2.4s ease-in-out infinite; }
@keyframes trBob { 50% { transform: translateY(-3px); } }
.tr-tag { position: absolute; right: 0; top: 0; padding: 6px 12px; border-radius: 999px; font-size: .8125rem; color: #C9D6F0; background: rgba(8, 20, 48, .7); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tr-tag-n { font-weight: 700; color: #3DF0A0; }
@media (max-width: 900px) {
  .tr-body { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tr-list { order: 2; } .tr-step:not(.is-on) { display: none; }
  .tr-art svg { max-height: 36vh; }
}
@media (max-width: 720px) {
  .tr-stage { height: auto; min-height: 0; padding-bottom: 6px; }
  .tr .sec-head p:not(.kicker) { display: none; } .tr .sec-head h2 { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) { .tr-track { height: auto; } .tr-stage { position: relative; height: auto; } }

/* ---------- first CTA: your result climbs from third to first ---------- */
.ruc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 24px 40px; }
.ruc .sp-cta-actions { margin-top: 18px; }
.ru { position: relative; height: 196px; margin: 0; padding: 0; list-style: none; }
.ru-r { position: absolute; left: 0; right: 0; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; background: #fff; color: #202124; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); }
.ru-r small { display: block; font-size: .6875rem; color: #188038; } .ru-r b { display: block; font-size: .875rem; color: #1A0DAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-f { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #E8EAED; }
.ru-r.me .ru-f { background: var(--grad); }
.ru-r.a { animation: ruA 7s var(--ease) infinite; } .ru-r.b { animation: ruB 7s var(--ease) infinite; } .ru-r.me { animation: ruMe 7s var(--ease) infinite; z-index: 2; }
@keyframes ruA { 0%, 30% { top: 0; } 45%, 90% { top: 69px; } 100% { top: 0; } }
@keyframes ruB { 0%, 30% { top: 69px; } 45%, 90% { top: 138px; } 100% { top: 69px; } }
@keyframes ruMe { 0%, 30% { top: 138px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); } 45%, 90% { top: 0; box-shadow: 0 0 0 3px #3DF0A0, 0 18px 40px -12px rgba(61, 240, 160, .8); } 100% { top: 138px; } }
.ru-r.me::after { content: "#1"; position: absolute; right: 12px; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800; color: #04130C; background: #3DF0A0; animation: ruTag 7s infinite; }
@keyframes ruTag { 0%, 40% { opacity: 0; } 47%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 900px) { .ruc { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ru-r, .ru-r.me::after { animation: none !important; } .ru-r.a { top: 69px; } .ru-r.b { top: 138px; } .ru-r.me { top: 0; } }

/* ---------- no surprises: a sitemap, the pages light up one by one ---------- */
.smp { padding-top: clamp(50px, 7vw, 100px); }
.sm { max-width: 1100px; margin: clamp(30px, 4vw, 50px) auto 0; }
.sm-root { display: flex; align-items: center; gap: 12px; width: max-content; margin: 0 auto; padding: 14px 22px; border-radius: 18px; background: var(--grad); box-shadow: 0 20px 50px -18px rgba(10, 141, 255, .9); color: #fff; line-height: 1.2; }
.sm-root img { filter: brightness(10); } .sm-root small { display: block; font-size: .75rem; opacity: .85; }
.sm-kids { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 18px; margin: 46px 0 0; padding: 30px 0 0; list-style: none; }
.sm-kids::before { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 0; height: 2px; background: linear-gradient(90deg, rgba(47, 212, 255, .2), rgba(47, 212, 255, .7), rgba(47, 212, 255, .2)); }
.sm-kids::after { content: ""; position: absolute; left: 50%; top: -46px; width: 2px; height: 46px; background: rgba(47, 212, 255, .7); }
.sm-n { position: relative; padding: 20px; border-radius: 20px; background: linear-gradient(160deg, rgba(14, 34, 80, .7), rgba(5, 12, 32, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(169, 220, 255, .12); transition: transform .4s var(--ease), box-shadow .4s; outline: none; }
.sm-n::before { content: ""; position: absolute; left: 50%; top: -30px; width: 2px; height: 30px; background: rgba(47, 212, 255, .5); }
.sm-n:nth-child(n+4)::before { top: -46px; height: 46px; background: linear-gradient(rgba(47, 212, 255, .15), rgba(47, 212, 255, .5)); }
.sm-url { position: absolute; right: 16px; top: 18px; font-family: ui-monospace, Menlo, monospace; font-size: .6875rem; color: #6FA8FF; }
.sm-n .sp-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(10, 141, 255, .14); }
.sm-n .sp-ico svg { width: 22px; height: 22px; }
.sm-n h3 { margin-top: 14px; font-size: 1.125rem; letter-spacing: -.02em; }
.sm-n p { margin-top: 6px; font-size: .875rem; line-height: 1.55; color: #C9D6F0; }
.sm-n.is-lit, .sm-n:hover, .sm-n:focus-visible { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1.5px rgba(61, 240, 160, .6), 0 24px 50px -20px rgba(61, 240, 160, .55); }
.sm-n.is-lit .sp-ico { background: rgba(61, 240, 160, .18); }
.sm-n.is-lit .sp-ico svg { stroke: #3DF0A0; }
.sm:not(.is-in) .sm-n { opacity: 0; transform: translateY(20px); }
.sm.is-in .sm-n { transition: opacity .5s calc(var(--i) * .1s), transform .5s calc(var(--i) * .1s) var(--ease), box-shadow .4s; }
@media (max-width: 900px) {
  .sm-kids { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0 0 18px; padding: 0 0 0 24px; }
  .sm-kids::before { left: 0; right: auto; top: 0; bottom: 30px; width: 2px; height: auto; }
  .sm-kids::after { display: none; }
  .sm-n::before, .sm-n:nth-child(n+4)::before { left: -24px; top: 30px; width: 24px; height: 2px; }
  .sm-root { margin: 0; }
  .sm-n { padding: 16px; } .sm-url { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sm:not(.is-in) .sm-n { opacity: 1; transform: none; } }

/* ---------- how it works: the visitors chart draws itself ---------- */
.sp-time.gr { padding: clamp(40px, 6vw, 80px) 0 0; }
.gr-track { position: relative; height: 300vh; }
.gr-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + clamp(14px, 3vh, 34px)) var(--gutter) 24px; }
.gr .sec-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.875rem); }
.gr .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.gr-in { --p: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 60px); align-items: center; width: 100%; max-width: 1140px; margin: clamp(18px, 3vh, 36px) auto 0; }
.gr-card { padding: 20px 20px 10px; border-radius: 26px; background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(5, 12, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 50px 100px -60px rgba(10, 141, 255, .9); }
.gr-top { display: flex; justify-content: space-between; font-size: .875rem; color: var(--muted); } .gr-top b { color: #fff; }
.gr-card svg { display: block; width: 100%; max-height: 46vh; overflow: visible; }
.gr-grid { stroke: rgba(169, 220, 255, .1); fill: none; }
.gr-area { fill: url(#grg); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.gr-line { fill: none; stroke: #22C3FF; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); filter: drop-shadow(0 0 8px rgba(34, 195, 255, .7)); }
.gr-pin { opacity: 0; transition: opacity .4s; }
.gr-pin circle { fill: #0B1530; stroke: #22C3FF; stroke-width: 3; }
.gr-pin text { font: 700 13px var(--f-display); fill: #fff; text-anchor: middle; }
.gr-pin.is-in { opacity: 1; }
.gr-pin.is-on circle { fill: #3DF0A0; stroke: #fff; }
.gr-x { font: 600 10px var(--f-body); fill: #8A9CC2; text-anchor: middle; }
.gr-caps { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.gr-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; }
.gr-cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gr-cw { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; color: #7BE3FF; }
.gr-cw span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--grad); }
.gr-cap h3 { margin-top: 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.gr-cap p:last-child { margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: #C9D6F0; }
@media (max-width: 900px) {
  .gr-in { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
  .gr-stage { height: auto; min-height: 0; padding-bottom: 8px; }
  .gr .sec-head p:not(.kicker) { display: none; } .gr .sec-head h2 { font-size: 1.625rem; }
  .gr-card { padding: 14px 12px 6px; border-radius: 20px; }
  .gr-cap h3 { font-size: 1.375rem; margin-top: 8px; } .gr-cap p:last-child { font-size: .9375rem; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .gr-track { height: auto; } .gr-stage { position: relative; height: auto; } }

/* ---------- questions: table of contents and a featured answer ---------- */
.sn { padding: clamp(60px, 8vw, 110px) var(--gutter) 0; }
.sn-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); max-width: 1140px; margin: clamp(30px, 4vw, 50px) auto 0; }
.sn-toc { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.sn-q { display: flex; gap: 14px; width: 100%; padding: 13px 16px; border: 0; border-radius: 14px; text-align: left; font: 600 .9688rem/1.4 var(--f-body); color: #C9D6F0; background: none; cursor: pointer; transition: background .3s, color .3s; }
.sn-q span { flex: none; font-family: var(--f-display); color: var(--muted); }
.sn-q:hover { background: rgba(169, 220, 255, .06); color: #fff; }
.sn-q[aria-pressed="true"] { color: #fff; background: rgba(10, 141, 255, .12); box-shadow: inset 3px 0 0 #22C3FF; }
.sn-q[aria-pressed="true"] span { color: #7BE3FF; }
.sn-view { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.sn-a { padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: #fff; color: #202124; box-shadow: 0 40px 90px -40px rgba(10, 141, 255, .8); animation: snIn .45s var(--ease); }
@keyframes snIn { from { opacity: 0; transform: translateY(10px); } }
.sn-k { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #1967D2; background: #E8F0FE; }
.sn-a h3 { margin-top: 14px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.03em; color: #0A1430; }
.sn-t { margin-top: 12px; font-size: 1.0625rem; line-height: 1.65; color: #3C4043; }
.sn-src { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #E8EAED; font-size: .8125rem; color: #5F6368; }
.sn-src span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0B1530; }
.sn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted); }
@media (max-width: 900px) {
  .sn-box { grid-template-columns: minmax(0, 1fr); }
  .sn-view { position: static; order: -1; }
  .sn-toc { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .sn-toc::-webkit-scrollbar { display: none; }
  .sn-toc li { flex: none; max-width: 78vw; }
  .sn-q { padding: 10px 14px; border-radius: 999px; font-size: .875rem; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
  .sn-q[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #22C3FF; }
  .sn-q span { display: none; }
  .sn-foot { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (max-width: 900px) { .sn-view { order: 0; } }
.ru-r.me::after { content: none; }
.ru-1 { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: .75rem; font-weight: 800; color: #04130C; background: #3DF0A0; animation: ruTag 7s infinite; }
.cr-you { left: 46%; right: -10px; }
@media (max-width: 900px) { .cr-you { left: 50%; right: 0; padding: 0 10px; } .cr-you small { display: none; } }
@media (max-width: 720px) {
  .sm-n { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; padding: 14px; }
  .sm-n .sp-ico { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; } .sm-n .sp-ico svg { width: 19px; height: 19px; }
  .sm-n h3 { margin-top: 0; font-size: 1rem; } .sm-n p { margin-top: 2px; font-size: .8125rem; }
  .sm-n::before, .sm-n:nth-child(n+4)::before { top: 30px; }
}
.cs-line { vector-effect: none; stroke-width: 3; }
.gw-line { vector-effect: none; }

/* ---------- SEO hero: a 3D tower of search results, your result climbs to number 1 ---------- */
.clh .cl-stage { height: min(76vh, 680px); perspective: 1800px; }
.cl-scene { position: absolute; left: 6%; right: 18%; top: 4%; bottom: 14%; transform-style: preserve-3d; transform: rotateX(calc(26deg + var(--rx, 0deg))) rotateY(calc(-20deg + var(--ry, 0deg))) rotateZ(4deg); transition: transform 1.2s var(--ease); }
.clh.has-bot .cl-scene, .cl-stage.has-bot .cl-scene { right: 30%; }
.cl-stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.cl-stack::before { content: ""; position: absolute; inset: -6% -5%; border-radius: 28px; background: linear-gradient(160deg, rgba(14, 34, 80, .55), rgba(5, 12, 32, .35)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14), 0 60px 120px -40px rgba(10, 141, 255, .6); transform: translateZ(-30px); }
.cl-c, .cl-me { --y: 0; position: absolute; left: 0; right: 0; top: calc(var(--y) * 12.6%); height: 10.6%; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 14px;
  transition: top 1.1s cubic-bezier(.5, 0, .2, 1), transform 1.1s var(--ease), box-shadow .6s, background .6s; }
.cl-c { background: rgba(255, 255, 255, .92); color: #202124; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.cl-c small, .cl-me small { display: block; font-size: .625rem; color: #188038; line-height: 1.2; }
.cl-c b, .cl-me b { display: block; font-size: .8125rem; color: #1A0DAB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cl-f { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E8EAED; }
.cl-me { z-index: 3; background: #fff; transform: translateZ(70px) scale(1.04); box-shadow: 0 0 0 2px #22C3FF, 0 24px 50px -14px rgba(10, 141, 255, .95); }
.cl-me .cl-f { background: #0B1530; }
.cl-me em { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: .75rem; color: #04130C; background: #3DF0A0; opacity: 0; transform: scale(.4); transition: opacity .4s .9s, transform .5s .9s cubic-bezier(.3, 1.6, .5, 1); }
.cl-stage[data-phase="3"] .cl-me { box-shadow: 0 0 0 3px #3DF0A0, 0 30px 60px -12px rgba(61, 240, 160, .9); transform: translateZ(110px) scale(1.08); }
.cl-stage[data-phase="3"] .cl-me em { opacity: 1; transform: none; }
.cl-trail { position: absolute; left: 10%; right: 10%; top: 100%; height: 0; border-radius: 0 0 40% 40%; background: linear-gradient(rgba(47, 212, 255, .55), transparent); filter: blur(6px); transition: height .4s; pointer-events: none; }
.cl-stage:not([data-phase="0"]) .cl-trail { height: 160%; animation: clTrail 1.4s ease-out forwards; }
@keyframes clTrail { 0% { height: 260%; opacity: 1; } 100% { height: 40%; opacity: .2; } }
.cl-stage[data-phase="3"] .cl-c { background: rgba(255, 255, 255, .7); }
.cl-pg { position: absolute; left: -64px; width: 54px; text-align: right; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cl-pg.p1 { top: 2%; color: #3DF0A0; } .cl-pg.p2 { top: 52%; } .cl-pg.p3 { top: 90%; }
.cl-pg::after { content: ""; position: absolute; right: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.cl-rank { position: absolute; z-index: 6; right: 0; top: 2%; display: grid; justify-items: end; padding: 14px 18px; border-radius: 18px; text-align: right;
  background: rgba(8, 20, 48, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(169, 220, 255, .2), 0 20px 50px -20px rgba(0, 0, 0, .8); }
.cl-rank small { font-size: .75rem; color: #C9D6F0; }
.cl-vs { display: grid; } .cl-v { grid-area: 1 / 1; font-family: var(--f-display); font-size: 3.25rem; line-height: 1; letter-spacing: -.04em; color: #fff; opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .4s, transform .6s var(--ease); }
.cl-stage[data-phase="0"] .v0, .cl-stage[data-phase="1"] .v1, .cl-stage[data-phase="2"] .v2, .cl-stage[data-phase="3"] .v3 { opacity: 1; transform: none; }
.cl-v.v3 { background: linear-gradient(100deg, #3DF0A0, #7BE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-sub { font-size: .75rem; color: var(--muted); }
.clh .wbh-note.n1 { left: auto; right: 0; top: 34%; } .clh .wbh-note.n2 { left: 0; top: auto; bottom: 16%; }
.cl-stage.has-bot .wbh-note.n1 { right: 26%; }
.cl-bot { position: absolute; z-index: 5; right: -2%; bottom: 8%; height: 86%; aspect-ratio: 614 / 1500; pointer-events: none; animation: wbBot 7s ease-in-out infinite; }
.cl-bot img { width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(10, 141, 255, .3)); }
.cl-stage.has-bot .cl-rank { right: 24%; }
.clh .wbh-rail { left: 6%; right: 6%; }
@media (max-width: 1000px) { .clh .cl-stage { height: auto; aspect-ratio: 1 / .9; } }
@media (max-width: 720px) {
  .clh .cl-stage { aspect-ratio: auto; height: 470px; }
  .cl-scene { left: 15%; right: 0; top: 18%; bottom: 14%; transform: rotateX(18deg) rotateY(-14deg) rotateZ(3deg); }
  .cl-stage.has-bot .cl-scene { right: 22%; }
  .cl-c, .cl-me { padding: 0 10px; gap: 8px; border-radius: 10px; } .cl-c b, .cl-me b { font-size: .6875rem; } .cl-c small, .cl-me small { font-size: .5625rem; }
  .cl-f { width: 18px; height: 18px; } .cl-me em { font-size: .625rem; padding: 2px 7px; }
  .cl-pg { left: -52px; width: 44px; font-size: .5625rem; }
  .cl-rank { left: 0; right: auto; top: 0; justify-items: start; text-align: left; padding: 10px 14px; } .cl-v { font-size: 2.25rem; }
  .clh .wbh-note.n1 { right: 0; top: 0; } .clh .wbh-note.n2 { display: none; }
  .cl-stage.has-bot .cl-rank { right: auto; }
  .cl-bot { height: 70%; right: -6%; bottom: 12%; }
}
@media (prefers-reduced-motion: reduce) { .cl-bot, .cl-trail { animation: none !important; } }
.cl-stage[data-phase="0"] .cl-me { --y: 7; }
.cl-stage[data-phase="0"] .cl-c.c0 { --y: 0; }
.cl-stage[data-phase="0"] .cl-c.c1 { --y: 1; }
.cl-stage[data-phase="0"] .cl-c.c2 { --y: 2; }
.cl-stage[data-phase="0"] .cl-c.c3 { --y: 3; }
.cl-stage[data-phase="0"] .cl-c.c4 { --y: 4; }
.cl-stage[data-phase="0"] .cl-c.c5 { --y: 5; }
.cl-stage[data-phase="0"] .cl-c.c6 { --y: 6; }
.cl-stage[data-phase="1"] .cl-me { --y: 4; }
.cl-stage[data-phase="1"] .cl-c.c0 { --y: 0; }
.cl-stage[data-phase="1"] .cl-c.c1 { --y: 1; }
.cl-stage[data-phase="1"] .cl-c.c2 { --y: 2; }
.cl-stage[data-phase="1"] .cl-c.c3 { --y: 3; }
.cl-stage[data-phase="1"] .cl-c.c4 { --y: 5; }
.cl-stage[data-phase="1"] .cl-c.c5 { --y: 6; }
.cl-stage[data-phase="1"] .cl-c.c6 { --y: 7; }
.cl-stage[data-phase="2"] .cl-me { --y: 2; }
.cl-stage[data-phase="2"] .cl-c.c0 { --y: 0; }
.cl-stage[data-phase="2"] .cl-c.c1 { --y: 1; }
.cl-stage[data-phase="2"] .cl-c.c2 { --y: 3; }
.cl-stage[data-phase="2"] .cl-c.c3 { --y: 4; }
.cl-stage[data-phase="2"] .cl-c.c4 { --y: 5; }
.cl-stage[data-phase="2"] .cl-c.c5 { --y: 6; }
.cl-stage[data-phase="2"] .cl-c.c6 { --y: 7; }
.cl-stage[data-phase="3"] .cl-me { --y: 0; }
.cl-stage[data-phase="3"] .cl-c.c0 { --y: 1; }
.cl-stage[data-phase="3"] .cl-c.c1 { --y: 2; }
.cl-stage[data-phase="3"] .cl-c.c2 { --y: 3; }
.cl-stage[data-phase="3"] .cl-c.c3 { --y: 4; }
.cl-stage[data-phase="3"] .cl-c.c4 { --y: 5; }
.cl-stage[data-phase="3"] .cl-c.c5 { --y: 6; }
.cl-stage[data-phase="3"] .cl-c.c6 { --y: 7; }

/* CSP safe delays (no inline styles) */
.sm.is-in .sm-n:nth-child(2) { transition-delay: .1s, .1s, 0s; } .sm.is-in .sm-n:nth-child(3) { transition-delay: .2s, .2s, 0s; } .sm.is-in .sm-n:nth-child(4) { transition-delay: .3s, .3s, 0s; }
.sm.is-in .sm-n:nth-child(5) { transition-delay: .4s, .4s, 0s; } .sm.is-in .sm-n:nth-child(6) { transition-delay: .5s, .5s, 0s; }
.sm.is-in .sm-n { transition: opacity .5s, transform .5s var(--ease), box-shadow .4s; }
.tr-fr { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.tr-fr:nth-child(2) { transition-delay: .12s; } .tr-fr:nth-child(3) { transition-delay: .24s; } .tr-fr:nth-child(4) { transition-delay: .36s; } .tr-fr:nth-child(5) { transition-delay: .48s; } .tr-fr:nth-child(6) { transition-delay: .6s; } .tr-fr:nth-child(7) { transition-delay: .72s; }

/* tree with the robot beside it */
.tr-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0; }
.tr-art svg { grid-column: 1; grid-row: 1; }
.tr-tag { z-index: 2; }
.tr-bot { grid-column: 2; grid-row: 1; height: min(52vh, 460px); width: auto; margin-left: -30px; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(10, 141, 255, .25)); transform: translateX(30px); opacity: .0; transition: opacity .8s, transform .9s var(--ease); }
.tr-stage:not([data-s="-1"]) .tr-bot { opacity: 1; transform: none; }
.tr-stage[data-s="4"] .tr-bot { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 50px rgba(61, 240, 160, .45)); }
@media (max-width: 900px) { .tr-bot { height: 34vh; margin-left: -10px; } .tr-art svg { max-height: 34vh; } }

/* ---------- SEO how it works: a live traffic chart ---------- */
.sp-time.g2 { padding: clamp(40px, 6vw, 80px) 0 0; }
.g2-track { position: relative; height: 320vh; }
.g2-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + clamp(12px, 2.4vh, 30px)) var(--gutter) 20px; }
.g2 .sec-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.875rem); }
.g2 .sec-head p:not(.kicker) { margin-top: 8px; color: #C9D6F0; }
.g2-card { --k: 0; position: relative; width: 100%; max-width: 1100px; margin: clamp(14px, 2.4vh, 30px) auto 0; padding: clamp(16px, 2vw, 26px) clamp(16px, 2.4vw, 30px) clamp(14px, 2vw, 22px); border-radius: 30px;
  background: radial-gradient(120% 90% at 85% 0%, rgba(34, 195, 255, .14), transparent 55%), linear-gradient(160deg, rgba(14, 34, 80, .85), rgba(4, 10, 26, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .16), 0 60px 120px -60px rgba(10, 141, 255, .9); }
.g2-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.g2-kpi small { font-size: .8125rem; color: var(--muted); }
.g2-kpi p { display: flex; align-items: baseline; gap: 12px; }
.g2-n { font-family: var(--f-display); font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -.04em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.g2-badge { padding: 4px 11px; border-radius: 999px; font-size: .875rem; font-weight: 700; color: #04130C; background: #3DF0A0; box-shadow: 0 0 20px rgba(61, 240, 160, .5); }
.g2-badge i { font-style: normal; }
.g2-free { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .8125rem; color: #C9D6F0; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.g2-free b { color: #3DF0A0; }
.g2-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; animation: gshBlink 1.4s steps(1) infinite; }
.g2-chart { position: relative; margin-top: 8px; }
.g2-chart svg { display: block; width: 100%; height: auto; max-height: 34vh; overflow: visible; }
.g2-gl { stroke: rgba(169, 220, 255, .09); stroke-width: 1; fill: none; }
.g2-y { font: 600 11px var(--f-body); fill: #6F80A6; text-anchor: end; }
.g2-area { fill: url(#g2a); }
.g2-line { fill: none; stroke: url(#g2l); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); filter: drop-shadow(0 0 10px rgba(34, 195, 255, .8)); }
.g2-pin .r { fill: rgba(34, 195, 255, .12); stroke: rgba(34, 195, 255, .3); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.g2-pin .d { fill: #0B1530; stroke: #3A4A70; stroke-width: 3; transition: fill .4s, stroke .4s; }
.g2-pin.is-in .r { transform: scale(1); } .g2-pin.is-in .d { fill: #fff; stroke: #22C3FF; }
.g2-head .h1 { fill: rgba(61, 240, 160, .25); animation: g2Pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.g2-head .h2 { fill: #3DF0A0; stroke: #fff; stroke-width: 3; }
@keyframes g2Pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.g2-tip { position: absolute; left: calc(var(--tx, 0) * 1%); top: calc(var(--ty, 0) * 1%); transform: translate(-50%, calc(-100% - 22px)); padding: 8px 12px; border-radius: 12px; white-space: nowrap; text-align: center;
  background: #fff; color: #0A1430; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); pointer-events: none; transition: opacity .3s; }
.g2-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.g2-tip small { display: block; font-size: .6875rem; font-weight: 700; color: #1967D2; } .g2-tip b { font-size: .875rem; }
.g2-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.g2-s { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, box-shadow .4s; }
.g2-sn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .75rem; font-weight: 700; color: var(--muted); box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .25); transition: all .4s; }
.g2-st { min-width: 0; } .g2-st small { display: block; font-size: .6875rem; color: var(--muted); } .g2-st b { display: block; font-size: .8125rem; color: #8FA0C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.g2-s.is-done .g2-sn { color: #fff; background: rgba(34, 195, 255, .25); box-shadow: none; } .g2-s.is-done b { color: #DCE6F7; }
.g2-s.is-on { background: rgba(10, 141, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(34, 195, 255, .55), 0 10px 30px -14px rgba(34, 195, 255, .7); }
.g2-s.is-on .g2-sn { color: #04130C; background: #3DF0A0; box-shadow: 0 0 14px rgba(61, 240, 160, .7); } .g2-s.is-on b { color: #fff; }
.g2-ds { display: grid; margin-top: 12px; }
.g2-d { grid-area: 1 / 1; font-size: .9688rem; line-height: 1.55; color: #C9D6F0; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease); }
.g2-d b { color: #fff; } .g2-d.is-on { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .g2-stage { height: auto; min-height: 0; padding-bottom: 8px; }
  .g2 .sec-head p:not(.kicker) { display: none; } .g2 .sec-head h2 { font-size: 1.625rem; }
  .g2-card { padding: 14px; border-radius: 22px; margin-top: 12px; }
  .g2-free { display: none; } .g2-n { font-size: 2rem; }
  .g2-chart svg { max-height: none; }
  .g2-y { font-size: 18px; } .g2-tip { padding: 6px 10px; } .g2-tip b { font-size: .75rem; }
  .g2-steps { gap: 4px; } .g2-s { justify-content: center; padding: 8px 0; } .g2-st { display: none; }
  .g2-d { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .g2-track { height: auto; } .g2-stage { position: relative; height: auto; } .g2-head .h1 { animation: none; } }
.g2-line { stroke-dasharray: none; stroke-dashoffset: 0; filter: none; }
.g2-chart svg { filter: drop-shadow(0 0 8px rgba(34, 195, 255, .35)); }
.g2-pin:not(.is-in) .d { opacity: .25; }
.tr-tag { right: auto; left: 0; }
.g2-tip.is-low { transform: translate(-50%, 24px); }
.g2-tip.is-low::after { bottom: auto; top: -6px; }
.g2-tip.is-right { transform: translate(calc(-100% + 30px), calc(-100% - 22px)); } .g2-tip.is-right::after { left: calc(100% - 30px); }
.g2-tip.is-low.is-right { transform: translate(calc(-100% + 30px), 24px); }
@media (max-width: 720px) {
  .g2-chart { margin: 4px -10px 0; }
  .cl-scene { top: 30%; }
  .clh .cl-stage { height: 500px; }
}
@media (max-width: 720px) { .cl-stage.has-bot .wbh-note.n1 { display: none; } .cl-stage.has-bot .cl-bot { height: 62%; right: -8%; bottom: 14%; } }
/* SEO tree v2: fine roots, slim branches, soft foliage */
.tr-art { display: block; }
.tr-art svg { max-height: 56vh; }
.tr-g.g0 path { stroke: #4FD2FF; stroke-width: inherit; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; filter: drop-shadow(0 0 3px rgba(34, 195, 255, .8)); transition: stroke-dashoffset 1.6s var(--ease); }
.tr-g.g2 path { stroke: url(#trk); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.tr-leaves circle { opacity: .55; mix-blend-mode: screen; }
.tr-leaves circle.l1 { opacity: .4; } .tr-leaves circle.l2 { opacity: .7; }
.tr-glow { opacity: 0; transition: opacity 1s; }
.tr-stage[data-s="3"] .tr-glow, .tr-stage[data-s="4"] .tr-glow { opacity: 1; }
.tr-fr circle { r: 10; }
/* SEO hero: ranking card away from the robot's hand */
.cl-stage.has-bot .cl-rank { right: auto; left: -2%; top: auto; bottom: 16%; justify-items: start; text-align: left; }
.cl-stage.has-bot .wbh-note.n2 { left: auto; right: 30%; bottom: 14%; }
@media (max-width: 720px) { .cl-stage.has-bot .cl-rank { left: 0; top: 0; bottom: auto; } }

/* =====================================================================
   DIGITAL MARKETING PAGE
   ===================================================================== */
/* ---------- hero: a growth flywheel ---------- */
.fwh .fw-stage { height: min(76vh, 680px); }
.fw-3d { position: absolute; left: 50%; top: 46%; width: min(470px, 86%); aspect-ratio: 1; transform: translate(-50%, -50%); }
.fw-wheel { position: absolute; inset: 0; animation: fwSpin 40s linear infinite; }
.fw-wheel svg { width: 100%; height: 100%; overflow: visible; }
@keyframes fwSpin { to { transform: rotate(360deg); } }
.fw-base { fill: none; stroke: rgba(169, 220, 255, .1); stroke-width: 26; }
.fw-in { fill: rgba(8, 20, 48, .5); stroke: rgba(169, 220, 255, .12); stroke-width: 1; }
.fw-dash { fill: none; stroke: rgba(169, 220, 255, .22); stroke-width: 1.2; stroke-dasharray: 2 8; }
.fw-arc { fill: none; stroke: rgba(47, 212, 255, .18); stroke-width: 26; stroke-linecap: butt; transition: stroke .6s, filter .6s; }
.fw-stage[data-phase="0"] .a0, .fw-stage[data-phase="1"] .a1, .fw-stage[data-phase="2"] .a2, .fw-stage[data-phase="3"] .a3 { stroke: url(#fwg); filter: drop-shadow(0 0 10px rgba(34, 195, 255, .9)); }
.fw-spark { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: 13px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 4px rgba(61, 240, 160, .9); }
.fw-core { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 35% 30%, rgba(34, 195, 255, .25), rgba(8, 20, 48, .9) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .25), 0 30px 60px -20px rgba(10, 141, 255, .8); }
.fw-core small { font-size: .75rem; color: #C9D6F0; }
.fw-vs { display: grid; } .fw-v { grid-area: 1 / 1; font-family: var(--f-display); font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: -.04em; color: #fff; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .4s, transform .6s var(--ease); }
.fw-stage[data-phase="0"] .v0, .fw-stage[data-phase="1"] .v1, .fw-stage[data-phase="2"] .v2, .fw-stage[data-phase="3"] .v3 { opacity: 1; transform: none; }
.fw-v.v3 { background: linear-gradient(100deg, #3DF0A0, #7BE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fw-core em { font-style: normal; font-size: .6875rem; font-weight: 700; color: #7BE3FF; }
.fw-ch { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #DCE6F7; white-space: nowrap; transform: translate(-50%, -50%);
  background: rgba(8, 20, 48, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2), 0 14px 30px -14px rgba(0, 0, 0, .8); transition: box-shadow .5s, color .5s, transform .6s var(--ease); animation: fwBob 6s ease-in-out infinite; }
.fw-ch .sp-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(10, 141, 255, .18); }
.fw-ch .sp-ico svg { width: 16px; height: 16px; }
@keyframes fwBob { 50% { translate: 0 -6px; } }
.fw-ch.k0 { left: 27%; top: 10%; } .fw-ch.k1 { left: 73%; top: 10%; animation-delay: -1s; } .fw-ch.k2 { left: 97%; top: 50%; animation-delay: -2s; }
.fw-ch.k3 { left: 73%; top: 90%; animation-delay: -3s; } .fw-ch.k4 { left: 27%; top: 90%; animation-delay: -4s; } .fw-ch.k5 { left: 3%; top: 50%; animation-delay: -5s; }
.fw-stage[data-phase="0"] .g0, .fw-stage[data-phase="1"] .g1, .fw-stage[data-phase="2"] .g2, .fw-stage[data-phase="3"] .g3 { color: #fff; box-shadow: inset 0 0 0 1.5px #22C3FF, 0 0 30px -4px rgba(34, 195, 255, .8); transform: translate(-50%, -50%) scale(1.08); }
.fw-n { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: .8125rem; color: #C9D6F0; white-space: nowrap;
  background: rgba(8, 20, 48, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35), 0 20px 40px -20px rgba(0, 0, 0, .8); opacity: 0; translate: 0 12px; transition: opacity .5s, translate .6s var(--ease); }
.fw-n b { color: #fff; } .fw-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; }
.fw-n.n1 { left: 0; top: 4%; } .fw-n.n2 { right: 0; top: 30%; } .fw-n.n3 { left: 2%; bottom: 18%; }
.fw-stage[data-phase="1"] .n1, .fw-stage[data-phase="2"] .n1, .fw-stage[data-phase="2"] .n2, .fw-stage[data-phase="3"] .n1, .fw-stage[data-phase="3"] .n2, .fw-stage[data-phase="3"] .n3 { opacity: 1; translate: 0 0; }
.fwh .wbh-rail { left: 6%; right: 6%; }
@media (max-width: 1000px) { .fwh .fw-stage { height: auto; aspect-ratio: 1 / .95; } }
@media (max-width: 720px) {
  .fwh .fw-stage { aspect-ratio: auto; height: 460px; }
  .fw-3d { width: 72%; top: 48%; }
  .fw-ch { padding: 5px 10px 5px 5px; font-size: .6875rem; gap: 5px; } .fw-ch .sp-ico { width: 22px; height: 22px; } .fw-ch .sp-ico svg { width: 13px; height: 13px; }
  .fw-ch.k2 { left: 92%; } .fw-ch.k5 { left: 8%; }
  .fw-n { font-size: .6875rem; padding: 7px 10px; } .fw-n.n2 { display: none; } .fw-n.n1 { top: 0; } .fw-n.n3 { bottom: 13%; }
}
@media (prefers-reduced-motion: reduce) { .fw-wheel, .fw-ch { animation: none; } }

/* ---------- why it matters: five people pulling apart snap into one team ---------- */
.pz-track { position: relative; height: 300svh; }
.pz-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.pz .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.pz .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.pz-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 50px); align-items: center; width: 100%; max-width: 1160px; margin: 0 auto; }
.pz-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pz-s { display: flex; gap: 14px; padding: 12px 14px; border-radius: 16px; transition: background .4s, box-shadow .4s; }
.pz-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .8125rem; font-weight: 700; color: var(--muted); box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .3); transition: all .4s; }
.pz-s b { display: block; font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: -.02em; color: #8FA0C4; transition: color .4s; }
.pz-s span > span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .875rem; line-height: 1.55; color: #C9D6F0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.pz-s.is-on { background: rgba(10, 141, 255, .08); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
.pz-s.is-on b, .pz-s.is-done b { color: #fff; }
.pz-s.is-on .pz-n, .pz-s.is-done .pz-n { color: #fff; background: var(--grad); box-shadow: 0 0 14px rgba(47, 212, 255, .6); }
.pz-s.is-on span > span { max-height: 80px; opacity: 1; margin-top: 4px; }
.pz-board { --a: 0; position: relative; height: clamp(320px, 52vh, 470px); border-radius: 28px; background: radial-gradient(70% 70% at 50% 50%, rgba(10, 141, 255, calc(var(--a) * .18)), transparent 70%), rgba(169, 220, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.pz-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pz-lines path { fill: none; vector-effect: non-scaling-stroke; }
.pz-lines .bad { stroke: rgba(234, 67, 53, .55); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: calc(1 - var(--a)); animation: pzJit 1.2s linear infinite; }
@keyframes pzJit { to { stroke-dashoffset: -22; } }
.pz-lines .ok { stroke: #22C3FF; stroke-width: 2; opacity: var(--a); filter: drop-shadow(0 0 4px rgba(34, 195, 255, .9)); }
.pz-core { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 2px; padding: 18px 22px; border-radius: 22px; text-align: center; background: var(--grad); color: #fff; box-shadow: 0 0 50px rgba(10, 141, 255, .7);
  transform: translate(-50%, -50%) scale(calc(.4 + var(--a) * .6)); opacity: var(--a); }
.pz-core img { filter: brightness(10); } .pz-core b { font-family: var(--f-display); font-size: 1.125rem; } .pz-core small { font-size: .75rem; opacity: .85; }
.pz-c { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; width: 210px; padding: 10px 12px; border-radius: 16px; background: rgba(8, 20, 48, .92); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18), 0 16px 34px -16px rgba(0, 0, 0, .9);
  left: calc((var(--x0) * (1 - var(--a)) + var(--x1) * var(--a)) * 1%); top: calc((var(--y0) * (1 - var(--a)) + var(--y1) * var(--a)) * 1%); transform: translate(-50%, -50%) rotate(calc(var(--r0) * (1 - var(--a)) * 1deg)); }
.pz-c.k0 { --x0: 22; --y0: 14; --r0: -10; --x1: 22; --y1: 18; } .pz-c.k1 { --x0: 76; --y0: 34; --r0: 8; --x1: 78; --y1: 18; } .pz-c.k2 { --x0: 30; --y0: 58; --r0: 9; --x1: 22; --y1: 82; }
.pz-c.k3 { --x0: 74; --y0: 82; --r0: -7; --x1: 78; --y1: 82; } .pz-c.k4 { --x0: 52; --y0: 36; --r0: 14; --x1: 50; --y1: 92; }
.pz-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: #fff; background: #3A4A70; transition: background .5s; }
.pz-c b { display: block; font-size: .875rem; color: #fff; } .pz-c small { display: none; align-items: center; gap: 4px; font-size: .75rem; }
.pz-bad { color: #FF8A80; } .pz-ok { color: #3DF0A0; } .pz-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pz-board:not(.is-ok) .pz-bad, .pz-board.is-ok .pz-ok { display: flex; }
.pz-board.is-ok .pz-c { box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .5), 0 16px 34px -16px rgba(61, 240, 160, .5); } .pz-board.is-ok .pz-av { background: var(--grad); }
.pz-kpis { position: absolute; left: 50%; bottom: -8px; z-index: 3; display: flex; gap: 10px; transform: translate(-50%, 30%); opacity: 0; transition: opacity .5s, transform .6s var(--ease); }
.pz-stage[data-s="3"] .pz-kpis { opacity: 1; transform: translate(-50%, 50%); }
.pz-k { padding: 10px 16px; border-radius: 14px; white-space: nowrap; background: rgba(8, 20, 48, .95); box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .45), 0 20px 40px -18px rgba(61, 240, 160, .5); }
.pz-k small { font-size: .75rem; color: #C9D6F0; } .pz-k p { display: flex; align-items: baseline; gap: 8px; } .pz-k s { color: #FF8A80; font-size: .875rem; } .pz-k b { font-family: var(--f-display); font-size: 1.5rem; color: #3DF0A0; }
@media (max-width: 900px) {
  .pz-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pz-steps { order: 2; } .pz-s:not(.is-on) { display: none; }
  .pz-board { height: 330px; }
  .pz-c { width: 150px; gap: 7px; padding: 7px 9px; border-radius: 12px; } .pz-av { width: 26px; height: 26px; font-size: .75rem; } .pz-c b { font-size: .75rem; } .pz-c small { font-size: .625rem; }
  .pz-c.k0 { --x1: 25; } .pz-c.k1 { --x1: 75; } .pz-c.k2 { --x1: 25; } .pz-c.k3 { --x1: 75; } .pz-c.k0, .pz-c.k1 { --y1: 14; } .pz-c.k2, .pz-c.k3 { --y1: 74; } .pz-c.k4 { --y1: 92; }
  .pz-core { padding: 12px 16px; } .pz-k { padding: 7px 10px; } .pz-k b { font-size: 1.125rem; }
}
@media (max-width: 720px) {
  .pz-stage { height: auto; min-height: 0; padding-bottom: 30px; }
  .pz .sec-head p:not(.kicker) { display: none; } .pz .sec-head h2 { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) { .pz-track { height: auto; } .pz-stage { position: relative; height: auto; } }

/* ---------- first CTA: a lock screen full of new customers ---------- */
.ntc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 24px 40px; }
.ntc .sp-cta-actions { margin-top: 18px; }
.nt { position: relative; height: 290px; padding: 18px 16px; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, rgba(160, 51, 255, .35), transparent 60%), radial-gradient(100% 80% at 100% 100%, rgba(10, 141, 255, .4), transparent 60%), #060D22; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); }
.nt-time { text-align: center; font-family: var(--f-display); font-size: 2.5rem; line-height: 1; color: #fff; letter-spacing: -.03em; } .nt-time small { display: block; margin-top: 4px; font-family: var(--f-body); font-size: .75rem; color: #C9D6F0; letter-spacing: 0; }
.nt-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.nt-i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 16px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; animation: ntCycle 9s var(--ease) infinite both; }
.nt-i .sp-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .9); } .nt-i .sp-ico svg { width: 17px; height: 17px; stroke: #0A1430; }
.nt-i small { display: flex; justify-content: space-between; gap: 10px; font-size: .6875rem; font-weight: 600; color: rgba(255, 255, 255, .75); } .nt-i small em { font-style: normal; }
.nt-i b { display: block; font-size: .8125rem; font-weight: 600; } .nt-i > span:last-child { flex: 1; min-width: 0; }
.nt-i.i1 { animation-delay: .8s; } .nt-i.i2 { animation-delay: 1.6s; } .nt-i.i3 { animation-delay: 2.4s; }
@keyframes ntCycle { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 6%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (max-width: 900px) { .ntc { grid-template-columns: minmax(0, 1fr); } .nt { height: 280px; } }
@media (prefers-reduced-motion: reduce) { .nt-i { animation: none; } }

/* ---------- what is inside: one funnel, every channel feeds it ---------- */
.fn-track { position: relative; height: 320svh; }
.fn-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 30px); padding: calc(var(--header-h) + clamp(16px, 3vh, 36px)) var(--gutter) 24px; overflow: hidden; }
.fn .sec-head h2 { font-size: clamp(1.875rem, 3.3vw, 3rem); }
.fn .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.fn-body { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.fn-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fn-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) 260px; align-items: center; gap: 22px; height: clamp(54px, 8.4vh, 76px); }
.fn-num { grid-column: 1; grid-row: 1; text-align: right; font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.03em; color: #3A4A70; transition: color .5s; font-variant-numeric: tabular-nums; }
.fn-ring { grid-column: 2; grid-row: 1; height: 100%; background: linear-gradient(90deg, #14275A, #1A3577 50%, #14275A); transition: background .6s, filter .6s; }
.fn-r[data-i="0"] .fn-ring { clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); }
.fn-r[data-i="1"] .fn-ring { clip-path: polygon(9% 0, 91% 0, 82% 100%, 18% 100%); }
.fn-r[data-i="2"] .fn-ring { clip-path: polygon(18% 0, 82% 0, 74% 100%, 26% 100%); }
.fn-r[data-i="3"] .fn-ring { clip-path: polygon(26% 0, 74% 0, 66% 100%, 34% 100%); }
.fn-r[data-i="4"] .fn-ring { clip-path: polygon(34% 0, 66% 0, 60% 100%, 40% 100%); }
.fn-lbl { grid-column: 3; grid-row: 1; } .fn-lbl b { display: block; font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.02em; color: #5D6F96; transition: color .5s; }
.fn-lbl small { display: block; margin-top: 2px; font-size: .8125rem; color: #3E4E74; transition: color .5s; }
.fn-r.is-in .fn-ring { background: linear-gradient(90deg, #1E52E6, #22C3FF 50%, #1E52E6); filter: drop-shadow(0 0 14px rgba(34, 195, 255, .45)); }
.fn-r.is-in .fn-num { color: #fff; } .fn-r.is-in .fn-lbl b { color: #fff; } .fn-r.is-in .fn-lbl small { color: #7BE3FF; }
.fn-r.is-on .fn-ring { background: linear-gradient(90deg, #22C3FF, #A9F5FF 50%, #22C3FF); filter: drop-shadow(0 0 24px rgba(123, 227, 255, .8)); }
.fn-r[data-i="4"].is-in .fn-ring { background: linear-gradient(90deg, #1FAE6E, #3DF0A0 50%, #1FAE6E); }
.fn-r[data-i="4"].is-in .fn-num { color: #3DF0A0; }
.fn-drops { position: absolute; left: calc(110px + 22px); right: calc(260px + 22px); top: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.fn-d { position: absolute; top: -10px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #7BE3FF; opacity: 0; }
.fn-stage:not([data-s="-1"]) .fn-d { animation: fnDrop 3.2s cubic-bezier(.5, 0, .8, 1) infinite; }
.fn-d.d0 { left: 20%; } .fn-d.d1 { left: 75%; animation-delay: .3s !important; } .fn-d.d2 { left: 35%; animation-delay: .6s !important; } .fn-d.d3 { left: 62%; animation-delay: .9s !important; } .fn-d.d4 { left: 12%; animation-delay: 1.2s !important; }
.fn-d.d5 { left: 86%; animation-delay: 1.5s !important; } .fn-d.d6 { left: 45%; animation-delay: 1.8s !important; } .fn-d.d7 { left: 55%; animation-delay: 2.1s !important; } .fn-d.d8 { left: 28%; animation-delay: 2.4s !important; } .fn-d.d9 { left: 70%; animation-delay: 2.7s !important; }
@keyframes fnDrop { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; translate: calc(50% * 0) 0; transform: translate(var(--tx, 0), 105%); top: 100%; } }
.fn-d.d0, .fn-d.d4, .fn-d.d8, .fn-d.d2 { --tx: 80px; } .fn-d.d1, .fn-d.d5, .fn-d.d9, .fn-d.d3 { --tx: -80px; }
.fn-out { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 16px; }
.fn-out small { font-size: .875rem; color: #C9D6F0; } .fn-out b { font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.5rem); color: #3DF0A0; letter-spacing: -.03em; }
@media (max-width: 900px) {
  .fn-r { grid-template-columns: 60px minmax(0, 1fr) 120px; gap: 10px; height: 52px; }
  .fn-num { font-size: 1rem; } .fn-lbl b { font-size: .8125rem; } .fn-lbl small { font-size: .625rem; }
  .fn-drops { left: 70px; right: 130px; }
}
@media (max-width: 720px) {
  .fn-stage { height: auto; min-height: 0; padding-bottom: 6px; }
  .fn .sec-head p:not(.kicker) { display: none; } .fn .sec-head h2 { font-size: 1.625rem; }
  .fn-r { grid-template-columns: 52px minmax(0, 1fr) 104px; height: 50px; gap: 8px; }
  .fn-drops { left: 60px; right: 112px; }
}
@media (prefers-reduced-motion: reduce) { .fn-track { height: auto; } .fn-stage { position: relative; height: auto; } .fn-d { display: none; } }

/* ---------- no surprises: a team board, cards move from to do to done ---------- */
.kbs { padding-top: clamp(50px, 7vw, 100px); }
.kb { max-width: 1100px; margin: clamp(30px, 4vw, 50px) auto 0; padding: 18px; border-radius: 28px; background: rgba(169, 220, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.kb-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kb-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: .875rem; font-weight: 700; color: #DCE6F7; background: rgba(169, 220, 255, .05); }
.kb-h i { width: 10px; height: 10px; border-radius: 50%; } .kb-h.c0 i { background: #8FA0C4; } .kb-h.c1 i { background: #FBBC05; box-shadow: 0 0 8px #FBBC05; } .kb-h.c2 i { background: #3DF0A0; box-shadow: 0 0 8px #3DF0A0; }
.kb-cards { --ch: 138px; position: relative; height: var(--kh, 600px); margin: 14px 0 0; padding: 0; list-style: none; transition: height .6s var(--ease); }
.kb-c { position: absolute; width: calc((100% - 28px) / 3); left: calc(var(--col, 0) * ((100% - 28px) / 3 + 14px)); top: var(--top, 0px); height: var(--ch); padding: 14px 16px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, rgba(14, 34, 80, .85), rgba(5, 12, 32, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: left .8s var(--ease), top .8s var(--ease), height .6s var(--ease), box-shadow .5s; }
.kb-c .sp-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(10, 141, 255, .15); float: left; margin-right: 10px; } .kb-c .sp-ico svg { width: 18px; height: 18px; }
.kb-c h3 { font-size: 1rem; letter-spacing: -.02em; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-c p:not(.kb-ft) { clear: both; padding-top: 8px; font-size: .8125rem; line-height: 1.5; color: #C9D6F0; transition: opacity .4s; }
.kb-ft { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; transition: opacity .4s; }
.kb-tag { padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: #7BE3FF; background: rgba(34, 195, 255, .12); }
.kb-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .625rem; font-weight: 800; color: #fff; background: var(--grad); }
.kb-c.is-doing { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1.5px rgba(251, 188, 5, .55), 0 18px 40px -18px rgba(251, 188, 5, .45); }
.kb-c.is-done { height: 62px; box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .45); }
.kb-c.is-done p, .kb-c.is-done .kb-ft { opacity: 0; }
.kb-c.is-done .sp-ico { background: rgba(61, 240, 160, .18); } .kb-c.is-done .sp-ico svg { stroke: #3DF0A0; }
@media (max-width: 720px) {
  .kb { padding: 12px; } .kb-cols { display: none; }
  .kb-cards { height: auto !important; display: grid; gap: 10px; margin: 0; }
  .kb-c, .kb-c.is-done { position: relative; left: 0; top: 0; width: 100%; height: auto; }
  .kb-c p:not(.kb-ft) { padding-bottom: 30px; }
  .kb-c.is-done p, .kb-c.is-done .kb-ft { opacity: 1; }
  .kb-c::after { content: "To do"; position: absolute; right: 14px; top: 18px; font-size: .6875rem; font-weight: 700; color: #8FA0C4; }
  .kb-c.is-doing::after { content: "In progress"; color: #FBBC05; } .kb-c.is-done::after { content: "Done"; color: #3DF0A0; }
  .kb-c h3 { padding-right: 70px; }
}

/* ---------- how it works: a metro map, every channel joins one track ---------- */
.sp-time.mr { padding: clamp(40px, 6vw, 80px) 0 0; }
.mr-track { position: relative; height: 300vh; }
.mr-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + clamp(14px, 3vh, 34px)) var(--gutter) 24px; }
.mr .sec-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.875rem); }
.mr .sec-head p:not(.kicker) { margin-top: 10px; color: #C9D6F0; }
.mr-card { --k: 0; width: 100%; max-width: 1140px; margin: clamp(18px, 3vh, 34px) auto 0; padding: clamp(16px, 2vw, 26px); border-radius: 30px; background: linear-gradient(160deg, rgba(14, 34, 80, .8), rgba(4, 10, 26, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .14), 0 60px 120px -60px rgba(10, 141, 255, .9); }
.mr-map svg { display: block; width: 100%; height: auto; max-height: 38vh; overflow: visible; }
.mr-f { fill: none; stroke-width: 6; stroke-linecap: round; opacity: .3; transition: opacity .6s, filter .6s; }
.mr-f.f0 { stroke: #4285F4; } .mr-f.f1 { stroke: #D62976; } .mr-f.f2 { stroke: #3DF0A0; } .mr-f.f3 { stroke: #FBBC05; }
.mr-f.is-on { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.mr-f.f0.is-on { filter: drop-shadow(0 0 6px #4285F4); } .mr-f.f1.is-on { filter: drop-shadow(0 0 6px #D62976); } .mr-f.f2.is-on { filter: drop-shadow(0 0 6px #3DF0A0); } .mr-f.f3.is-on { filter: drop-shadow(0 0 6px #FBBC05); }
.mr-ln { font: 700 13px var(--f-body); fill: #8FA0C4; }
.mr-trunk { fill: none; stroke: rgba(169, 220, 255, .14); stroke-width: 12; stroke-linecap: round; }
.mr-done { fill: none; stroke: url(#fwg); stroke: #22C3FF; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 - var(--k) * 1000); filter: drop-shadow(0 0 8px rgba(34, 195, 255, .8)); }
.mr-st circle { fill: #0B1530; stroke: #3A4A70; stroke-width: 4; transition: fill .4s, stroke .4s; }
.mr-st text { font: 600 14px var(--f-body); fill: #6F80A6; text-anchor: middle; transition: fill .4s; }
.mr-st.is-in circle { fill: #fff; stroke: #22C3FF; } .mr-st.is-in text { fill: #DCE6F7; }
.mr-st.is-on circle { fill: #3DF0A0; stroke: #fff; } .mr-st.is-on text { fill: #fff; font-weight: 800; }
.mr-train rect { fill: #fff; filter: drop-shadow(0 0 10px rgba(61, 240, 160, .9)); } .mr-train circle { fill: #0B1530; }
.mr-caps { position: relative; display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.mr-cap { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease); }
.mr-cap.is-on { opacity: 1; transform: none; }
.mr-cw { grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; color: #7BE3FF; white-space: nowrap; }
.mr-cw span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #04130C; background: #3DF0A0; }
.mr-cap h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.03em; }
.mr-cap p:last-child { grid-column: 2; font-size: 1rem; line-height: 1.55; color: #C9D6F0; }
@media (max-width: 900px) {
  .mr-stage { height: auto; min-height: 0; padding-bottom: 8px; }
  .mr .sec-head p:not(.kicker) { display: none; } .mr .sec-head h2 { font-size: 1.625rem; }
  .mr-card { padding: 14px 12px; border-radius: 22px; margin-top: 12px; }
  .mr-st text, .mr-ln { display: none; }
  .mr-cap { grid-template-columns: minmax(0, 1fr); } .mr-cw { grid-row: auto; } .mr-cap p:last-child { grid-column: 1; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) { .mr-track { height: auto; } .mr-stage { position: relative; height: auto; } }

/* ---------- questions: flip cards ---------- */
.fp { padding: clamp(60px, 8vw, 110px) var(--gutter) 0; }
.fp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: clamp(30px, 4vw, 50px) auto 0; padding: 0; list-style: none; perspective: 1400px; }
.fp-c { height: 240px; }
.fp-in { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.2, .5, 1); }
.fp-in[aria-expanded="true"] { transform: rotateY(180deg); }
.fp-f, .fp-b { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 20px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fp-f { background: linear-gradient(160deg, rgba(14, 34, 80, .85), rgba(5, 12, 32, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(169, 220, 255, .14); transition: box-shadow .3s; }
.fp-in:hover .fp-f { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1.5px rgba(34, 195, 255, .5), 0 24px 50px -24px rgba(10, 141, 255, .8); }
.fp-n { font-family: var(--f-display); font-size: 2rem; letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-q { margin-top: 10px; font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.fp-tap { margin-top: auto; font-size: .75rem; font-weight: 700; color: #7BE3FF; } .fp-tap::after { content: " ↻"; }
.fp-b { transform: rotateY(180deg); background: #fff; color: #0A1430; box-shadow: 0 30px 60px -30px rgba(10, 141, 255, .9); }
.fp-q2 { font-size: .75rem; font-weight: 700; color: #1967D2; }
.fp-a { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: #3C4043; }
.fp-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; color: var(--muted); }
@media (max-width: 1000px) { .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .fp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .fp-c { height: 200px; } .fp-foot { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .fp-in { transition: none; } }
.fn-stage:not([data-s="-1"]) .fn-d { animation-name: fnFall; }
@keyframes fnFall { 0% { top: -2%; opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; transform: translateX(var(--tx, 0)); } }
.fn-d.d0, .fn-d.d4 { --tx: 110px; } .fn-d.d8, .fn-d.d2 { --tx: 60px; } .fn-d.d5, .fn-d.d1 { --tx: -110px; } .fn-d.d9, .fn-d.d3 { --tx: -60px; }
/* digital marketing fixes */
.mr-ln { text-anchor: end; }
.mr-st text { transform: translateY(8px); }
.pz-c { width: 190px; }
.pz-core { top: 40%; }
.pz-c.k0 { --x1: 20; --y1: 14; } .pz-c.k1 { --x1: 80; --y1: 14; } .pz-c.k2 { --x1: 20; --y1: 64; } .pz-c.k3 { --x1: 80; --y1: 64; } .pz-c.k4 { --x1: 50; --y1: 74; }
.pz-kpis { bottom: 16px; transform: translate(-50%, 20px); }
.pz-stage[data-s="3"] .pz-kpis { transform: translate(-50%, 0); }
@media (max-width: 900px) {
  .pz-board { height: 360px; }
  .pz-c { width: 150px; }
  .pz-c.k0 { --x1: 25; --y1: 12; } .pz-c.k1 { --x1: 75; --y1: 12; } .pz-c.k2 { --x1: 25; --y1: 68; } .pz-c.k3 { --x1: 75; --y1: 68; } .pz-c.k4 { --x1: 50; --y1: 90; }
  .pz-kpis { position: static; justify-content: center; margin-top: 12px; transform: none; opacity: .35; }
  .pz-stage[data-s="3"] .pz-kpis { transform: none; opacity: 1; }
  .pz-body .pz-board { display: block; }
}
.nt-i { animation-name: ntA; animation-duration: 10s; animation-delay: 0s !important; }
.nt-i.i1 { animation-name: ntB; } .nt-i.i2 { animation-name: ntC; } .nt-i.i3 { animation-name: ntD; }
@keyframes ntA { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 5%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ntB { 0%, 14% { opacity: 0; transform: translateY(-14px) scale(.96); } 19%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ntC { 0%, 28% { opacity: 0; transform: translateY(-14px) scale(.96); } 33%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ntD { 0%, 42% { opacity: 0; transform: translateY(-14px) scale(.96); } 47%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
.pz-c.k4 { --y1: 64; }
.nt { height: 340px; }
@media (max-width: 900px) {
  .pz-board { height: 440px; }
  .pz-c.k0 { --y1: 11; } .pz-c.k1 { --y1: 11; } .pz-c.k2 { --y1: 60; } .pz-c.k3 { --y1: 60; } .pz-c.k4 { --x1: 50; --y1: 75; }
  .pz-kpis { position: absolute; margin: 0; bottom: 10px; transform: translate(-50%, 10px); opacity: 0; }
  .pz-stage[data-s="3"] .pz-kpis { transform: translate(-50%, 0); opacity: 1; }
  .nt { height: 330px; }
}

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.cth { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 70px); max-width: 1320px; margin: 0 auto;
  min-height: min(92svh, 820px); padding: calc(var(--header-h) + clamp(20px, 4vw, 50px)) var(--gutter) clamp(30px, 4vw, 60px); }
.cth::before { content: ""; position: absolute; right: -6%; top: 14%; width: min(820px, 80vw); height: 70%; z-index: -1; border-radius: 50%; filter: blur(90px); background: radial-gradient(closest-side, rgba(10, 141, 255, .3), rgba(43, 91, 255, .1) 55%, transparent); }
.cth h1 { margin-top: 14px; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.cth-lead { margin-top: 20px; max-width: 540px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: #C9D6F0; }
.cth-ways { display: grid; gap: 10px; max-width: 520px; margin-top: 30px; }
.cth-way, .cth-wl { display: flex; align-items: center; gap: 14px; }
.cth-way { padding: 12px 14px; border-radius: 18px; color: var(--mist); background: linear-gradient(128deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 50%), rgba(8, 20, 48, .6);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .3s var(--ease), box-shadow .3s; }
.cth-way:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .55), 0 20px 40px -20px rgba(10, 141, 255, .8); }
.cth-wl { flex: 1; min-width: 0; color: inherit; }
.cth-way .sp-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad); box-shadow: 0 8px 20px -8px rgba(10, 141, 255, .9); }
.cth-way .sp-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cth-way b { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cth-way small { display: block; font-size: .8125rem; color: var(--muted); }
.cth-way > span:last-child { min-width: 0; }
.cth-copy { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; font: 700 .8125rem var(--f-body); color: var(--ice); background: rgba(169, 220, 255, .1); cursor: pointer; }
.cth-copy:hover { background: rgba(169, 220, 255, .2); color: #fff; }
/* the clocks */
.cth-viz { position: relative; height: clamp(380px, 52vh, 500px); }
.clk { position: absolute; display: grid; justify-items: center; gap: 12px; width: clamp(150px, 15vw, 200px); text-align: center; }
.clk.you { left: 2%; bottom: 8%; } .clk.gl { right: 2%; bottom: 8%; }
.clk svg { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.clk .f { fill: rgba(8, 20, 48, .85); stroke: rgba(169, 220, 255, .3); stroke-width: 2; }
.clk.gl .f { stroke: url(#none); stroke: #22C3FF; filter: drop-shadow(0 0 14px rgba(34, 195, 255, .6)); }
.clk .tk path { stroke: rgba(169, 220, 255, .5); stroke-width: 2; stroke-linecap: round; }
.clk .h { stroke-linecap: round; transition: transform .3s; }
.clk .hh { stroke: #fff; stroke-width: 5; } .clk .mm { stroke: #A9DCFF; stroke-width: 3.5; } .clk .ss { stroke: #3DF0A0; stroke-width: 1.6; }
.clk .c { fill: #3DF0A0; }
.clk p { display: grid; gap: 2px; } .clk b { font-size: .875rem; color: #C9D6F0; }
.clk-t { font-family: var(--f-display); font-size: 2rem; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; } .clk small { font-size: .75rem; color: var(--muted); }
.cth-arc { position: absolute; left: 12%; right: 12%; top: 8%; width: 76%; height: 56%; overflow: visible; }
.cth-arc .a { fill: none; stroke: rgba(169, 220, 255, .18); stroke-width: 2; stroke-dasharray: 3 8; vector-effect: non-scaling-stroke; }
.cth-arc .b { fill: none; stroke: url(#none); stroke: #22C3FF; stroke-width: 2.5; stroke-dasharray: .18 1; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px #22C3FF); animation: ctArc 3.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes ctArc { from { stroke-dashoffset: .18; } to { stroke-dashoffset: -1; } }
.cth-msg { position: absolute; left: 50%; top: 2%; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 30px rgba(10, 141, 255, .9); animation: ctMsg 3.6s ease-in-out infinite; }
.cth-msg svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
@keyframes ctMsg { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
.cth-status { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; white-space: nowrap; font-size: .875rem; font-weight: 600; color: #DCE6F7;
  background: rgba(8, 20, 48, .82); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .4); }
.cth-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 10px #3DF0A0; animation: gshBlink 1.4s steps(1) infinite; }
.cth-status.is-off { box-shadow: inset 0 0 0 1px rgba(251, 188, 5, .4); } .cth-status.is-off .dot { background: #FBBC05; box-shadow: 0 0 10px #FBBC05; animation: none; }
@media (max-width: 960px) {
  .cth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cth-viz { height: 340px; }
}
@media (max-width: 720px) {
  .cth h1 { font-size: 2.5rem; }
  .cth-viz { height: 300px; } .clk { width: 128px; } .clk-t { font-size: 1.5rem; }
  .cth-status { font-size: .75rem; padding: 8px 14px; }
  .cth-way b { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) { .cth-arc .b, .cth-msg { animation: none; } }

/* the chat form */
.ctw { padding: clamp(30px, 5vw, 70px) var(--gutter) 0; scroll-margin-top: var(--header-h); }
.ctw-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(20px, 3vw, 44px); align-items: start; max-width: 1240px; margin: 0 auto; }
.ctc-card { border-radius: 28px; overflow: hidden; background: #0B1328; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16), 0 60px 120px -60px rgba(10, 141, 255, .8); }
.ctc-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ctc-hav { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0B1530; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ctc-hav i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #31A24C; box-shadow: 0 0 0 2.5px #0B1328; }
.ctc-head b { display: block; font-size: 1rem; color: #fff; } .ctc-head small { font-size: .8125rem; color: var(--muted); }
.ctc-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; } .ctc-prog i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); box-shadow: 0 0 8px rgba(34, 195, 255, .8); }
.ctc { padding: 20px; }
.ctc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ctc-body { display: flex; flex-direction: column; gap: 14px; }
.is-chat .ctc-body { min-height: 420px; max-height: 560px; overflow-y: auto; scroll-behavior: smooth; padding-right: 4px; }
.ctc-step { display: flex; flex-direction: column; gap: 10px; }
.is-chat .ctc-step[data-wait] { display: none; }
.ctc-row { display: flex; align-items: flex-end; gap: 8px; animation: msIn .4s var(--ease) both; }
.ctc-row.me { justify-content: flex-end; cursor: pointer; }
.ctc-row.me[hidden] { display: none; }
.ctc-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0B1530; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ctc-b { max-width: 80%; padding: 11px 15px; border-radius: 20px; font-size: .9688rem; line-height: 1.5; }
.bot .ctc-b { color: #E4E6EB; background: #1E2740; border-bottom-left-radius: 6px; }
.ctc-b small { display: block; font-size: .8125rem; color: var(--muted); }
.me .ctc-b { color: #fff; background: var(--grad); border-bottom-right-radius: 6px; }
.me .ctc-b::after { content: " ✎"; opacity: .6; font-size: .8em; }
.is-sent .me .ctc-b::after { content: none; }
.ctc-ans { display: grid; gap: 12px; margin-left: 36px; }
.is-chat .ctc-step:not(.is-on) .ctc-ans { display: none; }
.is-chat .ctc-step.is-on .ctc-ans { animation: msIn .45s .1s var(--ease) both; }
.ctc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ctc-chip { position: relative; cursor: pointer; }
.ctc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ctc-chip span { display: inline-flex; padding: 9px 15px; border-radius: 999px; font-size: .9063rem; font-weight: 600; color: #6FB0FF; background: rgba(10, 141, 255, .1); box-shadow: inset 0 0 0 1px rgba(10, 141, 255, .45); transition: background .2s, color .2s, transform .2s; }
.ctc-chip:hover span { background: rgba(10, 141, 255, .2); transform: translateY(-1px); }
.ctc-chip input:checked + span { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px rgba(10, 141, 255, .9); }
.ctc-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.ctc-f { display: block; }
.ctc-f input, .ctc-f textarea { width: 100%; padding: 13px 16px; border: 0; border-radius: 16px; font: 500 1rem/1.5 var(--f-body); color: #fff; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px var(--line-strong); resize: vertical; }
.ctc-f input:focus, .ctc-f textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px #22C3FF, 0 0 0 4px rgba(34, 195, 255, .15); }
.ctc-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF6B8A; }
.ctc-f ::placeholder { color: #7D8DB0; }
.ctc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ctc-grid .wide { grid-column: 1 / -1; }
.ctc-act { display: flex; justify-content: flex-end; }
.is-chat .ctc-step[data-k="budget"] .ctc-act, .is-chat .ctc-step[data-k="timeline"] .ctc-act { display: none; }
.ctc-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctc-typing .ctc-b { display: flex; gap: 4px; padding: 14px; } .ctc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B0B3B8; animation: msDot 1s ease-in-out infinite; }
.ctc-typing i:nth-child(2) { animation-delay: .15s; } .ctc-typing i:nth-child(3) { animation-delay: .3s; }
.ctc-typing[hidden], .ctc-done[hidden] { display: none; }
.ctc-done { display: grid; gap: 10px; outline: none; }
.ctc-tick { display: inline-flex; align-items: center; gap: 6px; margin-left: 36px; font-size: .8125rem; font-weight: 700; color: #3DF0A0; }
.ctc-tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ctc-err { min-height: 1.2em; margin-top: 10px; font-size: .875rem; color: #FF8BA3; }
.ctc-note { font-size: .75rem; color: var(--muted); }
/* without JavaScript: a normal form */
.ctc-card:not(.is-chat) .ctc-step .ctc-row.me { display: none; }
/* next steps and questions */
.ctn h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.ctn-list { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.ctn-list li { display: flex; gap: 14px; }
.ctn-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--f-display); color: #fff; background: var(--grad); box-shadow: 0 0 16px rgba(10, 141, 255, .6); }
.ctn-list h3 { font-size: 1.0625rem; letter-spacing: -.02em; } .ctn-list p { margin-top: 4px; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; }
.ctn-faq { display: grid; gap: 8px; margin-top: 30px; }
.ctq { border-radius: 16px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.ctq summary { position: relative; display: block; padding: 14px 44px 14px 16px; font-weight: 700; font-size: .9375rem; color: #fff; cursor: pointer; list-style: none; }
.ctq summary::-webkit-details-marker { display: none; }
.ctq summary span { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
.ctq summary span::before, .ctq summary span::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; border-radius: 2px; background: #7BE3FF; transition: transform .3s; }
.ctq summary span::after { transform: rotate(90deg); } .ctq[open] summary span::after { transform: rotate(0); }
.ctq p { padding: 0 16px 14px; font-size: .9063rem; line-height: 1.6; color: #C9D6F0; }
@media (max-width: 960px) { .ctw-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ctc { padding: 14px; } .ctc-card { border-radius: 22px; }
  .is-chat .ctc-body { min-height: 380px; max-height: 64svh; }
  .ctc-ans { margin-left: 0; } .ctc-b { max-width: 88%; font-size: .9063rem; }
  .ctc-grid { grid-template-columns: 1fr; }
  .ctc-act .btn { width: 100%; justify-content: center; }
  .ctc-tick { margin-left: 0; }
}
.ct { overflow-x: clip; }
.clk.gl .f { filter: none; }
.clk.gl svg { filter: drop-shadow(0 0 16px rgba(34, 195, 255, .55)) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.clk.you, .clk.gl { bottom: 16%; }
.cth-status { bottom: -2%; }
@media (max-width: 720px) { .clk.you, .clk.gl { bottom: 18%; } .cth-viz { height: 330px; } }

/* ---------- contact hero v2: the globe ---------- */
.cgh { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 20px; max-width: 1440px; margin: 0 auto;
  min-height: min(100svh, 900px); padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) var(--gutter) clamp(40px, 5vw, 70px); }
.cgh-text { position: relative; z-index: 2; }
.cgh h1 { margin-top: 14px; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.cgh-globe { position: relative; z-index: 1; aspect-ratio: 1; width: 100%; max-width: 780px; justify-self: end; margin-right: -4%; }
.cgh-globe::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 141, 255, .28), transparent); filter: blur(40px); z-index: -1; }
.cg-canvas { position: absolute; inset: 0; display: block; }
.cgh-globe { grid-column: 2; grid-row: 1; } .cgh-text { grid-column: 1; grid-row: 1; }
.cg-toasts { position: absolute; right: 2%; bottom: 8%; display: grid; gap: 8px; width: min(300px, 70%); }
.cg-t { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: .8125rem; color: #C9D6F0;
  background: rgba(8, 20, 48, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .3), 0 16px 34px -16px rgba(0, 0, 0, .9);
  animation: cgIn .5s var(--ease) both; transition: opacity .5s, transform .5s, box-shadow .5s; }
.cg-t b { display: block; color: #fff; font-size: .8438rem; } .cg-t small { display: block; font-size: .75rem; color: var(--muted); transition: color .4s; }
.cg-ic { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--grad) center / 16px no-repeat; position: relative; }
.cg-ic::before { content: ""; position: absolute; inset: 9px 7px; border: 1.6px solid #fff; border-radius: 3px; }
.cg-ic::after { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 6px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: skewY(-25deg) rotate(-45deg); transform-origin: left top; display: none; }
.cg-t.ok { box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .5), 0 16px 34px -16px rgba(61, 240, 160, .45); }
.cg-t.ok small { color: #3DF0A0; } .cg-t.ok .cg-ic { background: linear-gradient(135deg, #1FAE6E, #3DF0A0); }
.cg-t.you { box-shadow: inset 0 0 0 1.5px #3DF0A0; }
.cg-t.out { opacity: 0; transform: translateX(20px); }
@keyframes cgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.cgh-legend { position: absolute; left: var(--gutter); bottom: 18px; display: flex; gap: 18px; font-size: .75rem; color: var(--muted); }
.cgh-legend span { display: inline-flex; align-items: center; gap: 7px; } .cgh-legend i { width: 18px; height: 2px; border-radius: 2px; background: #2FD4FF; box-shadow: 0 0 6px #2FD4FF; }
.cgh-legend .lg-b { width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 8px #3DF0A0; }
.cth-time { position: relative; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.cth-time .cth-viz { height: 300px; }
.cth-time .cth-status { position: relative; left: auto; bottom: auto; transform: none; width: max-content; margin: 6px auto 0; }
.cth-time .clk.you, .cth-time .clk.gl { bottom: 0; }
.cth-time .clk.you { left: 8%; } .cth-time .clk.gl { right: 8%; }
.ctc-reset { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border: 0; border-radius: 999px; font: 700 .8125rem var(--f-body); color: var(--ice); background: rgba(169, 220, 255, .08); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background .2s, color .2s; }
.ctc-reset:hover { background: rgba(169, 220, 255, .16); color: #fff; }
.ctc-reset svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ctc-reset[hidden] { display: none; }
@media (max-width: 1000px) {
  .cgh { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .cgh-globe, .cgh-text { grid-column: 1; }
  .cgh-globe { grid-row: 2; justify-self: center; max-width: 560px; margin: 10px auto 0; }
  .cgh-legend { position: static; justify-content: center; margin-top: 6px; }
}
@media (max-width: 720px) {
  .cgh h1 { font-size: 2.5rem; }
  .cgh-globe { margin: 0 -10%; width: 120%; max-width: none; }
  .cg-toasts { right: 10%; bottom: 4%; width: 74%; } .cg-t:nth-child(n+3) { display: none; }
  .cth-time .cth-viz { height: 270px; } .cth-time .clk.you { left: 0; } .cth-time .clk.gl { right: 0; }
  .ctc-reset { padding: 7px 11px; font-size: .75rem; }
}

/* ---------- contact: the three ways, redesigned ---------- */
.cth-ways { display: grid; gap: 12px; max-width: 560px; margin-top: 30px; }
.cw-main { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 18px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(115deg, #2B5BFF 0%, #0A8DFF 55%, #22C3FF 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 50px -18px rgba(10, 141, 255, .95); transition: transform .35s var(--ease), box-shadow .35s; }
.cw-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%); transform: translateX(-100%); animation: cwShine 4.5s ease-in-out infinite 1s; }
@keyframes cwShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cw-main:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 30px 60px -18px rgba(10, 141, 255, 1); }
.cw-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cw-ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-ic.cw-sm { width: 42px; height: 42px; border-radius: 13px; background: rgba(10, 141, 255, .16); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .3); }
.cw-ic.cw-sm svg { width: 21px; height: 21px; stroke: #7BE3FF; }
.cw-t { min-width: 0; } .cw-t b { display: block; font-family: var(--f-display); font-size: 1.1875rem; letter-spacing: -.02em; }
.cw-t small { display: block; margin-top: 2px; font-size: .8125rem; opacity: .85; }
.cw-go { margin-left: auto; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.cw-go svg { width: 18px; height: 18px; fill: none; stroke: #0A5BD8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-main:hover .cw-go { transform: translateX(4px); }
.cw-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.cw-tile { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 18px; color: var(--mist);
  background: linear-gradient(140deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .01) 55%), rgba(8, 20, 48, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px var(--line-strong); transition: transform .3s var(--ease), box-shadow .3s; }
.cw-tile:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(47, 212, 255, .55), 0 20px 40px -20px rgba(10, 141, 255, .8); }
.cw-tile > a { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; }
.cw-tile .cw-t b { font-family: var(--f-body); font-size: .9063rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-tile .cw-t small { margin: 0 0 1px; color: var(--muted); opacity: 1; }
.cw-tile.is-mail { padding-right: 8px; }
.cth-copy { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; }
.cth-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cth-copy.ok { color: #04130C; background: #3DF0A0; }
.cw-badge { position: absolute; right: 10px; top: -9px; padding: 3px 9px; border-radius: 999px; font-size: .625rem; font-weight: 800; color: #04130C; background: #3DF0A0; box-shadow: 0 6px 16px -6px rgba(61, 240, 160, .8); white-space: nowrap; }
@media (max-width: 720px) {
  .cw-row { grid-template-columns: minmax(0, 1fr); }
  .cw-main { padding: 14px; gap: 12px; } .cw-ic { width: 44px; height: 44px; } .cw-t b { font-size: 1.0625rem; } .cw-go { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .cw-main::after { animation: none; } }

/* ---------- contact: the clocks, redesigned ---------- */
.cth-time { max-width: 980px; margin-top: 10px; }
.cth-time .cth-viz { height: 340px; padding: 0; border-radius: 32px; background: radial-gradient(70% 90% at 50% 0%, rgba(10, 141, 255, .14), transparent 70%), rgba(8, 20, 48, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--line); }
.cth-time .clk { width: clamp(150px, 17vw, 196px); bottom: 26px; gap: 14px; }
.cth-time .clk.you { left: 9%; } .cth-time .clk.gl { right: 9%; }
.clk-dial { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; }
.clk-dial::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(10, 141, 255, .25), transparent); }
.clk.gl .clk-dial::after { background: radial-gradient(closest-side, rgba(61, 240, 160, .2), transparent); }
.clk svg { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .65)); }
.clk.gl svg { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .65)); }
.clk .rim { fill: none; stroke-width: 3; }
.clk .f { stroke: none; filter: none !important; }
.clk .tk .maj { stroke: #DCE6F7; stroke-width: 2.4; stroke-linecap: round; }
.clk .tk .min { stroke: rgba(169, 220, 255, .28); stroke-width: 1; }
.clk .nm text { font: 700 10px var(--f-display); fill: #8FA0C4; text-anchor: middle; }
.clk .hh { stroke: #fff; stroke-width: 5; }
.clk .mm { stroke: #A9DCFF; stroke-width: 3.2; }
.clk .ss path { stroke: #3DF0A0; stroke-width: 1.4; stroke-linecap: round; } .clk .ss circle { fill: #3DF0A0; }
.clk .ss { filter: drop-shadow(0 0 3px #3DF0A0); }
.clk .c { fill: #0B1530; stroke: #fff; stroke-width: 2; } .clk .c2 { fill: #3DF0A0; }
.clk p { gap: 0; } .clk b { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.clk-t { font-size: 2.25rem; margin-top: 2px; }
.clk-d { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; }
.clk-d small { font-size: .8125rem; color: #C9D6F0; }
.clk-sun { width: 12px; height: 12px; border-radius: 50%; background: #FBBC05; box-shadow: 0 0 10px #FBBC05; transition: all .4s; }
.clk-sun.night { background: transparent; box-shadow: inset -4px -2px 0 0 #C9D6F0; transform: rotate(-20deg); }
.cth-time .cth-arc { left: 26%; right: 26%; width: 48%; top: 22%; height: 34%; }
.cth-time .cth-msg { top: 9%; width: 46px; height: 46px; margin-left: -23px; }
.cth-diff { position: absolute; left: 50%; top: 52%; transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: .8125rem; font-weight: 700; color: #DCE6F7;
  background: rgba(8, 20, 48, .9); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .4); }
.cth-time .cth-status { margin-top: -22px; position: relative; z-index: 2; }
@media (max-width: 720px) {
  .cth-time .cth-viz { height: 330px; border-radius: 24px; }
  .cth-time .clk { width: 128px; bottom: 26px; } .cth-time .clk.you { left: 5%; } .cth-time .clk.gl { right: 5%; } .clk-t { font-size: 1.625rem; }
  .cth-diff { top: auto; bottom: 150px; font-size: .6875rem; padding: 5px 10px; max-width: 90%; white-space: normal; text-align: center; }
  .cth-time .cth-arc { top: 14%; left: 22%; right: 22%; width: 56%; } .cth-time .cth-msg { top: 4%; }
}

/* ---------- contact: the quick note ---------- */
.ctq-form { position: relative; margin: 0; padding: 20px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 141, 255, .07), transparent 60%); }
.qn-head { display: flex; align-items: center; gap: 12px; }
.qn-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(61, 240, 160, .14); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.qn-ic svg { width: 20px; height: 20px; fill: none; stroke: #3DF0A0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qn-head b { display: block; font-size: 1rem; color: #fff; } .qn-head small { font-size: .8125rem; color: var(--muted); }
.qn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .qn-grid .wide { grid-column: 1 / -1; }
.qn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.qn-foot .ctc-err { margin: 0; }
.qn-foot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qn-done { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: 16px; color: #DCE6F7; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .45); outline: none; }
.qn-done svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #3DF0A0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qn-done[hidden] { display: none; }
.ctq-form.is-sent .qn-grid, .ctq-form.is-sent .qn-foot { display: none; }
@media (max-width: 720px) { .ctq-form { padding: 16px 14px; } .qn-grid { grid-template-columns: 1fr; } .qn-foot { flex-direction: column-reverse; align-items: stretch; } .qn-foot .btn { width: 100%; justify-content: center; } }
.cw-row { grid-template-columns: minmax(0, 1fr) auto; }
.cw-tile:not(.is-mail) { padding-right: 18px; }
.cth-time .cth-arc { left: 31%; right: 31%; width: 38%; }
.cth-time .cth-status { margin-top: 16px; }
@media (max-width: 720px) {
  .cw-row { grid-template-columns: minmax(0, 1fr); }
  .cth-time .cth-arc { left: 30%; right: 30%; width: 40%; }
}
@media (max-width: 720px) { .cth-diff { top: 68px; bottom: auto; z-index: 3; } .cth-time .cth-msg { top: 10px; width: 40px; height: 40px; margin-left: -20px; } .cth-time .cth-arc { top: 18px; } }

/* ---------- contact: the quick note, its own section at the end ---------- */
.qns { padding: clamp(70px, 9vw, 120px) var(--gutter) clamp(90px, 10vw, 140px); }
.qns .ctq-form { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1120px; margin: 0 auto; padding: clamp(26px, 4vw, 50px);
  border: 0; border-radius: 32px; background: radial-gradient(80% 120% at 0% 0%, rgba(61, 240, 160, .1), transparent 55%), radial-gradient(80% 120% at 100% 100%, rgba(10, 141, 255, .16), transparent 60%), rgba(8, 20, 48, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px var(--line-strong), 0 60px 120px -60px rgba(10, 141, 255, .7); }
.qn-env { display: inline-block; width: 64px; animation: qnFloat 5s ease-in-out infinite; }
.qn-env svg { width: 100%; overflow: visible; filter: drop-shadow(0 12px 18px rgba(10, 141, 255, .5)); }
.qn-env .b { fill: url(#none); fill: #12306E; stroke: #7BE3FF; stroke-width: 2; } .qn-env .fl { fill: none; stroke: #7BE3FF; stroke-width: 2; stroke-linejoin: round; }
.qn-env .dt { fill: #3DF0A0; stroke: #0B1530; stroke-width: 2; }
@keyframes qnFloat { 50% { transform: translateY(-6px) rotate(-3deg); } }
.qn-side .kicker { margin-top: 18px; }
.qn-side h2 { margin-top: 10px; font-size: clamp(1.875rem, 3.2vw, 2.75rem); letter-spacing: -.04em; line-height: 1.05; }
.qn-sub { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; color: #C9D6F0; }
.qn-pts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.qn-pts li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #DCE6F7; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px var(--line); }
.qn-pts svg { width: 15px; height: 15px; fill: none; stroke: #3DF0A0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.qn-card { padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: #0B1328; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.qns .qn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; } .qns .qn-grid .wide { grid-column: 1 / -1; }
.qn-f span { display: block; margin-bottom: 7px; font-size: .8125rem; font-weight: 700; color: #C9D6F0; }
.qn-f input, .qn-f textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; font: 500 1rem/1.5 var(--f-body); color: #fff; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px var(--line-strong); resize: vertical; transition: box-shadow .2s; }
.qn-f input:focus, .qn-f textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px #22C3FF, 0 0 0 4px rgba(34, 195, 255, .15); }
.qn-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF6B8A; } .qn-f ::placeholder { color: #6F80A6; }
.qns .ctc-err { min-height: 1.2em; margin: 10px 0 0; }
.qn-send { width: 100%; justify-content: center; height: 54px; margin-top: 6px; font-size: 1rem; }
.qn-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qns .qn-done { display: flex; align-items: center; gap: 14px; margin: 0; padding: 22px; border-radius: 18px; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .45); outline: none; animation: msIn .5s var(--ease) both; }
.qns .qn-done[hidden] { display: none; }
.qn-ok { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 24px rgba(61, 240, 160, .6); }
.qn-ok svg { width: 22px; height: 22px; fill: none; stroke: #04130C; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.qns .qn-done b { display: block; font-size: 1.125rem; color: #fff; } .qns .qn-done .qn-name { display: inline; } .qns .qn-done .qn-msg { display: block; margin-top: 2px; color: #C9D6F0; line-height: 1.5; }
.qns .ctq-form.is-sent .qn-grid, .qns .ctq-form.is-sent .qn-send, .qns .ctq-form.is-sent .ctc-err { display: none; }
@media (max-width: 900px) { .qns .ctq-form { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .qns .ctq-form { padding: 22px 16px; border-radius: 24px; } .qns .qn-grid { grid-template-columns: 1fr; } .qn-card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .qn-env { animation: none; } }

/* ---------- Pricing: a heading of its own for every service ---------- */
.ppanel-head .ph-kick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: #CFE6FF;
  background: rgba(10, 60, 140, .28); box-shadow: inset 0 0 0 1px rgba(120, 190, 255, .22); }
.ppanel-head .ph-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #1E6BFF, #12B5FF); box-shadow: 0 0 18px rgba(18, 150, 255, .55); }
.ppanel-head .ph-ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ppanel-head h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); line-height: 1.12; }
.ppanel.is-active .ppanel-head > * { animation: phIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.ppanel.is-active .ppanel-head h2 { animation-delay: .06s; }
.ppanel.is-active .ppanel-head p:last-child { animation-delay: .12s; }
@keyframes phIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ppanel.is-active .ppanel-head > * { animation: none; } }

/* ---------- Pricing: build your order ---------- */
.pkr { position: relative; padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(80px, 9vw, 130px); isolation: isolate; overflow-x: clip; }
.pkr-glow { position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 45%, rgba(18, 120, 255, .16), transparent 70%), radial-gradient(30% 45% at 78% 55%, rgba(0, 200, 255, .12), transparent 70%); }
.pkr .sec-head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 48px); }
.pkr .sec-head .kicker { justify-content: center; }
.pkr .sec-head p:last-child { margin-top: 12px; color: #C9D6F0; line-height: 1.6; }
.pkr-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(18px, 2.4vw, 32px); max-width: 1180px; margin: 0 auto; align-items: start; }
.pkr-steps { display: grid; gap: 14px; }
.pkr-step { position: relative; margin: 0; min-width: 0; padding: 22px clamp(18px, 2.2vw, 28px) 24px; border: 0; border-radius: 24px;
  background: linear-gradient(160deg, rgba(20, 44, 96, .55), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .12);
  transition: opacity .4s, box-shadow .4s, transform .4s; }
.pkr-step[disabled] { opacity: .42; }
.pkr-step.is-open:not([disabled]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(120, 195, 255, .26), 0 18px 50px -24px rgba(10, 120, 255, .55); }
.pkr-step.is-nudge { animation: pkNudge .5s; }
@keyframes pkNudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pkr-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; color: #fff; }
.pkr-step > :not(legend) { clear: both; }
.pkr-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .875rem; color: #fff; background: rgba(30, 107, 255, .25); box-shadow: inset 0 0 0 1px rgba(120, 195, 255, .45); transition: background .3s, box-shadow .3s; }
.pkr-step:has([aria-pressed="true"]) .pkr-n { background: linear-gradient(135deg, #1E6BFF, #12B5FF); box-shadow: 0 0 16px rgba(18, 150, 255, .6); }
.pkr-groups { display: grid; gap: 14px; }
.pkr-gl { margin: 0 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7FA3D6; }
.pkr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pkr-c { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: .9375rem; color: #DDE8FA; cursor: pointer;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(160, 205, 255, .2); transition: background .25s, box-shadow .25s, color .25s, transform .25s; }
.pkr-c svg { width: 18px; height: 18px; fill: none; stroke: #6FC3FF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.pkr-c:hover { background: rgba(30, 107, 255, .16); transform: translateY(-1px); }
.pkr-c[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #1E6BFF, #0FA8FF); box-shadow: 0 8px 24px -8px rgba(18, 140, 255, .8); }
.pkr-c[aria-pressed="true"] svg { stroke: #fff; }
.pkr-unsure { margin-top: 16px; padding: 0; border: 0; background: none; font: inherit; font-size: .9375rem; color: #6FC3FF; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.pkr-unsure:hover { color: #fff; }
.pkr-wait { margin: 0; color: #8FA6CC; font-size: .9375rem; }
.pkr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pkr-p { position: relative; display: grid; gap: 6px; padding: 18px 16px 16px; border: 0; border-radius: 18px; text-align: left; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(160, 205, 255, .18); transition: background .25s, box-shadow .25s, transform .25s; animation: phIn .45s both; }
.pkr-p:nth-of-type(3n+2) { animation-delay: .06s; } .pkr-p:nth-of-type(3n) { animation-delay: .12s; }
.pkr-p[hidden] { display: none; }
.pkr-p:hover { transform: translateY(-2px); background: rgba(30, 107, 255, .12); }
.pkr-p b { font-size: 1rem; }
.pkr-p span { font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.pkr-p small { margin-left: 4px; font-family: var(--f-body); font-size: .8125rem; font-weight: 400; color: #9DB4D8; letter-spacing: 0; }
.pkr-p i { position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; font-size: .6875rem; font-style: normal; font-weight: 600; background: linear-gradient(135deg, #1E6BFF, #12B5FF); }
.pkr-p[aria-pressed="true"] { background: linear-gradient(160deg, rgba(30, 107, 255, .35), rgba(18, 181, 255, .14)); box-shadow: inset 0 0 0 1.5px #3FA9FF, 0 12px 30px -14px rgba(18, 150, 255, .9); }
.pkr-bill { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pkr-bill[hidden] { display: none; }
.pkr-b { display: grid; gap: 2px; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; font: inherit; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(160, 205, 255, .18); transition: background .25s, box-shadow .25s; }
.pkr-b small { font-size: .8125rem; color: #8FD3FF; }
.pkr-b[aria-pressed="true"] { background: linear-gradient(160deg, rgba(30, 107, 255, .35), rgba(18, 181, 255, .14)); box-shadow: inset 0 0 0 1.5px #3FA9FF; }
.pkr-once { margin: 0; padding: 14px 16px; border-radius: 16px; color: #C9D6F0; line-height: 1.55; background: rgba(18, 140, 255, .08); box-shadow: inset 0 0 0 1px rgba(120, 195, 255, .2); }
.pkr-c:focus-visible, .pkr-p:focus-visible, .pkr-b:focus-visible { outline: 2px solid #6FC3FF; outline-offset: 3px; }

/* the ticket */
.pkr-ticket { position: sticky; top: 100px; padding: 24px clamp(20px, 2.2vw, 28px) 26px; border-radius: 26px; isolation: isolate;
  background: linear-gradient(170deg, rgba(26, 58, 124, .7), rgba(8, 18, 44, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(150, 205, 255, .18), 0 30px 70px -30px rgba(0, 90, 255, .6); }
.pkr-ticket::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .5s;
  background: conic-gradient(from 180deg, #1E6BFF, #12E0FF, #1E6BFF 60%, #12E0FF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pkr.is-ready .pkr-ticket::before { opacity: 1; }
.pkr-tk-top { display: flex; align-items: center; justify-content: space-between; }
.pkr-tk-label { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8FD3FF; }
.pkr-stamp { padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3BF0A0; box-shadow: inset 0 0 0 1.5px #3BF0A0;
  opacity: 0; transform: scale(1.6) rotate(-12deg); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.pkr.is-ready .pkr-stamp { opacity: 1; transform: scale(1) rotate(-6deg); }
.pkr-rows { display: grid; gap: 12px; margin: 18px 0 0; }
.pkr-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.pkr-rows dt { color: #8FA6CC; }
.pkr-rows dd { margin: 0; color: #fff; font-weight: 500; text-align: right; }
.is-new { animation: pkNew .5s; }
@keyframes pkNew { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.pkr-cut { position: relative; height: 2px; margin: 22px -28px; background: repeating-linear-gradient(90deg, rgba(150, 205, 255, .35) 0 8px, transparent 8px 14px); }
.pkr-cut::before, .pkr-cut::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translateY(-50%); background: var(--midnight); }
.pkr-cut::before { left: -11px; } .pkr-cut::after { right: -11px; }
.pkr-total p { margin: 0; }
.pkr-total p:first-child { font-size: .875rem; color: #8FA6CC; }
.pkr-amt { margin-top: 2px !important; font-family: var(--f-display); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkr-sub { margin-top: 6px !important; min-height: 2.9em; font-size: .875rem; line-height: 1.45; color: #C9D6F0; }
.pkr-go { width: 100%; margin-top: 18px; justify-content: center; }
.pkr-go.is-off { opacity: .45; filter: saturate(.4); cursor: not-allowed; box-shadow: none; }
.pkr-trust { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .875rem; color: #C9D6F0; }
.pkr-trust li { display: flex; align-items: center; gap: 8px; }
.pkr-trust svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #3BF0A0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pkr-write { margin: 16px 0 0; font-size: .875rem; color: #8FA6CC; }
.pkr-write .text-link { margin: 0; }
@media (max-width: 900px) {
  .pkr-wrap { grid-template-columns: 1fr; }
  .pkr-ticket { position: relative; top: 0; }
}
@media (max-width: 560px) {
  .pkr-plans { grid-template-columns: 1fr; }
  .pkr-p { grid-template-columns: 1fr auto; align-items: center; }
  .pkr-c { min-height: 40px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .pkr-p, .is-new, .pkr-step.is-nudge { animation: none; } }

/* ---------- Pricing: monthly or yearly, right above the plans ---------- */
.pbill-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: -8px 0 34px; }
.pbill { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgba(8, 20, 48, .7); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .22), 0 14px 40px -20px rgba(10, 141, 255, .7); }
.pbill .bill-opt { position: relative; z-index: 1; height: 46px; padding: 0 22px; font-size: 1rem; font-weight: 600; color: #AFC0DE; background: none; transition: color .35s; white-space: nowrap; }
.pbill .bill-opt.is-on { background: none; color: #fff; }
.pbill-thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 6px 22px -6px rgba(10, 141, 255, .9); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.pricing.is-yearly .pbill-thumb { transform: translateX(100%); }
.pbill .bill-save { background: rgba(61, 240, 160, .16); color: #3DF0A0; animation: billPulse 2.4s ease-in-out infinite; }
.pricing.is-yearly .pbill .bill-save { background: rgba(255, 255, 255, .2); color: #fff; animation: none; }
@keyframes billPulse { 50% { box-shadow: 0 0 0 5px rgba(61, 240, 160, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 240, 160, .35); } }
.pbill-note { margin: 0; font-size: .875rem; color: #8FD3FF; }
@media (max-width: 560px) { .pbill .bill-opt { height: 44px; padding: 0 14px; font-size: .9375rem; } .pbill .bill-save { display: block; width: max-content; margin: 2px auto 0; padding: 0 6px; font-size: .6875rem; } .pbill .bill-opt[data-bill="y"] { height: 52px; line-height: 1.1; } }

/* ---------- Pricing: the pointer that shows the other services ---------- */
.ptab-guide { position: absolute; z-index: 3; top: 0; left: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: transform .8s cubic-bezier(.45, .05, .25, 1), opacity .4s; }
.ptab-guide.is-on { opacity: 1; }
.ptab-guide svg { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(47, 180, 255, .6)); transition: transform .2s; }
.pg-mouse { left: -4px; top: -3px; fill: #fff; stroke: #0A1430; stroke-width: 1.2; stroke-linejoin: round; }
.pg-hand { left: -13px; top: -4px; fill: #fff; stroke: #0A1430; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pricing-controls.is-mouse .pg-hand, .pricing-controls.is-touch .pg-mouse { display: none; }
.ptab-guide.is-tap svg { transform: scale(.82); }
.pg-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #6FC3FF; opacity: 0; }
.ptab-guide.is-tap .pg-ring { animation: pgRing .6s ease-out; }
@keyframes pgRing { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }
.ptab.is-peek { color: #fff; background: rgba(111, 195, 255, .16); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .45); }
.ptab:not([aria-selected="true"]):hover { color: #fff; background: rgba(111, 195, 255, .1); }
.ptab-tip { margin: -4px 0 0; text-align: center; font-size: .9375rem; color: #AFC0DE; transition: opacity .5s, transform .5s; }
.ptab-tip-in { display: inline-flex; align-items: center; gap: 6px; }
.ptab-tip-in::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3DF0A0; box-shadow: 0 0 0 0 rgba(61, 240, 160, .6); animation: billPulse 1.8s infinite; }
.ptab-tip b { color: #fff; font-weight: 600; }
.pricing-controls.is-done .ptab-tip { opacity: 0; transform: translateY(-6px); }

/* ---------- Pricing: ways to save, each with its own picture ---------- */
.save .ways { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.save .way { display: flex; flex-direction: column; padding: 18px 18px 26px; border-radius: 26px; transition: transform .4s var(--ease), box-shadow .4s; }
.save .way:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(111, 195, 255, .35), 0 24px 50px -24px rgba(10, 141, 255, .7); }
.save .way > :not(.way-art) { padding: 0 6px; }
.way-art { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 20px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(80% 90% at 50% 0%, rgba(47, 160, 255, .28), transparent 70%), rgba(4, 10, 26, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
/* coupon */
.wa-coupon { position: relative; display: flex; width: 86%; height: 82px; border-radius: 14px; overflow: hidden; transform: rotate(-4deg); background: linear-gradient(120deg, #2B5BFF, #0A8DFF 55%, #22C3FF); box-shadow: 0 14px 30px -10px rgba(10, 141, 255, .8); }
.way:hover .wa-coupon { transform: rotate(0); transition: transform .5s var(--ease); }
.wa-c-l { display: grid; place-content: center; width: 42%; font: 700 1.75rem/1 var(--f-display); color: #fff; text-align: center; }
.wa-c-l small { margin-top: 3px; font-size: .6875rem; letter-spacing: .3em; }
.wa-c-r { position: relative; flex: 1; display: grid; place-content: center; gap: 2px; padding-left: 8px; background: #F4F8FF; color: #0A1430; text-align: center; }
.wa-c-r::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; border-left: 2px dashed rgba(10, 20, 48, .3); }
.wa-c-r small { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: #5A6A8E; }
.wa-c-r b { font: 700 .9375rem var(--f-display); letter-spacing: .06em; color: #1E4FD8; }
.wa-coupon::before, .wa-coupon::after { content: ""; position: absolute; left: 42%; width: 16px; height: 16px; border-radius: 50%; background: #071230; transform: translateX(-50%); z-index: 1; }
.wa-coupon::before { top: -8px; } .wa-coupon::after { bottom: -8px; }
/* calendar */
.wa-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 84%; }
.wa-cal i { display: grid; place-items: center; height: 26px; border-radius: 7px; font-size: .6875rem; font-style: normal; font-weight: 600; color: #AFC0DE; background: rgba(169, 220, 255, .1); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.wa-cal i.is-free { color: #052A1B; background: #3DF0A0; box-shadow: 0 0 16px rgba(61, 240, 160, .6); animation: calFree 2.6s ease-in-out infinite; }
.wa-cal i.is-free:last-child { animation-delay: .3s; }
@keyframes calFree { 50% { transform: translateY(-3px); } }
/* bundle stack */
.wa-stack { position: relative; display: grid; gap: 6px; width: 62%; }
.wa-stack span { padding: 6px 12px; border-radius: 10px; font-size: .8125rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, rgba(43, 91, 255, .7), rgba(10, 141, 255, .45)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .3); transition: transform .5s var(--ease); }
.wa-stack span:nth-child(2) { transform: translateX(10px); } .wa-stack span:nth-child(3) { transform: translateX(20px); }
.way:hover .wa-stack span { transform: none; }
.wa-stack b { position: absolute; right: -26px; top: -14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 .9375rem var(--f-display); color: #052A1B; background: #3DF0A0; box-shadow: 0 0 22px rgba(61, 240, 160, .6); transform: rotate(12deg); }
/* refer */
.wa-ref { position: relative; width: 86%; height: 100px; }
.wa-ref svg { position: absolute; left: 14%; right: 14%; top: 8px; width: 72%; fill: none; stroke: #6FC3FF; stroke-width: 2; stroke-dasharray: 5 6; animation: refFlow 1.4s linear infinite; }
@keyframes refFlow { to { stroke-dashoffset: -22; } }
.wa-av { position: absolute; bottom: 4px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: .75rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #2B5BFF, #22C3FF); box-shadow: 0 0 0 4px rgba(10, 141, 255, .18); }
.wa-av.a { left: 0; } .wa-av.b { right: 0; background: linear-gradient(135deg, #7A5BFF, #2FD4FF); }
.wa-t { position: absolute; bottom: 48px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; color: #052A1B; background: #3DF0A0; }
.wa-t.a { left: 30px; } .wa-t.b { right: 30px; }
@media (max-width: 1100px) { .save .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .save .ways { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wa-cal i.is-free, .wa-ref svg, .pbill .bill-save, .ptab-tip-in::before { animation: none; } }

/* ---------- Pricing: build your order, in lighter colours ---------- */
.pkr-step { background: linear-gradient(160deg, rgba(120, 170, 255, .2), rgba(60, 110, 200, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(190, 225, 255, .26); }
.pkr-step[disabled] { opacity: .5; }
.pkr-step.is-open:not([disabled]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(170, 215, 255, .45), 0 20px 50px -26px rgba(80, 160, 255, .7); }
.pkr-c, .pkr-p, .pkr-b { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(200, 228, 255, .3); color: #fff; }
.pkr-c svg { stroke: #9FD6FF; }
.pkr-c:hover, .pkr-p:hover { background: rgba(255, 255, 255, .17); }
.pkr-gl { color: #A9C6EE; }
.pkr-wait { color: #B8CBEA; }
.pkr-p small { color: #C4D4EE; }
.pkr-once { background: rgba(255, 255, 255, .1); color: #E4EDFB; }
/* the summary is a bright paper ticket */
.pkr-ticket { background: linear-gradient(180deg, #FFFFFF, #EEF4FF); color: #0A1430; box-shadow: 0 40px 80px -30px rgba(10, 100, 255, .65), 0 0 0 1px rgba(255, 255, 255, .7); }
.pkr-tk-label { color: #1E5BE0; }
.pkr-rows dt { color: #5A6A8E; }
.pkr-rows dd { color: #0A1430; font-weight: 600; }
.pkr-cut { background: repeating-linear-gradient(90deg, rgba(10, 40, 100, .22) 0 8px, transparent 8px 14px); }
.pkr-total p:first-child { color: #5A6A8E; }
.pkr-amt { background: linear-gradient(100deg, #1E4FD8, #0A8DFF 60%, #12B5FF); -webkit-background-clip: text; background-clip: text; }
.pkr-sub { color: #3A4A6E; }
.pkr-go.is-off { opacity: .35; }
.pkr-trust { color: #2E3D60; }
.pkr-trust svg { stroke: #0FB872; }
.pkr-stamp { color: #0FB872; box-shadow: inset 0 0 0 1.5px #0FB872; }
.pkr-write { color: #5A6A8E; }
.pkr-write .text-link { color: #1E5BE0; }
.pkr.is-ready .pkr-ticket::before { opacity: .9; }
.pkr-ticket { overflow: hidden; }
.pkr-ticket::before { inset: 0; }
.pkr-step { background: linear-gradient(160deg, rgba(150, 195, 255, .3), rgba(90, 140, 230, .15)); }
.pkr-c, .pkr-p, .pkr-b { background: rgba(255, 255, 255, .14); }
.ptab-guide svg { max-width: none; }
.ptab-tip-in { display: inline; }
.ptab-tip-in::before { display: inline-block; margin-right: 8px; vertical-align: middle; }
@media (max-width: 560px) { .ptab-tip { padding: 0 var(--gutter); font-size: .875rem; } }

/* ---------- Pricing v3: how ordering works, as one glass bar ---------- */
.pricing .howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 980px; margin: clamp(40px, 5vw, 60px) auto 0; padding: 8px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(20, 44, 96, .55), rgba(6, 14, 34, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(150, 205, 255, .16); }
.pricing .howto::before { content: ""; position: absolute; z-index: -1; top: auto; bottom: 0; left: 0; right: auto; width: 34%; height: 2px; background: linear-gradient(90deg, transparent, #2FD4FF, transparent); animation: howRun 4.5s linear infinite; }
@keyframes howRun { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.pricing .howto li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; text-align: left; border-radius: 18px; transition: background .3s; }
.pricing .howto li:hover { background: rgba(255, 255, 255, .05); }
.pricing .howto li + li { box-shadow: inset 1px 0 0 rgba(150, 205, 255, .14); border-radius: 0; }
.pricing .howto li + li::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; border-top: 1.5px solid #6FC3FF; border-right: 1.5px solid #6FC3FF; transform: translateY(-50%) rotate(45deg); background: #071433; }
.howto-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 10px 24px -8px rgba(10, 141, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.howto-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.howto-t { display: grid; gap: 2px; }
.pricing .howto strong { font-size: 1rem; }
.pricing .howto small { width: auto; padding: 0; margin: 0; font-size: .8125rem; color: #9DB4D8; }
@media (max-width: 760px) {
  .pricing .howto { grid-template-columns: 1fr; max-width: 420px; padding: 6px; }
  .pricing .howto li { padding: 12px 14px; flex-wrap: nowrap; }
  .pricing .howto li + li { box-shadow: inset 0 1px 0 rgba(150, 205, 255, .14); }
  .pricing .howto li + li::before { left: 37px; top: -7px; transform: rotate(135deg); }
  .pricing .howto small { width: auto; padding: 0; margin: 0; }
  .pricing .howto::before { width: 60%; }
}

/* ---------- Pricing v3: the launch offer as a real coupon ---------- */
.pricing .offer { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: 0; width: min(760px, 100%); margin: clamp(28px, 3.5vw, 40px) auto 0; padding: 0; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, rgba(30, 70, 150, .55), rgba(8, 20, 48, .7)); box-shadow: inset 0 0 0 1px rgba(150, 205, 255, .22), 0 24px 60px -30px rgba(10, 141, 255, .8); }
.pricing .offer::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); transform: translateX(-100%); animation: offShine 5s ease-in-out infinite; }
@keyframes offShine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.offer-stub { position: relative; display: grid; place-content: center; padding: 18px 30px; text-align: center; color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); }
.offer-stub b { font: 700 2.25rem/1 var(--f-display); letter-spacing: -.03em; }
.offer-stub span { margin-top: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .4em; }
.offer-stub::after { content: ""; position: absolute; right: -1px; top: 10px; bottom: 10px; border-right: 2px dashed rgba(255, 255, 255, .55); }
.offer-body { position: relative; display: grid; align-content: center; gap: 2px; padding: 16px 24px; }
.offer-body::before, .offer-body::after { content: ""; position: absolute; left: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--midnight); box-shadow: inset 0 0 0 1px rgba(150, 205, 255, .22); }
.offer-body::before { top: -10px; } .offer-body::after { bottom: -10px; }
.pricing .offer-tag { justify-self: start; padding: 0; background: none; box-shadow: none; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FD3FF; }
.offer-title { font-size: 1.125rem; color: #fff; }
.pricing .offer-until { font-size: .8125rem; color: #9DB4D8; }
.pricing .offer-code { align-self: center; display: grid; gap: 4px; justify-items: center; margin: 14px 16px 14px 0; padding: 12px 18px; border: 1.5px dashed rgba(143, 211, 255, .7); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.pricing .offer-code:hover { background: rgba(255, 255, 255, .12); }
.offer-c { font: 700 1.125rem/1 var(--f-display); letter-spacing: .12em; color: #fff; }
.offer-cp { font: 600 .6875rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #8FD3FF; }
.offer-code.is-copied { border-color: #3DF0A0; }
.offer-code.is-copied .offer-cp { color: #3DF0A0; }
.offer-code.is-copied .offer-cp::before { content: "\2713  "; }
@media (max-width: 760px) {
  .pricing .offer { grid-template-columns: auto 1fr; border-radius: 20px; padding: 0; }
  .offer-stub { grid-row: span 2; padding: 14px 18px; }
  .offer-stub b { font-size: 1.75rem; }
  .offer-stub span { letter-spacing: .3em; }
  .offer-body { padding: 14px 16px 6px; }
  .offer-title { font-size: 1rem; }
  .pricing .offer-code { grid-template-columns: 1fr auto; align-items: center; margin: 6px 14px 14px; padding: 10px 14px; justify-self: stretch; }
  .offer-body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pricing .offer::after, .pricing .howto::before { animation: none; } }

/* ---------- Pricing v3: services as tappable chips on tablets and phones, no sideways scroll ---------- */
@media (max-width: 1100px) {
  .ptabs-wrap { width: 100%; margin: 0; padding: 0; overflow: visible; }
  .ptabs { width: 100%; max-width: 640px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 12px 16px; border-radius: 24px; }
  .ptab-label { display: block; flex-basis: 100%; margin: 6px 0 0; writing-mode: horizontal-tb; transform: none; text-align: center; font-size: .6875rem; color: #7FA3D6; }
  .ptab-group:first-child .ptab-label { margin: 0; }
  .ptab { height: 40px; padding: 0 16px; font-size: .9375rem; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); }
  .ptab[aria-selected="true"] { background: transparent; box-shadow: none; }
  .ptab-ind { height: 40px; }
}

/* ---------- Pricing v3: a calmer billing switch ---------- */
.pbill-wrap { margin: 4px 0 30px; }
.pbill { padding: 4px; background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); }
.pbill .bill-opt { height: 40px; min-width: 120px; padding: 0 20px; font-size: .9375rem; font-weight: 500; }
.pbill-thumb { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); box-shadow: 0 4px 16px -6px rgba(10, 141, 255, .9); }
.pbill .bill-save { position: absolute; top: -11px; right: -8px; margin: 0; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; line-height: 1.4; color: #052A1B; background: #3DF0A0; animation: none; box-shadow: 0 4px 12px -4px rgba(61, 240, 160, .7); }
.pricing.is-yearly .pbill .bill-save { color: #052A1B; background: #3DF0A0; }
@media (max-width: 560px) { .pbill .bill-opt, .pbill .bill-opt[data-bill="y"] { height: 40px; min-width: 112px; padding: 0 16px; } .pbill .bill-save { display: inline; width: auto; margin: 0; } }

/* =================== ABOUT PAGE =================== */
.abo { overflow-x: clip; }
.abo .sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 4vw, 54px); }
.abo .sec-head .kicker { justify-content: center; }
.abo .sec-head h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.04em; line-height: 1.08; }
.abo .sec-head p:last-child:not(.kicker) { margin-top: 14px; color: #C9D6F0; line-height: 1.6; }
.abo-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* hero */
.abo-hero { position: relative; display: grid; align-content: end; justify-items: center; min-height: min(100svh, 940px); padding: calc(var(--header-h) + 40px) var(--gutter) 40px; isolation: isolate; overflow: hidden; }
.abo-well { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.abo-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; background: linear-gradient(transparent, var(--midnight)); pointer-events: none; }
.abo-core { position: absolute; left: 50%; top: 44%; z-index: -1; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(10, 30, 80, .95) 40%, rgba(10, 30, 80, 0) 72%); animation: aboCore 4s ease-in-out infinite; }
.abo-core::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .35); animation: aboRing 3s ease-out infinite; }
.abo-core img { width: 64px; height: auto; filter: drop-shadow(0 0 18px rgba(47, 180, 255, .9)); }
@keyframes aboCore { 50% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes aboRing { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.abo-hero-in { max-width: 860px; margin-top: 46vh; text-align: center; }
.abo-hero-in .kicker { justify-content: center; }
.abo-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.045em; }
.abo-lead { max-width: 640px; margin: 18px auto 0; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.6; color: #C9D6F0; }
.abo-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(920px, 100%); margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; border-radius: 22px;
  background: rgba(8, 20, 48, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .14); backdrop-filter: blur(10px); }
.abo-facts li { display: grid; gap: 2px; padding: 18px 20px; text-align: center; }
.abo-facts li + li { box-shadow: inset 1px 0 0 rgba(150, 205, 255, .14); }
.abo-facts b { font: 600 clamp(1.375rem, 2.2vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abo-facts span { font-size: .8125rem; color: #9DB4D8; }
@media (max-width: 700px) {
  .abo-core { top: 34%; width: 96px; height: 96px; } .abo-core img { width: 50px; }
  .abo-hero-in { margin-top: 38vh; }
  .abo-facts { grid-template-columns: 1fr 1fr; }
  .abo-facts li:nth-child(3) { box-shadow: inset 0 1px 0 rgba(150, 205, 255, .14); }
  .abo-facts li:nth-child(4) { box-shadow: inset 1px 0 0 rgba(150, 205, 255, .14), inset 0 1px 0 rgba(150, 205, 255, .14); }
}

/* the name */
.abo-name { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(40px, 6vw, 80px); }
.abo-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(10px, 1.6vw, 22px); max-width: 1180px; margin: 0 auto; }
.abo-term { position: relative; height: 100%; padding: 28px 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .14); }
.abo-term > p:last-of-type { margin-top: 14px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
.abo-word { font: 600 clamp(2rem, 3.4vw, 2.75rem)/1 var(--f-display); letter-spacing: -.04em; color: #fff; }
.abo-def { margin-top: 10px; font-size: .9375rem; color: #8FD3FF; }
.abo-def i { margin-right: 6px; color: #7FA3D6; }
.abo-term.is-g .abo-word { animation: aboPull 3.6s ease-in-out infinite; }
@keyframes aboPull { 50% { letter-spacing: -.07em; } }
.abo-term.is-r { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, rgba(30, 90, 220, .45), rgba(8, 30, 80, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(120, 195, 255, .35), 0 30px 60px -30px rgba(10, 141, 255, .8); }
.abo-spark { width: 100%; margin-top: 16px; }
.abo-spark .ar { fill: rgba(47, 212, 255, .14); }
.abo-spark .ln { fill: none; stroke: #2FD4FF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: aboLine 3.2s ease-out infinite; }
@keyframes aboLine { 70%, 100% { stroke-dashoffset: 0; } }
.abo-op { font: 600 clamp(2rem, 3vw, 2.75rem)/1 var(--f-display); color: #6FC3FF; text-shadow: 0 0 20px rgba(47, 180, 255, .7); }
@media (max-width: 1000px) { .abo-eq { grid-template-columns: 1fr; max-width: 520px; } .abo-op { text-align: center; } }

/* why: untangle */
.abo-why-track { position: relative; height: 260vh; }
.abo-why-stage { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 4vw, 60px); height: 100svh; max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + 10px) var(--gutter) 30px; }
.abo-why h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.abo-why-say { position: relative; display: grid; margin-top: 22px; }
.abo-say { grid-area: 1 / 1; margin: 0; color: #C9D6F0; line-height: 1.65; transition: opacity .5s, transform .5s; }
.abo-say b { color: #fff; }
.abo-say.is-new, .abo-why.is-new .abo-say.is-old { opacity: 0; transform: translateY(10px); pointer-events: none; }
.abo-why.is-new .abo-say.is-new { opacity: 1; transform: none; }
.abo-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 0; }
.abo-score div { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(150, 205, 255, .14); }
.abo-score dt { font-size: .75rem; color: #9DB4D8; }
.abo-score dd { margin: 4px 0 0; font: 600 1.75rem/1.1 var(--f-display); color: #FF8BA3; transition: color .5s; }
.abo-why.is-new .abo-score dd { color: #3DF0A0; }
.abo-why-art { position: relative; }
.abo-why-art svg { width: 100%; height: auto; max-height: 72svh; overflow: visible; }
.abo-links path { fill: none; stroke: #FF8BA3; stroke-width: 1.6; stroke-dasharray: 6 6; opacity: .8; transition: stroke .6s; }
.abo-why.is-new .abo-links path { stroke: #2FD4FF; stroke-dasharray: none; animation: none; }
.abo-ring { fill: none; stroke: rgba(111, 195, 255, .5); stroke-width: 1.2; stroke-dasharray: 4 8; opacity: 0; transition: opacity .6s; }
.abo-why.is-new .abo-ring { opacity: 1; animation: aboSpin 30s linear infinite; transform-origin: 250px 220px; }
@keyframes aboSpin { to { transform: rotate(360deg); } }
.abo-v circle { fill: #0B1A3E; stroke: rgba(255, 139, 163, .7); stroke-width: 1.5; transition: stroke .6s, fill .6s; }
.abo-why.is-new .abo-v circle { fill: #0E2A66; stroke: #6FC3FF; }
.abo-v .ic { fill: none; stroke: #DDE8FA; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.abo-v text { font: 600 11px var(--f-body); fill: #C9D6F0; text-anchor: middle; }
.abo-you circle { fill: url(#aboSun); fill: #1E6BFF; filter: drop-shadow(0 0 18px rgba(30, 107, 255, .8)); }
.abo-you text { font: 700 15px var(--f-display); fill: #fff; text-anchor: middle; }
.abo-why-tag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: grid; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.abo-why-tag span { grid-area: 1 / 1; padding: 4px 12px; border-radius: 999px; transition: opacity .5s; }
.t-old { color: #FF8BA3; box-shadow: inset 0 0 0 1px rgba(255, 139, 163, .5); }
.t-new { color: #3DF0A0; box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .5); opacity: 0; }
.abo-why.is-new .t-old { opacity: 0; } .abo-why.is-new .t-new { opacity: 1; }
@media (max-width: 900px) {
  .abo-why-stage { grid-template-columns: 1fr; align-content: center; gap: 10px; padding-top: calc(var(--header-h) + 4px); }
  .abo-why-art { order: -1; } .abo-why-art svg { max-height: 36svh; }
  .abo-why h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .abo-why-say { margin-top: 12px; font-size: .9375rem; }
  .abo-score { margin-top: 14px; } .abo-score div { padding: 10px; } .abo-score dd { font-size: 1.375rem; }
}

/* process: orbits */
.abo-proc-track { position: relative; height: 380vh; }
.abo-proc-stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100svh; max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + 10px) var(--gutter) 30px; }
.abo-proc-head { text-align: center; }
.abo-proc-head .kicker { justify-content: center; }
.abo-proc h2 { font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.abo-proc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 50px); margin-top: clamp(16px, 3vh, 36px); }
.abo-orbits svg { width: 100%; height: auto; max-height: 60svh; overflow: visible; }
.abo-orb { fill: none; stroke: rgba(111, 195, 255, .18); stroke-width: 1.2; transition: stroke .5s; }
.abo-orb.is-done { stroke: rgba(61, 240, 160, .35); }
.abo-orb.is-on { stroke: #2FD4FF; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(47, 212, 255, .8)); }
.abo-sun-t { font: 600 11px var(--f-body); fill: #fff; text-anchor: middle; }
.abo-ol { font: 600 12px var(--f-body); fill: #6E86B3; transition: fill .4s; }
.abo-ol.is-on { fill: #fff; } .abo-ol.is-done { fill: #3DF0A0; }
.abo-trail { fill: none; stroke: url(#aboSun); stroke: rgba(47, 212, 255, .55); stroke-width: 3; stroke-linecap: round; }
.abo-sat { fill: #fff; filter: drop-shadow(0 0 10px #2FD4FF) drop-shadow(0 0 4px #fff); }
.abo-stages { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.abo-st { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; opacity: .45; transition: opacity .4s, background .4s, box-shadow .4s, transform .4s; }
.abo-st.is-done { opacity: .7; }
.abo-st.is-on { opacity: 1; transform: translateX(-6px); background: linear-gradient(160deg, rgba(30, 80, 190, .4), rgba(8, 20, 48, .5)); box-shadow: inset 0 0 0 1px rgba(120, 195, 255, .4), 0 20px 40px -24px rgba(10, 141, 255, .8); }
.abo-st-n { font: 700 1rem var(--f-display); color: #6FC3FF; }
.abo-st.is-done .abo-st-n { color: #3DF0A0; }
.abo-st h3 { font-size: 1.125rem; }
.abo-st p { margin-top: 4px; font-size: .9375rem; line-height: 1.55; color: #C9D6F0; }
.abo-st-out { display: none; align-items: center; gap: 8px; margin-top: 10px !important; font-size: .875rem !important; }
.abo-st-out svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #3DF0A0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abo-st-out b { color: #fff; }
.abo-st.is-on .abo-st-out { display: flex; }
@media (max-width: 900px) {
  .abo-proc-grid { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .abo-orbits svg { max-height: 34svh; }
  .abo-proc h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .abo-stages { display: grid; } .abo-st { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(12px); }
  .abo-st.is-on { opacity: 1; transform: none; pointer-events: auto; }
}

/* laws */
.abo-laws { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(50px, 6vw, 90px); }
.abo-law-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; }
.abo-law { position: relative; padding: 30px 26px 28px; border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(170deg, rgba(20, 44, 96, .45), rgba(6, 14, 34, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .12); transition: transform .4s var(--ease), box-shadow .4s; }
.abo-law:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(111, 195, 255, .4), 0 26px 50px -26px rgba(10, 141, 255, .8); }
.abo-law-n { position: absolute; right: 14px; top: -8px; z-index: -1; font: 700 6.5rem/1 var(--f-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(111, 195, 255, .28); transition: -webkit-text-stroke-color .4s; }
.abo-law:hover .abo-law-n { -webkit-text-stroke-color: rgba(111, 195, 255, .6); }
.abo-law-k { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6FC3FF; }
.abo-law h3 { margin-top: 10px; font-size: 1.375rem; letter-spacing: -.02em; }
.abo-law p:last-child { margin-top: 10px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
@media (max-width: 1000px) { .abo-law-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .abo-law-grid { grid-template-columns: 1fr; } .abo-law-n { font-size: 5rem; } }

/* where: departures board */
.abo-where { padding: clamp(60px, 8vw, 120px) var(--gutter); }
.abo-where-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(16px, 2vw, 28px); max-width: 1180px; margin: 0 auto; align-items: stretch; }
.abo-board { padding: 18px; border-radius: 22px; background: #050B1C; box-shadow: inset 0 0 0 1px rgba(150, 205, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.abo-board-top, .abo-row { display: grid; grid-template-columns: 1.5fr 1.2fr .9fr 1.3fr; gap: 10px; align-items: center; }
.abo-board-top { padding: 0 12px 12px; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F5C451; }
.abo-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.abo-row { padding: 12px; border-radius: 10px; background: linear-gradient(180deg, #0E1A36 50%, #0A1430 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.abo-city { font-size: 1rem; font-weight: 700; letter-spacing: .08em; color: #F2F7FF; white-space: nowrap; }
.abo-ctry { font-size: .8125rem; color: #8A9CC2; font-family: var(--f-body); }
.abo-time { font-size: 1.0625rem; font-weight: 700; color: #F5C451; letter-spacing: .06em; }
.abo-stat { justify-self: start; padding: 3px 8px; border-radius: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; color: #3DF0A0; background: rgba(61, 240, 160, .1); white-space: nowrap; }
.abo-row.is-home { background: linear-gradient(180deg, #1A3E8C 50%, #163578 50%); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .5), 0 0 24px -6px rgba(10, 141, 255, .7); }
.abo-row.is-home .abo-stat { color: #fff; background: #1E6BFF; animation: aboBlink 1.6s steps(2) infinite; }
@keyframes aboBlink { 50% { opacity: .55; } }
.abo-id { position: relative; padding: 26px; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, #FFFFFF, #EAF1FF); color: #0A1430; box-shadow: 0 30px 70px -30px rgba(10, 100, 255, .7); }
.abo-id-k { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #1E5BE0; }
.abo-id-logo { position: absolute; right: -20px; top: -10px; width: 150px; opacity: .1; }
.abo-id h3 { margin-top: 14px; font-size: 1.25rem; color: #0A1430; }
.abo-id address { margin-top: 8px; font-style: normal; line-height: 1.6; color: #3A4A6E; font-size: .9375rem; }
.abo-id-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: #2E3D60; }
.abo-id-list li { display: flex; gap: 8px; align-items: center; }
.abo-id-list svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #0FB872; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abo-mail { display: inline-block; margin-top: 20px; font-weight: 700; color: #1E5BE0; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .abo-where-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .abo-board { padding: 10px; }
  .abo-board-top, .abo-row { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .abo-board-top span:nth-child(2), .abo-board-top span:nth-child(4) { display: none; }
  .abo-ctry { grid-row: 2; font-size: .75rem; } .abo-time { grid-row: 1; grid-column: 2; text-align: right; } .abo-stat { grid-row: 2; grid-column: 2; justify-self: end; font-size: .625rem; }
  .abo-city { font-size: .9375rem; }
}

/* final call */
.abo-end { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(90px, 10vw, 140px); }
.abo-end-card { position: relative; max-width: 1000px; margin: 0 auto; padding: clamp(50px, 7vw, 90px) clamp(22px, 5vw, 70px); border-radius: 32px; text-align: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 50% 100%, rgba(10, 141, 255, .35), transparent 70%), linear-gradient(170deg, rgba(20, 44, 96, .6), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(150, 205, 255, .2); }
.abo-end-rings { position: absolute; left: 50%; top: 100%; z-index: -1; }
.abo-end-rings i { position: absolute; left: 0; top: 0; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .4); transform: translate(-50%, -50%) scale(.3); animation: aboWave 6s linear infinite; }
.abo-end-rings i:nth-child(2) { animation-delay: 2s; } .abo-end-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes aboWave { from { transform: translate(-50%, -50%) scale(4); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.abo-end h2 { max-width: 760px; margin: 0 auto; font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.abo-end p { max-width: 560px; margin: 16px auto 0; color: #C9D6F0; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .abo-core, .abo-core::before, .abo-term.is-g .abo-word, .abo-spark .ln, .abo-ring, .abo-end-rings i, .abo-row.is-home .abo-stat { animation: none; } .abo-spark .ln { stroke-dashoffset: 0; } }
.abo-ol { text-anchor: middle; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; paint-order: stroke; stroke: #040A1A; stroke-width: 4px; }
.abo-sun-t { paint-order: stroke; stroke: #0A3A8A; stroke-width: 3px; }
.abo-why-tag { bottom: -34px; }
@media (max-width: 900px) {
  .abo-st:not(.is-on) { opacity: 0; }
  .abo-orbits svg { max-height: 40svh; }
  .abo-why-tag { bottom: -22px; }
  .abo-why-text { margin-top: 18px; }
}

/* =================== ABOUT v2 =================== */
/* the name: richer cards, each with its own small picture */
.abo-eq { align-items: stretch; }
.abo-term { display: flex; flex-direction: column; padding: 16px 16px 26px; border-radius: 28px; transition: transform .45s var(--ease), box-shadow .45s; }
.abo-term:hover { transform: translateY(-6px); }
.abo-term > p { padding: 0 10px; }
.abo-art { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 22px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 90% at 50% 10%, rgba(47, 160, 255, .25), transparent 70%), rgba(4, 10, 26, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.abo-word { font-size: clamp(2.125rem, 3.4vw, 2.875rem); }
.abo-ph { margin-top: 6px; font-size: .8125rem; letter-spacing: .06em; color: #7FA3D6; }
.abo-ph i { margin-left: 6px; font-style: italic; color: #6FC3FF; }
.abo-term .abo-def { margin-top: 14px; padding-top: 14px !important; border-top: 1px solid rgba(150, 205, 255, .14); margin-left: 10px; margin-right: 10px; padding-left: 0 !important; padding-right: 0 !important; font-size: 1rem; color: #fff; font-weight: 600; }
.abo-mean { margin-top: 10px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
.abo-term > p:last-of-type { margin-top: 10px; }
/* gravity picture: specks fall into a glowing core */
.art-g .ag-core { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff, #2FD4FF 45%, #0A8DFF 70%, transparent 72%); box-shadow: 0 0 30px 8px rgba(10, 141, 255, .6); }
.art-g b { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 1px dashed rgba(111, 195, 255, .35); animation: aboSpin 14s linear infinite; }
.art-g b + b { width: 130px; height: 130px; margin: -65px 0 0 -65px; animation-duration: 22s; animation-direction: reverse; }
.art-g i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #CFE6FF; box-shadow: 0 0 6px #7BE3FF; animation: agFall 3.2s cubic-bezier(.55, 0, .9, .6) infinite; }
.art-g i:nth-of-type(1) { --a: 0deg; } .art-g i:nth-of-type(2) { --a: 45deg; animation-delay: -.4s; } .art-g i:nth-of-type(3) { --a: 90deg; animation-delay: -.8s; } .art-g i:nth-of-type(4) { --a: 135deg; animation-delay: -1.2s; }
.art-g i:nth-of-type(5) { --a: 180deg; animation-delay: -1.6s; } .art-g i:nth-of-type(6) { --a: 225deg; animation-delay: -2s; } .art-g i:nth-of-type(7) { --a: 270deg; animation-delay: -2.4s; } .art-g i:nth-of-type(8) { --a: 315deg; animation-delay: -2.8s; }
@keyframes agFall { from { transform: rotate(var(--a)) translateX(120px) rotate(0); opacity: 0; } 20% { opacity: 1; } to { transform: rotate(calc(var(--a) + 200deg)) translateX(0); opacity: 0; } }
/* logics picture: a little circuit, a pulse runs along it */
.art-l svg { width: 78%; }
.art-l .lk { fill: none; stroke: rgba(111, 195, 255, .45); stroke-width: 2; stroke-linejoin: round; }
.art-l .nd circle { fill: #0B1A3E; stroke: #6FC3FF; stroke-width: 2; }
.art-l .pk { fill: #fff; filter: drop-shadow(0 0 5px #2FD4FF); }
/* growth picture */
.art-r .abo-spark { width: 82%; margin: 0; }
.art-r .tip { fill: #fff; filter: drop-shadow(0 0 6px #2FD4FF); animation: aboBlink 1.4s infinite; }
.art-up { position: absolute; top: 14px; left: 16px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #052A1B; background: #3DF0A0; }
.abo-term.is-r .abo-art { background: radial-gradient(80% 90% at 70% 20%, rgba(47, 212, 255, .3), transparent 70%), rgba(4, 18, 50, .6); }
/* + and = as glowing tokens */
.abo-op { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.75rem; background: rgba(8, 20, 48, .8); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .45), 0 0 26px rgba(10, 141, 255, .45); }
.abo-op span { line-height: 1; transform: translateY(-1px); }
@media (max-width: 1000px) { .abo-op { justify-self: center; } }

/* process: a bigger system with room for the names */
.abo-proc-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
.abo-orbits svg { max-height: 66svh; }
.abo-ol { font: 600 14px var(--f-display); letter-spacing: .08em; stroke-width: 6px; }
.abo-sun-t { font: 700 12px var(--f-display); letter-spacing: .02em; }
.abo-orb { stroke-width: 1.4; }
.abo-orb.is-on { stroke-width: 2.4; }
/* stage cards: a timeline with a lit card for the current stage */
.abo-stages { position: relative; gap: 8px; padding-left: 22px; }
.abo-stages::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(rgba(111, 195, 255, .5), rgba(111, 195, 255, .08)); }
.abo-st { position: relative; grid-template-columns: 1fr; padding: 16px 20px; border-radius: 20px; }
.abo-st::before { content: ""; position: absolute; left: -22px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #071433; box-shadow: inset 0 0 0 2px #3E6BB0; transition: background .4s, box-shadow .4s; }
.abo-st.is-done::before { background: #3DF0A0; box-shadow: 0 0 0 4px rgba(61, 240, 160, .15); }
.abo-st.is-on::before { background: #2FD4FF; box-shadow: 0 0 0 5px rgba(47, 212, 255, .2), 0 0 16px #2FD4FF; }
.abo-st-n { position: absolute; right: 16px; top: 8px; font: 700 2.75rem/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(111, 195, 255, .3); }
.abo-st.is-on .abo-st-n { -webkit-text-stroke-color: rgba(111, 195, 255, .7); }
.abo-st-k { font-size: .6875rem !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6FC3FF !important; margin: 0 !important; }
.abo-st h3 { margin-top: 4px; font-size: 1.25rem; }
.abo-st-x { display: none; }
.abo-st.is-on .abo-st-x { display: block; }
.abo-st.is-on { transform: none; background: linear-gradient(150deg, rgba(36, 90, 210, .5), rgba(8, 22, 56, .65)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(120, 195, 255, .45), 0 24px 50px -26px rgba(10, 141, 255, .9); }
.abo-st-out { display: none; width: fit-content; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.abo-st.is-on .abo-st-out { display: inline-flex; }
@media (max-width: 900px) {
  .abo-orbits { margin: 0 -24%; }
  .abo-orbits svg { max-height: none; width: 100%; }
  .abo-ol { font-size: 15px; }
  .abo-stages { padding-left: 0; } .abo-stages::before, .abo-st::before { display: none; }
  .abo-st-n { font-size: 2.25rem; }
}

/* six laws: icon, numeral and a light bar */
.abo-law { display: flex; flex-direction: column; padding: 24px 24px 26px; }
.abo-law-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.abo-law-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 10px 24px -8px rgba(10, 141, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.abo-law-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.abo-law-n { position: static; z-index: auto; font-size: 3.25rem; -webkit-text-stroke: 1.2px rgba(111, 195, 255, .45); }
.abo-law h3 { font-size: 1.375rem; }
.abo-law-x { margin-top: 10px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
.abo-law-bar { margin-top: auto; padding-top: 22px; }
.abo-law-bar::after { content: ""; display: block; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2FD4FF, transparent); transform: scaleX(.2); transform-origin: left; transition: transform .6s var(--ease); }
.abo-law:hover .abo-law-bar::after { transform: scaleX(1); }
.abo-law-nav { display: none; }
@media (max-width: 1000px) and (min-width: 761px) { .abo-law-grid { grid-template-columns: 1fr 1fr; } }
/* phones: one law at a time, a numeral switcher on top, swipe or let it play */
@media (max-width: 760px) {
  .abo-law-nav { display: flex; justify-content: center; gap: 6px; margin: 0 auto 16px; }
  .abo-ln { width: 44px; height: 44px; border: 0; border-radius: 12px; font: 700 .9375rem var(--f-display); color: #9DB4D8; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); cursor: pointer; transition: background .3s, color .3s; }
  .abo-ln.is-on { color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 8px 20px -8px rgba(10, 141, 255, .9); }
  .abo-law-grid { display: grid; grid-template-columns: 1fr; }
  .abo-law { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .45s, transform .45s, visibility .45s; min-height: 280px; }
  .abo-law.is-on { opacity: 1; visibility: visible; transform: none; }
  .abo-law-bar::after { transform: scaleX(0); }
  .abo-law.is-on .abo-law-bar::after { animation: lawRun 5s linear forwards; }
  @keyframes lawRun { to { transform: scaleX(1); } }
}
@media (max-width: 380px) { .abo-ln { width: 40px; height: 40px; } }

/* last call: out of the box, specks pulled in from the whole screen */
.abo-end { position: relative; display: grid; place-items: center; min-height: min(92svh, 860px); padding: clamp(90px, 12vw, 160px) var(--gutter); text-align: center; isolation: isolate; overflow: hidden; }
.abo-pull { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.abo-end::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(45% 40% at 50% 62%, rgba(10, 141, 255, .22), transparent 70%); }
.abo-end-in { max-width: 900px; }
.abo-end-in .kicker { justify-content: center; }
.abo-end h2 { max-width: 880px; font-size: clamp(2.125rem, 5vw, 4rem); line-height: 1.05; }
.abo-end p:not(.kicker) { max-width: 560px; margin: 18px auto 0; color: #C9D6F0; line-height: 1.6; }
.abo-end .abo-cta { margin-top: 36px; }
.abo-magnet { position: relative; }
.abo-magnet::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(47, 212, 255, .6); pointer-events: none; }
.abo-magnet.is-hit::after { animation: magHit .9s ease-out; }
@keyframes magHit { from { box-shadow: 0 0 0 0 rgba(47, 212, 255, .55); } to { box-shadow: 0 0 0 22px rgba(47, 212, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .art-g i, .art-g b, .art-r .tip { animation: none; } }
.abo-term.is-r { justify-content: flex-start; }
@media (max-width: 900px) { .abo-proc-grid { grid-template-columns: 1fr; } }

/* ---------- Contact: minimal clocks ---------- */
.cth-time .clk-dial { width: clamp(120px, 13vw, 160px); height: auto; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: 0 20px 50px -24px rgba(10, 141, 255, .55); }
.cth-time .clk-dial::before, .cth-time .clk-dial::after { display: none; }
.cth-time .clk-dial svg { width: 100%; height: 100%; overflow: visible; }
.cth-time .clk .f { fill: rgba(10, 22, 52, .85); }
.cth-time .clk .rim { fill: none; stroke: rgba(169, 220, 255, .22); stroke-width: 1; }
.cth-time .clk.gl .rim { stroke: rgba(47, 212, 255, .55); }
.cth-time .clk .d { fill: rgba(169, 220, 255, .35); }
.cth-time .clk .q { fill: rgba(242, 247, 255, .85); }
.cth-time .clk .h { fill: none; stroke: #F2F7FF; stroke-linecap: round; }
.cth-time .clk .hh { stroke-width: 3.2; }
.cth-time .clk .mm { stroke-width: 2; stroke: rgba(242, 247, 255, .8); }
.cth-time .clk .ss circle { fill: #2FD4FF; filter: drop-shadow(0 0 4px #2FD4FF); }
.cth-time .clk .c { fill: #F2F7FF; }
.cth-time .clk.gl .ss circle { fill: #3DF0A0; filter: drop-shadow(0 0 4px #3DF0A0); }
.cth-time .clk p b { font-size: .6875rem; letter-spacing: .18em; color: #7F93BC; }
.cth-time .clk-t { font-family: var(--f-display); font-weight: 500; letter-spacing: -.02em; }
.cth-time .clk svg, .cth-time .clk.gl svg { filter: none; }
.cth-time .clk .ss { filter: none; }
.cth-time .clk .rim { stroke-width: 1; }
.cth-time .clk.gl .rim { stroke: rgba(47, 212, 255, .6); stroke-width: 1.2; }
.cth-time .clk.gl .clk-dial { box-shadow: 0 0 0 6px rgba(47, 212, 255, .06), 0 20px 50px -24px rgba(47, 212, 255, .6); }
.cth-time .clk .c { stroke: none; }
.cth-time .clk .f, .cth-time .clk.gl .f { stroke: none; }
.cth-time .clk.you .ss circle { fill: #6FC3FF; filter: drop-shadow(0 0 4px #6FC3FF); }

/* =================== LEGAL PAGES =================== */
.lg { --acc: #2FD4FF; --acc2: #0A8DFF; }
.lg-bl { --acc: #6FA0FF; --acc2: #2B5BFF; }
.lg-gr { --acc: #3DF0A0; --acc2: #12B886; }
.lg-hero { position: relative; padding: calc(var(--header-h) + clamp(30px, 5vw, 60px)) var(--gutter) clamp(40px, 5vw, 70px); isolation: isolate; overflow: hidden; }
.lg-glow { position: absolute; left: 50%; top: -20%; z-index: -1; width: min(1000px, 140vw); height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--acc2) 30%, transparent), transparent); opacity: .7; pointer-events: none; }
.lg-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.lg-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: .9375rem; color: #AFC0DE; text-decoration: none; transition: background .3s, color .3s; }
.lg-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lg-tab.is-on { color: #fff; background: linear-gradient(135deg, var(--acc2), color-mix(in srgb, var(--acc) 70%, var(--acc2))); box-shadow: 0 8px 22px -10px var(--acc2); }
.lg-head { max-width: 760px; margin: clamp(30px, 4vw, 48px) auto 0; text-align: center; }
.lg-badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--acc2), var(--acc)); box-shadow: 0 16px 40px -14px var(--acc2), inset 0 1px 0 rgba(255, 255, 255, .35); }
.lg-badge svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg h1 { margin-top: 18px; font-size: clamp(2.5rem, 5.4vw, 4.25rem); letter-spacing: -.045em; line-height: 1.02; }
.lg-lead { margin: 14px auto 0; max-width: 600px; color: #C9D6F0; line-height: 1.6; font-size: clamp(1rem, 1.2vw, 1.125rem); }
.lg-date { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px; border-radius: 999px; font-size: .8125rem; color: #AFC0DE; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.lg-date svg { width: 15px; height: 15px; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; }
.lg-short { max-width: 1100px; margin: clamp(34px, 4vw, 52px) auto 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 26px; background: linear-gradient(160deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .14); }
.lg-short-k { margin: 0 0 16px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.lg-short ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lg-short li { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); }
.lg-s-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
.lg-s-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-short b { display: block; font-size: 1rem; color: #fff; }
.lg-short li p { margin: 6px 0 0; font-size: .875rem; line-height: 1.55; color: #C9D6F0; }
@media (max-width: 1000px) { .lg-short ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lg-short ul { grid-template-columns: 1fr; } .lg-short li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; } .lg-s-ic { grid-row: span 2; margin: 0; } .lg-tab { padding: 0 12px; } .lg-tab span { font-size: .875rem; } }

/* body */
.lg-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); max-width: 1100px; margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(90px, 10vw, 140px); }
.lg-toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 14px; }
.lg-toc-in { padding: 18px; border-radius: 20px; background: rgba(8, 20, 48, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.lg-toc summary { list-style: none; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7F93BC; cursor: pointer; }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc ol { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.lg-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: .875rem; line-height: 1.35; color: #AFC0DE; text-decoration: none; transition: background .25s, color .25s; }
.lg-toc a span { font-family: var(--f-display); font-size: .75rem; color: #5D7BB0; padding-top: 1px; }
.lg-toc a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.lg-toc a.is-on { color: #fff; background: color-mix(in srgb, var(--acc2) 22%, transparent); box-shadow: inset 2px 0 0 var(--acc); }
.lg-toc a.is-on span { color: var(--acc); }
.lg-ask { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--acc2) 30%, transparent), rgba(8, 20, 48, .5)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); }
.lg-ask svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-ask b { display: block; color: #fff; font-size: .9375rem; } .lg-ask small { font-size: .8125rem; color: #C9D6F0; word-break: break-all; }
.lg-text { position: relative; min-width: 0; padding-left: clamp(0px, 3vw, 34px); }
.lg-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(169, 220, 255, .1); }
.lg-progress i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--acc), var(--acc2)); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 10px var(--acc); }
.lg-sec { scroll-margin-top: calc(var(--header-h) + 24px); padding: 0 0 clamp(30px, 3.5vw, 44px); }
.lg-sec + .lg-sec { padding-top: clamp(30px, 3.5vw, 44px); border-top: 1px solid rgba(169, 220, 255, .08); }
.lg-sec h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.025em; }
.lg-n { font-size: .875rem; color: var(--acc); letter-spacing: 0; }
.lg-sec h3 { margin: 22px 0 0; font-size: 1.0625rem; color: #fff; }
.lg-sec p, .lg-sec li { color: #C9D6F0; line-height: 1.75; font-size: 1rem; }
.lg-sec p { margin: 14px 0 0; }
.lg-sec b { color: #fff; font-weight: 600; }
.lg-sec ul, .lg-sec ol { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.lg-sec ul li { position: relative; padding-left: 22px; }
.lg-sec ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.lg-sec ol { counter-reset: lgo; }
.lg-sec ol li { position: relative; padding-left: 40px; counter-increment: lgo; }
.lg-sec ol li::before { content: counter(lgo); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 700 .8125rem var(--f-display); color: #fff; background: color-mix(in srgb, var(--acc2) 45%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 50%, transparent); }
.lg-sec a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .lg-body { grid-template-columns: 1fr; gap: 20px; }
  .lg-toc { position: relative; top: 0; }
  .lg-toc summary { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; }
  .lg-toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid #7F93BC; border-bottom: 2px solid #7F93BC; transform: rotate(45deg); transition: transform .3s; }
  .lg-toc-in[open] summary::after { transform: rotate(-135deg); }
  .lg-ask { display: none; }
  .lg-text { padding-left: 18px; }
}

/* =================== INSIGHTS HUB =================== */
.ins { overflow-x: clip; }
.ins .sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(30px, 4vw, 50px); }
.ins .sec-head .kicker { justify-content: center; }
.ins .sec-head h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); letter-spacing: -.04em; line-height: 1.08; }
/* hero with the topic constellation */
.ins-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(20px, 4vw, 60px); max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + clamp(30px, 5vw, 70px)) var(--gutter) clamp(30px, 4vw, 50px); }
.ins-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.03; letter-spacing: -.045em; }
.ins-lead { max-width: 520px; margin-top: 18px; color: #C9D6F0; line-height: 1.6; font-size: clamp(1rem, 1.25vw, 1.1875rem); }
.ins-stat { margin-top: 22px; font-size: .9375rem; color: #9DB4D8; }
.ins-stat b { color: #fff; font-family: var(--f-display); }
.ins-cons { position: relative; aspect-ratio: 600 / 360; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease); }
.ins-cons-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ins-cons-lines line { stroke: rgba(111, 195, 255, .3); stroke-width: 1; stroke-dasharray: 3 6; animation: insDash 6s linear infinite; }
.ins-cons-lines line.rim { stroke: rgba(111, 195, 255, .14); stroke-dasharray: none; animation: none; }
@keyframes insDash { to { stroke-dashoffset: -54; } }
.ins-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(20, 60, 150, .95) 45%, rgba(10, 141, 255, 0) 72%); box-shadow: 0 0 60px rgba(10, 141, 255, .45); }
.ins-core::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .35); animation: aboRing 3.2s ease-out infinite; }
.ins-core img { width: 48px; height: auto; filter: drop-shadow(0 0 12px rgba(47, 180, 255, .9)); }
.ins-star { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; transform: translate(-22px, -22px); }
.ins-star:nth-of-type(1) { left: 25%; top: 25.6%; } .ins-star:nth-of-type(2) { left: 68.3%; top: 16.7%; } .ins-star:nth-of-type(3) { left: 86.7%; top: 63.9%; }
.ins-star:nth-of-type(4) { left: 50%; top: 83.3%; } .ins-star:nth-of-type(5) { left: 13.3%; top: 69.4%; }
.ins-star:nth-of-type(3) { flex-direction: row-reverse; text-align: right; transform: translate(calc(-100% + 22px), -22px); }
.ins-star-dot { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2B6BFF, #0A2E7A); box-shadow: 0 0 0 1px rgba(111, 195, 255, .5), 0 0 24px rgba(10, 141, 255, .55); transition: transform .35s var(--ease), box-shadow .35s; }
.ins-star-dot svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ins-star-l { display: grid; font: 600 .9375rem/1.2 var(--f-display); white-space: nowrap; }
.ins-star-l small { font: 500 .75rem var(--f-body); color: #8FD3FF; }
.ins-star:hover .ins-star-dot, .ins-star.is-on .ins-star-dot { transform: scale(1.15); box-shadow: 0 0 0 2px #2FD4FF, 0 0 34px rgba(47, 212, 255, .8); }
.ins-star:focus-visible { outline: 2px solid #6FC3FF; outline-offset: 6px; border-radius: 999px; }
@media (max-width: 1000px) { .ins-hero { grid-template-columns: 1fr; text-align: center; } .ins-hero .kicker { justify-content: center; } .ins-lead { margin-left: auto; margin-right: auto; } .ins-cons { max-width: 620px; width: 100%; margin: 10px auto 0; } }
@media (max-width: 600px) {
  .ins-cons { aspect-ratio: 1 / 1; max-width: 360px; }
  .ins-cons-lines { display: none; }
  .ins-star { flex-direction: column; gap: 6px; text-align: center; transform: translate(-50%, -22px); }
  .ins-star:nth-of-type(3) { flex-direction: column; text-align: center; transform: translate(-50%, -22px); }
  .ins-star:nth-of-type(1) { left: 22%; top: 14%; } .ins-star:nth-of-type(2) { left: 78%; top: 14%; } .ins-star:nth-of-type(3) { left: 82%; top: 58%; }
  .ins-star:nth-of-type(4) { left: 50%; top: 80%; } .ins-star:nth-of-type(5) { left: 18%; top: 58%; }
  .ins-star-l { white-space: normal; max-width: 120px; font-size: .8125rem; }
}

/* featured + cards */
.ins-feat { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.ins-card { position: relative; }
.ins-card[hidden] { display: none; }
.ins-link { display: flex; flex-direction: column; height: 100%; border-radius: 24px; overflow: hidden; color: inherit; text-decoration: none; background: linear-gradient(170deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .12); transition: transform .45s var(--ease), box-shadow .45s; }
.ins-link:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(111, 195, 255, .4), 0 30px 60px -30px rgba(10, 141, 255, .8); }
.ins-cover { aspect-ratio: 16 / 10; overflow: hidden; background: #071330; }
.ins-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ins-link:hover .ins-cover img { transform: scale(1.05); }
.ins-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8125rem; color: #8FA6CC; }
.ins-cat { padding: 3px 10px; border-radius: 999px; font-weight: 600; color: #8FD3FF; background: rgba(47, 160, 255, .12); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .3); }
.ins-card h3, .ins-card h2 { margin-top: 12px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; }
.ins-ex { margin-top: 10px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
.ins-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-weight: 600; color: #6FC3FF; }
.ins-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform .3s; }
.ins-link:hover .ins-more svg { transform: translateX(4px); }
.ins-card.is-feat .ins-link { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ins-card.is-feat .ins-cover { aspect-ratio: auto; min-height: 380px; }
.ins-card.is-feat .ins-body { justify-content: center; padding: clamp(24px, 4vw, 54px); }
.ins-card.is-feat h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.035em; }
.ins-card.is-feat .ins-ex { font-size: 1.0625rem; }
.ins-card.is-feat .ins-body::before { content: "Featured"; align-self: flex-start; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #052A1B; background: #3DF0A0; }
.ins-card.is-feat .ins-more { margin-top: 24px; }
@media (max-width: 900px) { .ins-card.is-feat .ins-link { grid-template-columns: 1fr; } .ins-card.is-feat .ins-cover { min-height: 0; aspect-ratio: 16 / 10; } }

/* library */
.ins-lib { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 80px); scroll-margin-top: var(--header-h); }
.ins-lib-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.ins-lib-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.ins-showing { font-size: .9375rem; color: #9DB4D8; }
.ins-chips { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; padding: 8px; border-radius: 22px; background: rgba(4, 10, 26, .82); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.ins-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font: 500 .9375rem var(--f-body); color: #C9D6F0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); cursor: pointer; transition: background .3s, color .3s; }
.ins-chip svg { width: 17px; height: 17px; fill: none; stroke: #6FC3FF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ins-chip b { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: .75rem; color: #8FD3FF; background: rgba(47, 160, 255, .14); }
.ins-chip:hover { background: rgba(47, 160, 255, .12); color: #fff; }
.ins-chip.is-on { color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 8px 22px -10px rgba(10, 141, 255, .9); }
.ins-chip.is-on svg { stroke: #fff; } .ins-chip.is-on b { color: #fff; background: rgba(255, 255, 255, .22); }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.ins-lib.is-anim .ins-card:not([hidden]) { animation: insIn .6s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes insIn { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 1000px) { .ins-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .ins-grid { grid-template-columns: 1fr; }
  .ins-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; padding: 8px var(--gutter); }
  .ins-chips::-webkit-scrollbar { display: none; }
  .ins-chip { flex: none; }
}

/* topics */
.ins-topics { padding: clamp(50px, 7vw, 100px) var(--gutter); }
.ins-topic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 1240px; margin: 0 auto; padding: 0; list-style: none; }
.ins-topic { display: flex; flex-direction: column; padding: 22px 20px; border-radius: 22px; scroll-margin-top: calc(var(--header-h) + 20px); background: linear-gradient(170deg, rgba(20, 44, 96, .45), rgba(6, 14, 34, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(150, 205, 255, .12); }
.ins-topic-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 10px 24px -8px rgba(10, 141, 255, .8); }
.ins-topic-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ins-topic h3 { margin-top: 16px; font-size: 1.125rem; }
.ins-topic > p { margin-top: 8px; font-size: .875rem; line-height: 1.55; color: #C9D6F0; }
.ins-topic ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(169, 220, 255, .1); }
.ins-topic ul a { font-size: .875rem; line-height: 1.4; color: #fff; text-decoration: underline; text-decoration-color: rgba(111, 195, 255, .4); text-underline-offset: 3px; }
.ins-topic-go { margin-top: auto; padding: 16px 0 0; border: 0; background: none; font: 600 .875rem var(--f-body); color: #6FC3FF; text-align: left; cursor: pointer; }
.ins-topic-go:hover { color: #fff; }
@media (max-width: 1100px) { .ins-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ins-topic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ins-topic-grid { grid-template-columns: 1fr; } }

/* ask */
.ins-ask { padding: clamp(20px, 4vw, 40px) var(--gutter) clamp(90px, 10vw, 140px); }
.ins-ask-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 3vw, 36px); max-width: 1100px; margin: 0 auto; padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: radial-gradient(60% 120% at 0% 50%, rgba(10, 141, 255, .3), transparent 70%), linear-gradient(170deg, rgba(20, 44, 96, .55), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(150, 205, 255, .18); }
.ins-ask-q { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font: 700 2.75rem/1 var(--f-display); color: #fff; background: linear-gradient(135deg, #2B5BFF, #22C3FF); box-shadow: 0 0 0 10px rgba(47, 160, 255, .1), 0 20px 40px -14px rgba(10, 141, 255, .9); animation: aboCore 4s ease-in-out infinite; }
.ins-ask h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.03em; line-height: 1.15; }
.ins-ask p { margin-top: 10px; color: #C9D6F0; line-height: 1.6; }
@media (max-width: 800px) { .ins-ask-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
@media (prefers-reduced-motion: reduce) { .ins-cons-lines line, .ins-core::before, .ins-ask-q { animation: none; } }
/* constellation v2: labels under each star, so they never collide */
.ins-star, .ins-star:nth-of-type(3) { flex-direction: column; gap: 8px; text-align: center; transform: translate(-50%, -22px); }
.ins-star:nth-of-type(1) { left: 18%; top: 18%; } .ins-star:nth-of-type(2) { left: 78%; top: 13.9%; } .ins-star:nth-of-type(3) { left: 90%; top: 60%; }
.ins-star:nth-of-type(4) { left: 52%; top: 86.1%; } .ins-star:nth-of-type(5) { left: 12%; top: 66.1%; }
.ins-star-l { white-space: normal; max-width: 150px; justify-items: center; }
.ins-ask-q { animation: insQ 4s ease-in-out infinite; }
@keyframes insQ { 50% { transform: scale(1.06); } }
@media (max-width: 600px) {
  .ins-star:nth-of-type(1) { left: 22%; top: 12%; } .ins-star:nth-of-type(2) { left: 78%; top: 12%; } .ins-star:nth-of-type(3) { left: 84%; top: 56%; }
  .ins-star:nth-of-type(4) { left: 50%; top: 78%; } .ins-star:nth-of-type(5) { left: 16%; top: 56%; }
}

/* =================== INSIGHTS v2 =================== */
.ac-bl { --ac: #5B8DFF; --ac2: #2B5BFF; } .ac-vi { --ac: #A48BFF; --ac2: #6A4BFF; } .ac-cy { --ac: #2FD4FF; --ac2: #0A8DFF; }
.ac-gr { --ac: #3DF0A0; --ac2: #12A877; } .ac-gd { --ac: #F5C451; --ac2: #E0921E; }
.ins-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .8125rem; color: #7F93BC; }
.ins-crumbs li + li::before { content: "/"; margin-right: 6px; color: #4A5E86; }
.ins-crumbs a { color: #AFC0DE; text-decoration: none; } .ins-crumbs a:hover { color: #fff; }
.ins-crumbs [aria-current] { color: #fff; }
/* hero: articles orbiting the core */
.ins-hero { position: relative; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: min(100svh, 860px); isolation: isolate; }
.ins-dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ins-tl-k { margin-top: 28px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7F93BC; }
.ins-tls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ins-tl { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; font-size: .9375rem; color: #DDE8FA; text-decoration: none; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); transition: background .3s, box-shadow .3s, transform .3s; }
.ins-tl svg { width: 17px; height: 17px; fill: none; stroke: var(--ac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ins-tl:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--ac) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 55%, transparent), 0 10px 24px -12px var(--ac); }
.ins-orbit { position: relative; aspect-ratio: 1.15 / 1; width: 100%; }
.ins-orbit-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ins-orbit-rings i { grid-area: 1 / 1; width: 82%; height: 42%; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .2); }
.ins-orbit-rings i:nth-child(2) { width: 58%; height: 30%; border-style: dashed; border-color: rgba(111, 195, 255, .16); animation: aboSpin 40s linear infinite; }
.ins-orbit-rings i:nth-child(3) { width: 100%; height: 52%; border-color: rgba(111, 195, 255, .08); }
.ins-orbit .ins-core { position: absolute; left: 50%; top: 50%; z-index: 50; width: 120px; height: 120px; }
.ins-orbit .ins-core img { width: 60px; }
.ins-sat { position: absolute; left: 50%; top: 50%; width: clamp(150px, 16vw, 230px); border-radius: 16px; overflow: hidden; text-decoration: none; background: #071330; box-shadow: 0 0 0 1px rgba(169, 220, 255, .22), 0 20px 40px -18px rgba(0, 0, 0, .8); will-change: transform; transition: box-shadow .4s; }
.ins-sat img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ins-sat span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: #fff; background: rgba(4, 10, 26, .75); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 60%, transparent); backdrop-filter: blur(6px); }
.ins-sat.is-front { box-shadow: 0 0 0 1.5px var(--ac), 0 0 40px -6px var(--ac), 0 30px 50px -20px rgba(0, 0, 0, .8); }
@media (max-width: 1000px) { .ins-hero { min-height: 0; } .ins-hero-text .ins-crumbs ol { justify-content: center; } .ins-tls { justify-content: center; } .ins-orbit { max-width: 620px; margin: 0 auto; } }
@media (max-width: 600px) { .ins-orbit { aspect-ratio: 1 / 1; margin-top: 10px; } .ins-sat { width: 132px; border-radius: 12px; } .ins-orbit .ins-core { width: 90px; height: 90px; } .ins-orbit .ins-core img { width: 44px; } .ins-tl { height: 38px; font-size: .875rem; } }
.ins-cat { color: var(--ac, #8FD3FF); background: color-mix(in srgb, var(--ac, #2FA0FF) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #6FC3FF) 40%, transparent); }

/* topics: five planets, each with its own colour */
.ins .sec-head > p:last-child:not(.kicker) { margin-top: 12px; color: #C9D6F0; line-height: 1.6; }
.ins-topic-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ins-topic { position: relative; grid-column: span 2; padding: 26px 24px 24px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 65%), linear-gradient(170deg, rgba(16, 36, 80, .6), rgba(6, 14, 34, .65));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent); transition: transform .45s var(--ease), box-shadow .45s; }
.ins-topic:nth-child(1), .ins-topic:nth-child(2) { grid-column: span 3; }
.ins-topic:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in srgb, var(--ac) 55%, transparent), 0 30px 60px -30px var(--ac); }
.ins-topic-bg { position: absolute; right: -30px; top: -30px; z-index: -1; opacity: .09; transition: opacity .5s, transform .8s var(--ease); }
.ins-topic-bg svg { width: 190px; height: 190px; fill: none; stroke: var(--ac); stroke-width: 1.2; }
.ins-topic:hover .ins-topic-bg { opacity: .18; transform: rotate(-8deg) scale(1.05); }
.ins-topic-top { display: flex; align-items: center; justify-content: space-between; }
.ins-topic-ic { background: linear-gradient(135deg, var(--ac2), var(--ac)); box-shadow: 0 10px 24px -8px var(--ac); }
.ins-topic-n { padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.ins-topic h3 { margin-top: 18px; font-size: 1.375rem; letter-spacing: -.02em; }
.ins-topic h3 a { color: #fff; text-decoration: none; } .ins-topic h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ins-topic > p { position: relative; font-size: .9375rem; }
.ins-topic ul { position: relative; z-index: 1; border-top-color: color-mix(in srgb, var(--ac) 18%, transparent); }
.ins-topic ul a { font-size: .9375rem; text-decoration-color: color-mix(in srgb, var(--ac) 50%, transparent); }
.ins-topic-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-weight: 600; font-size: .9375rem; color: var(--ac); text-decoration: none; }
.ins-topic-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.ins-topic:hover .ins-topic-go svg { transform: translateX(5px); }
@media (max-width: 1000px) { .ins-topic-grid { grid-template-columns: 1fr 1fr; } .ins-topic, .ins-topic:nth-child(1), .ins-topic:nth-child(2) { grid-column: span 1; } .ins-topic:nth-child(5) { grid-column: span 2; } }
@media (max-width: 600px) { .ins-topic-grid { grid-template-columns: 1fr; } .ins-topic:nth-child(5) { grid-column: span 1; } }

/* ask: questions float up on the left, a short form on the right */
.ins-ask-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1180px; padding: clamp(28px, 4vw, 56px); border-radius: 32px; text-align: left;
  background: radial-gradient(60% 80% at 0% 100%, rgba(10, 141, 255, .3), transparent 70%), linear-gradient(170deg, rgba(20, 44, 96, .6), rgba(6, 14, 34, .65)); }
.ins-ask h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; }
.ins-ask-feed { position: relative; height: 170px; margin-top: 24px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.ins-ask-feed ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; animation: askUp 22s linear infinite; }
.ins-ask-feed li { justify-self: start; max-width: 90%; padding: 10px 16px; border-radius: 18px 18px 18px 4px; font-size: .9375rem; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.ins-ask-feed li:nth-child(even) { justify-self: end; border-radius: 18px 18px 4px 18px; background: linear-gradient(135deg, rgba(43, 91, 255, .55), rgba(10, 141, 255, .35)); }
@keyframes askUp { to { transform: translateY(-50%); } }
.ins-ask-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border-radius: 24px; background: rgba(4, 10, 26, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.ia-f { display: grid; gap: 6px; } .ia-f.wide { grid-column: 1 / -1; }
.ia-f span { font-size: .8125rem; font-weight: 600; color: #C9D6F0; }
.ia-f input, .ia-f textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: 14px; font: 1rem var(--f-body); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); resize: vertical; transition: box-shadow .25s, background .25s; }
.ia-f input:focus, .ia-f textarea:focus { outline: none; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px #2FD4FF, 0 0 0 4px rgba(47, 212, 255, .12); }
.ia-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF8BA3; }
.ia-err { grid-column: 1 / -1; margin: 0; min-height: 1.2em; }
.ia-send { grid-column: 1 / -1; justify-content: center; }
.ins-ask-form.is-sent > :not(.ia-done):not(input) { display: none; }
.ia-done { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: rgba(61, 240, 160, .08); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.ia-ok { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #3DF0A0; }
.ia-ok svg { width: 20px; height: 20px; fill: none; stroke: #052A1B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ia-done p { margin: 0; } .ia-done b { display: block; color: #fff; } .ia-done .ia-name { display: inline; } .ia-done .ia-msg { display: block; margin-top: 2px; color: #C9D6F0; line-height: 1.5; }
@media (max-width: 860px) { .ins-ask-card { grid-template-columns: 1fr; } .ins-ask-feed { height: 130px; } }
@media (max-width: 480px) { .ins-ask-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ins-ask-feed ul, .ins-orbit-rings i { animation: none; } }

/* topic pages */
.ins-chero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 70px); max-width: 1180px; margin: 0 auto; padding: calc(var(--header-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(30px, 4vw, 50px); }
.ins-chero-art { position: relative; display: grid; place-items: center; width: clamp(180px, 22vw, 280px); aspect-ratio: 1; }
.ins-chero-art i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); animation: aboRing 4.5s ease-out infinite; }
.ins-chero-art i:nth-child(2) { animation-delay: 1.5s; } .ins-chero-art i:nth-child(3) { animation-delay: 3s; }
.ins-chero-ic { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 30%; background: linear-gradient(135deg, var(--ac2), var(--ac)); box-shadow: 0 30px 60px -20px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .4); animation: insQ 5s ease-in-out infinite; }
.ins-chero-ic svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ins-chero h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -.045em; }
.ins-cat-page .kicker { color: var(--ac); } .ins-cat-page .kicker::before { background: var(--ac); }
.ins-cstat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ins-cstat span { padding: 5px 12px; border-radius: 999px; font-size: .8125rem; color: #C9D6F0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.ins-cstat span:first-child { color: var(--ac); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent); }
.ins-clib { padding-top: clamp(20px, 3vw, 40px); }
.ins-clib .ins-lib-head { margin-bottom: 24px; }
.ins-more-topics { max-width: 1180px; margin: 0 auto; padding: clamp(30px, 5vw, 70px) var(--gutter) clamp(20px, 3vw, 40px); }
.ins-more-topics h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.ins-others { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ins-other { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px; border-radius: 18px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); transition: background .3s, box-shadow .3s, transform .3s; }
.ins-other:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--ac) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 50%, transparent); }
.ins-other-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--ac2), var(--ac)); }
.ins-other svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ins-other > svg { margin-left: auto; stroke: var(--ac); flex: none; }
.ins-other b { display: block; font-size: .9375rem; } .ins-other small { font-size: .8125rem; color: #9DB4D8; }
.ins-back { display: inline-block; margin-top: 22px; }
@media (max-width: 1000px) { .ins-others { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ins-chero { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ins-chero .kicker, .ins-cstat, .ins-chero .ins-crumbs ol { justify-content: center; } .ins-chero-art { width: 160px; } .ins-others { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ins-chero-art i, .ins-chero-ic { animation: none; } }
.ins-sat img { height: auto; }
.ia-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ins-ask-form.is-sent .ia-f, .ins-ask-form.is-sent .ia-send, .ins-ask-form.is-sent .ia-err { display: none !important; }
.ia-done[hidden] { display: none; }
/* Insights on phones and tablets: the orbit first, then the text */
@media (max-width: 1000px) {
  .ins-hero { padding-top: calc(var(--header-h) + 10px); gap: 6px; }
  .ins-orbit { order: -1; }
}
/* Insights filter on phones: a tidy grid of topic tiles, no sideways scrolling */
@media (max-width: 640px) {
  .ins-chips { position: relative; top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 24px; padding: 10px; border-radius: 20px; overflow: visible; }
  .ins-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; height: auto; min-height: 52px; padding: 10px 12px; border-radius: 14px; font-size: .875rem; line-height: 1.25; text-align: left; }
  .ins-chip[data-cat="all"] { grid-column: 1 / -1; min-height: 46px; }
  .ins-chip svg { width: 18px; height: 18px; }
}
@media (max-width: 1000px) { .ins-hero { grid-template-columns: 1fr; text-align: center; } }
@media (max-width: 640px) { .ins-chip[data-cat="all"] { grid-column: auto; min-height: 52px; } }

/* =================== ARTICLE PAGES =================== */
.pst-bar { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 40; height: 3px; pointer-events: none; }
.pst-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ac2), var(--ac)); box-shadow: 0 0 12px var(--ac); transform: scaleX(0); transform-origin: left; }
.pst-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 60px); max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h) + clamp(30px, 5vw, 64px)) var(--gutter) clamp(30px, 4vw, 50px); }
.pst-topic { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pst-topic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pst h1 { margin-top: 18px; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.045em; }
.pst-dek { margin-top: 16px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: #C9D6F0; }
.pst-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.pst-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 30, 80, .9); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .4); }
.pst-av img { width: 24px; height: auto; }
.pst-by b { display: block; font-size: .9375rem; color: #fff; } .pst-by small { font-size: .8125rem; color: #9DB4D8; }
.pst-cover { position: relative; margin: 0; border-radius: 26px; overflow: hidden; transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); box-shadow: 0 0 0 1px rgba(169, 220, 255, .2), 0 40px 80px -30px color-mix(in srgb, var(--ac) 70%, transparent); animation: pstFloat 7s ease-in-out infinite; }
.pst-cover img { display: block; width: 100%; height: auto; }
@keyframes pstFloat { 50% { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-8px); } }
@media (max-width: 900px) { .pst-head { grid-template-columns: 1fr; } .pst-cover { order: -1; transform: none; animation: none; border-radius: 20px; } }

.pst-wrap { display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; gap: clamp(30px, 5vw, 70px); max-width: 1240px; margin: 0 auto; padding: clamp(10px, 2vw, 30px) var(--gutter) clamp(50px, 6vw, 80px); }
.pst-side { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; display: grid; gap: 18px; }
.pst-toc { padding: 18px; border-radius: 20px; background: rgba(8, 20, 48, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.pst-toc p, .pst-share p { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7F93BC; }
.pst-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pst-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: .875rem; line-height: 1.35; color: #AFC0DE; text-decoration: none; transition: background .25s, color .25s; }
.pst-toc a span { font: 600 .75rem var(--f-display); color: #5D7BB0; padding-top: 1px; }
.pst-toc a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.pst-toc a.is-on { color: #fff; background: color-mix(in srgb, var(--ac2) 22%, transparent); box-shadow: inset 2px 0 0 var(--ac); }
.pst-toc a.is-on span { color: var(--ac); }
.pst-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 4px; }
.pst-share p { flex-basis: 100%; }
.pst-share a, .pst-copy { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; color: #C9D6F0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); cursor: pointer; transition: background .25s, color .25s; }
.pst-copy { display: inline-flex; gap: 8px; width: auto; padding: 0 12px; font: 500 .8125rem var(--f-body); }
.pst-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pst-share a:hover, .pst-copy:hover { color: #fff; background: color-mix(in srgb, var(--ac) 18%, transparent); }
.pst-copy.is-done { color: #3DF0A0; box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .5); }

.pst-body { min-width: 0; font-size: 1.0625rem; }
.pst-short { padding: 22px 24px; border-radius: 22px; background: radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 70%), rgba(8, 20, 48, .55); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent); }
.pst-short-k { margin: 0 0 12px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.pst-short ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pst-short li { display: flex; gap: 10px; color: #E4EDFB; line-height: 1.55; }
.pst-short svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--ac); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pst-sec { scroll-margin-top: calc(var(--header-h) + 24px); padding-top: clamp(34px, 4vw, 50px); }
.pst-sec h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.pst-sec p { margin: 16px 0 0; color: #C9D6F0; line-height: 1.8; }
.pst-sec b { color: #fff; font-weight: 600; }
.pst-sec a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; }
.pst-note { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 3px 0 0 var(--ac); }
.pst-table { margin-top: 20px; overflow-x: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.pst-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; }
.pst-table th, .pst-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(169, 220, 255, .08); color: #C9D6F0; line-height: 1.5; }
.pst-table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac); background: rgba(8, 20, 48, .6); }
.pst-table tbody th { color: #fff; font-weight: 600; }
.pst-table tbody td:nth-child(2) { color: #fff; font-family: var(--f-display); white-space: nowrap; }
.pst-table tr:last-child th, .pst-table tr:last-child td { border-bottom: 0; }
.pst-steps { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: ps; }
.pst-steps li { position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; color: #C9D6F0; line-height: 1.65; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); counter-increment: ps; }
.pst-steps li::before { content: counter(ps); position: absolute; left: 16px; top: 15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font: 700 .875rem var(--f-display); color: #fff; background: linear-gradient(135deg, var(--ac2), var(--ac)); }
.pst-list, .pst-check, .pst-flags { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pst-list li, .pst-check li, .pst-flags li { position: relative; padding-left: 30px; color: #C9D6F0; line-height: 1.65; }
.pst-list li::before { content: ""; position: absolute; left: 6px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.pst-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 6px; background: #3DF0A0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23052A1B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pst-flags li { padding: 14px 16px 14px 46px; border-radius: 16px; background: rgba(255, 139, 163, .05); box-shadow: inset 0 0 0 1px rgba(255, 139, 163, .2); }
.pst-flags li::before { content: "!"; position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 .8125rem var(--f-display); color: #2A0710; background: #FF8BA3; }
.pst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.pst-grid div { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.pst-grid b { color: #fff; font-family: var(--f-display); } .pst-grid span { font-size: .9375rem; color: #C9D6F0; line-height: 1.5; }
.pst-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pst-sec .pst-plan { position: relative; display: grid; gap: 4px; padding: 20px 18px; border-radius: 18px; color: #fff; text-decoration: none; background: rgba(8, 20, 48, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); transition: transform .3s, box-shadow .3s; }
.pst-sec .pst-plan:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ac), 0 20px 40px -24px var(--ac); }
.pst-plan.is-pop { box-shadow: inset 0 0 0 1.5px var(--ac), 0 20px 40px -26px var(--ac); }
.pst-plan i { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 999px; font-size: .6875rem; font-style: normal; font-weight: 700; background: linear-gradient(135deg, var(--ac2), var(--ac)); }
.pst-price { font: 600 1.75rem/1.2 var(--f-display); letter-spacing: -.03em; color: #fff; }
.pst-plan small { font-size: .875rem; line-height: 1.5; color: #C9D6F0; }
.pst-faq { display: grid; gap: 10px; margin-top: 20px; }
.pst-q { border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.pst-q summary { position: relative; padding: 16px 52px 16px 18px; list-style: none; font-weight: 600; color: #fff; cursor: pointer; }
.pst-q summary::-webkit-details-marker { display: none; }
.pst-q summary span { position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); }
.pst-q summary span::before, .pst-q summary span::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--ac); transition: transform .3s; }
.pst-q summary span::after { transform: rotate(90deg); }
.pst-q[open] summary span::after { transform: rotate(0); }
.pst-q p { margin: 0; padding: 0 18px 18px; color: #C9D6F0; line-height: 1.7; }
.pst-cta { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 60px); padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 65%), linear-gradient(160deg, rgba(20, 44, 96, .6), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px color-mix(in srgb, var(--ac) 35%, transparent); }
.pst-cta-k { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.pst-cta h2 { margin-top: 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.15; }
.pst-cta p:not(.pst-cta-k) { margin-top: 10px; color: #C9D6F0; line-height: 1.6; }
.pst-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pst-upd { margin-top: 24px; font-size: .8125rem; color: #7F93BC; }
.pst-rel { padding-top: clamp(20px, 4vw, 40px); }
.pst-rel .ins-lib-head { margin-bottom: 24px; }
@media (max-width: 1000px) {
  .pst-wrap { grid-template-columns: minmax(0, 720px); }
  .pst-side { position: relative; top: 0; order: 2; }
  .pst-toc { display: none; }
  .pst-grid, .pst-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pst-grid, .pst-plans { grid-template-columns: 1fr; } .pst-body { font-size: 1rem; } .pst-steps li { padding-left: 56px; } }
@media (prefers-reduced-motion: reduce) { .pst-cover { animation: none; } }
@media (max-width: 600px) {
  .pst-table { overflow: visible; box-shadow: none; border-radius: 0; }
  .pst-table table { min-width: 0; display: block; }
  .pst-table thead { display: none; }
  .pst-table tbody { display: grid; gap: 10px; }
  .pst-table tr { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
  .pst-table th, .pst-table td { padding: 0; border: 0; }
  .pst-table tbody th { font-size: 1.0625rem; }
  .pst-table td::before { content: attr(data-l); display: block; font: 700 .6875rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
  .pst-table tbody td:nth-child(2) { white-space: normal; font-size: 1.125rem; }
}
/* share buttons with the real brand logos */
.pst-share svg.br { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.pst-share a:has(.br-in) { color: #0A66C2; background: #fff; }
.pst-share a:has(.br-x) { color: #fff; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pst-share a:has(.br-fb) { color: #1877F2; background: #fff; }
.pst-share a:has(.br):hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8); }
.pst-share a { transition: transform .25s, box-shadow .25s; }
.pst-share a:has(.br-in):hover, .pst-share a:has(.br-fb):hover { color: #fff; }
.pst-share a:has(.br-in):hover { background: #0A66C2; } .pst-share a:has(.br-fb):hover { background: #1877F2; }
.pst-share { flex-wrap: wrap; } .pst-share p { flex-basis: 100%; } .pst-copy { padding: 0 10px; } .pst-share { gap: 6px; }
.pst-grid.pst-grid-2 { grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .pst-grid.pst-grid-2 { grid-template-columns: 1fr; } } .pst-price small { font-size: .875rem; color: #9DB4D8; font-family: var(--f-body); letter-spacing: 0; }

/* =================== INDUSTRIES HUB =================== */
.ind-hero { position: relative; padding: calc(var(--header-h) + clamp(30px, 5vw, 70px)) 0 clamp(40px, 5vw, 60px); overflow: hidden; isolation: isolate; }
.ind-hero::before { content: ""; position: absolute; left: 50%; top: 10%; z-index: -1; width: min(1100px, 150vw); height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(10, 141, 255, .22), transparent); pointer-events: none; }
.ind h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1.04; letter-spacing: -.045em; }
.ind-lead { max-width: 680px; margin: 20px auto 0; color: #C9D6F0; line-height: 1.65; font-size: clamp(1rem, 1.25vw, 1.1875rem); }
.ind-none { margin-top: 14px; color: #C9D6F0; } .ind-none a { color: #6FC3FF; }
.ind-rail { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 60px); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ind-rail ul { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: indRail 46s linear infinite; }
.ind-rail ul.rev { animation-direction: reverse; animation-duration: 52s; }
.ind-rail li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; white-space: nowrap; font-size: .9375rem; color: #DDE8FA; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 30%, transparent); }
.ind-rail svg { width: 20px; height: 20px; fill: none; stroke: var(--ac); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes indRail { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ind-rail ul { animation: none; } }
.ind-all { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.ind-all .sec-head > p:last-child:not(.kicker) { max-width: 760px; margin-left: auto; margin-right: auto; }
.ind-how { max-width: 1180px; margin: 0 auto; padding: clamp(30px, 5vw, 70px) var(--gutter); }

.ind-exp-foot { margin: 22px 0 0; text-align: center; color: #9DB4D8; } .ind-exp-foot a { color: #6FC3FF; }

/* =================== INDUSTRIES v3 =================== */
/* hero: the growth engine */
.eng-head { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.eng-head .ins-crumbs ol, .eng-head .kicker { justify-content: center; }
.eng h1 { font-size: clamp(2.375rem, 5vw, 4.25rem); }
.eng .ind-lead { margin-left: auto; margin-right: auto; }
.eng-board { position: relative; display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(260px, 1fr); gap: 18px; max-width: 1180px; margin: 24px auto 0; padding: 18px; border-radius: 32px; isolation: isolate;
  background: radial-gradient(60% 90% at 85% 50%, color-mix(in srgb, var(--ac, #2FD4FF) 18%, transparent), transparent 70%), linear-gradient(170deg, rgba(14, 32, 74, .6), rgba(6, 14, 34, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px color-mix(in srgb, var(--ac, #6FC3FF) 28%, transparent), 0 40px 90px -40px color-mix(in srgb, var(--ac, #0A8DFF) 70%, transparent); transition: box-shadow .6s; }
@media (min-width: 1001px) { .eng-board { margin-left: max(var(--gutter), calc(50% - 590px)); margin-right: max(var(--gutter), calc(50% - 590px)); } }
@media (max-width: 1000px) { .eng-board { margin-left: var(--gutter); margin-right: var(--gutter); } }
.eng-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.eng-st { position: relative; display: flex; flex-direction: column; padding: 18px 16px 20px; border-radius: 22px; background: rgba(4, 10, 26, .55); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.eng-st::after { content: ""; position: absolute; right: -10px; top: 38px; z-index: 2; width: 8px; height: 8px; border-top: 2px solid var(--ac, #6FC3FF); border-right: 2px solid var(--ac, #6FC3FF); transform: rotate(45deg); }
.eng-st:last-child::after { display: none; }
.eng-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--ac, #2FD4FF) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #2FD4FF) 40%, transparent); transition: background .4s, box-shadow .4s; }
.eng-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--ac, #6FC3FF); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.eng-st b { margin-top: 14px; font: 600 1.0625rem var(--f-display); color: #fff; }
.eng-txt { position: relative; display: grid; margin: 6px 0 0; }
.eng-t { grid-area: 1 / 1; font-size: .9375rem; line-height: 1.5; color: #C9D6F0; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.eng-t.is-on { opacity: 1; transform: none; }
/* stages light up one after another */
.eng-board.is-run .eng-st .eng-ic { animation: engLit 4.8s ease-in-out infinite; }
.eng-board.is-run .eng-st:nth-child(2) .eng-ic { animation-delay: .5s; } .eng-board.is-run .eng-st:nth-child(3) .eng-ic { animation-delay: 1s; } .eng-board.is-run .eng-st:nth-child(4) .eng-ic { animation-delay: 1.5s; }
@keyframes engLit { 0%, 30%, 100% { background: color-mix(in srgb, var(--ac, #2FD4FF) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #2FD4FF) 40%, transparent); } 12% { background: var(--ac, #2FD4FF); box-shadow: 0 0 26px var(--ac, #2FD4FF); } }
.eng-pipe { position: absolute; left: 34px; right: calc(28% + 30px); bottom: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ac, #2FD4FF) 50%, transparent), transparent); overflow: hidden; }
.eng-pipe i { position: absolute; top: -2px; width: 40px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: engFlow 2.6s linear infinite; }
.eng-pipe i:nth-child(2) { animation-delay: .52s; } .eng-pipe i:nth-child(3) { animation-delay: 1.04s; } .eng-pipe i:nth-child(4) { animation-delay: 1.56s; } .eng-pipe i:nth-child(5) { animation-delay: 2.08s; }
@keyframes engFlow { from { left: -40px; } to { left: 100%; } }
.eng-out { position: relative; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--ac, #2FD4FF) 30%, rgba(8, 20, 48, .8)), rgba(6, 14, 34, .85)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #2FD4FF) 50%, transparent); }
.eng-out-k { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #052A1B; background: #3DF0A0; }
.eng-out-big { margin: 14px 0 0; font: 600 clamp(1.75rem, 2.8vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -.035em; color: #fff; }
.eng-out-big .eng-txt { display: inline-grid; margin: 0; vertical-align: bottom; }
.eng-out-big .eng-t { font: inherit; color: var(--ac, #2FD4FF); line-height: inherit; }
.eng-graph { flex: 1; min-height: 90px; margin: 14px -20px 0; }
.eng-graph svg { width: 100%; height: 100%; }
.eng-graph .a { fill: url(#engG); } .eng-graph .l { fill: none; stroke: var(--ac, #2FD4FF); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.eng-board.is-run .eng-graph .l { animation: engLine 2.2s .6s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes engLine { to { stroke-dashoffset: 0; } }
.eng-out-s { margin: 10px 0 0; font-size: .8125rem; color: #C9D6F0; }
.ind-hero-find { max-width: 620px; margin: 28px auto 0; padding: 0 var(--gutter); text-align: center; }
.ind-hero-find .ind-find { margin: 0 auto; }
@media (max-width: 1000px) {
  .eng-board { grid-template-columns: 1fr; }
  .eng-flow { grid-template-columns: 1fr 1fr; }
  .eng-st::after { display: none; }
  .eng-pipe { display: none; }
  .eng-out { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .eng-board { padding: 12px; border-radius: 24px; }
  .eng-flow { gap: 8px; }
  .eng-st { padding: 14px 12px; border-radius: 18px; }
  .eng-ic { width: 38px; height: 38px; } .eng-st b { margin-top: 10px; font-size: .9375rem; }
  .eng-t { font-size: .8125rem; }
  .eng-graph { min-height: 70px; }
}

/* the first 90 days */
.nd .sec-head > p:last-child:not(.kicker) { max-width: 640px; margin-left: auto; margin-right: auto; }
.nd-track { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1180px; margin: 0 auto 18px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7F93BC; }
.nd-track span:nth-child(3) { text-align: center; } .nd-track span:nth-child(4) { text-align: right; }
.nd-bar { position: absolute; left: 0; right: 0; top: -14px; height: 6px; border-radius: 6px; background: rgba(169, 220, 255, .1); overflow: hidden; }
.nd-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #2B5BFF, #0A8DFF, #22C3FF, #3DF0A0); transform-origin: left; transform: scaleX(0); animation: ndGrow 6s ease-in-out infinite; box-shadow: 0 0 16px rgba(47, 212, 255, .7); }
@keyframes ndGrow { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.nd-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; }
.nd-ph { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 26px; overflow: hidden; isolation: isolate; background: linear-gradient(170deg, rgba(20, 44, 96, .55), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .14); transition: transform .45s var(--ease), box-shadow .45s; }
.nd-ph:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(111, 195, 255, .45), 0 30px 60px -30px rgba(10, 141, 255, .8); }
.nd-ph::before { content: ""; position: absolute; right: -60px; top: -60px; z-index: -1; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 141, 255, .3), transparent); }
.nd-ph:nth-child(3)::before { background: radial-gradient(closest-side, rgba(61, 240, 160, .25), transparent); }
.nd-ph-top { display: flex; align-items: center; justify-content: space-between; }
.nd-ph-n { font: 700 3.5rem/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.2px rgba(111, 195, 255, .6); }
.nd-ph-w { padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #8FD3FF; background: rgba(47, 160, 255, .12); box-shadow: inset 0 0 0 1px rgba(111, 195, 255, .3); }
.nd-ph h3 { margin-top: 18px; font-size: 1.5rem; letter-spacing: -.025em; }
.nd-ph > p { margin-top: 8px; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
.nd-ph ul { display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(169, 220, 255, .1); }
.nd-ph li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: #fff; }
.nd-ph li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 6px; fill: none; stroke: #052A1B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: #3DF0A0; }
@media (max-width: 900px) { .nd-phases { grid-template-columns: 1fr; } .nd-track { display: none; } }

/* growth plan request with a live preview */
.gp { padding: clamp(50px, 7vw, 100px) var(--gutter) clamp(90px, 10vw, 140px); }
.gp .sec-head > p:last-child:not(.kicker) { max-width: 640px; margin-left: auto; margin-right: auto; }
.gp-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(20px, 3vw, 40px); max-width: 1120px; margin: 0 auto; align-items: center; }
.gp-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 28px; background: linear-gradient(170deg, rgba(20, 44, 96, .55), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(150, 205, 255, .16); }
.gp-f { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.gp-f > span, .gp-f legend { padding: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: #C9D6F0; }
.gp-f small { font-weight: 400; color: #7F93BC; }
.gp-f input, .gp-f select { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 14px; font: 1rem var(--f-body); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); transition: box-shadow .25s, background .25s; }
.gp-f select { appearance: none; cursor: pointer; background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236FC3FF' stroke-width='2'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.gp-f select option { color: #0A1430; }
.gp-f input:focus, .gp-f select:focus { outline: none; background-color: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px #2FD4FF, 0 0 0 4px rgba(47, 212, 255, .12); }
.gp-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF8BA3; }
.gp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chip { position: relative; cursor: pointer; }
.gp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gp-chip span { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: .875rem; color: #DDE8FA; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2); transition: background .25s, box-shadow .25s, color .25s; }
.gp-chip span::before { content: "+"; font-weight: 700; color: #6FC3FF; }
.gp-chip input:checked + span { color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 8px 20px -10px rgba(10, 141, 255, .9); }
.gp-chip input:checked + span::before { content: "\2713"; color: #fff; }
.gp-chip input:focus-visible + span { outline: 2px solid #6FC3FF; outline-offset: 2px; }
.gp-err { margin: 0; min-height: 1.2em; }
.gp-send { justify-content: center; gap: 8px; }
.gp-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gp-form.is-sent { opacity: .45; pointer-events: none; }
/* the plan document */
.gp-doc { position: relative; perspective: 1200px; }
.gp-doc-in { position: relative; padding: 28px 26px 24px; border-radius: 20px; color: #0A1430; background: linear-gradient(180deg, #FFFFFF, #EEF4FF); box-shadow: 0 40px 80px -30px rgba(10, 100, 255, .7); transform: rotate(2deg); transition: transform .6s var(--ease); }
.gp-doc:hover .gp-doc-in, .gp-doc.is-filled .gp-doc-in { transform: rotate(0); }
.gp-doc-in::after { content: ""; position: absolute; inset: 8px -8px -8px 8px; z-index: -1; border-radius: 20px; background: rgba(255, 255, 255, .25); }
.gp-doc-top { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid #E1E9F8; }
.gp-doc-top img { width: 34px; height: auto; }
.gp-doc-top span { font: 700 1.125rem var(--f-display); color: #0A1430; }
.gp-stamp { margin-left: auto; padding: 3px 10px; border-radius: 6px; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #E0921E; box-shadow: inset 0 0 0 1.5px #E0921E; transform: rotate(-6deg); transition: color .4s, box-shadow .4s; }
.gp-doc.is-filled .gp-stamp { color: #0FB872; box-shadow: inset 0 0 0 1.5px #0FB872; }
.gp-doc.is-filled .gp-stamp { font-size: 0; } .gp-doc.is-filled .gp-stamp::after { content: "Ready"; font-size: .6875rem; }
.gp-doc-k { margin: 12px 0 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5A6A8E; }
.gp-doc-name, .gp-doc-biz { margin: 0; font: 600 1.25rem var(--f-display); letter-spacing: -.02em; color: #0A1430; }
.gp-doc-biz { color: #1E4FD8; }
.is-pop { animation: pkNew .5s; }
.gp-doc-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.gp-doc-list li { padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); animation: pkNew .4s; }
.gp-doc-list li.is-empty { color: #8A9CC2; background: none; box-shadow: inset 0 0 0 1px #D2DCEE; font-weight: 500; }
.gp-doc-lines { display: grid; gap: 8px; margin-top: 18px; }
.gp-doc-lines i { height: 8px; border-radius: 4px; background: #E1E9F8; } .gp-doc-lines i:nth-child(2) { width: 85%; } .gp-doc-lines i:nth-child(3) { width: 60%; }
.gp-doc-foot { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .8125rem; color: #3A4A6E; }
.gp-doc-foot svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #0FB872; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gp-doc-foot span { font-weight: 600; color: #0A1430; word-break: break-all; }
.gp-done { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 18px; border-radius: 18px; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .4); }
.gp-done[hidden] { display: none; }
.gp-done p { margin: 0; } .gp-done b { display: block; color: #fff; } .gp-done span:not(.ia-ok) { display: block; margin-top: 2px; color: #C9D6F0; line-height: 1.5; }
@media (max-width: 900px) { .gp-wrap { grid-template-columns: 1fr; } .gp-doc { order: -1; max-width: 440px; width: 100%; margin: 0 auto; } }
@media (max-width: 520px) { .gp-two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .eng-pipe i, .nd-bar i, .eng-board.is-run .eng-st .eng-ic { animation: none; } .eng-graph .l { stroke-dashoffset: 0; } }
.eng h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.eng-head .ind-lead { margin-top: 14px; }
.ind-hero.eng { padding-top: calc(var(--header-h) + clamp(20px, 3vw, 40px)); }
.eng-graph { flex: none; height: 110px; min-height: 0; }
.eng-st { min-height: 0; }
.eng-st::before { content: ""; order: 9; margin-top: auto; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ac, #2FD4FF), transparent); opacity: .35; transform-origin: left; }
.eng-board.is-run .eng-st::before { animation: engBar 4.8s ease-in-out infinite; }
.eng-board.is-run .eng-st:nth-child(2)::before { animation-delay: .5s; } .eng-board.is-run .eng-st:nth-child(3)::before { animation-delay: 1s; } .eng-board.is-run .eng-st:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes engBar { 0%, 30%, 100% { opacity: .25; } 12% { opacity: 1; } }
.eng-txt { margin-bottom: 18px; }
.eng-out-big .eng-txt { margin-bottom: 0; }
.eng-graph { height: 64px; margin-top: 10px; } .eng-out { padding-bottom: 14px; } .eng-out-big { font-size: clamp(1.625rem, 2.4vw, 2.125rem); margin-top: 12px; } .eng-st { padding-bottom: 16px; }

/* =================== INDUSTRIES v4 =================== */
/* spheres orbiting under the heading */
.ind-orbs { display: block; width: min(1180px, calc(100% - 2 * var(--gutter))); height: clamp(120px, 14vw, 170px); margin: clamp(8px, 1.5vw, 16px) auto 0; pointer-events: none; }
/* which example the engine is showing */
.eng-ex { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 2px 4px 0; font: 600 1.0625rem var(--f-display); color: #fff; }
.eng-ex-k { padding: 3px 10px; border-radius: 999px; font: 700 .6875rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ac, #2FD4FF); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac, #2FD4FF) 50%, transparent); }
.eng-ex .eng-txt { margin: 0; }
.eng-ex .eng-t { font: inherit; color: #fff; }
.eng-board { margin-top: 6px; }
/* a search bar that looks like one */
.ind-hero-find { max-width: 640px; margin-top: 30px; }
.ind-find { position: relative; display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; padding: 7px 7px 7px 18px; border-radius: 999px; background: #F4F8FF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 24px 60px -24px rgba(10, 141, 255, .9), 0 0 0 7px rgba(111, 195, 255, .12); transition: box-shadow .3s; }
.ind-find:focus-within { box-shadow: 0 0 0 2px #2FD4FF, 0 24px 60px -24px rgba(10, 141, 255, 1), 0 0 0 8px rgba(47, 212, 255, .22); }
.ind-find-ic { display: grid; flex: none; }
.ind-find-ic svg { width: 22px; height: 22px; fill: none; stroke: #1E4FD8; stroke-width: 2; stroke-linecap: round; }
.ind-find input { flex: 1; min-width: 0; height: 48px; padding: 0 6px; border: 0; background: none; font: 1.0625rem var(--f-body); color: #0A1430; }
.ind-find input::placeholder { color: #6A7A9E; }
.ind-find input:focus { outline: none; }
.ind-find input::-webkit-search-cancel-button { cursor: pointer; }
.ind-find-btn { flex: none; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; font: 600 1rem var(--f-body); color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 10px 24px -10px rgba(10, 141, 255, .9); transition: transform .25s, filter .25s; }
.ind-find-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.ind-find-btn:focus-visible { outline: 2px solid #0A1430; outline-offset: 2px; }
/* 90 days: the result */
.ind-how { padding-top: clamp(50px, 7vw, 100px); }
.nd-goal { display: flex; align-items: center; gap: 20px; max-width: 1180px; margin: 16px auto 0; padding: 22px 26px; border-radius: 26px; background: linear-gradient(110deg, rgba(61, 240, 160, .14), rgba(10, 141, 255, .1) 60%, rgba(6, 14, 34, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(61, 240, 160, .3); }
.nd-goal-ic { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: #3DF0A0; box-shadow: 0 12px 30px -10px rgba(61, 240, 160, .8); }
.nd-goal-ic svg { width: 30px; height: 30px; fill: none; stroke: #052A1B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nd-goal p { flex: 1; margin: 0; color: #C9D6F0; line-height: 1.6; }
.nd-goal b { display: block; margin-bottom: 2px; font: 600 1.25rem var(--f-display); letter-spacing: -.02em; color: #fff; }
.nd-goal .btn { flex: none; gap: 8px; }
.nd-goal .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 860px) { .nd-goal { flex-direction: column; align-items: flex-start; } .nd-goal .btn { width: 100%; justify-content: center; } }
/* who we work with: sector cards, never a closed list */
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0; list-style: none; }
.sx-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 28px; overflow: hidden; isolation: isolate; background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 70%), linear-gradient(170deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent); transition: transform .35s, box-shadow .35s, opacity .35s; }
.sx-card:hover, .sx-card.is-hit { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1.5px color-mix(in srgb, var(--ac) 60%, transparent), 0 30px 60px -30px var(--ac); }
.sx-card.is-dim { opacity: .35; }
.sx-bg { position: absolute; right: -30px; top: -30px; z-index: -1; opacity: .07; transition: transform .6s, opacity .6s; }
.sx-bg svg { width: 180px; height: 180px; fill: none; stroke: var(--ac); stroke-width: 1; }
.sx-card:hover .sx-bg { transform: rotate(-12deg) scale(1.08); opacity: .14; }
.sx-top { display: flex; align-items: center; gap: 14px; }
.sx-ic { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(135deg, var(--ac2), var(--ac)); box-shadow: 0 12px 26px -12px var(--ac); }
.sx-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-top h3 { margin: 0; font-size: 1.375rem; letter-spacing: -.025em; }
.sx-line { margin: 14px 0 0; color: #C9D6F0; line-height: 1.55; font-size: .9375rem; }
.sx-k { margin: 18px 0 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.sx-ex { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.5; color: #fff; }
.sx-ex li:not(:nth-last-child(-n+2))::after { content: ","; color: #7F93BC; }
.sx-ex a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ac) 45%, transparent); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.sx-ex a:hover { color: var(--ac); text-decoration-color: var(--ac); }
.sx-ex li.is-hit a { padding: 0 6px; border-radius: 6px; color: #0A1430; background: var(--ac); text-decoration: none; }
.sx-more { color: #9DB4D8; }
.sx-b { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(169, 220, 255, .1); margin-top: auto; }
.sx-k + .sx-b { margin-top: 0; }
.sx-b li { padding: 5px 11px; border-radius: 999px; font-size: .8125rem; color: #DDE8FA; background: color-mix(in srgb, var(--ac) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 28%, transparent); }
.sx-any { --ac: #3DF0A0; --ac2: #0FB872; background: radial-gradient(100% 70% at 50% 0%, rgba(61, 240, 160, .2), transparent 70%), linear-gradient(170deg, rgba(14, 50, 60, .55), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1.5px rgba(61, 240, 160, .4); }
.sx-big { margin: 18px 0 0; font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -.03em; color: #fff; }
.sx-txt { margin: 8px 0 0; color: #C9D6F0; line-height: 1.55; font-size: .9375rem; }
.sx-go { margin-top: auto; justify-content: center; gap: 8px; }
.sx-txt + .sx-go { margin-top: 20px; }
.sx-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sx-any .sx-ic svg { stroke: #052A1B; }
.ind-all .ind-none { max-width: 640px; margin: 18px auto 0; padding: 14px 18px; border-radius: 16px; text-align: center; background: rgba(61, 240, 160, .08); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .3); }
.ind-all .ind-none[hidden] { display: none; }
@media (max-width: 1000px) { .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sx-grid { grid-template-columns: 1fr; }
  .ind-find { padding-left: 14px; }
  .ind-find input { font-size: 1rem; }
  .ind-find-btn { padding: 0 16px; }
  .eng-ex { font-size: .9375rem; }
}
@media (max-width: 400px) { .ind-find-btn { width: 48px; padding: 0; font-size: 0; } .ind-find-btn::before { content: "\2192"; font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .sx-card, .sx-bg { transition: none; } }
.sx-ex li.is-hit::after { padding-left: 0; } .sec-head > p:not(.kicker) { text-wrap: pretty; }
.eng-board .eng-ex .eng-txt { margin: 0; } .eng-out-k { justify-self: start; }
/* calmer hero: one light-up per example, one slow rail */
.eng-board.is-run .eng-st .eng-ic, .eng-board.is-run .eng-st::before { animation-iteration-count: 1; }
.eng-pipe i { display: none; }
.ind-rail ul { animation-duration: 90s; }
.eng h1 { text-wrap: balance; }

/* =================== INDUSTRIES hero: the robot offers growth =================== */
.ihr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.ihr .eng-head { max-width: none; margin: 0; padding: 0; text-align: left; }
.ihr .eng-head .ins-crumbs ol, .ihr .eng-head .kicker { justify-content: flex-start; }
.ihr .ind-lead { margin-left: 0; margin-right: 0; max-width: 560px; }
.ihr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.ihr-cta .btn { gap: 8px; }
.ihr-cta .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ihr-link { color: #C9D6F0; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(111, 195, 255, .45); text-underline-offset: 5px; }
.ihr-link:hover { color: #fff; text-decoration-color: #2FD4FF; }
.ihr-stage { position: relative; justify-self: end; width: min(100%, 380px); aspect-ratio: 695 / 1100; margin-right: 10px; }
.ihr-bot { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); animation: ihrIn 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ihrIn { from { opacity: 0; transform: translateY(24px); } }
.ihr-halo { position: absolute; left: 50%; top: 52%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 141, 255, .26), rgba(10, 141, 255, .08) 55%, transparent); }
.ihr-halo::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 70%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 212, 255, .35), transparent); }
/* the open palm: a soft light, and business icons that rise from it one at a time */
.ihr-palm { position: absolute; z-index: 2; left: 12.9%; top: 17.6%; width: 0; height: 0; }
.ihr-glow { position: absolute; left: -26px; top: -30px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 240, 255, .9), rgba(47, 212, 255, .45) 45%, transparent); animation: ihrGlow 5s ease-in-out infinite; }
@keyframes ihrGlow { 0%, 100% { opacity: .7; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.ihr-palm i { position: absolute; left: -19px; top: -40px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(10, 30, 70, .55); box-shadow: inset 0 0 0 1px rgba(140, 215, 255, .55), 0 0 18px rgba(47, 212, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; animation: ihrRise 18s linear infinite; }
.ihr-palm i svg { width: 20px; height: 20px; fill: none; stroke: #BFEAFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ihr-palm i:nth-child(3) { animation-delay: 3s; } .ihr-palm i:nth-child(4) { animation-delay: 6s; } .ihr-palm i:nth-child(5) { animation-delay: 9s; } .ihr-palm i:nth-child(6) { animation-delay: 12s; } .ihr-palm i:nth-child(7) { animation-delay: 15s; }
@keyframes ihrRise { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 3% { opacity: 1; transform: translate(0, 0) scale(1); } 14% { opacity: 1; } 20%, 100% { opacity: 0; transform: translate(-34px, -120px) scale(.85); } }
/* the plan card beside her */
.ihr-card { position: absolute; z-index: 2; left: -34%; top: 44%; width: 200px; padding: 16px 16px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(20, 50, 110, .7), rgba(6, 14, 34, .75)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(111, 195, 255, .3), 0 30px 60px -24px rgba(10, 141, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: ihrIn 1s .5s cubic-bezier(.2, .8, .2, 1) both; }
.ihr-card-k { margin: 0 0 10px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FD3FF; }
.ihr-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ihr-card li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: #fff; opacity: .35; animation: ihrTick .5s ease-out forwards; }
.ihr-card li:nth-child(1) { animation-delay: 1.3s; } .ihr-card li:nth-child(2) { animation-delay: 1.8s; } .ihr-card li:nth-child(3) { animation-delay: 2.3s; } .ihr-card li:nth-child(4) { animation-delay: 2.8s; }
@keyframes ihrTick { to { opacity: 1; } }
.ihr-card li svg { flex: none; width: 16px; height: 16px; padding: 3px; border-radius: 5px; fill: none; stroke: #052A1B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: #3DF0A0; }
.ihr-line { display: block; width: 100%; height: 40px; margin-top: 12px; overflow: visible; }
.ihr-line path { fill: none; stroke: #2FD4FF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; filter: drop-shadow(0 0 6px rgba(47, 212, 255, .7)); animation: engLine 1.6s 3.2s cubic-bezier(.3, .7, .2, 1) forwards; }
.ihr-card-r { margin: 6px 0 0; font: 600 1rem var(--f-display); color: #3DF0A0; opacity: 0; animation: ihrTick .6s 4.2s forwards; }
.ind-hero.eng .eng-board { margin-top: clamp(30px, 4vw, 50px); }
@media (max-width: 900px) {
  .ihr { grid-template-columns: 1fr; gap: 0; }
  .ihr .eng-head { text-align: center; }
  .ihr .eng-head .ins-crumbs ol, .ihr .eng-head .kicker, .ihr-cta { justify-content: center; }
  .ihr .ind-lead { margin-left: auto; margin-right: auto; }
  .ihr-stage { justify-self: center; width: min(62vw, 300px); margin: 34px 0 0 22%; }
  .ihr-card { left: -62%; top: 40%; width: 170px; padding: 13px; }
  .ihr-card li { font-size: .8125rem; }
}
@media (max-width: 420px) { .ihr-stage { margin-left: 30%; } .ihr-card { left: -72%; width: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .ihr-bot, .ihr-card, .ihr-card li, .ihr-card-r { animation: none; opacity: 1; }
  .ihr-glow, .ihr-palm i { animation: none; } .ihr-line path { animation: none; stroke-dashoffset: 0; }
}
.ihr-card { left: auto; right: 86%; top: 50%; }
.ihr .ind-lead { max-width: 520px; }
@media (max-width: 900px) {
  .ihr-stage { justify-self: end; width: min(50vw, 260px); margin: 28px 2vw 0 0; }
  .ihr-card { left: auto; right: calc(100% + 6px); top: 38%; width: min(180px, calc(50vw - 40px)); }
}
@media (max-width: 420px) { .ihr-stage { margin-left: 0; } .ihr-card { left: auto; width: calc(50vw - 36px); } .ihr-card-k { font-size: .625rem; letter-spacing: .1em; } }
.ihr h1 { font-size: clamp(2.25rem, 3.9vw, 3.375rem); }
.ihr-card { right: 84%; top: 55%; }
@media (max-width: 900px) { .ihr-stage { margin-top: 90px; } .ihr-card { right: calc(100% + 6px); top: 38%; } }
@media (max-width: 900px) { .ihr-card { top: 16%; } }

/* one line question form */
.one { padding: clamp(20px, 4vw, 50px) var(--gutter) clamp(90px, 10vw, 130px); }
.one-in { max-width: 1080px; margin: 0 auto; padding: clamp(26px, 3.4vw, 40px); border-radius: 30px; text-align: center; background: radial-gradient(70% 120% at 50% 0%, rgba(10, 141, 255, .2), transparent 70%), linear-gradient(170deg, rgba(14, 32, 74, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(111, 195, 255, .2); }
.one h2 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); letter-spacing: -.035em; line-height: 1.1; }
.one-in > p { margin: 10px auto 0; max-width: 620px; color: #C9D6F0; line-height: 1.6; }
.one-form { display: flex; gap: 8px; margin-top: 24px; padding: 8px; border-radius: 22px; background: rgba(4, 10, 26, .6); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .16); }
.one-form[hidden] { display: none; }
.one-f { flex: 1 1 0; min-width: 0; }
.one-f.one-m { flex: 2.2 1 0; }
.one-f input { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; font: 1rem var(--f-body); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.one-f input::placeholder { color: #7F93BC; }
.one-f input:focus { outline: none; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px #2FD4FF, 0 0 0 4px rgba(47, 212, 255, .12); }
.one-f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #FF8BA3; }
.one-send { flex: none; height: 52px; padding: 0 26px; gap: 8px; border-radius: 14px; }
.one-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.one-err { min-height: 1.2em; margin: 10px 0 0; }
.one-done { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 0; padding: 16px; border-radius: 16px; color: #C9D6F0; text-align: left; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .4); }
.one-done[hidden] { display: none; }
.one-done b { color: #fff; }
@media (max-width: 760px) { .one-form { flex-direction: column; } .one-send { width: 100%; justify-content: center; } }


/* =================== INDUSTRY PAGE (ix-) =================== */
.ix .sec-head > p:last-child:not(.kicker) { max-width: 660px; margin-left: auto; margin-right: auto; }
/* ---------- hero ---------- */
.ix-hero { position: relative; padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(20px, 3vw, 40px); overflow: hidden; isolation: isolate; }
.ix-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1220px; margin: 0 auto; padding: 0 var(--gutter); }
.ix-k-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; border-radius: 8px; background: rgba(47, 212, 255, .14); }
.ix-k-ic svg { width: 16px; height: 16px; fill: none; stroke: #2FD4FF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ix .kicker:has(.ix-k-ic)::before { display: none; }
.ix h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.ix h1 .grad { display: block; }
.ix-lead { margin-top: 20px; max-width: 540px; color: #C9D6F0; line-height: 1.7; font-size: clamp(1rem, 1.2vw, 1.125rem); }
.ix-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.ix-cta .btn, .ix-pk-go { gap: 8px; }
.ix-cta svg, .ix-pk-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ix-link { color: #C9D6F0; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(111, 195, 255, .45); text-underline-offset: 5px; }
.ix-link:hover { color: #fff; text-decoration-color: #2FD4FF; }
.ix-who { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.ix-who li { padding: 6px 13px; border-radius: 999px; font-size: .8125rem; color: #B9C8E4; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
/* the phone stage */
.ix-stage { position: relative; height: 620px; perspective: 1600px; }
.ix-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 141, 255, .38), rgba(10, 141, 255, .1) 55%, transparent); }
.ix-ring { position: absolute; left: 50%; top: 58%; width: 620px; height: 620px; border-radius: 50%; transform: translate(-50%, -50%) rotateX(74deg); border: 1.5px solid rgba(111, 195, 255, .35); box-shadow: 0 0 40px rgba(47, 212, 255, .25), inset 0 0 40px rgba(47, 212, 255, .2); }
.ix-ring::after { content: ""; position: absolute; inset: 70px; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .18); }
.ix-phone { position: absolute; left: 50%; top: 50%; width: 272px; height: 560px; padding: 9px; border-radius: 46px; transform: translate(-50%, -50%) rotateY(-16deg) rotateX(5deg) rotateZ(1deg); transform-style: preserve-3d;
  background: linear-gradient(140deg, #4A5A7E, #121A30 30%, #0A1020 70%, #3A4868); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 0 5px #070B16, 40px 60px 100px -30px rgba(0, 0, 0, .85), -30px 10px 90px -20px rgba(10, 141, 255, .55);
  animation: ixPhone 1.1s cubic-bezier(.2, .8, .2, 1) both, ixFloat 9s 1.1s ease-in-out infinite; }
@keyframes ixPhone { from { opacity: 0; transform: translate(-50%, -44%) rotateY(-28deg) rotateX(10deg); } }
@keyframes ixFloat { 0%, 100% { transform: translate(-50%, -50%) rotateY(-16deg) rotateX(5deg) rotateZ(1deg); } 50% { transform: translate(-50%, -51.5%) rotateY(-13deg) rotateX(4deg) rotateZ(.5deg); } }
.ix-scr { position: relative; height: 100%; padding: 46px 14px 14px; border-radius: 38px; overflow: hidden; background: linear-gradient(180deg, #F6FAFF, #E6EEFB); color: #0A1430; }
.ix-notch { position: absolute; left: 50%; top: 11px; width: 92px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #070B16; }
@keyframes ixPulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes ixFade { to { opacity: 1; } }
@keyframes ixUp { to { opacity: 1; transform: none; } }
.ix-leaks, .ix-path, .ix-packs, .ix-faq { max-width: 1200px; margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--gutter) 0; }
/* ---------- the patient journey on a glowing wave ---------- */
.ix-road { position: relative; margin-top: clamp(40px, 5vw, 60px); }
.ix-wave { position: absolute; left: 0; top: 0; width: 100%; height: 200px; overflow: visible; }
.ix-wave path { fill: none; stroke: url(#ixW); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(47, 212, 255, .6)); }
.ix-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ix-st { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ix-orb { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-top: 92px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #9FE6FF, #2B8BFF 38%, #0B2A78 75%, #061436); box-shadow: inset -6px -10px 18px rgba(0, 0, 0, .35), 0 0 0 8px rgba(47, 160, 255, .1), 0 18px 40px -10px rgba(10, 141, 255, .9); }
.ix-st.s1 .ix-orb, .ix-st.s3 .ix-orb { margin-top: 12px; }
.ix-st.s4 .ix-orb { background: radial-gradient(circle at 32% 28%, #C8FFE6, #22D18A 40%, #0A6B48 78%, #04301F); box-shadow: inset -6px -10px 18px rgba(0, 0, 0, .3), 0 0 0 8px rgba(61, 240, 160, .1), 0 18px 40px -10px rgba(61, 240, 160, .8); }
.ix-orb svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.ix-st h3 { margin-top: 20px; font-size: 1.3125rem; letter-spacing: -.02em; }
.ix-st > p { margin: 8px 0 0; max-width: 210px; color: #B9C8E4; font-size: .9375rem; line-height: 1.55; }
.ix-st-r { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0 !important; padding: 7px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: #DFFBEE; background: rgba(61, 240, 160, .1); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.ix-st-r svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #3DF0A0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ix-st.s1, .ix-st.s3 { padding-bottom: 80px; }
/* ---------- trust ---------- */
.ix-care { max-width: 1200px; margin: clamp(70px, 9vw, 120px) auto 0; padding: 0 var(--gutter); }
.ix-care-in { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px 36px; padding: clamp(28px, 4vw, 52px); border-radius: 36px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 90% at 0% 0%, rgba(61, 240, 160, .18), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(10, 141, 255, .22), transparent 60%), linear-gradient(160deg, #0B2236, #071226);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(61, 240, 160, .22); }
.ix-seal { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(61, 240, 160, .35), rgba(15, 184, 114, .12) 55%, transparent 70%); box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .45), 0 0 60px -10px rgba(61, 240, 160, .45); }
.ix-seal-r { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(61, 240, 160, .45); }
.ix-seal svg { width: 62px; height: 62px; fill: none; stroke: #3DF0A0; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(61, 240, 160, .6)); }
.ix-care-t { align-self: center; }
.ix-care h2 { font-size: clamp(1.75rem, 3vw, 2.625rem); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.ix-care-t > p { margin: 12px 0 0; color: #C9D6F0; font-size: 1.0625rem; }
.ix-care ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.ix-care li { display: flex; gap: 16px; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); }
.ix-care li > span { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: rgba(61, 240, 160, .14); box-shadow: inset 0 0 0 1px rgba(61, 240, 160, .35); }
.ix-care li svg { width: 22px; height: 22px; fill: none; stroke: #3DF0A0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ix-care b { display: block; font: 600 1.125rem var(--f-display); color: #fff; letter-spacing: -.01em; }
.ix-care li p { margin: 6px 0 0; color: #C9D6F0; font-size: .9375rem; line-height: 1.6; }
/* ---------- packages ---------- */
.ix-pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: clamp(36px, 4vw, 50px) 0 0; padding: 0; list-style: none; }
.ix-pk { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 30px; background: linear-gradient(170deg, rgba(20, 44, 96, .45), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(169, 220, 255, .14); }
.ix-pk.is-rec { background: radial-gradient(100% 50% at 50% 0%, rgba(10, 141, 255, .32), transparent 70%), linear-gradient(170deg, rgba(20, 50, 110, .6), rgba(6, 14, 34, .7)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1.5px rgba(47, 212, 255, .6), 0 40px 80px -36px rgba(10, 141, 255, .9); }
.ix-pk-tag { position: absolute; top: -13px; left: 26px; padding: 5px 13px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #04130C; background: #3DF0A0; }
.ix-pk h3 { font-size: 1.625rem; letter-spacing: -.03em; }
.ix-pk-line { margin: 6px 0 0; color: #C9D6F0; font-size: 1rem; line-height: 1.5; min-height: 3em; }
.ix-pk-rows { display: grid; gap: 11px; margin: 20px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgba(169, 220, 255, .1); }
.ix-pk-rows li { display: flex; align-items: center; gap: 11px; font-size: .9375rem; line-height: 1.35; }
.ix-pk-rows li.is-in { color: #fff; } .ix-pk-rows li.is-out { color: #5F7299; }
.ix-y, .ix-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; }
.ix-y { background: #3DF0A0; } .ix-y svg { width: 14px; height: 14px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ix-n { box-shadow: inset 0 0 0 1.5px rgba(127, 147, 188, .35); } .ix-n::before { content: ""; width: 8px; height: 2px; border-radius: 2px; background: #5F7299; }
.ix-pk-choose { margin: 20px 0 0; padding: 14px 16px; border-radius: 16px; font-size: .9375rem; line-height: 1.55; color: #DDE8FA; background: rgba(47, 212, 255, .07); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .2); }
.ix-pk-foot { margin-top: auto; padding-top: 22px; }
.ix-pk-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ix-pk-price b { font: 700 2.375rem/1 var(--f-display); letter-spacing: -.04em; color: #fff; }
.ix-pk-price span { font-size: .875rem; color: #9DB4D8; }
.ix-pk-note { margin: 6px 0 16px; font-size: .8125rem; color: #3DF0A0; } .ix-pk-note s { color: #7F93BC; margin-right: 2px; }
.ix-pk-go { width: 100%; justify-content: center; }
.ix-more { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.ix-more > div { padding: 22px; border-radius: 26px; background: rgba(4, 10, 26, .5); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.ix-more > div > p:first-child { margin: 0 0 12px; } .ix-more b { font: 600 1.125rem var(--f-display); color: #fff; }
.ix-addons ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ix-addons a { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; padding: 12px 16px; border-radius: 16px; color: inherit; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); transition: box-shadow .25s; }
.ix-addons a:hover { box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .55); }
.ix-addons a b { font: 600 .9375rem var(--f-body); } .ix-addons a small { grid-column: 1; font-size: .8125rem; color: #9DB4D8; }
.ix-addons a > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 1rem var(--f-display); color: #2FD4FF; white-space: nowrap; } .ix-addons em { font: 500 .75rem var(--f-body); font-style: normal; color: #7F93BC; }
.ix-how ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ix-how li { display: flex; align-items: center; gap: 12px; color: #DDE8FA; font-size: .9375rem; }
.ix-how li span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: .875rem; color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); }
.ix-how-s { margin: 16px 0 0; font-size: .8125rem; color: #7F93BC; } .ix-how-s a { color: #6FC3FF; }
/* ---------- faq ---------- */
.ix-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.ix-faq-l { position: sticky; top: calc(var(--header-h) + 20px); }
.ix-faq-l h2 { margin-top: 12px; font-size: clamp(1.875rem, 3.2vw, 2.75rem); letter-spacing: -.04em; line-height: 1.06; }
.ix-faq-l > p:not(.kicker):not(.ix-read-k) { margin-top: 12px; color: #C9D6F0; line-height: 1.6; }
.ix-read-k { margin: 28px 0 10px; font-weight: 700; color: #9DB4D8; }
.ix-reads { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ix-reads a { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; color: inherit; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); transition: box-shadow .25s; }
.ix-reads a:hover { box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .5); }
.ix-reads img { flex: none; width: 84px; height: 56px; border-radius: 12px; object-fit: cover; }
.ix-reads small { display: block; font-size: .75rem; color: #7F93BC; } .ix-reads b { font-size: .9375rem; color: #fff; line-height: 1.35; }
.ix-q { border-bottom: 1px solid rgba(169, 220, 255, .12); }
.ix-q summary { position: relative; display: block; padding: 22px 44px 22px 0; cursor: pointer; list-style: none; font: 600 1.125rem/1.4 var(--f-display); letter-spacing: -.015em; color: #fff; }
.ix-q summary::-webkit-details-marker { display: none; }
.ix-q summary span { position: absolute; right: 0; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); border-radius: 50%; background: rgba(47, 212, 255, .12); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
.ix-q summary span::before, .ix-q summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: #2FD4FF; transform: translate(-50%, -50%); transition: transform .3s; }
.ix-q summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.ix-q[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.ix-q summary:focus-visible { outline: 2px solid #6FC3FF; outline-offset: 4px; border-radius: 6px; }
.ix-q p { margin: -6px 0 22px; padding-right: 44px; color: #C9D6F0; line-height: 1.65; }
.ix .one { padding-top: clamp(70px, 9vw, 120px); }
/* ---------- smaller screens ---------- */
@media (max-width: 1060px) {
  .ix-hero-in { grid-template-columns: 1fr; }
  .ix-stage { max-width: 620px; width: 100%; margin: 0 auto; }
  .ix-steps { grid-template-columns: 1fr; gap: 26px; }
  .ix-wave { display: none; }
  .ix-steps::before { content: ""; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(#2B5BFF, #22C3FF, #3DF0A0); box-shadow: 0 0 10px rgba(47, 212, 255, .5); }
  .ix-st { display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; align-items: start; text-align: left; padding-bottom: 0 !important; }
  .ix-orb, .ix-st.s1 .ix-orb, .ix-st.s3 .ix-orb { grid-row: span 3; margin-top: 0; }
  .ix-st h3 { margin-top: 6px; } .ix-st > p { max-width: none; } .ix-st-r { justify-self: start; }
  .ix-pk-grid { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
  .ix-pk-line { min-height: 0; }
  .ix-more { grid-template-columns: 1fr; max-width: 540px; margin-left: auto; margin-right: auto; }
  .ix-faq-in { grid-template-columns: 1fr; } .ix-faq-l { position: static; }
}
@media (max-width: 760px) {
  .ix-care-in { grid-template-columns: 1fr; } .ix-seal { width: 110px; height: 110px; } .ix-seal svg { width: 46px; height: 46px; }
  .ix-care ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ix-stage { height: 520px; }
  .ix-phone { width: 236px; height: 486px; border-radius: 40px; }
  .ix-scr { padding: 42px 12px 12px; border-radius: 32px; }
  .ix-map { height: 118px; }
  .ix-stage::before { width: 420px; height: 420px; } .ix-ring { width: 440px; height: 440px; }
  .ix-q summary { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
}
.ix h1 { font-size: clamp(2.25rem, 3.7vw, 3.25rem); }
.ix-st { position: relative; padding-top: 200px; padding-bottom: 0 !important; }
.ix-orb, .ix-st.s1 .ix-orb, .ix-st.s3 .ix-orb { position: absolute; left: 50%; top: 92px; margin: 0; transform: translateX(-50%); }
.ix-st.s1 .ix-orb, .ix-st.s3 .ix-orb { top: 12px; }
.ix-st h3 { margin-top: 0; }
@media (max-width: 1060px) {
  .ix-st { padding-top: 0; }
  .ix-orb, .ix-st.s1 .ix-orb, .ix-st.s3 .ix-orb { position: relative; left: auto; top: auto; transform: none; }
}

/* ---------- hero v3: patients pulled from every platform into the clinic ---------- */
.ix-stage { height: 600px; }
.ix-stage::before { width: 520px; height: 520px; }
.ix-ring { top: 50%; transform: translate(-50%, -50%) rotateX(0) !important; border-radius: 50%; }
.ix-ring.r1 { width: 92%; height: 88%; border: 1px solid rgba(111, 195, 255, .16); box-shadow: none; }
.ix-ring.r2 { width: 64%; height: 60%; border: 1px dashed rgba(111, 195, 255, .2); box-shadow: none; }
.ix-ring::after { display: none; }
.ix-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ix-beams .bm { stroke: rgba(111, 195, 255, .22); stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ix-beams .b-maps, .ix-beams .b-insta, .ix-beams .b-google, .ix-beams .b-fb { animation: ixBeam 1s ease-in forwards; }
.ix-beams .b-maps { animation-delay: 1.4s; } .ix-beams .b-insta { animation-delay: 2.6s; } .ix-beams .b-google { animation-delay: 3.8s; } .ix-beams .b-fb { animation-delay: 5s; }
@keyframes ixBeam { 0% { stroke: rgba(111, 195, 255, .22); stroke-dasharray: 3 5; } 40% { stroke: #7BE3FF; stroke-width: 2.4; stroke-dasharray: 3 5; filter: drop-shadow(0 0 4px #2FD4FF); } 100% { stroke: rgba(123, 227, 255, .5); stroke-width: 1.6; stroke-dasharray: 3 5; } }
.ix-orbit { position: absolute; z-index: 2; display: grid; place-items: center; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 22px; background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .22), 0 20px 40px -16px rgba(0, 0, 0, .8); opacity: 0; transform: scale(.6); animation: ixPop .6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.ix-orbit svg { width: 36px; height: 36px; }
.o-maps { left: 7%; top: 52%; animation-delay: .3s !important; } .o-insta { left: 84%; top: 12%; animation-delay: .45s !important; } .o-google { left: 16%; top: 14%; animation-delay: .6s !important; }
.o-fb { left: 90%; top: 56%; animation-delay: .75s !important; } .o-yt { left: 78%; top: 90%; animation-delay: .9s !important; } .o-ai { left: 14%; top: 88%; animation-delay: 1.05s !important; }
@keyframes ixPop { to { opacity: 1; transform: none; } }
.ix-phone { z-index: 3; width: 252px; height: 500px; transform: translate(-50%, -50%) rotateY(-10deg) rotateX(4deg); }
@keyframes ixFloat { 0%, 100% { transform: translate(-50%, -50%) rotateY(-10deg) rotateX(4deg); } 50% { transform: translate(-50%, -51.2%) rotateY(-8deg) rotateX(3deg); } }
.ix-scr { padding: 46px 12px 14px; display: flex; flex-direction: column; }
.ix-app { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid #DCE5F4; }
.ix-app > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); }
.ix-app > span svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ix-app p { flex: 1; margin: 0; } .ix-app b { display: block; font: 700 1rem var(--f-display); } .ix-app small { font-size: .6875rem; color: #5A6A8E; }
.ix-count { display: grid; font: 700 2rem/1 var(--f-display); color: #0FB872; }
.ix-count i { grid-area: 1 / 1; font-style: normal; background: #F6FAFF; opacity: 0; }
.ix-count i:first-child { opacity: 1; color: #9AABC8; }
.ix-count i:nth-child(2) { animation: ixFade .3s 2.1s forwards; } .ix-count i:nth-child(3) { animation: ixFade .3s 3.3s forwards; } .ix-count i:nth-child(4) { animation: ixFade .3s 4.5s forwards; } .ix-count i:nth-child(5) { animation: ixFade .3s 5.7s forwards; }
.ix-feed { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ix-feed li { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 9px 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -14px rgba(10, 40, 100, .5), inset 0 0 0 1px #E3EBF7; opacity: 0; transform: translateY(-10px) scale(.96); animation: ixUp .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.ix-feed li.a0 { animation-delay: 2s; } .ix-feed li.a1 { animation-delay: 3.2s; } .ix-feed li.a2 { animation-delay: 4.4s; } .ix-feed li.a3 { animation-delay: 5.6s; }
.ix-src { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #F1F5FC; }
.ix-src svg { width: 22px; height: 22px; }
.ix-feed p { margin: 0; line-height: 1.2; } .ix-feed b { font-size: .8125rem; } .ix-feed small { display: block; font-size: .6875rem; color: #5A6A8E; }
.ix-feed em { grid-column: 2; font-style: normal; font-size: .6875rem; font-weight: 700; color: #1E4FD8; }
.ix-calm { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding: 10px; border-radius: 12px; font-size: .75rem; font-weight: 700; color: #0F8A5A; background: #E2F8EE; opacity: 0; animation: ixFade .5s 6.4s forwards; }
.ix-calm svg { width: 14px; height: 14px; fill: none; stroke: #0F8A5A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ixFade { to { opacity: 1; } }
@keyframes ixUp { to { opacity: 1; transform: none; } }

/* ---------- forces: we are not Google ---------- */
.ix-forces, .ix-power { max-width: 1200px; margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--gutter) 0; }
.ix-fc-list { display: grid; gap: 14px; margin: clamp(36px, 4vw, 50px) 0 0; padding: 0; list-style: none; }
.ix-fc { --bc: #4285F4; display: grid; grid-template-columns: 230px minmax(0, 1fr) 70px minmax(0, 1.15fr); align-items: center; gap: 18px; padding: 16px 16px 16px 22px; border-radius: 28px; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(40% 140% at 0% 50%, color-mix(in srgb, var(--bc) 20%, transparent), transparent 70%), linear-gradient(170deg, rgba(16, 34, 74, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(169, 220, 255, .12); }
.ixfc-maps { --bc: #EA4335; } .ixfc-insta { --bc: #D6249F; } .ixfc-ai { --bc: #8B6CFF; }
.ix-fc-p { display: flex; align-items: center; gap: 14px; }
.ix-fc-logo { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--bc) 80%, transparent); }
.ix-fc-logo svg { width: 34px; height: 34px; }
.ix-fc-p h3 { font-size: 1.1875rem; letter-spacing: -.02em; line-height: 1.2; }
.ix-fc small { display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 700; }
.ix-fc-w small { color: #9DB4D8; } .ix-fc-w p { margin: 0; color: #DDE8FA; line-height: 1.55; }
.ix-fc-arrow { position: relative; height: 2px; background: linear-gradient(90deg, rgba(111, 195, 255, .2), #2FD4FF); }
.ix-fc-arrow i { position: absolute; right: -2px; top: -5px; width: 12px; height: 12px; border-top: 2px solid #2FD4FF; border-right: 2px solid #2FD4FF; transform: rotate(45deg); }
.ix-fc-d { padding: 16px 18px; border-radius: 20px; background: linear-gradient(150deg, rgba(16, 64, 70, .6), rgba(8, 22, 46, .75)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(61, 240, 160, .3); }
.ix-fc-d small { color: #3DF0A0; } .ix-fc-d p { margin: 0; color: #fff; line-height: 1.55; }

/* ---------- power: the Gravity Engine ---------- */
.ix-pw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: clamp(36px, 4vw, 50px) 0 0; padding: 0; list-style: none; }
.ix-pw { display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: 30px; background: linear-gradient(170deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(169, 220, 255, .14); }
.ix-pv { position: relative; height: 230px; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 90% at 50% 100%, rgba(10, 141, 255, .3), transparent 70%), #061230; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); }
.ix-pw h3 { display: flex; align-items: center; gap: 12px; margin: 22px 12px 0; font-size: 1.375rem; letter-spacing: -.025em; }
.ix-pw h3 span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: rgba(47, 212, 255, .14); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .35); }
.ix-pw h3 svg { width: 20px; height: 20px; fill: none; stroke: #2FD4FF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ix-pw > p { margin: 10px 12px 0; color: #C9D6F0; line-height: 1.6; font-size: .9375rem; }
/* video preview */
.ix-pv-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; }
.ix-pv-video img { width: 120px; height: 196px; object-fit: cover; object-position: 50% 4%; border-radius: 18px; background: linear-gradient(180deg, #13306E, #0A1838); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 20px 40px -16px rgba(0, 0, 0, .8); }
.ix-play { position: absolute; left: calc(50% - 64px); top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.ix-play::after { content: ""; position: absolute; left: 16px; top: 13px; border: 8px solid transparent; border-left: 13px solid #1E4FD8; border-right: 0; }
.ix-pv-video p { display: grid; gap: 8px; margin: 0; }
.ix-pv-video i { padding: 6px 12px; border-radius: 999px; font-style: normal; font-size: .8125rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25); }
.ix-pv-video i:first-child { background: linear-gradient(135deg, #2B5BFF, #0A8DFF); box-shadow: none; }
/* AI chat preview */
.ix-pv-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; }
.ix-pv-chat p { margin: 0; padding: 11px 14px; border-radius: 16px; font-size: .8125rem; line-height: 1.45; }
.ix-pv-chat .q { align-self: flex-end; max-width: 82%; color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); border-bottom-right-radius: 4px; }
.ix-pv-chat .a { align-self: flex-start; max-width: 90%; color: #DDE8FA; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); border-bottom-left-radius: 4px; }
.ix-pv-chat .a b { display: block; margin-bottom: 6px; color: #fff; font-weight: 600; }
.ix-pv-chat .you { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px; font-weight: 700; color: #04130C; background: #3DF0A0; }
/* engine preview */
.ix-pv-eng { position: absolute; inset: 18px; }
.ix-pv-eng svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ix-pv-eng path { fill: none; stroke: #2FD4FF; stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .6; }
.ix-pv-eng span { position: absolute; z-index: 1; padding: 7px 12px; border-radius: 12px; font-size: .8125rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25); transform: translate(-50%, -50%); white-space: nowrap; }
.ix-pv-eng .c { left: 50%; top: 50%; padding: 12px 16px; border-radius: 16px; font: 700 .9375rem var(--f-display); background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 0 0 6px rgba(47, 160, 255, .15), 0 14px 30px -10px rgba(10, 141, 255, .9); }
.ix-pv-eng .n1 { left: 15%; top: 16%; } .ix-pv-eng .n2 { left: 85%; top: 16%; } .ix-pv-eng .n3 { left: 15%; top: 84%; } .ix-pv-eng .n4 { left: 85%; top: 84%; }
/* comparison */
.ix-vs { margin-top: 22px; padding: clamp(24px, 3.4vw, 40px); border-radius: 32px; background: linear-gradient(170deg, rgba(14, 30, 66, .5), rgba(6, 14, 34, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(169, 220, 255, .12); }
.ix-vs-h { text-align: center; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.ix-vs-top, .ix-vs li { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ix-vs-top { margin-top: 24px; font: 600 1rem var(--f-display); }
.ix-vs-top span { padding: 0 18px 12px; } .ix-vs-top span:first-child { color: #7F93BC; }
.ix-vs-top span:last-child { display: flex; align-items: center; gap: 10px; color: #fff; } .ix-vs-top img { width: 30px; height: auto; }
.ix-vs ul { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.ix-vs ul::before { content: ""; position: absolute; left: calc(50% + 7px); right: 0; top: -54px; bottom: -6px; z-index: -1; border-radius: 22px; background: linear-gradient(170deg, rgba(10, 141, 255, .2), rgba(61, 240, 160, .08)); box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .45), 0 30px 60px -30px rgba(10, 141, 255, .8); }
.ix-vs { position: relative; isolation: isolate; }
.ix-vs li span { display: flex; align-items: center; gap: 12px; padding: 14px 18px; line-height: 1.45; }
.ix-vs li + li span { border-top: 1px solid rgba(169, 220, 255, .08); }
.ix-vs-a { color: #8193B6; font-size: .9375rem; }
.ix-vs-a svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #FF8BA3; stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.ix-vs-b { color: #fff; font-weight: 500; }
.ix-vs-b svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 6px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: #3DF0A0; }

@media (max-width: 1060px) {
  .ix-fc { grid-template-columns: 1fr 1fr; }
  .ix-fc-p { grid-column: 1 / -1; } .ix-fc-arrow { display: none; }
  .ix-pw-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 680px) {
  .ix-fc { grid-template-columns: 1fr; padding: 18px; }
  .ix-vs-top { display: none; }
  .ix-vs ul::before { display: none; }
  .ix-vs li { grid-template-columns: 1fr; gap: 0; padding: 12px 0; }
  .ix-vs li + li { border-top: 1px solid rgba(169, 220, 255, .1); } .ix-vs li + li span { border-top: 0; }
  .ix-vs li span { padding: 6px 4px; }
}
@media (max-width: 560px) {
  .ix-stage { height: 540px; }
  .ix-phone { width: 220px; height: 440px; }
  .ix-orbit { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 17px; } .ix-orbit svg { width: 28px; height: 28px; }
  .o-maps { left: 9%; } .o-fb { left: 91%; } .o-insta { left: 84%; top: 8%; } .o-google { left: 16%; top: 8%; } .o-yt { top: 93%; } .o-ai { top: 93%; }
}
@media (prefers-reduced-motion: reduce) {
  .ix-orbit, .ix-feed li, .ix-calm, .ix-count i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ix-phone { animation: none; } .ix-beams .bm { animation: none; }
}

/* =================== INDUSTRY PAGE v4: gravity hero, intro panel, split headings =================== */
.ixh { padding: var(--header-h) 0 0; }
.ixg { position: relative; height: clamp(560px, 74vh, 700px); max-width: 1360px; margin: 0 auto; overflow: hidden; }
.ixg-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.ixg-p { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; will-change: transform;
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(169, 220, 255, .25), 0 18px 36px -14px rgba(0, 0, 0, .8); }
.ixg-p svg { width: 34px; height: 34px; }
.ixg-bub { position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 5px 10px; border-radius: 999px; font: 700 .75rem var(--f-body); font-style: normal; white-space: nowrap; color: #04130C; background: #3DF0A0; box-shadow: 0 8px 18px -6px rgba(61, 240, 160, .7); opacity: 0; transform: translate(-50%, 6px); pointer-events: none; }
.ixg-p.is-emit .ixg-bub { animation: ixgBub 1.6s ease-out; }
.ixg-p.is-emit { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1.5px #3DF0A0, 0 0 30px rgba(61, 240, 160, .5); }
@keyframes ixgBub { 0% { opacity: 0; transform: translate(-50%, 6px); } 15%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.ixg-core { position: absolute; left: var(--x, 40%); top: var(--y, 50%); z-index: 3; display: grid; justify-items: center; gap: 8px; transform: translate(-50%, -50%); }
.ixg-core img { box-sizing: content-box; width: 64px; height: auto; padding: 30px 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(160, 225, 255, .5), rgba(10, 80, 200, .55) 45%, rgba(4, 16, 48, .95) 75%); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .4), 0 0 0 10px rgba(47, 160, 255, .08), 0 0 60px rgba(47, 160, 255, .6); }
.ixg-core b { padding: 4px 12px; border-radius: 999px; font: 700 .8125rem var(--f-display); color: #fff; background: rgba(4, 12, 34, .7); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .25); }
.ixg-core.is-pulse img { animation: ixgPulse .7s ease-out; }
@keyframes ixgPulse { 0% { box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .4), 0 0 0 10px rgba(47, 160, 255, .08), 0 0 60px rgba(47, 160, 255, .6); } 40% { box-shadow: inset 0 0 0 1px rgba(169, 255, 220, .8), 0 0 0 22px rgba(61, 240, 160, .14), 0 0 90px rgba(61, 240, 160, .8); } }
.ixg-card { position: absolute; right: 3%; top: 50%; z-index: 3; width: 300px; padding: 16px; border-radius: 26px; transform: translateY(-50%); color: #0A1430; background: linear-gradient(180deg, #F6FAFF, #E6EEFB); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .5), 0 0 60px -10px rgba(61, 240, 160, .35); }
.ixg-card-t { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #DCE5F4; }
.ixg-card-t > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); }
.ixg-card-t > span svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ixg-card-t p { flex: 1; margin: 0; } .ixg-card-t b { display: block; font: 700 1.0625rem var(--f-display); } .ixg-card-t small { font-size: .75rem; color: #5A6A8E; }
.ixg-n { font: 700 2.125rem/1 var(--f-display); color: #0FB872; }
.ixg-n.is-up { animation: ixgUp .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes ixgUp { 0% { transform: scale(1.5); } }
.ixg-list { display: grid; gap: 8px; min-height: 210px; margin: 12px 0 0; padding: 0; list-style: none; }
.ixg-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px; border-radius: 15px; background: #fff; box-shadow: 0 10px 22px -14px rgba(10, 40, 100, .5), inset 0 0 0 1px #E3EBF7; animation: ixgIn .5s cubic-bezier(.2, .8, .2, 1); }
.ixg-list li:first-child { box-shadow: 0 10px 22px -14px rgba(10, 40, 100, .5), inset 0 0 0 1.5px #3DF0A0; }
@keyframes ixgIn { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
.ixg-src { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #F1F5FC; }
.ixg-src svg { width: 22px; height: 22px; }
.ixg-list p { margin: 0; line-height: 1.2; } .ixg-list b { font-size: .875rem; } .ixg-list small { display: block; font-size: .75rem; color: #5A6A8E; }
.ixg-list em { grid-column: 2; font-style: normal; font-size: .75rem; font-weight: 700; color: #1E4FD8; }
/* intro: the heading lives on a glass panel that overlaps the bottom of the hero */
.ixi { position: relative; z-index: 4; max-width: 1240px; margin: -70px auto 0; padding: 0 var(--gutter); }
.ixi-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px clamp(30px, 4vw, 60px); align-items: end; padding: clamp(26px, 3.6vw, 48px); border-radius: 36px;
  background: radial-gradient(70% 120% at 0% 0%, rgba(10, 141, 255, .22), transparent 60%), linear-gradient(165deg, rgba(16, 36, 80, .82), rgba(6, 14, 34, .92)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(169, 220, 255, .18), 0 50px 100px -40px rgba(0, 0, 0, .9); }
.ixi-k { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-weight: 700; color: #6FC3FF; }
.ixi h1 { margin-top: 14px; }
.ixi .ix-lead { margin-top: 0; }
.ixi .ix-who { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 22px; border-top: 1px solid rgba(169, 220, 255, .1); }
/* split section heading: big statement on the left, the explanation on the right */
.ixs-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(30px, 5vw, 70px); align-items: end; }
.ixs-head h2 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.05em; }
.ixs-a { display: block; color: #fff; }
.ixs-b { display: block; background: linear-gradient(100deg, #5B8DFF, #22C3FF 55%, #3DF0A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ixs-r { padding-left: 24px; border-left: 2px solid; border-image: linear-gradient(#2FD4FF, rgba(47, 212, 255, 0)) 1; }
.ixs-r p { margin: 0; color: #C9D6F0; font-size: 1.0625rem; line-height: 1.7; }
.ixs-logos { display: flex; gap: 8px; margin-top: 18px; }
.ixs-logos svg { width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7); }
/* arrows: signals travelling from what the platform wants to what we do */
.ix-fc-arrow { overflow: visible; }
.ix-fc-arrow b { position: absolute; top: -3px; left: 0; width: 26px; height: 8px; border-radius: 8px; background: radial-gradient(closest-side, #fff, rgba(123, 227, 255, .8) 40%, transparent); filter: drop-shadow(0 0 6px #2FD4FF); opacity: 0; animation: ixRun 2.2s linear infinite; }
.ix-fc-arrow b + b { animation-delay: 1.1s; }
.ix-fc:nth-child(2) .ix-fc-arrow b { animation-delay: .4s; } .ix-fc:nth-child(2) .ix-fc-arrow b + b { animation-delay: 1.5s; }
.ix-fc:nth-child(3) .ix-fc-arrow b { animation-delay: .8s; } .ix-fc:nth-child(3) .ix-fc-arrow b + b { animation-delay: 1.9s; }
.ix-fc:nth-child(4) .ix-fc-arrow b { animation-delay: .2s; } .ix-fc:nth-child(4) .ix-fc-arrow b + b { animation-delay: 1.3s; }
@keyframes ixRun { 0% { left: -6px; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 20px); opacity: 0; } }
@media (max-width: 1000px) {
  .ixi-in, .ixs-head { grid-template-columns: 1fr; }
  .ixi { margin-top: -40px; }
}
@media (max-width: 760px) {
  .ixg { height: 760px; }
  .ixg-card { right: auto; left: 50%; top: auto; bottom: 20px; width: min(340px, calc(100% - 32px)); transform: translateX(-50%); }
  .ixg-list { min-height: 0; } .ixg-list li:nth-child(3) { display: none; }
  .ixg-p { width: 48px; height: 48px; border-radius: 16px; } .ixg-p svg { width: 26px; height: 26px; }
  .ixg-core img { width: 46px; padding: 22px 18px; }
  .ixi-in { border-radius: 28px; }
  .ixs-r { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ix-fc-arrow b { display: none; } }
.ixg { height: clamp(540px, 70vh, 640px); }
@media (max-width: 760px) { .ixg { height: 740px; } .ixg-card { bottom: 70px; } .ixi { margin-top: -50px; } }
.ixs-head h2 { font-size: clamp(2.125rem, 3.8vw, 3.375rem); }
.ixg-core img { background: radial-gradient(circle at 35% 30%, #7FC8FF, #1A5FD0 38%, #0A2A78 62%, #040E2C 100%); }

/* hero sphere: darker so the logo stands out */
.ixg-core img { background: radial-gradient(circle at 35% 28%, #1F4F9E, #0B2459 40%, #050F2C 70%, #02071A 100%); box-shadow: inset 0 0 0 1.5px rgba(111, 195, 255, .45), inset 0 -10px 24px rgba(0, 0, 0, .5), 0 0 0 10px rgba(47, 160, 255, .08), 0 0 60px rgba(47, 160, 255, .55); }

/* ---------- power: emblem heading + bento cards ---------- */
.ixp-head { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); max-width: 980px; }
.ixp-emb { position: relative; flex: none; display: grid; place-items: center; width: 150px; height: 150px; }
.ixp-emb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(111, 195, 255, .3); }
.ixp-emb i:nth-child(2) { inset: 18px; border-color: rgba(47, 212, 255, .45); border-style: dashed; animation: ixpSpin 40s linear infinite; }
.ixp-emb i:nth-child(3) { inset: 36px; background: radial-gradient(circle at 35% 28%, #1F4F9E, #0B2459 45%, #030B22); border: 0; box-shadow: inset 0 0 0 1.5px rgba(111, 195, 255, .5), 0 0 40px rgba(47, 160, 255, .55); }
.ixp-emb img { position: relative; width: 44px; height: auto; }
@keyframes ixpSpin { to { transform: rotate(360deg); } }
.ixp-ht h2 { margin: 0; font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1; letter-spacing: -.05em; background: linear-gradient(100deg, #fff 30%, #7BE3FF 70%, #3DF0A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ixp-ht h2 small { display: block; margin-bottom: 8px; font: 600 1.125rem var(--f-body); letter-spacing: 0; color: #6FC3FF; -webkit-text-fill-color: #6FC3FF; }
.ixp-ht p { margin: 16px 0 0; max-width: 620px; color: #C9D6F0; font-size: 1.0625rem; line-height: 1.7; }
.ixp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px; margin-top: clamp(36px, 4vw, 52px); }
.ixp-c { display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; background: linear-gradient(170deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .65)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(169, 220, 255, .14); }
.ixp-c.is-big { grid-row: span 2; }
.ixp-v { position: relative; flex: 1; min-height: 220px; display: flex; flex-direction: column; justify-content: center; padding: 26px; background: radial-gradient(90% 80% at 50% 100%, rgba(10, 141, 255, .22), transparent 70%); }
.ixp-t { padding: 0 28px 28px; }
.ixp-t h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.03em; }
.ixp-t p { margin: 10px 0 0; color: #C9D6F0; line-height: 1.65; }
/* same video in three languages */
.ixp-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ixp-reels li { display: grid; justify-items: center; gap: 10px; }
.ixp-reels li:nth-child(2) { transform: translateY(-14px); }
.ixp-reel { position: relative; width: 100%; max-width: 150px; aspect-ratio: 9 / 15; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 60% at 50% 30%, #2B6BFF, #0B2459 60%, #04102F); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18), 0 24px 50px -20px rgba(0, 0, 0, .9); }
.ixp-tooth { position: absolute; left: 50%; top: 30%; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ixp-tooth svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ixp-play { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.ixp-play::after { content: ""; position: absolute; left: 10px; top: 7px; border: 6px solid transparent; border-left: 9px solid #1E4FD8; border-right: 0; }
.ixp-reel p { position: absolute; left: 8px; right: 8px; bottom: 22px; margin: 0; padding: 7px 8px; border-radius: 10px; font-size: .75rem; font-weight: 700; line-height: 1.3; text-align: center; color: #0A1430; background: rgba(255, 255, 255, .92); }
.ixp-reel i { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3DF0A0 45%, rgba(255, 255, 255, .25) 45%); }
.ixp-reels small { padding: 4px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #fff; background: rgba(47, 212, 255, .14); box-shadow: inset 0 0 0 1px rgba(47, 212, 255, .4); }
.ixp-cap { margin: 22px 0 0; text-align: center; font-weight: 600; color: #DDE8FA; }
/* AI assistant chat */
.ixp-chat { display: grid; gap: 10px; }
.ixp-who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; font-weight: 700; color: #B9C8E4; }
.ixp-who span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .95); } .ixp-who svg { width: 18px; height: 18px; }
.ixp-chat .q, .ixp-chat .a { margin: 0; padding: 12px 15px; border-radius: 18px; font-size: .9375rem; line-height: 1.5; }
.ixp-chat .q { justify-self: end; max-width: 85%; color: #fff; background: linear-gradient(135deg, #2B5BFF, #0A8DFF); border-bottom-right-radius: 5px; }
.ixp-chat .a { max-width: 92%; color: #DDE8FA; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); border-bottom-left-radius: 5px; }
.ixp-chat .you { padding: 1px 9px; border-radius: 999px; color: #04130C; background: #3DF0A0; }
/* engine diagram */
.ixp-eng { position: relative; height: 180px; }
.ixp-eng svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ixp-eng path { fill: none; stroke: #2FD4FF; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: .7; animation: ixpDash 3s linear infinite; }
@keyframes ixpDash { to { stroke-dashoffset: -44; } }
.ixp-eng span { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 13px; font-size: .8125rem; font-weight: 600; color: #fff; white-space: nowrap; background: rgba(10, 24, 56, .9); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .28); transform: translate(-50%, -50%); }
.ixp-eng span svg { width: 18px; height: 18px; fill: none; stroke: #8FD3FF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ixp-eng .n1 { left: 13%; top: 19%; } .ixp-eng .n2 { left: 87%; top: 19%; } .ixp-eng .n3 { left: 13%; top: 81%; } .ixp-eng .n4 { left: 87%; top: 81%; }
.ixp-eng .c { left: 50%; top: 50%; padding: 11px 16px 11px 12px; border-radius: 16px; font: 700 .9375rem var(--f-display); background: linear-gradient(135deg, #2B5BFF, #0A8DFF 60%, #22C3FF); box-shadow: 0 0 0 7px rgba(47, 160, 255, .14), 0 14px 30px -10px rgba(10, 141, 255, .9); }
.ixp-eng .c svg { stroke: #fff; }

/* ---------- versus: point by point ---------- */
.ixv { max-width: 1200px; margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--gutter) 0; }
.ixv-h { margin: 0; text-align: center; font-size: clamp(1.875rem, 3.4vw, 3rem); letter-spacing: -.045em; line-height: 1.1; }
.ixv-h span { display: inline-flex; align-items: center; gap: 12px; padding: 4px 18px 4px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(43, 91, 255, .35), rgba(34, 195, 255, .2)); box-shadow: inset 0 0 0 1.5px rgba(47, 212, 255, .5), 0 0 40px -10px rgba(47, 160, 255, .8); }
.ixv-h img { width: .95em; height: auto; }
.ixv-top, .ixv-list li { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1.15fr); align-items: stretch; }
.ixv-top { margin: clamp(36px, 4vw, 52px) 0 12px; align-items: center; font: 600 1rem var(--f-display); }
.ixv-to { padding-left: 22px; color: #7F93BC; }
.ixv-tn { padding-left: 22px; color: #fff; }
.ixv-vs { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 .9375rem var(--f-display); color: #fff; background: linear-gradient(135deg, #2B5BFF, #22C3FF); box-shadow: 0 0 0 6px rgba(47, 160, 255, .14), 0 0 30px rgba(47, 160, 255, .6); }
.ixv-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ixv-o, .ixv-n { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 20px; line-height: 1.45; }
.ixv-o { color: #8394B6; font-size: .9375rem; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px rgba(127, 147, 188, .14); filter: saturate(.2); }
.ixv-o svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #FF8BA3; stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
.ixv-n { color: #fff; font-weight: 500; background: linear-gradient(110deg, rgba(10, 141, 255, .2), rgba(61, 240, 160, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(47, 212, 255, .35); }
.ixv-n svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 8px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: #3DF0A0; box-shadow: 0 0 14px rgba(61, 240, 160, .5); }
.ixv-m { position: relative; }
.ixv-m::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(127, 147, 188, .25), #2FD4FF); }
.ixv-m::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-top: 2px solid #2FD4FF; border-right: 2px solid #2FD4FF; transform: rotate(45deg); }
.ixv-list li:hover .ixv-n { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1.5px #3DF0A0, 0 20px 40px -24px rgba(61, 240, 160, .6); }
@media (max-width: 900px) {
  .ixp-grid { grid-template-columns: 1fr; } .ixp-c.is-big { grid-row: auto; }
  .ixp-head { flex-direction: column; align-items: flex-start; }
  .ixp-emb { width: 110px; height: 110px; } .ixp-emb i:nth-child(2) { inset: 13px; } .ixp-emb i:nth-child(3) { inset: 26px; } .ixp-emb img { width: 34px; }
}
@media (max-width: 680px) {
  .ixv-top { display: none; }
  .ixv-list { gap: 14px; }
  .ixv-list li { grid-template-columns: 1fr; gap: 0; }
  .ixv-o { border-radius: 18px 18px 0 0; padding: 12px 16px; font-size: .875rem; }
  .ixv-n { border-radius: 0 0 18px 18px; padding: 14px 16px; }
  .ixv-m { display: none; }
  .ixp-reel p { font-size: .625rem; padding: 5px; }
  .ixp-v { padding: 18px; }
  .ixp-t { padding: 0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) { .ixp-emb i, .ixp-eng path { animation: none; } }
.ixp-eng svg { position: static; width: 18px; height: 18px; }
.ixp-eng > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ixp-v { background: none; }
.ixp-c { background: radial-gradient(80% 50% at 50% 35%, rgba(10, 141, 255, .2), transparent 70%), linear-gradient(170deg, rgba(20, 44, 96, .5), rgba(6, 14, 34, .65)); }
.ixp-reel { max-width: 172px; } .ixp-c.is-big .ixp-v { padding-top: 40px; }
@media (max-width: 760px) { .ixg-core b { display: none; } .ixp-eng .n1, .ixp-eng .n3 { left: 24%; } .ixp-eng .n2, .ixp-eng .n4 { left: 76%; } }

/* ---------- versus: no borders, a soft blue glow that rolls down the list, thin waves behind ---------- */
.ixv { position: relative; isolation: isolate; }
.ixv-waves { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100vw; height: 70%; transform: translate(-50%, -40%); overflow: hidden; pointer-events: none; opacity: .8; }
.ixv-waves g { animation: ixvDrift 22s linear infinite; }
.ixv-waves path { fill: none; stroke: rgba(47, 160, 255, .35); stroke-width: 1.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(47, 160, 255, .6)); }
.ixv-waves path:nth-child(2) { stroke: rgba(34, 195, 255, .22); } .ixv-waves path:nth-child(3) { stroke: rgba(91, 141, 255, .18); }
@keyframes ixvDrift { to { transform: translateX(-1440px); } }
.ixv-h span { box-shadow: 0 0 40px -6px rgba(47, 160, 255, .7); }
.ixv-o { box-shadow: none; background: rgba(255, 255, 255, .03); }
.ixv-n { box-shadow: 0 14px 40px -14px rgba(47, 160, 255, .55); background: linear-gradient(110deg, rgba(10, 141, 255, .24), rgba(61, 240, 160, .08)); animation: ixvGlow 6s ease-in-out infinite; }
.ixv-list li:nth-child(2) .ixv-n { animation-delay: .5s; } .ixv-list li:nth-child(3) .ixv-n { animation-delay: 1s; } .ixv-list li:nth-child(4) .ixv-n { animation-delay: 1.5s; } .ixv-list li:nth-child(5) .ixv-n { animation-delay: 2s; } .ixv-list li:nth-child(6) .ixv-n { animation-delay: 2.5s; }
@keyframes ixvGlow { 0%, 100% { box-shadow: -18px 14px 40px -16px rgba(47, 160, 255, .45); } 50% { box-shadow: 18px 18px 50px -12px rgba(34, 195, 255, .75); } }
.ixv-list li:hover .ixv-n { box-shadow: 0 18px 50px -12px rgba(61, 240, 160, .7); }

/* ---------- patient journey: new heading, a lit wire, light travelling to the end ---------- */
.ixj-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px clamp(30px, 5vw, 70px); align-items: end; }
.ixj-head h2 { margin: 0; font-size: clamp(2.125rem, 4vw, 3.5rem); line-height: 1.04; letter-spacing: -.05em; }
.ixj-head h2 span { display: block; }
.ixj-b { background: linear-gradient(100deg, #5B8DFF, #22C3FF 50%, #3DF0A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ixj-head p { margin: 0; padding-bottom: 6px; color: #C9D6F0; font-size: 1.0625rem; line-height: 1.7; }
.ix-wave path { fill: none; stroke-linecap: round; filter: none; }
.ix-wave .w0 { stroke: rgba(47, 160, 255, .25); stroke-width: 14; filter: blur(6px); }
.ix-wave .w1 { stroke: url(#ixW); stroke-width: 3; opacity: .65; }
.ix-wave .w2 { stroke: #fff; stroke-width: 5; stroke-dasharray: 70 1000; stroke-dashoffset: 70; filter: drop-shadow(0 0 6px #7BE3FF) drop-shadow(0 0 14px #2FD4FF); animation: ixjLight 5.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes ixjLight { 0% { stroke-dashoffset: 70; opacity: 0; } 5% { opacity: 1; } 72% { stroke-dashoffset: -930; opacity: 1; } 80%, 100% { stroke-dashoffset: -1000; opacity: 0; } }
.ix-orb { transition: none; animation: ixjOrb 5.5s ease-in-out infinite; }
.ix-st.s1 .ix-orb { animation-delay: .95s; } .ix-st.s2 .ix-orb { animation-delay: 1.95s; } .ix-st.s3 .ix-orb { animation-delay: 2.9s; } .ix-st.s4 .ix-orb { animation-delay: 3.9s; }
@keyframes ixjOrb { 0%, 16%, 100% { filter: none; } 6% { filter: brightness(1.35) drop-shadow(0 0 22px rgba(123, 227, 255, .9)); } }
.ix-st.s4 .ix-orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(61, 240, 160, .6); opacity: 0; animation: ixjEnd 5.5s 3.9s ease-out infinite; }
@keyframes ixjEnd { 0% { opacity: .9; transform: scale(.85); } 20% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
.ix-st h3 { margin-top: 2px; }
@media (max-width: 1060px) { .ixj-head { grid-template-columns: 1fr; } .ix-orb { animation: none; } }

/* ---------- trust: richer panel, same healing green ---------- */
.ix-care-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 56px); align-items: center; padding: clamp(30px, 4.4vw, 60px);
  background: radial-gradient(50% 70% at 12% 20%, rgba(61, 240, 160, .2), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(10, 141, 255, .2), transparent 60%), linear-gradient(160deg, #0B2236, #071226);
  box-shadow: 0 50px 100px -50px rgba(61, 240, 160, .35); }
.ix-care-in::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(61, 240, 160, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 240, 160, .12) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask: radial-gradient(60% 70% at 15% 30%, #000, transparent 70%); mask: radial-gradient(60% 70% at 15% 30%, #000, transparent 70%); }
.ix-seal { width: 132px; height: 132px; margin-bottom: 26px; box-shadow: none; background: none; }
.ix-seal i { position: absolute; border-radius: 50%; }
.ix-seal i:nth-child(1) { inset: 0; border: 1px solid rgba(61, 240, 160, .3); }
.ix-seal i:nth-child(2) { inset: 12px; border: 1px dashed rgba(61, 240, 160, .55); animation: ixpSpin 50s linear infinite; }
.ix-seal i:nth-child(3) { inset: 26px; background: radial-gradient(circle at 35% 30%, #1E8C66, #0B4A3A 50%, #062A22); box-shadow: inset 0 0 0 1.5px rgba(61, 240, 160, .6), 0 0 50px rgba(61, 240, 160, .45); }
.ix-seal::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 2px solid rgba(61, 240, 160, .6); animation: ixcPulse 3.2s ease-out infinite; }
@keyframes ixcPulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.ix-seal svg { position: relative; width: 44px; height: 44px; stroke: #B6FFE0; }
.ix-care-l h2 { font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
.ix-care-l > p { margin: 14px 0 0; color: #C9D6F0; font-size: 1.0625rem; line-height: 1.7; }
.ix-care-list { grid-column: auto !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 !important; }
.ix-care-list li { position: relative; align-items: flex-start; padding: 20px 22px 20px 24px; border-radius: 22px; background: linear-gradient(100deg, rgba(61, 240, 160, .09), rgba(255, 255, 255, .02)); box-shadow: inset 3px 0 0 #3DF0A0, 0 18px 40px -26px rgba(0, 0, 0, .8); transition: transform .3s, background .3s; }
.ix-care-list li:hover { transform: translateX(6px); background: linear-gradient(100deg, rgba(61, 240, 160, .15), rgba(255, 255, 255, .03)); }
@media (max-width: 860px) { .ix-care-in { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ixv-waves g, .ixv-n, .ix-wave .w2, .ix-orb, .ix-seal i, .ix-seal::after, .ix-st.s4 .ix-orb::after { animation: none; } .ix-wave .w2 { opacity: 0; } }
.ix-care-l h2 .grad { background: linear-gradient(100deg, #7CF5C4, #3DF0A0 50%, #22C3FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .ix-care-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* hero sphere: the sphere is its own element so the logo is never clipped */
.ixg-core img { box-sizing: border-box; width: 62px; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; animation: none !important; }
.ixg-orb { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #1F4F9E, #0B2459 40%, #050F2C 70%, #02071A 100%); box-shadow: inset 0 0 0 1.5px rgba(111, 195, 255, .45), inset 0 -10px 24px rgba(0, 0, 0, .5), 0 0 0 10px rgba(47, 160, 255, .08), 0 0 60px rgba(47, 160, 255, .55); }
.ixg-core.is-pulse .ixg-orb { animation: ixgPulse .7s ease-out; }
@media (max-width: 760px) { .ixg-orb { width: 92px; height: 92px; } .ixg-core img { width: 46px; } }

/* versus: no edges anywhere, just light that fades out */
.ixv-h span { position: relative; padding: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate; }
.ixv-h span::before { content: ""; position: absolute; left: -20%; right: -20%; top: -60%; bottom: -60%; z-index: -1; background: radial-gradient(closest-side, rgba(47, 160, 255, .35), transparent); filter: blur(24px); }
.ixv-h span { background: linear-gradient(100deg, #fff, #7BE3FF 60%, #3DF0A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ixv-n { box-shadow: none !important; animation: none; position: relative; isolation: isolate; background: linear-gradient(90deg, rgba(10, 141, 255, .22), rgba(10, 141, 255, .08) 55%, transparent); border-radius: 20px 0 0 20px; }
.ixv-n::before { content: ""; position: absolute; inset: -10px 0 -10px -20px; z-index: -1; background: radial-gradient(60% 100% at 0% 50%, rgba(47, 212, 255, .28), transparent 70%); filter: blur(10px); opacity: .5; animation: ixvWave 6s ease-in-out infinite; }
.ixv-list li:nth-child(2) .ixv-n::before { animation-delay: .5s; } .ixv-list li:nth-child(3) .ixv-n::before { animation-delay: 1s; } .ixv-list li:nth-child(4) .ixv-n::before { animation-delay: 1.5s; } .ixv-list li:nth-child(5) .ixv-n::before { animation-delay: 2s; } .ixv-list li:nth-child(6) .ixv-n::before { animation-delay: 2.5s; }
@keyframes ixvWave { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(30px); } }
.ixv-o { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035)); border-radius: 0 20px 20px 0; }
.ixv-list li:hover .ixv-n { box-shadow: none !important; }
.ixv-list li:hover .ixv-n::before { opacity: 1; }
@media (max-width: 680px) { .ixv-n, .ixv-o { border-radius: 14px; } }

/* packages heading: outlined first line, filled second, a friendly note */
.ixk-head { text-align: center; }
.ixk-head h2 { margin: 0; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -.05em; }
.ixk-a { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(169, 220, 255, .75); }
.ixk-b { display: block; background: linear-gradient(100deg, #5B8DFF, #22C3FF 50%, #3DF0A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ixk-note { display: inline-flex; align-items: center; gap: 12px; max-width: 760px; margin: 26px auto 0; padding: 12px 20px 12px 12px; border-radius: 999px; text-align: left; color: #C9D6F0; line-height: 1.5; background: rgba(61, 240, 160, .07); }
.ixk-note b { flex: none; padding: 6px 12px; border-radius: 999px; font-size: .875rem; color: #04130C; background: #3DF0A0; }
@media (max-width: 680px) { .ixk-note { border-radius: 20px; flex-direction: column; align-items: flex-start; padding: 14px 16px; } }
.ixv-n, .ixv-o { background: none; position: relative; isolation: isolate; }
.ixv-n::after, .ixv-o::after { content: ""; position: absolute; inset: 4px 0; z-index: -2; border-radius: 30px; filter: blur(14px); }
.ixv-n::after { background: linear-gradient(90deg, rgba(10, 141, 255, .3), rgba(10, 141, 255, .1) 60%, transparent 95%); }
.ixv-o::after { background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .045)); }

/* ---------- packages: selected state ---------- */
.ix-pk { cursor: pointer; transition: box-shadow .3s, transform .3s; }
.ix-pk-sel { position: absolute; top: 18px; right: 18px; display: none; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #04130C; background: #3DF0A0; }
.ix-pk-sel svg { width: 14px; height: 14px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ix-pk.is-sel .ix-pk-sel { display: inline-flex; }
.ix-pk.is-sel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 2px #3DF0A0, 0 40px 80px -36px rgba(61, 240, 160, .6); }
.ix-pk.is-rec:not(.is-sel) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(47, 212, 255, .35); }
.ix-addons > p small { display: block; margin-top: 2px; font-size: .8125rem; color: #9DB4D8; }
.ix-add { cursor: pointer; }

/* ---------- add-on dialog ---------- */
.ixa { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 28px; color: #fff; background: linear-gradient(165deg, #10264F, #071226); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(111, 195, 255, .25), 0 60px 120px -30px rgba(0, 0, 0, .9); }
.ixa::backdrop { background: rgba(2, 6, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ixa[open] { animation: ixaIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes ixaIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ixa-in { position: relative; display: grid; gap: 14px; padding: clamp(22px, 4vw, 32px); }
.ixa-x { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .08); }
.ixa-x svg { width: 18px; height: 18px; fill: none; stroke: #C9D6F0; stroke-width: 2; stroke-linecap: round; }
.ixa-k { margin: 0; font-size: .875rem; font-weight: 700; color: #3DF0A0; }
.ixa h3 { margin: 0; padding-right: 30px; font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.25; letter-spacing: -.03em; }
.ixa h3 b { color: #7BE3FF; }
.ixa-f { display: grid; gap: 6px; } .ixa-f span, .ixa-l { margin: 0; font-size: .8125rem; font-weight: 700; color: #9DB4D8; }
.ixa-f select { height: 48px; padding: 0 40px 0 14px; border: 0; border-radius: 14px; appearance: none; cursor: pointer; font: 600 1rem var(--f-body); color: #0A1430; background: #EEF4FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231E4FD8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.ixa-ex { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ixa-ex label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, .05); transition: background .2s; }
.ixa-ex input { position: absolute; opacity: 0; pointer-events: none; }
.ixa-cb { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(169, 220, 255, .4); }
.ixa-cb svg { width: 14px; height: 14px; fill: none; stroke: #04130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ixa-ex input:checked ~ .ixa-cb { background: #3DF0A0; box-shadow: none; } .ixa-ex input:checked ~ .ixa-cb svg { opacity: 1; }
.ixa-ex input:checked ~ * { color: #fff; }
.ixa-ex label:has(input:checked) { background: rgba(61, 240, 160, .1); }
.ixa-ex input:focus-visible ~ .ixa-cb { outline: 2px solid #6FC3FF; outline-offset: 2px; }
.ixa-n { flex: 1; font-weight: 600; color: #DDE8FA; } .ixa-n small { display: block; font-weight: 500; font-size: .75rem; color: #9DB4D8; }
.ixa-ex b { font-family: var(--f-display); color: #7BE3FF; }
.ixa-sum { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 18px; border-radius: 18px; background: linear-gradient(110deg, rgba(10, 141, 255, .22), rgba(61, 240, 160, .1)); }
.ixa-sum span { font-weight: 700; color: #C9D6F0; } .ixa-sum b { font: 700 1.875rem var(--f-display); letter-spacing: -.03em; }
.ixa-note { margin: -4px 0 0; font-size: .8125rem; color: #9DB4D8; line-height: 1.5; }
.ixa-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.ixa-btns .btn { gap: 8px; } .ixa-btns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ixa-btns .is-off { opacity: .45; pointer-events: none; }
@media (max-width: 520px) { .ixa-btns { flex-direction: column-reverse; } .ixa-btns .btn { justify-content: center; } }

/* ---------- questions: same simple list, a little more polish ---------- */
.ix-faq-r { display: grid; gap: 10px; }
.ix-q { border: 0; border-radius: 20px; background: rgba(255, 255, 255, .03); transition: background .3s, box-shadow .3s; }
.ix-q summary { padding: 20px 64px 20px 22px; }
.ix-q summary span { right: 18px; }
.ix-q:hover { background: rgba(255, 255, 255, .05); }
.ix-q[open] { background: linear-gradient(110deg, rgba(10, 141, 255, .14), rgba(61, 240, 160, .05)); box-shadow: inset 3px 0 0 #2FD4FF; }
.ix-q[open] summary { color: #7BE3FF; }
.ix-q[open] summary span { background: #2FD4FF; } .ix-q[open] summary span::before { background: #04130C; }
.ix-q p { margin: -6px 0 0; padding: 0 64px 22px 22px; }

/* ---------- one-line form: light fields so they are easy to see ---------- */
.one-form { background: rgba(255, 255, 255, .06); }
.one-f input { color: #0A1430; background: #EEF4FF; box-shadow: none; }
.one-f input::placeholder { color: #5A6A8E; }
.one-f input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(47, 212, 255, .55); }
.one-f [aria-invalid="true"] { box-shadow: 0 0 0 2px #FF6B8A; }

/* breadcrumb at the top of industry pages */
.ixh-crumbs { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; padding: clamp(14px, 2vw, 22px) var(--gutter) 0; }
.ixh-crumbs .ins-crumbs ol { justify-content: flex-start; }
/* trust panel on small screens: shield on top, promises stacked underneath */
@media (max-width: 860px) {
  .ix-care-in { grid-template-columns: 1fr; padding: 28px 20px; }
  .ix-care-list li { padding: 18px; }
  .ix-seal { width: 110px; height: 110px; margin-bottom: 18px; }
}
.ixg-list { align-content: start; } .ixg-core b { order: -1; }


/* ==========================================================
   MEGA MENU v2: six clear panels, one look
   ========================================================== */
@media (min-width: 1081px) {
  .nav-list { gap: 2px; }
  .nav-link { padding: 0 13px; }
  .panel {
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(10, 141, 255, .13), transparent 55%),
      radial-gradient(90% 70% at 100% 100%, rgba(43, 91, 255, .12), transparent 60%),
      linear-gradient(180deg, #0A1634, #040A1A);
    border: 1px solid rgba(169, 220, 255, .14);
    box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(169, 220, 255, .12);
  }
  .panel::before { /* a thin line of light along the top edge */
    content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(110, 190, 255, .8), transparent);
  }
  .panel-inner { padding: 30px 32px; gap: 32px; }

  /* the robot pictures: upper body on a soft stage of light */
  .preview-media, .about-media, .mm-side-media {
    background-color: #0B1E48;
    position: relative; overflow: hidden; border: 1px solid rgba(169, 220, 255, .12);
    background-repeat: no-repeat;
  }
  .site-nav.media-ready .preview-media[data-media],
  .site-nav.media-ready .about-media[data-media],
  .site-nav.media-ready .mm-side-media[data-media] {
    background-size: auto 168%, cover;
    background-position: 50% 4%, center;
  }
  .preview-media, .about-media, .mm-side-media { isolation: isolate; }
  .preview-media { aspect-ratio: 16 / 12; }
  .preview { padding: 18px; margin: -18px; border-radius: 20px; background: rgba(169, 220, 255, .035); }

  /* Services */
  .svc-head a { font-size: 1.125rem; }
  .svc-head a::after { content: " \2192"; color: var(--ice); opacity: 0; transition: opacity .2s; }
  .svc-head a:hover::after { opacity: 1; }
  .svc-link { position: relative; }
  .svc-link.is-active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #6EC0FF, #2B5BFF); }

  /* Industries */
  .panel-industries .panel-inner { grid-template-columns: minmax(0, 1fr) 280px; }
  .mm-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); margin-bottom: 14px; }
  .mm-ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .mm-ind { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; transition: background-color .2s, transform .2s; }
  .mm-ind:hover { background: rgba(10, 141, 255, .14); transform: translateX(3px); }
  .mm-ic {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(10, 141, 255, .28), rgba(43, 91, 255, .1));
    box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18);
  }
  .mm-ic svg { width: 22px; height: 22px; fill: none; stroke: #CFE9FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mm-ind:hover .mm-ic { background: linear-gradient(145deg, #0A8DFF, #2B5BFF); }
  .mm-ind:hover .mm-ic svg { stroke: #fff; }
  .mm-ind strong { display: block; font-weight: 500; font-size: .9688rem; }
  .mm-ind small { display: block; font-size: .8125rem; color: var(--muted); }
  .mm-side { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); transition: background-color .2s; }
  .mm-side:hover { background: rgba(10, 141, 255, .1); }
  .mm-side-media { display: block; aspect-ratio: 16 / 11; border-radius: 14px; margin-bottom: 10px; }
  .mm-side strong { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
  .mm-side > span:not(.mm-side-media):not(.mm-go) { font-size: .875rem; color: var(--muted); line-height: 1.5; }
  .mm-go { margin-top: auto; padding-top: 8px; color: var(--ice); font-weight: 500; font-size: .9063rem; display: inline-flex; align-items: center; gap: 6px; }
  .mm-go svg, .text-link svg, .preview-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* Pricing */
  .panel-pricing .panel-inner { grid-template-columns: minmax(0, 1fr) 290px; }
  .mm-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mm-price {
    display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px;
    background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1);
    transition: background-color .2s, box-shadow .2s, transform .2s;
  }
  .mm-price:hover { background: rgba(10, 141, 255, .14); box-shadow: inset 0 0 0 1px rgba(110, 190, 255, .45); transform: translateY(-2px); }
  .mm-price span { font-size: .875rem; color: #C9D6F0; }
  .mm-price strong { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; color: #fff; }
  .mm-price small { font-size: .75rem; color: var(--muted); }
  .mm-plus { display: flex; flex-direction: column; gap: 8px; padding-left: 28px; border-left: 1px solid var(--line); }
  .mm-plus-a { display: grid; gap: 2px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; transition: background-color .2s; }
  .mm-plus-a:hover { background: rgba(10, 141, 255, .14); }
  .mm-plus-a b { font-weight: 600; font-size: .9375rem; }
  .mm-plus-a span { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
  .mm-plus-a.is-green b { color: #7EE2B0; }
  .mm-plus .btn { margin-top: auto; }

  /* About */
  .panel-about .panel-inner { grid-template-columns: 300px 1fr; }
  .about-media { min-height: 300px; }

  /* Insights */
  .panel-insights .panel-inner { grid-template-columns: 1fr 1fr 260px; }
  .card-media { background-size: cover; background-position: center; transition: transform .4s var(--ease); }
  .card:hover .card-media { transform: scale(1.02); }
  .text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--ice); font-weight: 500; font-size: .9063rem; }

  /* Contact */
  .panel-contact { max-width: 980px; }
  .panel-contact .panel-inner { grid-template-columns: 1fr 1fr 260px; }
  .mm-ct { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 18px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .1); transition: background-color .2s, transform .2s; }
  .mm-ct:hover { background: rgba(10, 141, 255, .14); transform: translateY(-2px); }
  .mm-ct-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(145deg, #0A8DFF, #2B5BFF); box-shadow: 0 10px 24px -8px rgba(10, 141, 255, .7); }
  .mm-ct-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mm-ct strong { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
  .mm-ct > span:last-child { font-size: .875rem; color: var(--muted); line-height: 1.5; }
  .mm-ct-info { display: grid; align-content: start; gap: 4px; }
  .mm-ct-info .mm-label { margin: 10px 0 0; }
  .mm-ct-info .mm-label:first-child { margin-top: 0; }
  .mm-ct-info a { color: var(--mist); font-size: .9375rem; }
  .mm-ct-info a:hover { color: #fff; }
  .mm-ct-info address { font-style: normal; font-size: .9063rem; color: var(--muted); line-height: 1.55; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav-link { padding: 0 9px; font-size: .9063rem; }
  .header-cta { padding-left: 16px; padding-right: 16px; }
  .panel-services .panel-inner { grid-template-columns: 1fr 1fr 1fr 250px; }
  .mm-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone and tablet: each panel opens as a clean list under its name */
@media (max-width: 1080px) {
  .mm-side-media { display: none; }
  .mm-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); margin: 4px 0 6px; }
  .mm-ind-grid, .mm-price-grid { display: grid; gap: 0; }
  .mm-ind { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
  .mm-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(10, 141, 255, .16); }
  .mm-ic svg { width: 18px; height: 18px; fill: none; stroke: #CFE9FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mm-ind strong { display: block; font-weight: 500; }
  .mm-ind small { display: block; font-size: .8125rem; color: var(--muted); }
  .mm-side { display: grid; gap: 2px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(10, 141, 255, .1); }
  .mm-side strong { font-weight: 600; }
  .mm-side > span { font-size: .8438rem; color: var(--muted); }
  .mm-side .mm-go { color: var(--ice); font-weight: 500; margin-top: 4px; }
  .mm-go svg, .text-link svg, .preview-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: -2px; }
  .mm-price { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .mm-price small { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); }
  .mm-price strong { font-weight: 600; color: #fff; }
  .mm-plus { display: grid; gap: 4px; margin-top: 12px; }
  .mm-plus-a { display: grid; gap: 2px; padding: 10px 0; }
  .mm-plus-a b { font-weight: 600; }
  .mm-plus-a span { font-size: .8125rem; color: var(--muted); }
  .mm-plus-a.is-green b { color: #7EE2B0; }
  .mm-plus .btn { margin-top: 8px; }
  .mm-ct { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mm-ct-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(10, 141, 255, .16); }
  .mm-ct-ic svg { width: 18px; height: 18px; fill: none; stroke: #CFE9FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mm-ct > span:last-child { font-size: .8125rem; color: var(--muted); }
  .mm-ct-info { display: grid; gap: 2px; margin-top: 14px; font-size: .9063rem; }
  .mm-ct-info address { font-style: normal; color: var(--muted); }
  .text-link { display: inline-flex; gap: 6px; margin-top: 12px; color: var(--ice); }
}

/* ==========================================================
   FOOTER v2: four clear columns
   ========================================================== */
.foot-nav.fn { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: none; }
.foot-nav.fn .foot-col { grid-area: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.foot-nav.fn .foot-col ul { gap: 9px; }
.foot-nav.fn .foot-col a { font-size: .9063rem; }
.foot-nav.fn address span { font-size: .875rem; }
@media (max-width: 1080px) {
  .foot-nav.fn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
}
@media (max-width: 720px) {
  .foot-nav.fn { grid-template-areas: none; gap: 30px 20px; }
  .foot-nav.fn .foot-col:last-child { grid-column: 1 / -1; padding: 20px; border-radius: 20px; background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
}

/* ==========================================================
   SITEMAP PAGE (smp-)
   ========================================================== */
.smp { padding: calc(var(--header-h) + 24px) var(--gutter) 90px; }
.smp-hero { position: relative; max-width: 1240px; margin: 0 auto 44px; padding: clamp(36px, 5vw, 64px); border-radius: 32px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 120% at 85% 50%, rgba(10, 141, 255, .22), transparent 60%), linear-gradient(160deg, rgba(14, 30, 70, .9), rgba(6, 14, 36, .9));
  box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.smp-hero-in { position: relative; max-width: 640px; }
.smp-hero h1 { font-family: var(--f-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin: 6px 0 16px; }
.smp-hero h1 span { display: block; background: linear-gradient(90deg, #6EC0FF, #A9DCFF 50%, #6E8BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.smp-lead { color: #C9D6F0; font-size: 1.0625rem; line-height: 1.6; max-width: 34em; }
.smp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.smp-stats li { display: grid; padding: 12px 18px; border-radius: 16px; background: rgba(169, 220, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .12); }
.smp-stats b { font-family: var(--f-display); font-size: 1.5rem; color: #fff; line-height: 1.1; }
.smp-stats span { font-size: .8125rem; color: var(--muted); }
.smp-orbit { position: absolute; right: clamp(-120px, -4vw, 0px); top: 50%; width: 420px; height: 420px; transform: translateY(-50%); z-index: -1; }
.smp-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(110, 190, 255, .28); animation: smpSpin 40s linear infinite; }
.smp-orbit i:nth-child(2) { inset: 60px; border-style: solid; border-color: rgba(110, 190, 255, .18); animation-duration: 28s; animation-direction: reverse; }
.smp-orbit i:nth-child(3) { inset: 120px; border-color: rgba(110, 190, 255, .3); animation-duration: 18s; }
.smp-orbit i::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #6EC0FF; box-shadow: 0 0 16px 4px rgba(10, 141, 255, .7); }
.smp-orbit i:nth-child(2)::after { background: #A9DCFF; top: auto; bottom: -5px; }
.smp-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #4FB0FF, #0A3FB8 70%); box-shadow: 0 0 60px rgba(10, 141, 255, .55), inset 0 -8px 20px rgba(0, 0, 0, .35); }
.smp-core svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
@keyframes smpSpin { to { transform: rotate(360deg); } }

.smp-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.smp-g { padding: 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(169, 220, 255, .055), rgba(169, 220, 255, .02)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .11); }
.smp-ind { grid-column: span 2; }
.smp-read { grid-column: span 2; }
.smp-gh { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.smp-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #0A8DFF, #2B5BFF); box-shadow: 0 10px 24px -10px rgba(10, 141, 255, .8); }
.smp-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.smp-legal .smp-ic { background: linear-gradient(145deg, #1FBF7A, #0E8F6A); box-shadow: 0 10px 24px -10px rgba(31, 191, 122, .7); }
.smp-gh h2 { font-family: var(--f-display); font-size: 1.25rem; margin: 0; }
.smp-gh p { font-size: .8438rem; color: var(--muted); margin: 2px 0 0; }
.smp-n { min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: .8125rem; color: var(--ice); background: rgba(10, 141, 255, .14); }
.smp-list { list-style: none; margin: 0; padding: 0; }
.smp-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 10px; margin: 0 -10px; border-radius: 12px; transition: background-color .2s; }
.smp-list a span { font-weight: 500; color: var(--mist); }
.smp-list a small { font-size: .8125rem; color: var(--muted); text-align: right; }
.smp-list a:hover { background: rgba(10, 141, 255, .12); }
.smp-list a:hover span { color: #fff; }
.smp-list a::after { content: "\2192"; color: var(--ice); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.smp-list a:hover::after { opacity: 1; transform: none; }
.smp-ilist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; }
.smp-ilist a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-weight: 500; transition: background-color .2s; }
.smp-ilist a:hover { background: rgba(10, 141, 255, .12); color: #fff; }
.smp-ii { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(10, 141, 255, .14); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .14); }
.smp-ii svg { width: 18px; height: 18px; fill: none; stroke: #CFE9FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.smp-all { display: inline-block; margin: 6px 0 4px; color: var(--ice); font-weight: 500; }
.smp-all::after { content: " \2192"; }
.smp-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.smp-topic { padding-top: 12px; }
.smp-tl { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); margin-bottom: 2px; }
.smp-tl:hover { color: #fff; }
.smp-topic .smp-list a { flex-direction: column; gap: 2px; }
.smp-topic .smp-list a small { text-align: left; }
.smp-topic .smp-list a::after { display: none; }
.smp-xml { max-width: 1240px; margin: 28px auto 0; font-size: .875rem; color: var(--muted); text-align: center; }
.smp-xml a { color: var(--ice); }
@media (max-width: 1080px) {
  .smp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smp-ind, .smp-read { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .smp { padding-top: calc(var(--header-h) + 12px); }
  .smp-hero { padding: 28px 22px; border-radius: 24px; }
  .smp-orbit { width: 260px; height: 260px; right: -110px; top: 26%; opacity: .55; }
  .smp-orbit i:nth-child(2) { inset: 40px; } .smp-orbit i:nth-child(3) { inset: 80px; }
  .smp-core { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .smp-core svg { width: 28px; height: 28px; }
  .smp-stats li { flex: 1 1 calc(50% - 10px); }
  .smp-grid { grid-template-columns: 1fr; gap: 16px; }
  .smp-g { padding: 20px 18px; }
  .smp-ilist { grid-template-columns: 1fr 1fr; }
  .smp-ilist a { padding: 8px 4px; gap: 8px; font-size: .875rem; }
  .smp-ii { width: 30px; height: 30px; }
  .smp-topics { grid-template-columns: 1fr; }
  .smp-list a small { display: none; }
  .smp-topic .smp-list a small { display: block; }
}
@media (prefers-reduced-motion: reduce) { .smp-orbit i { animation: none; } }
/* sitemap v2: three short groups on top, the two long ones full width */
.smp-ind, .smp-read { grid-column: 1 / -1; }
.smp-list a { flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 10px; }
.smp-list a small { text-align: left; }
.smp-list a::after { display: none; }
.smp-ilist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.smp-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot-nav.fn { grid-template-columns: .95fr 1.15fr .8fr 1.25fr; }
.panel-insights .panel-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
@media (max-width: 1080px) { .smp-ilist { grid-template-columns: repeat(3, minmax(0, 1fr)); } .smp-topics { grid-template-columns: 1fr 1fr; } .foot-nav.fn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .smp-ilist { grid-template-columns: 1fr 1fr; } .smp-topics { grid-template-columns: 1fr; } .smp-list a small { display: block; } }

/* About panel v2: four clear cards with borders */
.ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.ab-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
  background: rgba(169, 220, 255, .04); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .13); transition: background-color .2s, box-shadow .2s, transform .2s; }
.ab-card:hover { background: rgba(10, 141, 255, .14); box-shadow: inset 0 0 0 1px rgba(110, 190, 255, .5); transform: translateY(-2px); }
.ab-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(10, 141, 255, .3), rgba(43, 91, 255, .12)); box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .18); }
.ab-ic svg { width: 20px; height: 20px; fill: none; stroke: #CFE9FF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-card:hover .ab-ic { background: linear-gradient(145deg, #0A8DFF, #2B5BFF); }
.ab-card:hover .ab-ic svg { stroke: #fff; }
.ab-t strong { display: block; font-weight: 600; font-size: .9375rem; }
.ab-t small { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.ab-go svg { width: 14px; height: 14px; fill: none; stroke: var(--ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity .2s, transform .2s; }
.ab-card:hover .ab-go svg { opacity: 1; transform: translateX(3px); }
@media (min-width: 1081px) {
  .panel-about { max-width: 980px; }
  .panel-about .panel-inner { grid-template-columns: 300px 1fr; align-items: stretch; }
  .about-copy .mm-label { margin-bottom: 8px; }
  .about-lead { margin-bottom: 20px; }
  .about-copy .badge { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; }
}
@media (max-width: 1080px) {
  .ab-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
  .ab-card { padding: 12px; }
  .about-copy .mm-label { display: none; }
}

/* Footer: room between the links and the big falling word, and the word never blocks a click */
.foot-bar { position: relative; z-index: 2; }
.foot-word { pointer-events: none; margin-top: clamp(36px, 5vw, 80px); }

/* waist-up robots (new menu pictures): show the whole picture, standing on the bottom edge */
@media (min-width: 1081px) {

}

/* menu photos (robot scenes with their own background): fill the frame, keep the face in view */
@media (min-width: 1081px) {
  .site-nav.media-ready .preview-media[data-media],
  .site-nav.media-ready .about-media[data-media],
  .site-nav.media-ready .mm-side-media[data-media] { background-size: cover; background-position: 62% 18%; }
  .site-nav.media-ready .about-media[data-media] { background-position: 50% 12%; }
  .site-nav.media-ready .mm-side-media[data-media] { background-position: 50% 15%; }
}
@media (min-width: 1081px) { .site-nav.media-ready .preview-media[data-media="auto"] { background-position: 18% 18%; } }

/* scroll apple v2: a whole, clear apple in matte silver, no branch */
.fall-branch { display: none; }
.fall-apple { width: 26px; height: 30px; margin-left: -13px; }
.fall-fruit { filter: drop-shadow(0 0 5px rgba(169, 220, 255, .35)) drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
.apple-body { fill: url(#apple-body); }
.apple-leaf { fill: url(#apple-leaf); }
.apple-stem { stroke: #8C97A5; stroke-width: 1.4; }
.apple-shine { fill: rgba(255, 255, 255, .45); }
.fall-apple:hover .fall-fruit { filter: drop-shadow(0 0 9px rgba(169, 220, 255, .8)) drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
@media (max-width: 1080px) { .fall-apple { width: 18px; height: 21px; margin-left: -9px; } }

/* ==========================================================
   MEGA MENU v3: icon + text everywhere, like Industries
   ========================================================== */
.svc-link { display: flex; align-items: center; gap: 12px; }
.svc-link .svc-t { display: block; min-width: 0; }
.svc-link .svc-t > span { display: block; }
.svc-link .mm-ic { display: grid; }
.svc-link:hover .mm-ic, .svc-link.is-active .mm-ic { background: linear-gradient(145deg, #0A8DFF, #2B5BFF); }
.svc-link:hover .mm-ic svg, .svc-link.is-active .mm-ic svg { stroke: #fff; }
.mm-price b { font-weight: 500; }
.tp-link { display: flex !important; align-items: center; gap: 10px; }
.tp-link .mm-ic { width: 30px; height: 30px; border-radius: 9px; }
.tp-link .mm-ic svg { width: 16px; height: 16px; }
.ab-grid > li { display: flex; }
.ab-grid .ab-card { width: 100%; }
.card-t { display: block; }
.card-t strong { display: block; }
.card-t > span { display: block; font-size: .875rem; color: var(--muted); margin-top: 4px; }

@media (min-width: 1081px) {
  .svc-link { padding: 9px 12px; }
  .svc-link.is-active::before { display: none; }
  .svc-link .mm-ic { width: 38px; height: 38px; border-radius: 11px; }
  .svc-link .mm-ic svg { width: 19px; height: 19px; }
  .mm-price { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .mm-price .mm-ic { grid-row: 1 / span 3; width: 40px; height: 40px; }
  .mm-price .mm-ic svg { width: 20px; height: 20px; }
  .mm-price b { font-size: .875rem; color: #C9D6F0; grid-column: 2; }
  .mm-price strong, .mm-price small { grid-column: 2; }
  .mm-price:hover .mm-ic { background: linear-gradient(145deg, #0A8DFF, #2B5BFF); }
  .mm-price:hover .mm-ic svg { stroke: #fff; }
  .ab-card { min-height: 78px; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .svc-link .mm-ic { display: none; }
}

@media (max-width: 1080px) {
  /* services */
  .svc-link { padding: 9px 0; gap: 12px; }
  .svc-link .mm-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; }
  .svc-link .mm-ic svg { width: 18px; height: 18px; }
  .svc-link .svc-t strong { font-weight: 500; }
  .svc-link .svc-t > span { font-size: .8125rem; color: var(--muted); }
  /* pricing */
  .mm-price { grid-template-columns: 34px 1fr auto; column-gap: 12px; align-items: center; }
  .mm-price .mm-ic { grid-row: 1 / span 2; grid-column: 1; }
  .mm-price b { grid-column: 2; grid-row: 1; }
  .mm-price small { grid-column: 2; grid-row: 2; }
  .mm-price strong { grid-column: 3; grid-row: 1 / span 2; }
  /* insights: small picture next to each article, icon next to each topic */
  .panel-insights .card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0; }
  .panel-insights .card-media { display: block; flex: none; width: 64px; height: 44px; aspect-ratio: auto; margin: 0; border-radius: 10px; background-size: cover; background-position: center; }
  .panel-insights .card-t strong { font-family: var(--f-body); font-weight: 500; font-size: .9375rem; line-height: 1.35; }
  .panel-insights .card-t > span { font-size: .8125rem; margin-top: 2px; }
  .panel-insights .panel-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ice); margin: 14px 0 4px; }
  .panel-links li a.tp-link { padding: 8px 0; border-bottom: 0; }
  .tp-link .mm-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(10, 141, 255, .16); }
  .tp-link .mm-ic svg { width: 18px; height: 18px; fill: none; stroke: #CFE9FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 1080px) {
  .svc-link.is-active .mm-ic { background: rgba(10, 141, 255, .16); }
  .svc-link.is-active .mm-ic svg { stroke: #CFE9FF; }
  .svc-link.is-active strong { color: inherit; }
}