/* Zuckview landing. Design language: airy white, sky-blue glow, soft cards. */
:root {
  --bg: #ffffff;
  --ink: #23272f;
  --head: #3a3f4a;
  --muted: #6b7280;
  --faint: #9aa3b2;
  --line: #e8edf4;
  --line-2: #eef2f7;
  --card: #ffffff;
  --sky-50: #F8FDEB;
  --sky-100: #EFFAD3;
  --sky-200: #DDF5A8;
  --sky-300: #C9EE7A;
  --blue: #5E9408;
  --blue-hi: #DDFF8A;
  --blue-deep: #4F7D06;
  --cyan: #E9FF9E;
  --green: #4A8A0B;
  --green-bg: #EDF9D2;
  --rose: #f2557a;
  --rose-bg: #fdecf1;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .05), 0 2px 6px rgb(16 24 40 / .04);
  --shadow-md: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px -12px rgb(40 50 20 / .18);
  --shadow-lg: 0 2px 4px rgb(16 24 40 / .04), 0 30px 60px -24px rgb(40 55 20 / .28);
  --glow: 0 10px 30px -8px rgb(150 214 30 / .6);
  --lime: #CBFA5A;
  --lime-hi: #DDFF8A;
  --lime-lo: #B4EA36;
  --ink-0: #151714;
  --r: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
main { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.container.narrow { width: min(820px, 100% - 32px); }
.ic { width: 16px; height: 16px; flex: none; }
.ic-lg { width: 24px; height: 24px; flex: none; color: var(--blue); }
.blue { color: var(--blue-deep); }
.hl { color: inherit; background: linear-gradient(180deg, transparent 58%, var(--lime) 58%, var(--lime) 94%, transparent 94%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.px { font-family: var(--pixel); font-weight: 400; }
.br-md { display: none; }
@media (min-width: 720px) { .br-md { display: inline; } }

/* ---------- Buttons ---------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border-radius: 11px;
  font-weight: 500; font-size: 15px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s, color .2s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn-sm { --h: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-primary {
  color: var(--ink-0);
  background: linear-gradient(180deg, var(--lime-hi) 0%, var(--lime) 55%, var(--lime-lo) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(50 80 0 / .12), var(--glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(50 80 0 / .12), 0 14px 36px -6px rgb(150 214 30 / .7); }
.btn-ghost { color: var(--head); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark { color: var(--lime); background: var(--ink-0); box-shadow: 0 10px 26px -10px rgb(21 23 20 / .55), inset 0 1px 0 rgb(255 255 255 / .08); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgb(21 23 20 / .6); }
.btn-white { color: var(--ink-0); background: #fff; box-shadow: 0 10px 30px -10px rgb(25 30 15 / .35); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -10px rgb(25 30 15 / .45); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-logo { height: 32px; width: auto; margin-left: -5px; }
.f-top .brand-logo { height: 48px; }
@media (max-width: 420px) { .nav .brand-logo { height: 28px; } }
.brand-tile {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--blue-hi), var(--blue-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 16px -6px rgb(150 214 30 / .7);
  color: #fff;
}
.brand-tile svg { width: 18px; height: 18px; }
.brand-word { font-size: 21px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.brand-word .px { font-size: 20px; letter-spacing: 0; margin-left: 1px; color: var(--blue); }
.brand-white .brand-tile { background: #fff; color: var(--blue); box-shadow: 0 8px 20px -8px rgb(25 30 15 / .4); }
.brand-white .brand-word, .brand-white .brand-word .px { color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav.is-scrolled { background: rgb(255 255 255 / .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line-2); }
.nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: none; gap: 30px; font-size: 15px; color: var(--head); }
.nav-links a { position: relative; padding: 6px 0; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--blue-deep); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-burger { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; }
.nav-burger .ic { width: 20px; height: 20px; }
.nav-sheet { display: grid; gap: 4px; padding: 8px 16px 18px; background: rgb(255 255 255 / .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-sheet a { padding: 12px 6px; font-size: 16px; color: var(--head); border-bottom: 1px solid var(--line-2); }
.nav-sheet[hidden] { display: none; }
.nav-sheet-login { display: none; }
@media (max-width: 480px) { .nav-login { display: none; } .nav-sheet-login { display: block; font-weight: 500; } }
@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-burger, .nav-sheet { display: none !important; }
}
@media (max-width: 420px) { .nav-cta .btn-sm { padding: 0 12px; } .nav-cta .btn-sm .ic { display: none; } }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s);
}
[data-reveal].in { opacity: 1; transform: none; filter: none; }
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* ---------- Section type ---------- */
.section { position: relative; padding: 110px 0; }
@media (max-width: 720px) { .section { padding: 76px 0; } }
.h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.04em; font-weight: 600; color: var(--head); }
.h2.center { text-align: center; }
.h2.left { text-align: left; }
.lead { margin-top: 16px; font-size: 17px; color: var(--muted); }
.lead.center { text-align: center; margin-inline: auto; max-width: 560px; }
.body { color: var(--muted); font-size: 16px; }
.h2-chip { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: .26em; vertical-align: -.14em; margin: 0 .06em; transform: rotate(-6deg); }
.h2-chip svg { width: .58em; height: .58em; }
.chip-rose { color: #fff; background: linear-gradient(160deg, #ff7d9b, var(--rose)); box-shadow: 0 10px 24px -8px rgb(242 85 122 / .65), inset 0 1px 0 rgb(255 255 255 / .4); }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding-top: 72px; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 30% at 50% 70%, rgb(203 250 90 / .14), rgb(203 250 90 / 0)),
  radial-gradient(40% 30% at 50% 0%, rgb(203 250 90 / .08), transparent 70%); }
.hero-copy { position: relative; text-align: center; z-index: 2; flex: none; padding-top: clamp(20px, 7vh, 120px); padding-bottom: clamp(14px, 3vh, 48px); }
.hero-title {
  font-size: clamp(32px, min(8.4vw, 8.2vh), 76px); line-height: 1.06; letter-spacing: -.045em; font-weight: 600; color: var(--head);
}
.brace { color: var(--head); white-space: nowrap; font-weight: inherit; background: linear-gradient(180deg, transparent 60%, var(--lime) 60%, var(--lime) 95%, transparent 95%); padding: 0 .05em; }
.typed { color: var(--ink-0); }
.caret { display: inline-block; width: .06em; min-width: 3px; height: .82em; margin: 0 .04em; vertical-align: -.06em; background: var(--ink-0); border-radius: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin: clamp(12px, 2.4vh, 22px) auto 0; max-width: 620px; font-size: 18px; color: var(--muted); }
.hero-actions { margin-top: clamp(18px, 3.2vh, 30px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Hub */
.hub { position: relative; flex: 1 1 0; width: 100%; min-height: 270px; max-height: clamp(620px, 50vh, 760px); margin: 0 auto; max-width: 1400px; }
.hub-beam { position: absolute; left: 50%; top: -60px; bottom: calc(50% + 40px); width: 3px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(180deg, rgb(150 214 30 / 0), var(--blue) 70%, var(--blue-hi)); filter: drop-shadow(0 0 6px rgb(150 214 30 / .7)); z-index: 1; }
.hub-beam::after { content: ""; position: absolute; left: -1px; width: 5px; height: 60px; top: 0; border-radius: 5px; background: linear-gradient(180deg, transparent, #fff, transparent); animation: beamrun 2.2s var(--ease) infinite; }
@keyframes beamrun { from { top: -60px; opacity: 0; } 30% { opacity: 1; } to { top: 100%; opacity: 0; } }
/* Flared beam: narrow under the tile, curving out to a wide base behind the logo row (hero clips it) */
.hub-flare { position: absolute; left: 50%; top: calc(50% + 14px); width: clamp(380px, 42vw, 760px); height: calc(50% - 14px + var(--logos-h, 120px)); transform: translateX(-50%); z-index: 0; overflow: visible; }
/* Narrow screens: the flare opens to the full screen width, so the continuation below starts edge to edge */
@media (max-width: 640px) { .hub-flare { width: 100vw; } }
.flare-stars circle { opacity: .7; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgb(255 255 255 / .7)); animation: twinkle 3.2s ease-in-out infinite; }
.flare-stars circle:nth-child(3n) { animation-delay: -1.1s; animation-duration: 2.6s; }
.flare-stars circle:nth-child(3n+1) { animation-delay: -2.2s; animation-duration: 3.8s; }
.flare-stars circle:nth-child(5n) { animation-delay: -.5s; }
@keyframes twinkle { 0%, 100% { opacity: .7; } 50% { opacity: .2; } }
.hub-rows { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); position: absolute; inset: clamp(26px, 8%, 44px) 0 clamp(40px, 14%, 74px); display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; z-index: 2; }
.hub-row { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; height: 100%; }
.hub-side { overflow: hidden; height: 84px; display: flex; align-items: center; position: relative; }
.hub-side.l { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 34%, #000 88%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 34%, #000 88%, transparent 100%); }
.hub-side.r { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 12%, #000 66%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 12%, #000 66%, transparent 100%); }
.hub-row:nth-child(1) .hub-side.l { transform: perspective(900px) rotateY(16deg) rotate(3deg); transform-origin: right center; }
.hub-row:nth-child(1) .hub-side.r { transform: perspective(900px) rotateY(-16deg) rotate(-3deg); transform-origin: left center; }
.hub-row:nth-child(2) .hub-side.l { transform: perspective(900px) rotateY(12deg); transform-origin: right center; }
.hub-row:nth-child(2) .hub-side.r { transform: perspective(900px) rotateY(-12deg); transform-origin: left center; }
.hub-row:nth-child(3) .hub-side.l { transform: perspective(900px) rotateY(16deg) rotate(-3deg); transform-origin: right center; }
.hub-row:nth-child(3) .hub-side.r { transform: perspective(900px) rotateY(-16deg) rotate(3deg); transform-origin: left center; }
.track { display: flex; gap: 14px; width: max-content; padding: 6px 0; animation: flow var(--dur, 40s) linear infinite; }
@keyframes flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.hcard { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; min-width: 248px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-md); }
.hc-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sky-50); color: var(--blue); }
.hc-ico img { width: 20px; height: 20px; }
.hc-ico svg { width: 19px; height: 19px; }
.hc-ico.green { background: var(--green-bg); color: var(--green); }
.hc-ico.grey { background: #f3f5f8; color: var(--faint); }
.hc-txt { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.hc-txt b { white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.hc-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hc-pill { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.hc-pill svg { width: 11px; height: 11px; }
.hc-pill.ok { color: var(--green); background: var(--green-bg); }
.hc-pill.bad { color: var(--rose); background: var(--rose-bg); }
.hc-pill.muted { color: var(--muted); background: #f1f4f8; }
.hc-pill.info { color: var(--blue-deep); background: var(--sky-100); }
.hub-side.l .hcard { filter: saturate(.75); }
.hub-core::before { content: ""; position: absolute; inset: -46px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .95) 50%, rgb(255 255 255 / 0)); }
.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); z-index: 3; width: 108px; height: 108px; display: grid; place-items: center; }
.hub-tile { position: relative; width: 92px; height: 92px; border-radius: 24px; display: grid; place-items: center; color: var(--ink-0);
  background: linear-gradient(160deg, #EDFFB8 0%, var(--lime) 50%, var(--lime-lo) 100%);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), inset 0 -4px 10px rgb(50 80 0 / .2), 0 20px 50px -10px rgb(150 214 30 / .8); }
.hub-tile::before { content: ""; position: absolute; inset: 7px; border-radius: 18px; border: 1.5px solid rgb(255 255 255 / .5); }
.hub-tile svg { width: 50px; height: 50px; }
/* Clickable center tile: press feedback + burst ring, speeds the flow up (main.js) */
.hub-tile { cursor: pointer; border: 0; padding: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s var(--ease); -webkit-tap-highlight-color: transparent; }
.hub-tile:hover { transform: scale(1.06); }
.hub-tile:active { transform: scale(.9); transition-duration: .12s; }
.hub-tile:focus-visible { outline: 3px solid var(--ink-0); outline-offset: 4px; }
.hub-tile.is-boost { box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), inset 0 -4px 10px rgb(50 80 0 / .2), 0 20px 70px -6px rgb(150 214 30 / 1); }
.hub-tile.is-boost svg { animation: blink-eye .5s var(--ease); }
@keyframes blink-eye { 40% { transform: scaleY(.15); } }
.hub-burst { position: absolute; inset: 0; border-radius: 30px; border: 2px solid var(--lime-lo); pointer-events: none; animation: burst .9s var(--ease) forwards; }
@keyframes burst { from { transform: scale(.9); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }
.hub-flare { transition: filter .6s var(--ease); }
.hub.is-boost .hub-flare { filter: brightness(1.05) saturate(1.15); }
.hub-ring { position: absolute; inset: 0; border-radius: 30px; border: 1.5px solid rgb(150 214 30 / .4); animation: ring 2.8s var(--ease) infinite; }
.hub-ring.r2 { animation-delay: 1.4s; }
@keyframes ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.hub-label { position: absolute; top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); z-index: 3; }
.hub-label-l { left: 20%; }
.hub-label-r { right: 17%; }
@media (max-width: 860px) {
  .hub { min-height: 320px; }
  .hub-row { grid-template-columns: 1fr 96px 1fr; }
  .hcard { min-width: 210px; }
  .hub-label { display: none; }
}
@media (max-width: 560px) {
  .hub { min-height: 300px; }
  .hub-row { grid-template-columns: 1fr 80px 1fr; }
  .hub-core { transform: translate(-50%, -62%) scale(.82); }
  .hcard { min-width: 190px; padding: 9px 10px 9px 9px; }
  .hc-ico { width: 32px; height: 32px; }
  .hc-pill { display: none; }
}

/* Short screens (laptops around 720-820px tall): compact hub so the logo row still fits above the fold */
@media (max-height: 820px) and (min-width: 561px) {
  .hub { min-height: 190px; }
  .hub-rows { inset: 10px 0 18px; grid-template-rows: repeat(2, 1fr); }
  .hub-row:nth-child(3) { display: none; }
  .hub-side { height: 70px; }
  .hcard { padding: 7px 12px 7px 8px; gap: 10px; border-radius: 12px; }
  .hc-ico { width: 32px; height: 32px; border-radius: 9px; }
  .hub-core { transform: translate(-50%, -58%) scale(.8); }
  .hub-label { display: none; }
}

/* ---------- Logo marquee ---------- */
.logos { position: relative; z-index: 2; flex: none; padding: clamp(14px, 2.6vh, 30px) 0 clamp(14px, 2.6vh, 28px); }
.logos-label { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: clamp(12px, 2vh, 22px); }
.marquee { overflow: hidden; max-width: 1400px; margin-inline: auto; -webkit-mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--mq-dur, 38s) linear infinite; }
.marquee-group { display: flex; flex: none; gap: 64px; padding-right: 64px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-item { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: #4a505c; white-space: nowrap; }
.logo-item img { width: 28px; height: 28px; }

/* ---------- Product overview ---------- */
/* Flare continuation: picks up the hero flare at its exact width, sweeps out to the screen edges behind the
   feature cards and fades to white at the bottom of the section (path built in main.js) */
#features { isolation: isolate; }
.flare-ext { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
#features .hl { background: linear-gradient(180deg, transparent 58%, #fff 58%, #fff 94%, transparent 94%); }
.product { padding-top: 40px; }
.arch { position: absolute; left: 50%; top: 50%; width: min(1500px, 115vw); height: 1100px; transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgb(214 248 120 / .55) 0%, rgb(214 248 120 / .32) 40%, rgb(214 248 120 / .1) 70%, rgb(214 248 120 / 0) 100%); }
.ptabs { position: relative; display: grid; justify-items: center; gap: 10px; margin-bottom: -40px; z-index: 3; }
.ptabs-label { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 7px; background: #fff; color: var(--head); box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); transition: opacity .25s; }
.ptabs-row { position: relative; display: flex; gap: 10px; padding: 10px; border-radius: 20px; background: rgb(255 255 255 / .9); box-shadow: var(--shadow-md); border: 1px solid var(--line-2); }
.ptab { width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center; background: #f4f7fb; border: 1px solid var(--line-2); transition: transform .45s var(--ease), background-color .3s, box-shadow .45s var(--ease); }
.ptab img { width: 30px; height: 30px; transition: transform .45s var(--ease); }
.ptab:hover img { transform: scale(1.1); }
.ptab.is-on { background: #fff; transform: translateY(-4px); box-shadow: 0 0 0 2px var(--blue), 0 12px 24px -10px rgb(150 214 30 / .6); }
.ptab-cursor { position: absolute; width: 26px; height: 26px; left: 0; top: 0; pointer-events: none; transition: transform .7s var(--ease); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .2)); }
.pbox { position: relative; display: grid; gap: 40px; align-items: center; padding: 84px 26px 30px; border-radius: 28px; background: rgb(255 255 255 / .92); border: 1px solid rgb(255 255 255 / .9); box-shadow: var(--shadow-lg); backdrop-filter: blur(6px); }
@media (min-width: 960px) { .pbox { grid-template-columns: .82fr 1.18fr; padding: 90px 60px 54px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 18px; }
.eyebrow-tile { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-0); background: var(--lime); }
.eyebrow-tile svg { width: 12px; height: 12px; }
.eyebrow-tile.lg { width: 44px; height: 44px; border-radius: 13px; box-shadow: var(--glow); }
.eyebrow-tile.lg { display: grid; place-items: center; flex: none; }
.eyebrow-tile.lg svg { display: block; width: 30px; height: 24px; }
.pbox-copy .h2 { font-size: clamp(30px, 3.6vw, 42px); }
.pbox-copy .body { margin: 18px 0 26px; max-width: 400px; }
.pbox-visual { position: relative; }
.dash { position: relative; border-radius: 18px; padding: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .9s var(--ease); }
.pbox:hover .dash { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash-head b { font-size: 17px; letter-spacing: -.02em; }
.dash-range { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.dash-range .ic { width: 12px; height: 12px; transform: rotate(90deg); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; gap: 4px; }
.kpi small { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.kpi b { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: opacity .25s; }
.kpi em { font-style: normal; font-size: 11.5px; color: var(--green); display: inline-flex; gap: 3px; align-items: center; }
.kpi em .ic { width: 12px; height: 12px; }
.kpi em.em-blue { color: var(--blue); }
.chart { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--line-2); }
.chart-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.lg { width: 14px; height: 3px; border-radius: 3px; display: inline-block; }
.lg-zv { background: var(--blue); }
.lg-px { background: repeating-linear-gradient(90deg, #b5bdca 0 4px, transparent 4px 7px); margin-left: 8px; }
.chart-svg { width: 100%; height: 180px; margin-top: 10px; overflow: visible; }
.chart-svg .grid line { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .area { fill: url(#gArea); opacity: 0; transition: opacity 1s var(--ease) .5s; }
.chart-svg .line-zv { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-svg .line-px { fill: none; stroke: #b5bdca; stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.chart-svg .dot { fill: var(--blue); stroke: #fff; stroke-width: 3; opacity: 0; transition: opacity .4s 1.4s; filter: drop-shadow(0 2px 6px rgb(150 214 30 / .7)); }
.chart.drawn .area { opacity: 1; }
.chart.drawn .dot { opacity: 1; }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }
.float-bubble { position: absolute; top: -34px; right: -18px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-0);
  background: radial-gradient(circle at 35% 30%, #F3FFCC, var(--lime) 70%); box-shadow: 0 16px 34px -10px rgb(150 214 30 / .8), inset 0 2px 0 rgb(255 255 255 / .4); animation: bob 5s ease-in-out infinite; }
.float-bubble svg { width: 28px; height: 28px; }
.float-card { position: absolute; right: 6%; bottom: -30px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line-2); transform: rotate(4deg); animation: bob2 6s ease-in-out infinite; }
.float-card img { width: 26px; height: 26px; }
.float-card span { display: grid; line-height: 1.25; }
.float-card b { font-size: 15px; }
.float-card small { font-size: 12px; color: var(--muted); }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes bob2 { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-7px); } }
.trio { margin-top: 26px; display: grid; gap: 14px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 30px 10px; } .trio-item + .trio-item { border-left: 1px solid var(--line); } }
.trio-item { display: flex; gap: 14px; padding: 4px 26px; }
.trio-item span { display: grid; gap: 2px; }
.trio-item b { font-size: 16px; font-weight: 600; color: var(--ink); }
.trio-item small { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* ---------- Bento ---------- */
.bento { margin-top: 48px; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(6, 1fr); } .bcard-wide { grid-column: span 6; } .bcard-half { grid-column: span 3; } .bcard-third { grid-column: span 6; } }
@media (min-width: 1024px) { .bcard-third { grid-column: span 2; } }
.bcard { position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--line); padding: 30px; box-shadow: var(--shadow-sm);
  transition: box-shadow .5s var(--ease), border-color .5s, opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s); }
.bcard:hover { box-shadow: var(--shadow-md); border-color: #dfe7f1; }
.bcard h3 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--head); }
.bcard p { margin-top: 10px; color: var(--muted); font-size: 15.5px; max-width: 440px; }
.bcard-wide { display: grid; gap: 30px; padding: 0; }
@media (min-width: 900px) { .bcard-wide { grid-template-columns: .9fr 1.1fr; min-height: 330px; } }
.bcard-wide .bcard-copy { padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.bmark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-0); background: var(--lime); box-shadow: var(--glow); margin-bottom: auto; }
.bmark svg { width: 22px; height: 22px; }
.b-title { margin-top: 48px; font-size: clamp(28px, 3.2vw, 38px) !important; line-height: 1.12; letter-spacing: -.04em !important; }
.inline-ico { display: inline-grid; place-items: center; width: 1em; height: 1em; border: 2px solid var(--blue); border-radius: .22em; color: var(--blue); vertical-align: -.12em; }
.inline-ico svg { width: .62em; height: .62em; }
.bcard-visual { position: relative; padding: 24px 24px 0; min-height: 300px; }
@media (min-width: 900px) { .bcard-visual { padding: 26px 26px 0 0; } }
.corner-blob { position: absolute; right: -20px; top: -40px; width: 70%; height: 110%; background: linear-gradient(200deg, var(--lime-hi), var(--lime) 55%, rgb(203 250 90 / 0) 90%); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.ltable { position: relative; height: 100%; border-radius: 16px 16px 0 0; background: rgb(255 255 255 / .96); border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--shadow-lg); overflow: hidden; }
.ltable-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgb(110 170 20 / .5); animation: live 1.8s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(110 170 20 / .5); } 70% { box-shadow: 0 0 0 7px rgb(110 170 20 / 0); } 100% { box-shadow: 0 0 0 0 rgb(110 170 20 / 0); } }
.ltable-rows { height: 270px; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.lrow { display: grid; grid-template-columns: 1.1fr 1.2fr auto auto; gap: 14px; align-items: center; padding: 0 18px; height: 45px; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.lrow b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lrow b small { font-weight: 400; color: var(--faint); margin-left: 4px; font-size: 11px; }
.lrow .st { color: var(--green); display: inline-flex; gap: 6px; align-items: center; font-weight: 500; white-space: nowrap; }
.lrow .st svg { width: 14px; height: 14px; }
.lrow .src { width: 20px; height: 20px; }
.lrow time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lrow.enter { animation: rowin .7s var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(-14px); background: var(--sky-50); } to { opacity: 1; transform: none; background: transparent; } }
@media (max-width: 520px) { .lrow { grid-template-columns: 1fr auto auto; } .lrow time { display: none; } }

/* dedup */
.dedup { margin-top: 26px; height: 150px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.dedup-in { height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-start; }
.dedup-lines { width: 100%; height: 150px; overflow: visible; }
.dedup-lines path { fill: none; stroke: #d5e8b0; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.pulse-dot { fill: var(--blue); filter: drop-shadow(0 0 5px rgb(150 214 30 / .9)); }
.dchip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; }
.dchip svg { width: 16px; height: 16px; color: var(--muted); }
.dchip-tile { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-0); background: var(--lime); }
.dchip-tile svg { width: 13px; height: 13px; color: var(--ink-0); }
.dresult { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.dresult img { width: 24px; height: 24px; }
.dresult span { display: grid; line-height: 1.25; }
.dresult b { font-size: 14px; white-space: nowrap; }
.dresult small { font-size: 12px; color: var(--muted); }
.dresult .ok { width: 20px; height: 20px; color: var(--green); }
@media (max-width: 480px) { .dresult { padding: 10px; gap: 8px; } .dresult img { display: none; } .dchip { padding: 8px 10px; font-size: 13px; } }

/* click recovery */
.clickfix { margin-top: 26px; display: grid; gap: 14px; }
.urlbar { height: 42px; display: flex; align-items: center; padding: 0 14px; gap: 2px; border-radius: 12px; background: #f6f8fb; border: 1px solid var(--line); font: 12.5px/1 var(--mono); overflow: hidden; white-space: nowrap; }
.url-host { color: var(--muted); }
.url-param { color: var(--rose); position: relative; }
.url-param::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .6s; }
.bcard.in .url-param::after { transform: scaleX(1); }
.cf-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.cf-chip svg { width: 15px; height: 15px; }
.cf-bad { color: var(--rose); background: var(--rose-bg); }
.cf-ok { color: var(--green); background: var(--green-bg); opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease) 1.2s, transform .7s var(--ease) 1.2s; }
.bcard.in .cf-ok { opacity: 1; transform: none; }
.cf-arrow { width: 18px; height: 18px; color: var(--faint); }
.cf-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; border: 1px dashed #d9ecb4; background: var(--sky-50); font-size: 13px; }
.cf-ad, .cf-order { padding: 4px 9px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.cf-eq { color: var(--blue); font-weight: 700; }

/* bridge */
.bridge { margin-top: 26px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.bridge-node { display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bridge-node img { width: 54px; height: 54px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.bridge-path { width: 100%; height: 60px; margin-top: -24px; }
.bridge-path path { fill: none; stroke: #d5e8b0; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: dash 1.2s linear infinite; }
.bridge-tag { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; color: var(--green); background: var(--green-bg); padding: 7px 12px; border-radius: 999px; }
.bridge-tag svg { width: 16px; height: 16px; }

/* receipt */
.noutm { margin-top: 22px; display: grid; gap: 10px; }
.nu-url { display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: #f6f8f3; font: 12px/1 var(--mono); overflow: hidden; white-space: nowrap; }
.nu-host { color: var(--head); flex: none; }
.nu-old .nu-host { color: var(--muted); }
.nu-params { position: relative; color: var(--rose); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nu-params::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .5s; }
.bcard.in .nu-params::after { transform: scaleX(1); }
.bcard.in .nu-old { opacity: .55; transition: opacity .6s ease 1.3s; }
.nu-new { background: #fff; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease) 1.2s, transform .7s var(--ease) 1.2s; }
.nu-new .ok { width: 18px; height: 18px; margin-left: auto; color: var(--green); flex: none; }
.bcard.in .nu-new { opacity: 1; transform: none; }
.nu-match { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed #d9ecb4; background: var(--sky-50); opacity: 0; transition: opacity .7s var(--ease) 1.6s; }
.bcard.in .nu-match { opacity: 1; }
.nu-match img { width: 22px; height: 22px; }
.nu-match span { display: grid; line-height: 1.25; }
.nu-match b { font-size: 13.5px; }
.nu-match small { font-size: 12px; color: var(--muted); }

/* health */
.health { margin-top: 22px; position: relative; display: grid; gap: 8px; }
.h-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--head); }
.h-row .ok { width: 18px; height: 18px; color: var(--green); }
.h-score { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.h-score small { font-size: 13px; color: var(--muted); }
.h-score b { font-size: 30px; color: var(--blue); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.h-score em { font-style: normal; color: var(--green); font-size: 13px; display: inline-flex; gap: 3px; align-items: center; }
.h-score em .ic { width: 12px; height: 12px; }
.h-spark { width: 100%; height: 60px; }
.spark-area { fill: rgb(150 214 30 / .14); }
.spark-line { fill: none; stroke: var(--blue); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s var(--ease) .4s; }
.bcard.in .spark-line { stroke-dashoffset: 0; }

/* ---------- Budget check (calculator) ---------- */
.budget { position: relative; }
.budget-glow { position: absolute; left: 50%; bottom: -160px; width: min(1300px, 110vw); height: 760px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgb(203 250 90 / .38), rgb(203 250 90 / .1) 60%, transparent); }
.budget-head { display: flex; flex-direction: column; align-items: center; }
.budget-box { position: relative; width: min(580px, 100%); margin: 50px auto 0; display: grid; gap: 10px; padding: 10px; border-radius: 30px; background: rgb(255 255 255 / .9); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.budget-controls { padding: 26px 24px 18px; display: grid; gap: 28px; align-content: start; }
@media (max-width: 520px) { .budget-controls, .budget-result { padding-inline: 18px; } }
.bc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 500; color: var(--head); }
.bc-row output { font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-chips { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.bc-chips button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; color: var(--muted); transition: all .3s var(--ease); }
.bc-chips button:hover { color: var(--ink); border-color: #d6dccd; }
.bc-chips button.is-on { color: var(--ink-0); background: var(--lime); border-color: transparent; }
.bc-seg { position: relative; margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 14px; background: #f3f5ef; border: 1px solid var(--line-2); }
.bc-seg button { position: relative; z-index: 1; height: 42px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.bc-seg button.is-on { color: var(--ink-0); }
.bc-seg-pill { position: absolute; top: 5px; left: 5px; height: 42px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1.5px var(--lime-lo); transition: transform .5s var(--ease), width .5s var(--ease); }
.bc-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--faint); }
.br-note { margin-top: -8px; font-size: 12.5px; color: rgb(21 23 20 / .55); text-align: center; }
.bc-hint { margin-top: 10px; font-size: 13px; color: var(--faint); }
.calc-range { --p: 19.19%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 18px 0 0; background: transparent; cursor: pointer; }
.calc-range::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--lime-lo), var(--lime) var(--p), #eef1ea var(--p)); box-shadow: inset 0 1px 2px rgb(21 23 20 / .08); }
.calc-range::-moz-range-track { height: 10px; border-radius: 10px; background: #eef1ea; box-shadow: inset 0 1px 2px rgb(21 23 20 / .08); }
.calc-range::-moz-range-progress { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--lime-lo), var(--lime)); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 22px; margin-top: -6px; border-radius: 7px; border: 1px solid #dfe4d8;
  background: linear-gradient(90deg, transparent 10.5px, #c3c9bb 10.5px 12px, transparent 12px 16px, #c3c9bb 16px 17.5px, transparent 17.5px) 0 50% / 100% 10px no-repeat, #fff; box-shadow: 0 4px 12px -2px rgb(21 23 20 / .25); transition: transform .25s var(--ease); }
.calc-range::-moz-range-thumb { width: 30px; height: 22px; border-radius: 7px; border: 1px solid #dfe4d8; background: linear-gradient(90deg, transparent 10.5px, #c3c9bb 10.5px 12px, transparent 12px 16px, #c3c9bb 16px 17.5px, transparent 17.5px) 0 50% / 100% 10px no-repeat, #fff; box-shadow: 0 4px 12px -2px rgb(21 23 20 / .25); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.calc-range:focus-visible { outline: none; }
.calc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(203 250 90 / .7), 0 4px 12px -2px rgb(21 23 20 / .25); }
.budget-result { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 26px 24px 24px; border-radius: 22px;
  background: radial-gradient(120% 80% at 100% 0%, rgb(203 250 90 / .55), transparent 60%), linear-gradient(180deg, #fbfef3, #f3fadf); border: 1px solid #e6f3c4; }
.br-label { font-size: 14px; font-weight: 500; color: rgb(21 23 20 / .65); }
.br-big { display: block; margin-top: 6px; font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -.05em; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.split { display: flex; height: 46px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(21 23 20 / .08); }
.split > span { display: flex; align-items: center; min-width: 0; transition: flex-basis .7s var(--ease); }
.split em { font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 0 12px; }
.split-seen { flex: 0 0 87%; background: var(--ink-0); color: #fff; }
.split-blind { flex: 0 0 13%; justify-content: center; color: var(--ink-0);
  background: repeating-linear-gradient(-45deg, var(--lime) 0 7px, #b4ea36 7px 14px); }
.br-year-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: rgb(21 23 20 / .65); }
.br-year-head b { font-size: 22px; letter-spacing: -.03em; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.bb { --h: .5; margin-top: 14px; height: 104px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; }
.bb-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bb-col i { width: 100%; border-radius: 6px 6px 3px 3px; height: calc((var(--i) + 1) / 12 * var(--h) * 82px + 4px);
  background: linear-gradient(180deg, var(--lime), #b4ea36); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
  transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease) calc(var(--i) * 45ms), height .6s var(--ease); }
.bb-col:last-child i { background: var(--ink-0); }
.budget-box.in .bb-col i { transform: scaleY(1); }
.bb-col em { font-style: normal; font-size: 11px; color: rgb(21 23 20 / .45); }

/* ---------- Results card ---------- */
.results-wrap { padding-top: 30px; }
.results { position: relative; overflow: hidden; display: grid; gap: 36px; padding: 36px 26px; border-radius: 28px; border: 1px solid var(--line); background:
  radial-gradient(70% 90% at 30% 110%, rgb(203 250 90 / .55), transparent 70%),
  radial-gradient(50% 60% at 60% 100%, rgb(220 255 140 / .35), transparent 70%), #fff; box-shadow: var(--shadow-md); }
@media (min-width: 960px) { .results { grid-template-columns: 1.5fr 1fr; padding: 44px; align-items: center; } }
.results-dots { position: absolute; right: 0; top: 0; width: 140px; height: 120px; background-image: radial-gradient(#cfd8e4 1.3px, transparent 1.4px); background-size: 12px 12px; -webkit-mask: linear-gradient(225deg, #000, transparent 70%); mask: linear-gradient(225deg, #000, transparent 70%); }
.results-who { display: flex; gap: 12px; align-items: center; }
.results-who span:last-child { display: grid; line-height: 1.3; }
.results-who b { font-size: 16px; }
.results-who small { font-size: 14px; color: var(--muted); }
.results-quote { margin: 34px 0 40px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.025em; color: var(--ink); font-weight: 500; max-width: 620px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat b { display: inline-flex; align-items: center; gap: 4px; font-size: 34px; font-weight: 600; letter-spacing: -.04em; color: var(--head); font-variant-numeric: tabular-nums; }
.stat b .ic { width: 22px; height: 22px; color: var(--head); }
.stat small { display: block; font-size: 14px; color: var(--muted); }
.phone { position: relative; justify-self: center; width: 280px; height: 470px; border-radius: 40px; padding: 10px; background: #1e2330; box-shadow: 0 30px 60px -20px rgb(25 30 15 / .5), inset 0 0 0 2px #3a4152; }
.phone-notch { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 90px; height: 24px; border-radius: 20px; background: #0d0f14; z-index: 2; }
.phone-screen { height: 100%; border-radius: 31px; background: #f4f6fa; padding: 54px 14px 14px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.ps-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ps-head img { width: 22px; height: 22px; }
.ps-card { background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow-sm); display: grid; gap: 12px; }
.ps-row { display: flex; justify-content: space-between; align-items: center; }
.ps-badge { font-size: 11px; color: var(--green); background: var(--green-bg); padding: 2px 8px; border-radius: 999px; }
.ps-src { display: flex; gap: 6px; }
.ps-src span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 9px; border-radius: 8px; background: #f1f4f8; color: var(--muted); }
.ps-src span.on { background: var(--sky-100); color: var(--blue-deep); }
.ps-src svg { width: 13px; height: 13px; }
.ps-emq small { font-size: 11.5px; color: var(--muted); }
.ps-bar { height: 7px; border-radius: 7px; background: #eef1f6; margin: 6px 0; overflow: hidden; }
.ps-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue-hi), var(--green)); transition: width 1.6s var(--ease) .5s; }
.results.in .ps-bar i { width: 91%; }
.ps-emq b { font-size: 13px; color: var(--green); }
.ps-list { background: #fff; border-radius: 16px; padding: 4px 12px; box-shadow: var(--shadow-sm); }
.ps-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.ps-list li:last-child { border: 0; }
.psl-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--green-bg); color: var(--green); flex: none; }
.psl-ico svg { width: 14px; height: 14px; }
.ps-list li span:nth-child(2) { display: grid; line-height: 1.2; flex: 1; }
.ps-list b { font-size: 13px; }
.ps-list small { font-size: 11px; color: var(--muted); }
.ps-list em { font-style: normal; font-size: 11px; color: var(--faint); }

/* ---------- Pricing ---------- */
.pricing { position: relative; }
.pricing-glow { position: absolute; left: 50%; top: 52%; width: min(1500px, 115vw); height: 1100px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(closest-side, rgb(203 250 90 / .3) 0%, rgb(203 250 90 / .12) 55%, rgb(203 250 90 / 0) 100%); pointer-events: none; }
.billing-toggle { position: relative; margin: 30px auto 0; width: fit-content; display: flex; padding: 5px; border-radius: 14px; background: #f1f5fa; border: 1px solid var(--line-2); }
.bt { position: relative; z-index: 1; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
.bt.is-on { color: var(--ink); }
.bt-save { font-size: 11px; color: var(--green); background: var(--green-bg); padding: 2px 7px; border-radius: 999px; }
.bt-pill { position: absolute; top: 5px; left: 5px; height: 40px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), width .5s var(--ease); }
.plans { position: relative; margin-top: 44px; display: grid; gap: 14px; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
/* Plan cards: soft washed glass cards with a glossy icon*/
.plan { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 26px;
  background:
    radial-gradient(90% 55% at 0% 0%, rgb(232 250 190 / .85), rgb(232 250 190 / 0) 70%),
    radial-gradient(70% 40% at 100% 0%, rgb(236 240 255 / .9), rgb(236 240 255 / 0) 70%),
    linear-gradient(180deg, #fff 0%, #fff 100%);
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 0 0 1px rgb(21 23 20 / .05), 0 2px 4px rgb(21 23 20 / .03), 0 30px 60px -32px rgb(40 55 20 / .28), inset 0 1px 0 #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s); }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(250 253 244 / .9) 100%); }
.plan.in:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgb(21 23 20 / .06), 0 40px 70px -30px rgb(40 55 20 / .35), inset 0 1px 0 #fff; }
.plan-ico { width: 48px; height: 48px; display: grid; place-items: center; }
.plan-ico svg { width: 46px; height: 46px; overflow: visible; filter: drop-shadow(0 6px 10px rgb(134 193 18 / .45)) drop-shadow(0 1px 0 rgb(255 255 255 / .9)); }
.pi-shine { transform: scale(.82) translate(5px, 3px); transform-origin: 50% 0; }
.plan-ico-ink svg { filter: drop-shadow(0 8px 12px rgb(21 23 20 / .35)) drop-shadow(0 1px 0 rgb(255 255 255 / .7)); }
.plan-ico-app { width: 50px; height: 50px; border-radius: 15px; color: var(--ink-0);
  background: linear-gradient(180deg, #fff, #f2f9e1); box-shadow: 0 10px 22px -8px rgb(70 110 0 / .45), inset 0 1px 0 #fff, inset 0 -2px 4px rgb(150 214 30 / .25); }
.plan-ico-app svg { width: 30px; height: 30px; filter: none; }
.plan h3 { margin-top: 20px; font-size: 26px; letter-spacing: -.035em; font-weight: 600; color: var(--head); }
.plan-for { margin-top: 4px; font-size: 14px; color: var(--muted); min-height: 42px; }
.price { margin: 18px 0 20px; display: flex; align-items: baseline; gap: 4px; }
.price b { font-size: 40px; letter-spacing: -.045em; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-block; }
.price span { font-size: 14px; color: var(--muted); }
.price.swap b, .price.swap span { animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.plan-limits { display: grid; gap: 10px; padding: 14px 0 16px; margin-bottom: 16px; border-top: 1px dashed rgb(21 23 20 / .08); border-bottom: 1px dashed rgb(21 23 20 / .08); }
.plan-limits li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--muted); }
.plan-limits li b { color: var(--ink); font-weight: 600; }
.plan-limits svg { width: 18px; height: 18px; color: var(--blue-deep); flex: none; }
.plan-hl .plan-limits { border-color: rgb(21 23 20 / .12); }
.plan-hl .plan-limits li { color: rgb(21 23 20 / .72); }
.plan-hl .plan-limits li b { color: var(--ink-0); }
.plan-hl .plan-limits svg { color: var(--ink-0); }
.plan-list { display: grid; gap: 11px; margin-bottom: 26px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--head); }
.plan-list svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 1px; }
.plan .btn-block { margin-top: auto; }
.plan-hl { color: var(--ink-0); border-color: rgb(255 255 255 / .8);
  background:
    radial-gradient(2px 2px at 22% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 38% 26%, rgb(255 255 255 / .9), transparent),
    radial-gradient(2px 2px at 64% 9%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 30%, rgb(255 255 255 / .85), transparent),
    radial-gradient(2.5px 2.5px at 52% 36%, rgb(255 255 255 / .9), transparent), radial-gradient(1.5px 1.5px at 12% 34%, rgb(255 255 255 / .8), transparent),
    radial-gradient(1.5px 1.5px at 88% 16%, #fff, transparent),
    radial-gradient(80% 45% at 80% 0%, #EDFFB8 0%, rgb(237 255 184 / 0) 70%),
    linear-gradient(180deg, #BFF241 0%, #CFFA62 18%, #E2FD9C 36%, #F5FEE0 52%, #fff 68%);
  box-shadow: 0 0 0 1px rgb(150 214 30 / .25), 0 34px 70px -28px rgb(134 193 18 / .65), inset 0 1px 0 rgb(255 255 255 / .7); }
.plan-hl::before { background: radial-gradient(60% 30% at 50% 44%, rgb(255 255 255 / .7), transparent 70%); }
.plan-hl h3, .plan-hl .plan-list li { color: var(--ink-0); }
.plan-hl .plan-for, .plan-hl .price span { color: rgb(21 23 20 / .7); }
.plan-hl .plan-list svg { color: var(--ink-0); --chk: var(--lime); }
.plan-ribbon { position: absolute; top: 20px; right: -42px; width: 150px; height: 30px; transform: rotate(45deg); display: grid; place-items: center; color: var(--lime);
  background: linear-gradient(180deg, #2a2e27, var(--ink-0)); box-shadow: 0 6px 14px -6px rgb(21 23 20 / .6), inset 0 1px 0 rgb(255 255 255 / .12); }
.plan-ribbon svg { width: 16px; height: 16px; transform: rotate(-45deg); }
.plans-note { margin-top: 22px; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { margin-top: 44px; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 8px; text-align: left; font-size: 17px; font-weight: 500; color: var(--head); transition: color .2s; }
.q:hover { color: var(--blue-deep); }
.q .ic { width: 20px; height: 20px; color: var(--blue); transition: transform .5s var(--ease); }
.q[aria-expanded="true"] .ic { transform: rotate(135deg); }
.a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.a > div { overflow: hidden; }
.a p { padding: 0 8px 22px; color: var(--muted); max-width: 660px; opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); }
.qa.open .a { grid-template-rows: 1fr; }
.qa.open .a p { opacity: 1; transform: none; transition-delay: .1s; }

/* ---------- Stack CTA (logo clusters around the caption) ---------- */
.stack { position: relative; height: 751px; overflow: hidden; margin-top: 30px; }
/* Last section before the footer: white at the top, deepening to lime at the bottom edge (like the old final band) */
.stack::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 45% at 50% 50%, rgb(215 245 140 / .35), transparent 72%),
  radial-gradient(55% 35% at 12% 0%, #fff 0%, rgb(255 255 255 / 0) 70%),
  radial-gradient(55% 35% at 88% 0%, #fff 0%, rgb(255 255 255 / 0) 70%),
  linear-gradient(180deg, #fff 0%, #F7FDE8 30%, #EDFCC4 55%, #DEFB92 78%, var(--lime) 100%); }
.stack-stage { position: absolute; left: 50%; top: 0; width: 1440px; height: 751px; margin-left: -720px; transform: scale(var(--k, 1)); transform-origin: 50% 52%; z-index: 1; }
.stack-lines { position: absolute; inset: 0; overflow: visible; }
.stack-lines path { fill: none; stroke: #b2d46c; stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .9; }
.st-dot { fill: #9DCB3A; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 4px rgb(150 214 30 / .35)); }
.st-flow { fill: var(--blue); opacity: .75; filter: drop-shadow(0 0 4px rgb(150 214 30 / .8)); }
.stk { position: absolute; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .24); display: grid; place-items: center;
  background: linear-gradient(180deg, #fff 0%, #fafcf6 100%); border: 1px solid rgb(225 234 245 / .9);
  box-shadow: 0 1px 1px rgb(16 24 40 / .03), 0 14px 34px -14px rgb(40 55 20 / .28), inset 0 1px 0 #fff;
  animation: stfloat 7s ease-in-out infinite; animation-delay: var(--t); transition: box-shadow .5s var(--ease); }
.stk img { width: calc(var(--s) * .44); height: calc(var(--s) * .44); object-fit: contain; }
.stk svg { width: calc(var(--s) * .44); height: calc(var(--s) * .44); }
.stk-green svg { color: #6cc72f; }
.stk-purple svg { color: #8b5cf6; }
.stk-blue svg { color: #5E9408; }
.stk-green-round svg { width: calc(var(--s) * .48); height: calc(var(--s) * .48); padding: 5px; border-radius: 50%; color: var(--ink-0); background: var(--lime); box-sizing: border-box; }
@keyframes stfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.stack-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 210px; width: min(470px, 100% - 32px); margin-inline: auto; }
.stack-orb { width: 107px; height: 107px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-0);
  background: radial-gradient(circle at 50% 35%, #F3FFCC 0%, var(--lime) 50%, var(--lime-lo) 100%);
  box-shadow: 0 0 0 6px rgb(255 255 255 / .7), 0 18px 40px -8px rgb(140 200 20 / .65), inset 0 3px 8px rgb(255 255 255 / .6), inset 0 -6px 14px rgb(50 80 0 / .25); }
.stack-orb svg { width: 54px; height: 54px; }
.stack-orb.in { animation: bob 6s ease-in-out infinite 1s; }
.stack-title { margin-top: 30px; font-size: 40px; line-height: 1.2; letter-spacing: -.035em; font-weight: 600; color: var(--head); }
.stack-sub { margin-top: 12px; font-size: 16px; line-height: 1.2; color: #4b5260; max-width: 450px; }
.stack-actions { margin-top: 26px; }
.stack-mobile { display: none; }
@media (max-width: 959px) {
  .stack { height: auto; padding: 70px 0 80px; }
  .stack-stage { display: none; }
  .stack-copy { padding-top: 0; }
  .stack-title { font-size: 32px; }
  .stack-mobile { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; max-width: 330px; }
  .stm { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-md); animation: stfloat 7s ease-in-out infinite; }
  .stm:nth-child(even) { animation-delay: -2s; }
  .stm img { width: 24px; height: 24px; }
}

/* ---------- Finale + footer ---------- */
/* Footer: continues the lime from the last section, dark ink text on top */
.finale { position: relative; overflow: hidden; color: var(--ink-0); background: linear-gradient(180deg, var(--lime) 0%, #C4F64C 55%, #B8EE3C 100%); }
.footer { position: relative; padding: 40px 0 28px; color: var(--ink-0); }
.f-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgb(21 23 20 / .14); }
.f-brand { display: inline-flex; align-items: center; }
.f-brand .f-logo { height: 46px; margin-left: -7px; }
.f-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ink-0); color: var(--lime); box-shadow: 0 8px 18px -8px rgb(21 23 20 / .5); }
.f-tile svg { width: 26px; height: 21px; }
.f-wordmark { height: 30px; width: auto; aspect-ratio: 1322 / 230; }
.f-social { display: flex; gap: 12px; }
.f-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-0); background: rgb(255 255 255 / .4); transition: background-color .3s, transform .4s var(--ease); }
.f-social a:hover { background: rgb(255 255 255 / .7); transform: translateY(-2px); }
.f-social svg { width: 18px; height: 18px; }
.f-grid { display: grid; gap: 34px; padding: 34px 0; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .f-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.f-reach { grid-column: 1 / -1; }
@media (min-width: 860px) { .f-reach { grid-column: auto; } }
.f-cta { margin-top: 22px; }
.f-headline { font-size: clamp(26px, 3vw, 34px); line-height: 1.08; letter-spacing: -.04em; font-weight: 600; color: var(--ink-0); }
.f-grid h4 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.f-col { display: grid; gap: 10px; align-content: start; }
.f-col a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgb(21 23 20 / .72); transition: color .2s, transform .3s var(--ease); width: fit-content; }
.f-col a:hover { color: var(--ink-0); transform: translateX(3px); }
.f-col img { width: 16px; height: 16px; padding: 2px; border-radius: 4px; background: #fff; box-sizing: content-box; }
.f-contact { display: inline-flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 14px; background: rgb(255 255 255 / .4); border: 1px solid rgb(255 255 255 / .6); transition: background-color .3s; }
.f-contact:hover { background: rgb(255 255 255 / .65); }
.f-contact-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-0); color: var(--lime); }
.f-contact-ico svg { width: 18px; height: 18px; }
.f-contact span:last-child { display: grid; line-height: 1.3; }
.f-contact b { font-size: 14px; }
.f-contact small { font-size: 12px; color: rgb(21 23 20 / .65); }
.f-word { display: block; width: 100%; height: auto; aspect-ratio: 1322 / 230; margin: 26px 0 6px; color: #fff; opacity: .4; -webkit-mask: linear-gradient(180deg, #000 30%, rgb(0 0 0 / .25)); mask: linear-gradient(180deg, #000 30%, rgb(0 0 0 / .25)); }
.f-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: rgb(21 23 20 / .7); padding-top: 16px; }
.f-legal { display: flex; gap: 18px; }
.f-legal a:hover { color: var(--ink-0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .track, .marquee-track { animation: none !important; }
}