:root {
      --ink: #050d1a;
      --ink-2: #0b1a30;
      --navy: #092444;
      --green: #12c79a;
      --green-d: #078b6b;
      --paper: #f5f7fa;
      --white: #fff;
      --text: #0c1b2e;
      --muted: #5d6b7d;
      --muted-d: #9fb0c4;
      --violet: #8b6cff;
      --blue: #3d8bff;
      --peach: #ffb066;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --wa: #25d366;
    }

    * { box-sizing: border-box }
    html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
    body {
      margin: 0;
      background: var(--ink);
      color: var(--white);
      font-family: "Heebo", "Assistant", -apple-system, "SF Pro Display", "Segoe UI", Arial, sans-serif;
      font-size: 17px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }
    a { color: inherit; text-decoration: none }
    img { display: block; max-width: 100% }
    .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto }
    .hero > .wrap, .calc > .wrap, .block > .wrap, .offer > .wrap, .final > .wrap { flex: 0 0 auto }
    .eyebrow {
      display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .04em;
      color: var(--green); margin-bottom: 14px;
    }
    h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.02em }
    .big { font-size: clamp(38px, 7.2vw, 88px); font-weight: 800 }
    .mid { font-size: clamp(32px, 5.4vw, 64px); font-weight: 800 }
    .lead { font-size: clamp(18px, 2.2vw, 24px); color: var(--muted-d); max-width: 34ch; margin: 18px auto 0; line-height: 1.45 }
    .grad {
      background: linear-gradient(100deg, #6ff0cd 0%, #12c79a 35%, #5ab0ff 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 18px;
      border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; cursor: pointer; background: transparent;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
    }
    .btn:hover { transform: translateY(-2px) }
    .btn.wa {
      background: var(--wa); border-color: var(--wa); color: #04210f;
      box-shadow: 0 10px 34px -8px rgba(37, 211, 102, .65);
    }
    .btn.wa:hover { box-shadow: 0 16px 44px -8px rgba(37, 211, 102, .85) }
    .btn.dark { color: var(--text); border-color: rgba(9, 36, 68, .25) }
    .btn svg { width: 22px; height: 22px; flex: none }
    .pulse { animation: pulse 2.6s infinite }
    @keyframes pulse {
      0% { box-shadow: 0 10px 34px -8px rgba(37, 211, 102, .65), 0 0 0 0 rgba(37, 211, 102, .5) }
      70% { box-shadow: 0 10px 34px -8px rgba(37, 211, 102, .65), 0 0 0 18px rgba(37, 211, 102, 0) }
      100% { box-shadow: 0 10px 34px -8px rgba(37, 211, 102, .65), 0 0 0 0 rgba(37, 211, 102, 0) }
    }

    /* ---------- nav ---------- */
    .nav {
      position: fixed; inset: 0 0 auto 0; z-index: 50; height: 54px;
      background: rgba(5, 13, 26, .62); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .nav .wrap { height: 100%; display: flex; align-items: center; gap: 28px }
    .brand { white-space: nowrap; font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 10px }
    .brand i { width: 22px; height: 22px; border-radius: 50% 45% 55% 40%; background: linear-gradient(135deg, #12c79a 50%, #8de0d1 51%) }
    .nav .btn { white-space: nowrap; min-height: 36px; padding: 0 18px; font-size: 14px; margin-inline-start: auto }
    .progress { position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--green); transform-origin: right; transform: scaleX(var(--pg, 0)) }

    /* ---------- hero ---------- */
    .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 90px 0 50px; text-align: center; position: relative; isolation: isolate }
    .hero::before {
      content: ""; position: absolute; inset: -10% -10% auto; height: 90%; z-index: -1;
      background: radial-gradient(50% 55% at 50% 30%, rgba(18, 199, 154, .22), transparent 70%),
        radial-gradient(35% 40% at 80% 20%, rgba(61, 139, 255, .18), transparent 70%);
    }
    .hero .badge {
      display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 14px; color: #d3deea; margin-bottom: 26px;
    }
    .badge b { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .2) }
    .hero h1 { font-size: clamp(44px, 9vw, 116px); font-weight: 900; letter-spacing: -.035em; line-height: 1 }
    .hero p.lead { max-width: 40ch }
    .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px }
    .reassure { margin-top: 18px; font-size: 14px; color: var(--muted-d); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap }
    .reassure span::before { content: "✓"; color: var(--green); margin-inline-end: 6px; font-weight: 800 }

    /* ---------- scenes (scroll-driven) ---------- */
    .scene { position: relative; height: 180vh; --p: 0; --enter: 0; --exit: 0 }
    .scene.short { height: 200vh }
    .stage {
      position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 70px 0 30px; overflow: hidden;
    }
    .zoomer {
      width: 100%;
      transform: scale(calc(.78 + .22 * var(--enter) - .14 * var(--exit)));
      opacity: calc(var(--enter) * (1 - var(--exit)));
      transform-origin: 50% 50%; will-change: transform, opacity;
    }
    .light { background: var(--paper); color: var(--text) }
    .light .lead { color: var(--muted) }
    .light .eyebrow { color: var(--green-d) }
    .dark2 { background: var(--ink-2) }
    .tint-violet { background: radial-gradient(60% 60% at 50% 40%, rgba(139, 108, 255, .22), transparent 70%), var(--ink) }
    .tint-blue { background: radial-gradient(60% 60% at 50% 40%, rgba(61, 139, 255, .2), transparent 70%), var(--ink) }
    .tint-green { background: radial-gradient(60% 60% at 50% 40%, rgba(18, 199, 154, .2), transparent 70%), var(--ink) }
    .tint-peach { background: radial-gradient(60% 60% at 50% 40%, rgba(255, 176, 102, .18), transparent 70%), var(--ink) }

    /* hero visual */
    .scene.hero-visual { height: 380vh }
    .hero-visual .stage { background: var(--ink); padding-top: 40px }
    .hv-card {
      width: min(780px, 92vw); margin: 0 auto; border-radius: 34px; overflow: hidden; position: relative;
      box-shadow: 0 50px 120px -30px rgba(18, 199, 154, .45), 0 0 0 1px rgba(255, 255, 255, .1);
      transform: scale(calc(.62 + .36 * var(--enter) - .1 * var(--exit))); will-change: transform;
    }
    .hv-card img { width: 100%; height: auto; image-rendering: auto }
    .hv-card { container-type: inline-size }
    .hv-2, .hv-3 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
    .hv-card {
      --r1: clamp(0, calc((var(--p) - .13) / .12), 1); --r2: clamp(0, calc((var(--p) - .54) / .09), 1);
      --d: calc(var(--r1) * var(--r1) * (3 - 2 * var(--r1)) * (1 - var(--r2) * var(--r2) * (3 - 2 * var(--r2))));
      filter: grayscale(var(--d))
    }
    .hv-card > img { filter: brightness(calc(1 - .5 * var(--d))) }
    .hv-art svg.hv-arrows { filter: brightness(calc(1 + 1.2 * var(--d))) }
    .hv-card, .hv-h { --m: clamp(0, calc((var(--p) - .18) * 10), 1); --a: clamp(0, calc((var(--p) - .54) * 12), 1); --f: clamp(0, calc((var(--p) - .66) * 10), 1) }
    .hv-2 { opacity: var(--m) } .hv-3 { opacity: var(--f) }
    .hv-sq, .hv-arr { --v: clamp(0, calc((var(--p) - var(--t)) / .07), 1); --e: calc(var(--v) * var(--v) * (3 - 2 * var(--v))) }
    .hv-sq { opacity: var(--e); transform: translate(-50%, calc((1 - var(--e)) * 14px)) scale(calc(.7 + .3 * var(--e))) }
    .hv-arr { opacity: var(--e); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e)) }
    .hv-label b, .hv-tag b { grid-area: 1 / 1; font-weight: inherit }
    .hv-label .lb { opacity: calc(1 - var(--f)); color: #7a2b2b }
    .hv-label .la { opacity: var(--f); color: #07805f }
    .hv-tag { position: absolute; top: calc(100cqw * 22 / 1960); right: calc(100cqw * 30 / 1960); display: grid; font-weight: 800; font-size: calc(100cqw * 34 / 1960); padding: 0; }
    .hv-tag b { padding: calc(100cqw * 10 / 1960) calc(100cqw * 30 / 1960); border-radius: 99px; background: rgba(5, 13, 26, .72); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center }
    .hv-tag .lb { opacity: calc(1 - var(--f)) } .hv-tag .la { opacity: var(--f); background: rgba(7, 128, 95, .9) }

    .hv-art { position: absolute; inset: 0; pointer-events: none }
    .hv-art svg.hv-arrows, .hv-art svg.hv-ai { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
    .hv-sq { --k: calc(100cqw / 1233); position: absolute; left: calc((var(--x) + var(--w) / 2) * var(--k)); top: calc(var(--y) * var(--k)); min-width: calc(var(--w) * var(--k)); width: max-content; height: calc(var(--h) * var(--k));
      box-sizing: border-box; padding: 0 calc(var(--k) * 16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k) * 14);
      background: #fff; border-radius: calc(var(--k) * 38); box-shadow: 0 calc(var(--k) * 6) calc(var(--k) * 24) rgba(90, 100, 140, .16) }
    .hv-ic { flex: none; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)) }
    .hv-ic svg { display: block; width: 100%; height: 100% }
    .hv-ai { opacity: var(--a) } .hv-ai .ai-g { transform-box: view-box; transform-origin: 543px 58px; transform: scale(calc(.12 + .88 * var(--a))) }
    .hv-ai .aura { transform-box: fill-box; transform-origin: center; animation: aura 2.8s ease-in-out infinite }
    .hv-ai .spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: twinkle 2.2s ease-in-out infinite }
    @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg) } 45% { opacity: 1; transform: scale(1.15) rotate(25deg) } 60% { opacity: .9; transform: scale(.9) rotate(35deg) } }
    @media (prefers-reduced-motion: reduce) { .hv-ai .spark { animation: none; opacity: .8 } }
    @keyframes aura { 0%, 100% { transform: scale(.88); opacity: .75 } 50% { transform: scale(1.12); opacity: 1 } }
    .hv-label {
      display: grid; flex: none;
      font-family: "Heebo", "Assistant", Arial, sans-serif; font-weight: 700; color: #141a2e; text-align: center; white-space: nowrap;
      font-size: calc(100cqw * 30 / 1233); line-height: 1.12; pointer-events: none; -webkit-text-size-adjust: none; text-size-adjust: none
    }
    .hv-cap { margin-top: 34px; opacity: calc(var(--enter) * 1.2 - .2) ; transform: translateY(calc((1 - var(--enter)) * 30px)) }
    .hv-h { display: grid } .hv-h h2 { grid-area: 1 / 1 } .hv-h .c1 { opacity: calc(1 - var(--m)) } .hv-h .c2 { opacity: calc(var(--m) * (1 - var(--f))) } .hv-h .c3 { opacity: var(--f) }
    .hv-cap h2 { font-size: clamp(26px, 4vw, 46px); font-weight: 800 }

    /* calculator */
    .calc { scroll-margin-top: 70px; background: var(--paper); color: var(--text); padding: 90px 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center }
    .calc-card {
      background: #fff; border-radius: 36px; padding: clamp(26px, 5vw, 60px); box-shadow: 0 40px 100px -40px rgba(9, 36, 68, .35);
      display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; text-align: start
    }
    .calc-card h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800 }
    .calc-card p { color: var(--muted); margin: 14px 0 0 }
    .slider { margin-top: 26px }
    .slider label { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px }
    .slider output { color: var(--green-d); font-variant-numeric: tabular-nums }
    input[type=range] { width: 100%; accent-color: var(--green-d); height: 28px; direction: ltr }
    .result {
      background: linear-gradient(160deg, #06243f, #04131f); color: #fff; border-radius: 28px; padding: 34px; text-align: center;
    }
    .result small { color: var(--muted-d); font-size: 15px }
    .result .num { font-size: clamp(46px, 7vw, 78px); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; margin: 8px 0 4px }
    .result .yr { color: #8ff0d3; font-weight: 700; margin-bottom: 22px }
    .result .btn { width: 100%; font-size: 17px }
    .fine { font-size: 12.5px; color: var(--muted-d); margin-top: 14px }

    /* process */
    .steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 46px auto 0; padding: 0 20px }
    .step {
      text-align: start; padding: 28px; border-radius: 28px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
      opacity: .35; transform: scale(.94); transition: all .6s var(--ease)
    }
    .step.on { opacity: 1; transform: scale(1); background: rgba(18, 199, 154, .1); border-color: rgba(18, 199, 154, .5) }
    .step .n { font-size: 15px; font-weight: 800; color: var(--green) }
    .step h3 { font-size: 26px; margin: 10px 0 8px; font-weight: 800 }
    .step p { margin: 0; color: var(--muted-d); font-size: 16px }
    .step .ic { font-size: 34px; margin-bottom: 6px }
    .bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); max-width: 1000px; margin: 30px auto 0; width: calc(100% - 40px); overflow: hidden }
    .bar i { display: block; height: 100%; background: var(--green); transform-origin: right; transform: scaleX(clamp(0, calc((var(--p) - .1) * 1.25), 1)) }

    /* flow (leads) */
    .flow { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin: 44px auto 0; padding: 0 20px; max-width: 1100px; flex-wrap: nowrap }
    .node {
      flex: 1; min-width: 0; padding: 22px 10px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
      font-weight: 700; font-size: 16px; opacity: .3; transform: translateY(20px) scale(.92); transition: all .6s var(--ease)
    }
    .node .e { font-size: 34px; display: block; margin-bottom: 8px }
    .node.on { opacity: 1; transform: none; background: linear-gradient(160deg, rgba(18, 199, 154, .22), rgba(18, 199, 154, .05)); border-color: rgba(18, 199, 154, .6) }
    .chev { align-self: center; color: var(--green); font-size: 22px; opacity: .4 }

    /* hub (integrations) */
    .hubwrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; max-width: 880px; margin: 40px auto 0; padding: 0 20px }
    .col { display: grid; gap: 12px }
    .pill {
      padding: 15px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .11);
      font-weight: 700; opacity: .25; transform: translateX(calc(var(--dir, 1) * 40px)) scale(.95); transition: all .6s var(--ease);
    }
    .pill.on { opacity: 1; transform: none }
    .col.l { --dir: 1 } .col.r { --dir: -1 }
    .core {
      width: clamp(92px, 16vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(34px, 6vw, 56px); font-weight: 900;
      background: radial-gradient(circle at 35% 30%, #6ff0cd, #0b8f70 70%); box-shadow: 0 0 0 0 rgba(18, 199, 154, .5), 0 0 90px rgba(18, 199, 154, .55);
      transform: scale(calc(.7 + .3 * clamp(0, var(--p) * 3, 1))); animation: core 3s infinite
    }
    .core.cog { position: relative; background: none; box-shadow: none; animation: none; overflow: visible }
    .core.cog::before { content: ""; position: absolute; inset: -60% -125%; border-radius: 50%; z-index: 0;
      background: radial-gradient(ellipse closest-side, rgba(7, 139, 107, .5) 0%, rgba(7, 139, 107, .28) 35%, rgba(7, 139, 107, .1) 62%, rgba(7, 139, 107, 0) 100%); animation: halo 4s ease-in-out infinite }
    .core.cog .cg-main { position: relative; z-index: 1; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; animation: spin 16s linear infinite }
    /* small cogs: 12 teeth vs 25, same tooth size, spacing and phase computed so the teeth mesh; they turn 25/12 times faster, the other way */
    .sg { position: absolute; top: 50%; width: 58.59%; aspect-ratio: 1; transform: translateY(-50%); z-index: 1; pointer-events: none }
    .sg img { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transform: rotate(var(--s)); animation: spinS 16s linear infinite }
    .sg-a { left: -46.87%; --s: -7.37deg } .sg-b { left: 88.27%; --s: 160.13deg }
    @keyframes spinS { from { transform: rotate(var(--s)) } to { transform: rotate(calc(var(--s) - 750deg)) } }
    @keyframes spin { to { transform: rotate(360deg) } }
    @keyframes halo { 0%, 100% { opacity: .75; transform: scale(.94) } 50% { opacity: 1; transform: scale(1.06) } }
    .core.violet { background: radial-gradient(circle at 35% 30%, #c2b0ff, #5b3bd6 70%); box-shadow: 0 0 90px rgba(139, 108, 255, .65) }
    @keyframes core { 50% { filter: brightness(1.25) } }

    /* content scene */
    .content-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; max-width: 960px; margin: 40px auto 0; padding: 0 20px }
    .content-grid img { border-radius: 26px; box-shadow: 0 30px 80px -20px rgba(255, 176, 102, .35); width: 100% }
    .content-grid .col { text-align: start }


    /* content card (recreated as live HTML) */
    .cc-wrap { container-type: inline-size; width: min(820px, 100%); margin: 28px auto 0; padding: 0 }
    .cc {
      --u: calc(100cqw / 435); position: relative; width: 100%; aspect-ratio: 435 / 245; overflow: hidden;
      border-radius: calc(var(--u) * 12); color: #0d2747; text-align: center;
      background: radial-gradient(60% 80% at 30% 20%, #fff7ee, transparent 70%), linear-gradient(135deg, #ffeedd, #ffe3cb);
      box-shadow: 0 30px 80px -20px rgba(255, 176, 102, .35), 0 0 0 1px rgba(255, 255, 255, .25);
    }
    .cc .a { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h, 0) * var(--u)) }
    .cc-title { font-weight: 800; font-size: calc(var(--u) * 15); line-height: 1.1; letter-spacing: -.01em }
    .cc-sub { font-size: calc(var(--u) * 10.5); color: #27415f; line-height: 1.2 }
    .cc svg.deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
    .cc-video { border-radius: calc(var(--u) * 6); overflow: hidden; box-shadow: 0 0 0 calc(var(--u) * 1.2) #fff, 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(120, 70, 20, .25) }
    .cc-video img { width: 100%; height: 100%; object-fit: cover }
    .cc-play {
      position: absolute; left: 50.4%; top: 61%; width: calc(var(--u) * 50); height: calc(var(--u) * 50); transform: translate(-50%, -50%); border-radius: 50%;
      background: rgba(60, 50, 45, .3); backdrop-filter: blur(calc(var(--u) * 3)); -webkit-backdrop-filter: blur(calc(var(--u) * 3)); border: calc(var(--u) * 2) solid #fff
    }
    .cc-play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: calc(var(--u) * 8) 0 calc(var(--u) * 8) calc(var(--u) * 13); border-color: transparent transparent transparent #fff }
    .cc-wave { background: rgba(255, 255, 255, .75); border-radius: calc(var(--u) * 9); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * 6); direction: ltr }
    .cc-wave i { display: block; width: calc(var(--u) * 1.5); border-radius: 2px; background: #8a94a3 }
    .cc-label { font-size: calc(var(--u) * 9.5); font-weight: 800; color: #0d2747 }
    .cc-pill {
      background: #fff; border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(150, 90, 30, .14);
      display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 10); font-weight: 700; font-size: calc(var(--u) * 10.5);
      opacity: .2; transform: translateX(calc(var(--u) * -14)) scale(.96); transition: all .6s var(--ease)
    }
    .cc-pill.on { opacity: 1; transform: none }
    .cc-ic { width: calc(var(--u) * 16); height: calc(var(--u) * 18); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 3.5); color: #fff; font-weight: 900; font-size: calc(var(--u) * 13) }
    .cc-ic.doc { background: #7467f0 } .cc-ic.list { background: #fff; color: #3d8bff } .cc-ic.quote { background: #fff; color: #ff8a1f; font-size: calc(var(--u) * 26); line-height: .6; padding-top: calc(var(--u) * 6) }
    .cc-ic.play { background: #ef4444 }
    .cc-ic svg { width: 100%; height: 100% }
    .cc-phone {
      position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--u) * 46); height: calc(var(--u) * 84);
      transform: rotate(var(--r, 0deg)); border-radius: calc(var(--u) * 7); background: #fff; padding: calc(var(--u) * 1.6);
      box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 12) rgba(120, 70, 20, .35); opacity: .2; transition: opacity .7s var(--ease), transform .7s var(--ease)
    }
    .cc-phone.on { opacity: 1 }
    .cc-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 5.6); overflow: hidden; background: #222 }
    .cc-screen img { width: 100%; height: 100%; object-fit: cover }
    .cc-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 12, .55) 100%) }
    .cc-notch { position: absolute; top: calc(var(--u) * 2); left: 50%; width: calc(var(--u) * 10); height: calc(var(--u) * 2.4); margin-left: calc(var(--u) * -5); border-radius: 99px; background: #111; z-index: 3 }
    .cc-cap { position: absolute; z-index: 2; left: 6%; right: 6%; top: 52%; color: #fff; font-weight: 900; font-size: calc(var(--u) * 8.4); line-height: 1.12; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .75) }
    .cc-ui { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 5%; display: flex; justify-content: space-between }
    .cc-ui b { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); border-radius: 50%; background: rgba(255, 255, 255, .85) }
    .cc-ui b:nth-child(2) { background: rgba(120, 190, 255, .9) }


    /* checkinner */
    .ci-stage { overflow: clip; position: relative; height: min(52vh, 480px); width: min(1000px, 94vw); margin: 34px auto 0 }
    .ci-stage figure { position: absolute; margin: 0; top: 50%; left: 50%; will-change: transform }
    .ci-stage figure { width: max-content; max-width: none }
    .ci-stage img { max-width: none; flex: none; border-radius: 26px; box-shadow: 0 30px 70px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); height: min(50vh, 460px); width: auto }
    .ci-stage .s1 { transform: translate(calc(-50% + var(--spread) * -0px), -50%) }
    .ci-watch { aspect-ratio: 1 / 1; width: min(46vh, 420px) !important; height: auto }
    .ci-watch img { border-radius: 40px; width: 100%; height: 100%; object-fit: contain; box-shadow: none; background: none }
    .ci-copy { max-width: 780px; margin-inline: auto; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin-top: 22px; padding: 0 20px; color: #cfdbe8; font-weight: 600; font-size: 15px }
    .ci-copy span::before { content: "✓"; color: var(--green); margin-inline-end: 7px }
    .proof-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(18, 199, 154, .12); border: 1px solid rgba(18, 199, 154, .4); color: #8ff0d3; font-size: 14px; font-weight: 700; margin-bottom: 14px }

    /* generic zoom-on-view blocks */
    [data-zoom] { transform: scale(calc(.9 + .1 * var(--z, 1))); opacity: calc(.15 + .85 * var(--z, 1)); will-change: transform, opacity }
    section.block { padding: 100px 0; position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center }
    .block.light { background: var(--paper) }
    .block .head { text-align: center; margin-bottom: 54px }

    /* services */
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1040px; margin: 34px auto 0; padding: 0 20px }
    .card {
      background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 20px 50px -30px rgba(9, 36, 68, .3); text-align: start;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease)
    }
    .card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(9, 36, 68, .4) }
    .card .ic { font-size: 36px; margin-bottom: 14px }
    .card h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px }
    .card p { margin: 0; color: var(--muted); font-size: 16px }
    .card .res { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6edf3; font-weight: 700; color: var(--green-d); font-size: 15px }

    /* offer */
    .offer { background: var(--ink); padding: 100px 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center }
    .offer-box {
      border-radius: 40px; padding: clamp(28px, 6vw, 70px); text-align: center; position: relative; overflow: hidden;
      background: radial-gradient(70% 90% at 50% 0%, rgba(18, 199, 154, .28), transparent 70%), linear-gradient(180deg, #0a2136, #06111f);
      border: 1px solid rgba(18, 199, 154, .35)
    }
    .gift { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 640px; margin: 30px auto }
    .gift div { text-align: start; padding: 12px 20px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-weight: 700; font-size: 16px }
    .gift div::before { content: "✓"; color: var(--green); margin-inline-end: 8px }

    /* faq */
    .faq { max-width: 760px; margin: 0 auto }
    details { border-bottom: 1px solid #dde5ec; padding: 22px 4px }
    summary { font-size: 20px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; color: var(--text) }
    summary::-webkit-details-marker { display: none }
    summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--green-d); transition: transform .3s }
    details[open] summary::after { transform: rotate(45deg) }
    details p { margin: 12px 0 0; color: var(--muted); max-width: 60ch }

    /* final cta */
    .final { background: var(--ink); text-align: center; padding: 100px 0 110px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; isolation: isolate }
    .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 50% at 50% 60%, rgba(18, 199, 154, .25), transparent 70%) }
    .form {
      display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; max-width: 760px; margin: 36px auto 0
    }
    .form input {
      height: 56px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 22px; font: inherit; font-size: 17px;
      outline: none; transition: border-color .2s, background .2s
    }
    .form input::placeholder { color: #8ea1b7 }
    .form input:focus { border-color: var(--green); background: rgba(255, 255, 255, .1) }
    .or { margin: 26px 0 8px; color: var(--muted-d) }
    .contact-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
    .contact-row a { padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-weight: 600; transition: background .2s }
    .contact-row a:hover { background: rgba(255, 255, 255, .08) }
    footer { background: #030811; color: #6d7f94; text-align: center; font-size: 13px; padding: 28px 20px 110px }

    /* floating + sticky */
    .fab {
      position: fixed; z-index: 60; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%;
      background: var(--wa); display: grid; place-items: center; box-shadow: 0 14px 40px -6px rgba(37, 211, 102, .7);
      transform: scale(0); transition: transform .5s var(--ease)
    }
    .fab.show { transform: scale(1) }
    .fab svg { width: 34px; height: 34px; fill: #fff }
    .fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: ring 2.4s infinite }
    @keyframes ring { from { transform: scale(1); opacity: .7 } to { transform: scale(1.6); opacity: 0 } }
    .sticky-bar {
      display: none; position: fixed; z-index: 55; inset: auto 0 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: rgba(5, 13, 26, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, .1);
      transform: translateY(110%); transition: transform .5s var(--ease)
    }
    .sticky-bar.show { transform: none }
    .sticky-bar .btn { width: 100%; min-height: 50px }

    /* entrance reveal */
    .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
    .rv.in { opacity: 1; transform: none }


    /* ---------- services list: one demo pops up per item while you scroll ---------- */
    #services { height: 720vh; --any: max(var(--v0), var(--v1), var(--v2), var(--v3), var(--v4), var(--v5));
      --q0: clamp(0, calc((var(--p) - 0.1) / 0.118), 1); --v0: min(clamp(0, calc(var(--q0) / .22), 1), clamp(0, calc((1 - var(--q0)) / .22), 1));
      --q1: clamp(0, calc((var(--p) - 0.218) / 0.19), 1); --v1: min(clamp(0, calc(var(--q1) / .22), 1), clamp(0, calc((1 - var(--q1)) / .22), 1));
      --q2: clamp(0, calc((var(--p) - 0.408) / 0.118), 1); --v2: min(clamp(0, calc(var(--q2) / .22), 1), clamp(0, calc((1 - var(--q2)) / .22), 1));
      --q3: clamp(0, calc((var(--p) - 0.526) / 0.118), 1); --v3: min(clamp(0, calc(var(--q3) / .22), 1), clamp(0, calc((1 - var(--q3)) / .22), 1));
      --q4: clamp(0, calc((var(--p) - 0.644) / 0.118), 1); --v4: min(clamp(0, calc(var(--q4) / .22), 1), clamp(0, calc((1 - var(--q4)) / .22), 1));
      --q5: clamp(0, calc((var(--p) - 0.762) / 0.118), 1); --v5: min(clamp(0, calc(var(--q5) / .22), 1), clamp(0, calc((1 - var(--q5)) / .22), 1)); }
    #services .card { opacity: calc(1 - .7 * (var(--any) - var(--mine))); transition: none }
    #services .card > * { opacity: clamp(0, calc(1 - var(--mine) * 2.6), 1) }
    .pop {
      position: absolute; left: 50%; top: 50%; z-index: 5; width: min(980px, calc(100% - 28px)); transform: translate(-50%, -50%);
      text-align: center; color: #fff; pointer-events: none; opacity: clamp(0, calc(var(--v) * 60), 1);
    }
    .pop-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 30px; background: radial-gradient(90% 60% at 50% 0%, rgba(18, 199, 154, .18), transparent 70%), rgba(6, 18, 36, .97);
      border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 50px 120px -20px rgba(0, 0, 0, calc(.7 * var(--v))) }
    .pop-bg::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: clamp(0, calc(1 - var(--v) * 2.4), 1) }
    .pop-inner { position: relative; z-index: 1; max-height: calc(100vh - 92px); max-height: calc(100svh - 92px); overflow: hidden; padding: 24px clamp(14px, 3vw, 34px) 26px; opacity: clamp(0, calc((var(--v) - .5) * 2.6), 1) }
    .pop .eyebrow { margin-bottom: 6px }
    .pop-t { font-size: clamp(22px, 3.4vw, 40px); font-weight: 800; line-height: 1.1 }
    .pop-lead { font-size: clamp(13px, 1.5vw, 17px); color: var(--muted-d); max-width: 56ch; margin: 10px auto 0; line-height: 1.45 }
    .pop .flow { margin-top: 22px; padding: 0 }
    .pop .hubwrap { margin: 18px auto 0; padding: 0 }
    .pop .hubwrap .core { width: clamp(64px, 8vw, 96px); font-size: clamp(26px, 3.4vw, 40px) }
    .pop .cc-wrap { margin-top: 16px; width: min(100%, calc((100svh - 260px) * 1.775)) }
    .pop .ci-stage { height: min(34svh, 300px); margin-top: 14px; width: min(860px, 100%) }
    .pop .ci-stage img { height: min(32svh, 280px); border-radius: 18px }
    .pop .ci-watch { width: min(26svh, 240px) !important }
    .pop .ci-copy { margin-top: 12px; padding: 0; font-size: 14px }

    /* spreadsheet -> cogs -> spreadsheet */
    .sheet-wrap { --cw: clamp(64px, 7.5vw, 92px); display: grid; grid-template-columns: 1fr calc(var(--cw) * 1.95) 1fr; gap: 14px; align-items: center; margin: 18px auto 0 }
    .pop .sheet-wrap .core.cog { width: var(--cw); justify-self: center }
    .sheet { background: #fff; color: #0c1b2e; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -25px rgba(0, 0, 0, .8); text-align: start; font-size: 13px }
    .sheet .bar2 { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: #1d6f42; color: #fff; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden }
    .sheet .bar2 i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .5) }
    .sheet .row { display: grid; grid-template-columns: 1.2fr 1.3fr 1.2fr; padding: 8px 12px; border-bottom: 1px solid #e8eef3; gap: 8px }
    .sheet .row.h { background: #f1f5f8; font-weight: 800; color: #526277; font-size: 12px }
    .sheet .row.r { opacity: .18; transform: translateY(8px); transition: all .5s var(--ease) }
    .sheet .row.r.on { opacity: 1; transform: none }
    .sheet .tag { display: inline-block; padding: 1px 9px; border-radius: 99px; background: #e3f8ef; color: #07805f; font-weight: 700; font-size: 11.5px; white-space: nowrap }
    .sheet.manual .row.r { opacity: 1; transform: none }
    .sheet.manual .row .x { color: #c0392b; font-weight: 700; font-size: 12px }
    .sheet.manual { filter: saturate(.6) }
    .sheet-cap { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted-d); text-align: center }
    .sheet-note { margin: 14px auto 0; max-width: 620px; color: var(--muted-d); font-size: 13.5px }
    .sheet-note b { color: #fff }

    /* avatar before / after sweep */
    .av { --r: clamp(0, calc((var(--p) - .22) * 2), 1) }
    .av-frame { --ar: .8; position: relative; aspect-ratio: var(--ar); height: min(40svh, 380px); margin: 16px auto 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(139, 108, 255, .6), 0 0 0 1px rgba(255, 255, 255, .14) }
    .av-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
    .av-after { clip-path: inset(0 0 0 calc((1 - var(--r)) * 100%)) }
    .av-scan { position: absolute; top: 0; bottom: 0; right: calc(var(--r) * 100%); width: 3px; background: linear-gradient(180deg, transparent, #c2b0ff, transparent); box-shadow: 0 0 24px 6px rgba(139, 108, 255, .7); opacity: calc(var(--r) * (1 - var(--r)) * 4) }
    .av-tag { position: absolute; bottom: 12px; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(5, 13, 26, .55); border: 1px solid rgba(255, 255, 255, .2) }
    .av-tag.b { left: 12px; opacity: calc(1 - var(--r) * 1.6) } .av-tag.a { right: 12px; opacity: calc(var(--r) * 1.6 - .6); color: #d6c9ff }
    .av-note { margin-top: 10px; font-size: 12px; color: var(--muted-d) }

    /* ---------- responsive ---------- */
    @media (max-width: 860px) {
      .nav .btn { margin-inline-start: auto }
      /* calculator: fits one phone screen (sticky bar + nav excluded) without scrolling; sizes follow the viewport height */
      .calc { padding: 62px 0 84px }
      .calc-card { grid-template-columns: 1fr; padding: 14px; border-radius: 22px; gap: clamp(8px, 1.6vh, 14px) ; gap: clamp(8px, 1.6svh, 14px) }
      .calc-card .eyebrow { font-size: 13px; margin-bottom: 2px }
      .calc-card h2 { font-size: clamp(20px, 3.4vh, 27px); font-size: clamp(20px, 3.4svh, 27px); line-height: 1.1 }
        .calc-card p { font-size: clamp(13px, 1.9vh, 15px); font-size: clamp(13px, 1.9svh, 15px); margin-top: clamp(3px, .8vh, 8px); margin-top: clamp(3px, .8svh, 8px); line-height: 1.35 }
      .slider { margin-top: clamp(6px, 1.4vh, 12px) ; margin-top: clamp(6px, 1.4svh, 12px) } .slider label { font-size: clamp(13px, 1.9vh, 15px); font-size: clamp(13px, 1.9svh, 15px); margin-bottom: 0; gap: 10px; line-height: 1.25 } input[type=range] { height: 24px }
      .result { padding: clamp(12px, 2vh, 18px) 14px; padding: clamp(12px, 2svh, 18px) 14px; border-radius: 18px } .result small { font-size: 13px }
      .result .num { font-size: clamp(32px, 6vh, 46px); font-size: clamp(32px, 6svh, 46px); margin: 0 } .result .yr { font-size: 14px; margin-bottom: clamp(8px, 1.6vh, 14px) ; margin-bottom: clamp(8px, 1.6svh, 14px) }
      .result .btn { min-height: 46px; font-size: 15px } .fine { font-size: 12px; margin-top: clamp(6px, 1.2vh, 10px); margin-top: clamp(6px, 1.2svh, 10px); line-height: 1.3 }
      .cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px } .card { padding: 14px } .card .ic { font-size: 26px; margin-bottom: 6px } .card h3 { font-size: 15px; margin: 0 } .card p, .card .res { display: none }
      .steps3 { grid-template-columns: 1fr; gap: 10px; margin-top: 26px }
      .step { padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px }
      .step .ic { grid-row: span 3; font-size: 30px; margin: 0 }
      .step h3 { font-size: 20px; margin: 2px 0 } .step p { font-size: 14px }
      .flow { flex-direction: column; gap: 6px; margin-top: 22px }
      .node { display: flex; align-items: center; gap: 12px; text-align: start; padding: 10px 16px; font-size: 15px; transform: translateX(30px) }
      .node .e { font-size: 24px; margin: 0 } .chev { display: none }
      .hubwrap { grid-template-columns: 1fr; gap: 14px; margin-top: 20px }
      .hubwrap .core { margin: 0 auto; width: 76px; font-size: 28px }
      .col .pill { text-align: center }
      .col { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px } .pill { width: calc(50% - 4px); padding: 11px 12px; font-size: 14px; opacity: 0 }
      .gift { grid-template-columns: 1fr }
      .content-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 22px }
      .scene.hero-visual { height: 520vh } .scene { height: 250vh } .stage { padding-top: 64px; padding-bottom: 86px }
      .sticky-bar { display: block }
      .fab { display: none }
      .form { grid-template-columns: 1fr }
      .btn { font-size: 17px }
      section.block { padding: 84px 0 }
      .hero { padding-top: 80px }
      #services { height: 1000vh }
      .pop-inner { padding: 16px 12px 16px } .pop-bg { border-radius: 22px } .pop-lead { margin-top: 6px; font-size: 15px; font-size: clamp(14px, 2svh, 16px) } .pop .eyebrow { font-size: 13px; margin-bottom: 2px }
      .pop .flow { margin-top: 12px } .pop .node { padding: 8px 12px; font-size: 15px } .pop .node .e { font-size: 22px }
      .pop .hubwrap { margin-top: 10px; gap: 8px } .pop .hubwrap .core { width: 60px; font-size: 24px } .pop .col .pill { padding: 9px 8px; font-size: 15px }
      .sheet-wrap { --cw: 64px; grid-template-columns: 1fr; gap: 4px; margin-top: 10px } .pop .sheet-wrap .core.cog { margin: 2px auto } .sheet { font-size: 14px } .sheet .row { padding: 5px 10px } .sheet .row.h { font-size: 13px } .sheet.manual .row .x { font-size: 13px } .sheet .tag { font-size: 13px } .sheet .bar2 { padding: 7px 10px; font-size: 13px } .sheet.manual .row:nth-child(n+5) { display: none }
      .sheet-cap { font-size: 14px; margin-top: 4px } .sheet-note { display: none } .pop .cc-wrap { margin-top: 10px; width: 100% }
      .pop .ci-stage { height: 30svh; margin-top: 8px } .pop .ci-stage img { height: 28svh } .pop .ci-watch { width: min(24svh, 60vw) !important } .pop .ci-copy { font-size: 14.5px; margin-top: 8px } .pop .ci-copy span:nth-child(n+3) { display: none }
      .av-frame { height: 34svh; margin-top: 10px } .av-tag { font-size: 13px } .av-note { font-size: 14px }
    }
    @media (max-width: 520px) { .hero { padding-top: 110px } }

    @media (max-height: 720px) {
      .hero { padding: 70px 0 24px } .hero h1 { font-size: clamp(36px, 7vw, 76px) } .hero .badge { margin-bottom: 14px } .hero .lead { margin-top: 10px } .cta-row { margin-top: 18px } .reassure { margin-top: 12px }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto }
      .pop { position: relative; left: auto; top: auto; transform: none; opacity: 1; margin: 22px auto } .pop-inner { max-height: none; opacity: 1 } .pop-bg::after { display: none } #services { height: auto } #services .card { opacity: 1; transform: none }
      .scene { height: auto } .stage { position: static; height: auto; min-height: 0; padding: 90px 0 }
      .zoomer, .hv-card, [data-zoom], .hv-cap { transform: none !important; opacity: 1 !important }
      .step, .node, .pill { opacity: 1 !important; transform: none !important }
      .pulse, .core, .fab::after, .core.cog .cg-main, .sg img, .core.cog::before { animation: none }
      .rv { opacity: 1; transform: none }
    }

/* ---------- left-to-right pages (English): only what depends on reading direction ---------- */
html[dir="ltr"] .progress, html[dir="ltr"] .bar i { transform-origin: left }
html[dir="ltr"] .col.l { --dir: -1 } html[dir="ltr"] .col.r { --dir: 1 }
html[dir="ltr"] .cc-pill { justify-content: flex-start; text-align: left }
@media (max-width: 860px) { html[dir="ltr"] .node:not(.on) { transform: translateX(-30px) } }
@media (max-width: 420px) { .brand { font-size: 16px; gap: 7px } .nav .btn { padding: 0 12px; font-size: 13px; gap: 6px } .nav .wrap { gap: 10px } }

/* ---------- copy is filled in by site.js ---------- */
span[data-i18n] { display: contents }
html:not(.i18n-ready) body { visibility: hidden }
@media (max-width: 860px) and (max-height: 700px) { .calc-card p, .fine { display: none } }

/* ---------- phones: larger text ---------- */
@media (max-width: 520px) {
  .nav .btn { font-size: 14px }
  .hero .badge { font-size: 15px } .reassure { font-size: 15px } footer { font-size: 14px }
  .step p { font-size: 15px }
  /* hero card: edge to edge; the squares size themselves to their (larger) text, arrows are re-aimed in site.js */
  .hv-card { width: calc(100vw - 12px) }
  .hv-label { font-size: calc(100cqw * 38 / 1233) }
  .hv-sq { padding: 0 calc(var(--k) * 10) }
  .hv-sq:nth-of-type(2) { left: calc((var(--x) + var(--w) / 2 + 10) * var(--k)) }
  .hv-tag { font-size: calc(100cqw * 64 / 1960); top: calc(100cqw * 30 / 1960); right: calc(100cqw * 40 / 1960) }
  /* reels card: one 270-unit column (video + waveform, the four pills, the three phones), drawn about 1.3x larger than on desktop */
  .cc { --u: calc(100cqw / 270); aspect-ratio: 270 / 378 }
  .cc svg.deco { display: none }
  .cc .cc-title, .cc .cc-sub { --x: 0 !important; --w: 270 !important }
  .cc .cc-title { --y: 8 !important } .cc .cc-sub { --y: 34 !important }
  .cc .cc-video { --x: 10 !important; --y: 58 !important; --w: 118 !important; --h: 68 !important }
  .cc .cc-wave { --x: 134 !important; --y: 58 !important; --w: 126 !important; --h: 34 !important }
  .cc .cc-label { --x: 134 !important; --y: 98 !important; --w: 126 !important }
  .cc > .cc-pill { --x: 10 !important; --w: 250 !important; --h: 32 !important }
  .cc > .cc-pill:nth-child(7) { --y: 134 !important } .cc > .cc-pill:nth-child(8) { --y: 171 !important }
  .cc > .cc-pill:nth-child(9) { --y: 208 !important } .cc > .cc-pill:nth-child(10) { --y: 245 !important }
  .cc .cc-phone { width: calc(var(--u) * 54); height: calc(var(--u) * 92) }
  .cc > .cc-phone:nth-child(11) { --x: 20 !important; --y: 282 !important } .cc > .cc-phone:nth-child(12) { --x: 108 !important; --y: 282 !important } .cc > .cc-phone:nth-child(13) { --x: 196 !important; --y: 282 !important }
  .cc .cc-cap { font-size: calc(var(--u) * 8.6) }
  .cc-title { font-size: calc(var(--u) * 15) } .cc-sub { font-size: calc(var(--u) * 11.5) } .cc-label { font-size: calc(var(--u) * 10.5) } .cc-pill { font-size: calc(var(--u) * 12) }
}
}
@media (max-width: 860px) { .sheet .row { grid-template-columns: .9fr 1.15fr 1.45fr } .sheet .row span { white-space: nowrap } }
@media (max-width: 860px) and (max-height: 700px) { .pop .sheet-cap { display: none } .pop[data-steps=".sheet.auto .r"] .pop-lead { display: none } }

/* ---------- staged reveal inside a popup: parts appear one after another as you scroll ---------- */
.pop [data-at] { opacity: 0; translate: 0 14px; scale: .97; transition: opacity .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease) }
.pop [data-at].on { opacity: 1; translate: 0 0; scale: 1 }
.sheet.auto .row.r[data-at] { opacity: 0; transform: translateY(8px) }
.sheet.auto .row.r[data-at].on { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .pop [data-at], .sheet.auto .row.r[data-at] { opacity: 1; translate: none; scale: none; transform: none } }

/* ---------- "scroll down" hint: appears after a few idle seconds, gone while scrolling ---------- */
.hint {
  position: fixed; left: 50%; bottom: 24px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 58; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 6px;
  border-radius: 999px; background: rgba(5, 13, 26, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; pointer-events: none;
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .45s var(--ease), transform .45s var(--ease), bottom .3s var(--ease);
}
.hint.show { opacity: 1; transform: translate(-50%, 0) }
.hint svg { width: 22px; height: 22px; color: var(--green); animation: hint-jump 1.3s ease-in-out infinite }
@keyframes hint-jump { 0%, 100% { transform: translateY(-2px) } 50% { transform: translateY(5px) } }
/* phones: lift it above the sticky CTA bar, but only while that bar is on screen */
@media (max-width: 860px) { html.has-sbar .hint { bottom: 88px } }
@media (prefers-reduced-motion: reduce) { .hint svg { animation: none } }