/** Shopify CDN: Minification failed

Line 2499:0 Unexpected "}"

**/

  :root {
    --navy: #38353E;
    --purple: #7C1FE0;
    --purple-deep: #5E17B0;
    --purple-text: #BE93EC;
    --teal: #62EFE8;
    --teal-deep: #2FC7C0;
    --ink: #F1EEF7;
    --muted: #AEA8C2;
    --line: rgba(255,255,255,0.14);
    --lavender: #241F38;
    --mint: #15302E;
    --surface: rgba(255,255,255,0.055);
    --bg: #0C0A14;
    --card: rgba(255,255,255,0.06);
  }
  html { color-scheme: dark; }
  body { position: relative; }
  body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background:#0C0A14; }
  footer { background: rgba(12,10,20,0.6) !important; }
  .footer-social a { background: rgba(255,255,255,0.06) !important; border-color: var(--line) !important; }
  .footer-social a:hover { background: rgba(255,255,255,0.12) !important; }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  /* Scroll-reveal animations */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger.is-visible > * {
    animation: revealStaggerItem .6s cubic-bezier(.22,.61,.36,1) both;
  }
  .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: .02s; }
  .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: .09s; }
  .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: .16s; }
  .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: .23s; }
  .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: .30s; }
  .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: .37s; }
  @keyframes revealStaggerItem {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .stat-bar-num { display: inline-block; }

  /* Hero entrance animation (plays once on load, not scroll-triggered) */
  .hero-anim {
    opacity: 0;
    transform: translateY(16px);
    animation: heroFadeUp .7s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero-anim.d1 { animation-delay: .05s; }
  .hero-anim.d2 { animation-delay: .15s; }
  .hero-anim.d3 { animation-delay: .25s; }
  .hero-anim.d4 { animation-delay: .35s; }
  .hero-anim.d5 { animation-delay: .45s; }
  .hero-anim.d6 { animation-delay: .55s; }
  @keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Pulsing dot on the "New:" badge */
  .hero-badge::before { animation: badgePulse 2.2s ease-in-out infinite; }
  @keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47,199,192,.55); }
    50% { box-shadow: 0 0 0 5px rgba(47,199,192,0); }
  }

  /* Slow-spinning orbit rings on the case-card illustration */
  .orbit-ring.r1 { animation: spinCW 18s linear infinite; }
  .orbit-ring.r2 { animation: spinCCW 13s linear infinite; }
  @keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes spinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
  .orbit-icon { animation: orbitFloat 3.6s ease-in-out infinite; }
  .orbit-icon.i2 { animation-delay: .3s; }
  .orbit-icon.i3 { animation-delay: .6s; }
  .orbit-icon.i4 { animation-delay: .9s; }
  @keyframes orbitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  .orbit-icon.i1 { animation-name: orbitFloatX1; }
  .orbit-icon.i4 { animation-name: orbitFloatX4; }
  @keyframes orbitFloatX1 { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
  @keyframes orbitFloatX4 { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
  .orbit-center { animation: centerPulse 2.6s ease-in-out infinite; }
  @keyframes centerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  /* Gentle float on the hex "40 signups" illustration */
  .hex-shape { animation: hexFloat 3.2s ease-in-out infinite; }
  @keyframes hexFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
  }

  /* ---------- Autoplaying "how it works" demo loop (replaces the video placeholder) ---------- */
  .demo-loop {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .demo-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
  }
  .demo-scene-1 { animation: demoScene1 13s ease-in-out infinite; }
  .demo-scene-2 { animation: demoScene2 13s ease-in-out infinite; }
  .demo-scene-3 { animation: demoScene3 13s ease-in-out infinite; }
  .demo-scene-4 { animation: demoScene4 13s ease-in-out infinite; }
  @keyframes demoScene1 { 0%{opacity:0} 2%{opacity:1} 21%{opacity:1} 24%{opacity:0} 100%{opacity:0} }
  @keyframes demoScene2 { 0%{opacity:0} 24%{opacity:0} 27%{opacity:1} 46%{opacity:1} 49%{opacity:0} 100%{opacity:0} }
  @keyframes demoScene3 { 0%{opacity:0} 49%{opacity:0} 52%{opacity:1} 71%{opacity:1} 74%{opacity:0} 100%{opacity:0} }
  @keyframes demoScene4 { 0%{opacity:0} 74%{opacity:0} 77%{opacity:1} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }

  .demo-label { font-size: 13.5px; font-weight: 700; color: #E7E5ED; }
  .demo-sublabel { font-size: 12px; color: #8E8C94; margin-top: -8px; }

  .demo-progress { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; z-index: 2; }
  .demo-progress span { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.16); }
  .demo-progress span:nth-child(1) { animation: demoDot 13s ease-in-out infinite; }
  .demo-progress span:nth-child(2) { animation: demoDot 13s ease-in-out infinite; animation-delay: -3.25s; }
  .demo-progress span:nth-child(3) { animation: demoDot 13s ease-in-out infinite; animation-delay: -6.5s; }
  .demo-progress span:nth-child(4) { animation: demoDot 13s ease-in-out infinite; animation-delay: -9.75s; }
  @keyframes demoDot { 0%{background:rgba(255,255,255,0.16)} 2%{background:var(--teal)} 21%{background:var(--teal)} 24%{background:rgba(255,255,255,0.16)} 100%{background:rgba(255,255,255,0.16)} }

  /* Scene 1: building the page */
  .demo-real-fill { padding: 0 !important; overflow: hidden; background: #000; }
  .demo-real-video-fill { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
  @media (max-width: 780px) { .demo-real-video-fill { min-height: 220px; } }
  .demo-builder { width: 100%; max-width: 220px; background: #17171B; border: 1px solid #2C2C32; border-radius: 12px; padding: 12px; }
  .demo-builder-top { display: flex; gap: 4px; margin-bottom: 10px; }
  .demo-builder-top span { width: 6px; height: 6px; border-radius: 50%; background: #3A3A42; }
  .demo-builder-bar { height: 9px; border-radius: 4px; background:var(--teal); margin-bottom: 7px; animation: demoBarGrow 3s ease-in-out infinite; transform-origin: left; }
  .demo-builder-bar.b1 { width: 92%; animation-delay: 0s; }
  .demo-builder-bar.b2 { width: 68%; animation-delay: .35s; }
  .demo-builder-bar.b3 { width: 80%; animation-delay: .7s; }
  .demo-builder-bar.b4 { width: 46%; animation-delay: 1.05s; margin-bottom: 0; }
  @keyframes demoBarGrow { 0%{ transform: scaleX(0); opacity:0; } 20%{ transform: scaleX(1); opacity:1; } 100%{ transform: scaleX(1); opacity:1; } }

  /* Scene 2: publishing */
  .demo-browser { width: 100%; max-width: 230px; background: #17171B; border: 1px solid #2C2C32; border-radius: 12px; overflow: hidden; }
  .demo-browser-top { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #2C2C32; }
  .demo-browser-top span { width: 6px; height: 6px; border-radius: 50%; background: #3A3A42; }
  .demo-browser-url { flex: 1; height: 16px; border-radius: 5px; background: #0F0F12; margin-left: 4px; font-size: 9.5px; color: #6E6E76; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; }
  .demo-browser-url span { display: inline-block; width: auto; height: auto; border-radius: 0; background: none; animation: demoTypeUrl 3s steps(24) infinite; overflow: hidden; white-space: nowrap; }
  @keyframes demoTypeUrl { 0%{ width: 0; } 40%{ width: 15ch; } 100%{ width: 15ch; } }
  .demo-browser-body { padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .demo-live-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(98,239,232,0.14); border: 1px solid rgba(47,199,192,0.4); color: var(--teal); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; animation: demoPop 3s ease-in-out infinite; }
  @keyframes demoPop { 0%,30%{ transform: scale(0); opacity:0; } 45%{ transform: scale(1.1); opacity:1; } 55%{ transform: scale(1); } 100%{ transform: scale(1); opacity:1; } }

  /* Scene 3: customer enters */
  .demo-phone { width: 118px; height: 170px; background: #17171B; border: 2px solid #2C2C32; border-radius: 20px; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; position: relative; }
  .demo-phone-field { height: 15px; border-radius: 5px; background: #0F0F12; border: 1px solid #2C2C32; }
  .demo-phone-btn { height: 18px; border-radius: 999px; background: var(--teal); margin-top: 4px; animation: demoBtnPulse 3s ease-in-out infinite; }
  @keyframes demoBtnPulse { 0%,55%{ box-shadow: 0 0 0 0 rgba(98,239,232,0.5); } 62%{ box-shadow: 0 0 0 7px rgba(98,239,232,0); } 100%{ box-shadow: 0 0 0 0 rgba(98,239,232,0); } }
  .demo-cursor { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--purple-text); animation: demoCursorMove 3s ease-in-out infinite; }
  @keyframes demoCursorMove {
    0%   { top: 24px; left: 20px; opacity: 0; }
    8%   { opacity: 1; }
    30%  { top: 24px; left: 70px; }
    50%  { top: 46px; left: 70px; }
    65%  { top: 106px; left: 55px; }
    85%  { top: 106px; left: 55px; opacity: 1; }
    100% { top: 106px; left: 55px; opacity: 0; }
  }

  /* Scene 4: winner */
  .demo-prize-icon { width: 56px; height: 56px; border-radius: 50%; background:var(--teal); display: flex; align-items: center; justify-content: center; animation: demoBounce 1.4s ease-in-out infinite; }
  @keyframes demoBounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }
  .demo-confetti { position: absolute; inset: 0; pointer-events: none; }
  .demo-confetti span { position: absolute; top: -8px; width: 6px; height: 6px; border-radius: 2px; opacity: 0; animation: demoFall 2.4s ease-in infinite; }
  .demo-confetti span:nth-child(1) { left: 18%; background: var(--teal); animation-delay: .1s; }
  .demo-confetti span:nth-child(2) { left: 32%; background: var(--purple); animation-delay: .4s; }
  .demo-confetti span:nth-child(3) { left: 50%; background: #fff; animation-delay: .05s; }
  .demo-confetti span:nth-child(4) { left: 65%; background: var(--teal-deep); animation-delay: .5s; }
  .demo-confetti span:nth-child(5) { left: 80%; background: var(--purple-text); animation-delay: .25s; }
  @keyframes demoFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(140px) rotate(200deg); opacity: 0; }
  }

  /* Card lift on hover */
  .case-card { transition: transform .25s ease, box-shadow .25s ease; }
  .case-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23,21,28,0.10); }
  .toolkit-row { transition: transform .2s ease, background .2s ease; }
  .toolkit-row:hover { transform: translateX(3px); background: var(--surface); }
  .tool-card { transition: transform .25s ease, box-shadow .25s ease; }
  .tool-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(23,21,28,0.08); }

  /* Button press feedback */
  .btn:active { transform: translateY(0) scale(.97); }
  .expand-btn:active { transform: scale(.92); }

  /* Modal: smoother fade for the backdrop */
  .modal-backdrop { transition: opacity .2s ease; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-stagger > *, .hero-anim,
    .orbit-ring, .orbit-icon, .orbit-center, .hex-shape {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
    .demo-scene, .demo-progress span, .demo-builder-bar, .demo-browser-url span,
    .demo-live-badge, .demo-phone-btn, .demo-cursor, .demo-prize-icon, .demo-confetti span {
      animation: none !important;
    }
    .demo-scene { opacity: 0 !important; }
    .demo-scene-1 { opacity: 1 !important; }
    .demo-cursor, .demo-confetti span { opacity: 0 !important; }
    .demo-browser-url span { width: 15ch !important; }
    .demo-builder-bar { transform: scaleX(1) !important; opacity: 1 !important; }
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
  }

  a { color: inherit; }
  img { max-width: 100%; }

  h1, h2, h3, .display {
    font-family: 'Outfit', 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* ---------- Header ---------- */
  header {
    background: rgba(12,10,20,0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .brand-logo-img {
    height: 44px;
    width: auto;
    display: block;
  }
  .brand-logo-img-sm {
    height: 28px;
  }
  .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .header-nav a {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  .header-nav a:hover { color: var(--ink); }
  @media (max-width: 760px) {
    .header-nav { display: none; }
  }
  .header-row .btn-primary {
    background: rgba(98, 239, 232, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(47, 199, 192, 0.5);
    color: var(--ink);
  }
  .header-row .btn-primary:hover { background: rgba(98, 239, 232, 0.5); }
  .link-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line);
  }
  .link-cta:hover { text-decoration-color: var(--ink); }

  /* ---------- Hero (centered, Variant A) ---------- */
  .hero-a {
    padding: 60px 0 56px;
    text-align: center;
  }
  @media (max-width: 760px) { .hero-a { padding: 50px 0 36px; } }

  .eyebrow-line {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 16px;
    font-weight: 500;
  }
  .eyebrow-line.centered { text-align: center; }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px 7px 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 22px;
  }
  .hero-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal-deep);
    flex-shrink: 0;
  }
  .hero-badge span { color: var(--purple-text); font-weight: 700; }

  .hero-a-h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.08;
    margin: 0 auto 20px;
    max-width: 780px;
  }
  .hero-a-h1 .accent { color: var(--purple-text); }

  .hero-a-sub {
    font-size: 17.5px;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 28px;
  }

  .hero-ctas.centered {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero-a-trust {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13.5px;
  }

  .logo-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 44px;
    padding: 28px 0;
    text-align: center;
  }
  .logo-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
  }
  .logo-item {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    color: #9B98A3;
    white-space: nowrap;
    opacity: 0.9;
  }
  .logo-item-img {
    height: 52px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    opacity: 0.68;
    transition: opacity 0.15s ease;
  }
  .logo-item-img:hover { opacity: 1; }
  @media (max-width: 760px) {
    .logo-bar-row { gap: 26px; }
    .logo-item { font-size: 15px; }
    .logo-item-img { height: 38px; }
  }
  .avatars { display: flex; }
  .avatars span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    background:var(--purple);
  }
  .avatars span:first-child { margin-left: 0; }
  .avatars span:nth-child(2) { background:var(--teal-deep); }
  .avatars span:nth-child(3) { background:var(--purple); }
  .avatars span:nth-child(4) { background:var(--navy); }

  .chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px;
  }
  .chip-row.centered { justify-content: center; }
  .chip-row-label {
    font-size: 13.5px;
    color: var(--muted);
    margin-right: 2px;
  }
  .chip {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,0.08);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .chip:hover { border-color: var(--teal-deep); }
  .chip.active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--teal);
  }

  /* Wide "browser" preview docked below the hero */
  .stage-wrap {
    background: rgba(255,255,255,0.04);
    padding: 48px 0 0;
    margin-top: 0;
  }
  .stage-frame {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
  }
  .stage {
    background: #08080A;
    border-radius: 24px;
    padding: 30px 36px 0;
    box-shadow: 0 40px 90px -30px rgba(60, 30, 120, 0.4);
    overflow: hidden;
  }
  .stage-callout {
    position: absolute;
    left: 36px;
    bottom: -54px;
    max-width: 280px;
    background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 24px 50px -18px rgba(23, 21, 28, 0.28);
    transform: rotate(-2deg);
  }
  .stage-callout-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--teal-deep);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  .stage-callout-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .stage-callout-text {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
  }
  @media (max-width: 780px) {
    .stage-callout { position: static; margin: 20px auto 0; transform: none; max-width: 100%; }
  }
  .flyer-callout {
    position: absolute;
    right: 36px;
    top: -36px;
    width: 150px;
    background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 24px 50px -18px rgba(23, 21, 28, 0.28);
    transform: rotate(3deg);
    z-index: 3;
  }
  .flyer-callout img { width: 100%; border-radius: 8px; display: block; margin-bottom: 8px; }
  .flyer-callout-label { font-size: 10.5px; font-weight: 700; color: var(--purple-text); line-height: 1.3; }
  @media (max-width: 780px) {
    .flyer-callout { position: static; margin: 0 auto 16px; transform: none; width: 150px; }
  }
  .stage-topbar { display: flex; gap: 8px; margin-bottom: 22px; }
  .stage-topbar span { width: 11px; height: 11px; border-radius: 50%; background: #3A3A42; }
  .stage-body {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 36px;
  }
  @media (max-width: 780px) {
    .stage-body { flex-direction: column; }
  }
  .stage-text { padding-bottom: 30px; flex: 0 0 auto; width: 280px; min-width: 0; }
  @media (max-width: 780px) {
    .stage-text { width: 100%; }
  }
  .stage-tag { font-size: 11px; color: #6E6E76; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.02em; }
  .stage-headline {
    font-family: 'Outfit', sans-serif;
    color: #F3F2ED;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .stage-sub { color: #8E8C94; font-size: 13px; margin-bottom: 22px; }
  .stage-field {
    background: #17171B;
    border: 1px solid #2C2C32;
    border-radius: 9px;
    padding: 11px 14px;
    font-size: 13px;
    color: #6E6E76;
    margin-bottom: 9px;
  }
  .stage-visual {
    flex: 1 1 auto;
    border-radius: 16px 16px 0 0;
    margin-top: 26px;
    min-height: 340px;
  }
  @media (max-width: 780px) {
    .stage-visual { width: 100%; min-height: 220px; margin-top: 0; }
  }
  .video-mini { border-color: #3A3A42; }
  .ph-icon-play {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
  }
  .video-mini .ph-label { font-size: 16px; }
  .video-mini .ph-sub { font-size: 13px; }
  .stage-caption {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 92px;
  }
  @media (max-width: 780px) {
    .stage-caption { margin-top: 20px; }
  }


  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    font-family: 'Poppins', sans-serif;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary {
    background: var(--teal);
    color: var(--navy);
  }
  .btn-primary:hover { background: var(--teal-deep); }
  .btn-outline {
    background: rgba(255,255,255,0.07);
    border: 1.5px solid var(--ink);
    color: var(--ink);
  }
  .btn-outline:hover { background: var(--surface); }
  .btn-sm {
    padding: 10px 20px;
    font-size: 14px;
  }
  .btn-light {
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
  }
  .btn-light:hover { background: rgba(255,255,255,0.26); }

  /* ---------- Placeholder media (swap for real photo/video later) ---------- */
  .placeholder {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px dashed rgba(255,255,255,0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    color: #8E8C94;
    padding: 24px;
  }
  .ph-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
  .ph-label { font-size: 13.5px; font-weight: 700; color: #9B98A3; }
  .ph-sub { font-size: 12px; color: #6E6E76; }
  .ph-preview-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 19px;
    color: #F3F2ED;
    max-width: 280px;
    margin-bottom: 8px;
  }

  .video-placeholder {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: var(--navy);
    border-color: #4A4753;
    max-width: 560px;
    margin: 0 auto;
  }
  .video-placeholder .ph-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
  }
  .video-placeholder .ph-label { color: #fff; }
  .video-placeholder .ph-sub { color: #9B98A3; }

  .photo-placeholder {
    border-radius: 14px;
    background: var(--surface);
    border-color: var(--line);
    color: #9B98A3;
  }
  .photo-placeholder .ph-label { color: #6B6873; }

  /* ---------- Section shared ---------- */
  section.block {
    padding: 72px 0;
  }
  .block-head {
    max-width: 60ch;
    margin-bottom: 40px;
  }
  h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.14;
    margin: 0 0 12px;
  }
  h2 .accent { color: var(--purple-text); }
  .block-head p {
    color: var(--muted);
    font-size: 16.5px;
    margin: 0;
  }

  /* ---------- Case study (3-card, uxcel-style) ---------- */
  .case-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
  }
  .case-head h2 { max-width: 22ch; margin: 0; }
  .case-head p { color: var(--muted); font-size: 16px; max-width: 40ch; margin: 0; }
  @media (max-width: 780px) {
    .case-head { flex-direction: column; gap: 16px; }
  }

  .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--teal-deep);
    color: var(--teal-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 900px) {
    .case-grid { grid-template-columns: 1fr; }
  }
  .case-card {
    border: 1.5px solid var(--line);
    border-radius: 22px;
    padding: 10px 10px 24px;
    display: flex;
    flex-direction: column;
  }
  .case-card-accent { border-color: var(--teal-deep); border-width: 2px; }

  .case-visual {
    position: relative;
    height: 260px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 20px;
  }

  /* card 1: orbiting icons */
  .orbit-ring {
    position: absolute;
    border: 1.5px dashed var(--line);
    border-radius: 50%;
  }
  .orbit-ring.r1 { width: 190px; height: 190px; }
  .orbit-ring.r2 { width: 130px; height: 130px; }
  .orbit-center {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    z-index: 1;
  }
  .orbit-icon {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  .orbit-icon.i1 { top: 18px; left: 50%; transform: translateX(-50%); }
  .orbit-icon.i2 { right: 22px; top: 62px; }
  .orbit-icon.i3 { left: 22px; bottom: 62px; }
  .orbit-icon.i4 { bottom: 18px; left: 50%; transform: translateX(-50%); }

  /* card 2: hexagon stat */
  .hex-shape {
    width: 160px;
    height: 184px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--lavender);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hex-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 44px;
    color: var(--purple-text);
    line-height: 1;
  }
  .hex-sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  /* card 3: logos */
  .logos-visual {
    flex-direction: column;
    gap: 22px;
    background: var(--surface);
  }
  .logos-visual-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .logos-visual-img {
    height: 96px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
  }

  .case-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 0 14px;
  }
  .case-card-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
    max-width: 22ch;
  }
  .expand-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,0.08);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.15s ease;
  }
  .expand-btn:hover { background: var(--surface); transform: scale(1.06); }

  /* ---------- Case detail modal ---------- */
  .modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(23, 21, 28, 0.55);
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 20px;
  }
  .modal-backdrop.open { display: flex; }
  .modal-backdrop.open .modal { animation: modalPopIn .28s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes modalPopIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal {
    position: relative;
    background: rgba(20,16,30,0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    max-width: 620px;
    width: 100%;
    padding: 48px 44px 40px;
    box-shadow: 0 40px 90px -20px rgba(40,20,80,0.122);
  }
  @media (max-width: 640px) {
    .modal { padding: 40px 24px 32px; }
  }
  .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,0.08);
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
  }
  .modal-close:hover { background: var(--surface); }
  .modal-visual {
    height: 200px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
  }
  .modal-headline {
    font-size: 26px;
    margin: 0 0 16px;
  }
  .modal-body { color: var(--muted); font-size: 15px; line-height: 1.65; }
  .modal-body p { margin: 0 0 14px; }
  .modal-quote-wrap {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 22px;
  }
  .modal-quote {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.55;
    font-style: italic;
  }
  .modal-quote-attr {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: var(--muted);
  }
  .modal-quote-attr::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:var(--purple);
    flex-shrink: 0;
  }
  .modal-stats {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .modal-stat-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 30px;
    color: var(--ink);
  }
  .modal-stat-label {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
  }

  .modal-visual.mv-setup { background: var(--surface); }
  .modal-visual.mv-setup .orbit-ring { border-color: var(--line); }
  .modal-visual.mv-setup .orbit-ring.r1 { width: 150px; height: 150px; }
  .modal-visual.mv-setup .orbit-ring.r2 { width: 100px; height: 100px; }
  .modal-visual.mv-setup .orbit-center { width: 52px; height: 52px; font-size: 20px; border-radius: 14px; }
  .modal-visual.mv-setup .orbit-icon { width: 28px; height: 28px; font-size: 12px; }

  .modal-visual.mv-signups { background: var(--surface); }
  .modal-visual.mv-signups .hex-shape { width: 130px; height: 150px; }
  .modal-visual.mv-signups .hex-num { font-size: 34px; }

  .modal-visual.mv-brands {
    background: var(--surface);
    flex-direction: column;
    gap: 10px;
  }
  .modal-visual.mv-brands span {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #6B6873;
  }

  /* ---------- Build section (uxcel-style two-col + tool list) ---------- */
  section.build-section { padding: 20px 0 32px; }
  .build-top {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
  }
  @media (max-width: 860px) {
    .build-top { grid-template-columns: 1fr; gap: 36px; }
  }
  .build-h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.14;
    margin: 0 0 32px;
    max-width: 12ch;
  }
  .build-bullet {
    display: flex;
    gap: 14px;
    margin-bottom: 28px;
  }
  .build-bullet-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
  }
  .build-bullet-icon::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dot-color, var(--lavender));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
  .build-bullet-icon svg { position: relative; z-index: 1; }
  .build-bullet-title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .build-bullet-desc {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0 0 8px;
    max-width: 40ch;
  }
  .build-bullet-link {
    color: var(--purple-text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  .build-bullet-link:hover { text-decoration: underline; }

  .build-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tool-card {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 16px 20px;
  }
  .tool-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }
  .tool-title { font-weight: 700; font-size: 16px; margin: 0 0 3px; }
  .tool-meta { color: var(--muted); font-size: 13.5px; margin: 0; }

  .build-bottom {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  @media (max-width: 860px) {
    .build-bottom { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .build-bottom { grid-template-columns: 1fr; }
  }
  .bb-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 15px;
  }
  .bb-head span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .bb-head span::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dot-color, var(--mint));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
  .bb-head span svg { position: relative; z-index: 1; }
  .build-bottom-item p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
  }

  /* ---------- Steps ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  @media (max-width: 860px) {
    .steps { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 540px) {
    .steps { grid-template-columns: 1fr; }
  }
  .step {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 22px 20px;
  }
  .step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--teal);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .step h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 8px;
  }
  .step p {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0;
  }

  /* ---------- Live examples ---------- */
  .examples {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--ink);
    border-radius: 16px;
    overflow: hidden;
  }
  .example {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1.5px solid var(--line);
    transition: background 0.15s ease;
  }
  .example:last-child { border-bottom: none; }
  .example:hover { background: var(--surface); }
  .example-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
  .example-type {
    font-size: 12px;
    font-weight: 700;
    color: var(--purple-text);
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--lavender);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .example-name {
    font-size: 15.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .example-arrow {
    color: var(--teal-deep);
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
  }

  /* ---------- Not-included note ---------- */
  .scope-note {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 26px 28px;
    color: var(--muted);
    font-size: 15px;
  }
  .scope-note strong { color: var(--ink); font-weight: 600; }

  /* ---------- Security section ---------- */
  section.security-section { padding-top: 56px; padding-bottom: 40px; }

  /* ---------- Stat bar (uxcel-style numbers + badges) ---------- */
  section.stat-bar-section { padding-top: 32px; padding-bottom: 20px; }
  .stat-bar-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
    margin-bottom: 56px;
  }
  @media (max-width: 700px) {
    .stat-bar-row { grid-template-columns: 1fr; gap: 44px; }
  }
  .stat-bar-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 6.4vw, 76px);
    color: var(--ink);
    line-height: 1;
    margin-bottom: 16px;
  }
  .stat-bar-label { color: var(--muted); font-size: 16px; }
  .stat-bar-divider { border-top: 1px solid var(--line); margin-bottom: 30px; }
  .stat-bar-divider-bottom { margin-top: 48px; margin-bottom: 40px; }
  .stat-bar-bottom { text-align: center; }
  .stat-bar-line { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
  .stat-bar-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .stat-bar-badges span {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
  }

  .product-grid {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 760px) {
    .product-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .product-grid { grid-template-columns: 1fr; }
  }
  .product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px 18px;
  }
  .product-icon { font-size: 24px; flex-shrink: 0; }
  .product-name { font-weight: 700; font-size: 14.5px; margin: 0 0 2px; }
  .product-count { color: var(--muted); font-size: 13px; margin: 0; }

  .toolkit-card {
    margin-top: 44px;
  }
  .toolkit-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .toolkit-headline {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 24px;
  }
  .toolkit-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px) {
    .toolkit-list { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .toolkit-list { grid-template-columns: 1fr; }
  }
  .toolkit-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px -14px rgba(23,21,28,0.10);
  }
  .toolkit-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    order: 1;
    background: var(--surface);
    padding: 10px;
  }
  .toolkit-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .toolkit-text { order: 2; min-width: 0; }
  .tk-c1 { background: var(--lavender); }
  .tk-c2 { background: var(--mint); }
  .tk-c3 { background: var(--lavender); }
  .tk-c4 { background: var(--mint); }
  .toolkit-name { font-weight: 700; font-size: 17px; margin: 0 0 4px; }
  .toolkit-meta { color: var(--muted); font-size: 14px; margin: 0; }

  .security-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    align-items: center;
    gap: 0;
    padding-bottom: 28px;
  }
  @media (max-width: 780px) {
    .security-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
    .security-col-head { grid-column: 1 / -1; }
  }
  .security-col {
    padding: 0 20px;
    border-left: 1px solid var(--line);
    text-align: center;
  }
  .security-col:first-child,
  .security-col-head {
    border-left: none;
    padding-left: 0;
    text-align: left;
  }
  @media (max-width: 780px) {
    .security-col:nth-child(2) { border-left: none; }
  }
  .security-h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
    margin: 0;
  }
  .security-h2 .ink { color: var(--ink); }
  .security-h2 .muted-h { color: #B9B6C1; }
  .sb-seal {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    opacity: 0.6;
  }
  .sb-label {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.35;
    margin: 0;
  }
  .security-divider-full {
    border-top: 1px solid var(--line);
  }
  .security-grid-bottom { padding-top: 22px; padding-bottom: 0; }
  .security-grid-bottom .security-col { border-left: none; }
  .security-support {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  .security-cap {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #9B98A3;
  }

  /* ---------- CTA banner ---------- */
  .cta-banner {
    background:var(--purple);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-banner::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    top: -140px;
    right: -80px;
  }
  .cta-banner h2 {
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.14;
    max-width: 16ch;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .cta-banner h2 .accent { color: var(--teal); }
  .cta-banner-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    position: relative;
    z-index: 1;
  }
  .cta-banner-meta span {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.14);
    padding: 7px 14px;
    border-radius: 999px;
  }

  /* ---------- Form section ---------- */
  .form-section { padding: 60px 0 80px; }
  .cta-block {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--ink);
    border-radius: 22px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    margin-top: -96px;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 60px -30px rgba(60,30,120,0.25);
  }
  @media (max-width: 780px) {
    .cta-block { grid-template-columns: 1fr; padding: 30px 24px; margin-top: -60px; }
  }
  .cta-copy h3 {
    font-size: 22px;
    margin: 0 0 14px;
  }
  .cta-copy p { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; }
  .cta-list { list-style: none; margin: 0; padding: 0; }
  .cta-list li {
    display: flex;
    gap: 10px;
    color: var(--muted);
    font-size: 14.5px;
    margin-bottom: 10px;
  }
  .cta-list .check { margin-top: 2px; }

  form { display: flex; flex-direction: column; gap: 12px; }
  label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 4px;
    display: block;
  }
  .field { display: flex; flex-direction: column; }
  input, textarea {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink);
    font-size: 14.5px;
    font-family: 'Poppins', sans-serif;
  }
  input:focus, textarea:focus {
    outline: 2px solid var(--teal-deep);
    outline-offset: 1px;
    border-color: transparent;
  }
  textarea { resize: vertical; min-height: 76px; }
  .form-submit {
    margin-top: 6px;
    border: none;
    width: 100%;
    justify-content: center;
  }
  .form-note {
    font-size: 12.5px;
    color: #9B98A3;
    margin-top: 2px;
  }
  .form-status {
    font-size: 13.5px;
    color: var(--teal-deep);
    font-weight: 600;
    min-height: 18px;
  }

  footer { position: relative; overflow: hidden; background: rgba(255,255,255,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 64px 0 0; color: var(--muted); font-size: 13.5px; }
  footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background:var(--purple);
      background-size: 220% 100%; animation: flowLine 7s linear infinite; }
  @keyframes flowLine { 0% { background-position: 0% 0; } 100% { background-position: -220% 0; } }
  .footer-wordmark { position: absolute; left: 50%; bottom: -0.08em; transform: translateX(-50%); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(90px, 14vw, 220px); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.07); white-space: nowrap; pointer-events: none; z-index: 0; line-height: 1; user-select: none; }
  .footer-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
  @media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
  .footer-tagline { margin: 16px 0 18px; max-width: 34ch; line-height: 1.55; color: var(--muted); }
  .footer-social { display: flex; gap: 16px; flex-wrap: wrap; }
  .footer-social a { color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; background: rgba(255,255,255,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
  .footer-social a:hover { background: #fff; border-color: var(--muted); }
  .footer-col { display: flex; flex-direction: column; gap: 10px; }
  .footer-col:nth-of-type(2) { margin-top: 6px; }
  .footer-col:nth-of-type(3) { margin-top: 22px; }
  .footer-col:nth-of-type(4) { margin-top: 2px; }
  @media (max-width: 760px) { .footer-col { margin-top: 0 !important; } }
  .footer-col-head { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; margin: 0 0 14px; }
  .footer-col-head::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
  .footer-col:nth-of-type(3) .footer-col-head::before { background: var(--purple); }
  .footer-col:nth-of-type(4) .footer-col-head::before { background: #FFD9B3; }
  .footer-col a { color: var(--muted); text-decoration: none; font-size: 14px; }
  .footer-col a:hover { color: var(--ink); }
  .footer-bottom { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; }
  .footer-bottom-dot { display: inline-flex; align-items: center; gap: 7px; }
  .footer-bottom-dot span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
  /* ---------- Final CTA (editorial statement + screenshot) ---------- */
  .final-cta-outer { padding: 96px 0 0; overflow-x: clip; }
  .fc3-grid { display: grid; grid-template-columns: 0.62fr 1.6fr; gap: 56px; align-items: stretch; }
  .fc3-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-top: 6px; }
  .fc3-label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.3; }
  .fc3-label span { color: #7F7A90; }
  .fc3-label b { color: #fff; font-weight: 600; }
  .fc3-small { margin: 0; color: #8E899F; font-size: 14px; line-height: 1.6; max-width: 30ch; }
  .fc3-h { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(28px, 3.7vw, 48px); line-height: 1.22; letter-spacing: -0.015em; color: #7A7490; }
  .fc3-h .hl { color: #fff; font-weight: 700; }
  .fc3-actions { display: flex; align-items: center; gap: 10px; margin-top: 36px; }
  .fc3-pill { display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
  .fc3-pill:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
  .fc3-circle { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #0C0A14; display: grid; place-items: center; text-decoration: none; transition: transform .25s ease, background .2s ease; }
  .fc3-circle:hover { transform: rotate(45deg); background: var(--teal); }

  .fc3-shot {
    position: relative; margin-top: 72px; height: 440px;
    border-radius: 26px 26px 0 0; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16); border-bottom: 0; background:#08080A;
    box-shadow: 0 -40px 120px -40px rgba(124,31,224,0.5), 0 -10px 60px -30px rgba(98,239,232,0.25);
    -webkit-mask:none;
            mask:none;
  }
  .fc3-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

  @media (max-width: 860px) {
    .final-cta-outer { padding-top: 64px; }
    .fc3-grid { grid-template-columns: 1fr; gap: 28px; }
    .fc3-side { flex-direction: row; justify-content: space-between; align-items: flex-start; order: 2; gap: 24px; }
    .fc3-main { order: 1; }
    .fc3-small { max-width: 26ch; font-size: 13px; }
    .fc3-shot { margin-top: 44px; height: 300px; border-radius: 20px 20px 0 0; }
    .fc3-shot img { width: 175%; max-width: none; height: auto; object-fit: initial; }
  }

  /* ---------- Light bands (white sheet, rounded top, like case cards) ---------- */
  .light-band {
    --ink: #17151C; --muted: #5E5A6B; --line: rgba(23,21,28,0.12);
    --surface: #F4F1FA; --card: #FFFFFF; --bg: #FDFCFE;
    --lavender: #F1EAFB; --mint: #E4F6F4;
    --purple-text: #5E17B0; --teal-deep: #1FA9A2;
    position: relative; z-index: 2;
    background: #FDFCFE; color: #17151C;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -24px 60px -24px rgba(40,20,80,0.16);
    overflow: hidden;
    color-scheme: light;
  }
  .light-band::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; top: -180px; right: -140px; background:transparent; pointer-events: none; }
  .light-band::after { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; bottom: -160px; left: -120px; background:transparent; pointer-events: none; }
  .light-band > * { position: relative; z-index: 1; }
  @media (max-width: 760px) { .light-band { border-radius: 28px 28px 0 0; } }
  .light-band .case-card {
    --ink: #F1EEF7; --muted: #AEA8C2; --line: rgba(255,255,255,0.14);
    --surface: rgba(255,255,255,0.06); --card: rgba(255,255,255,0.06);
    --lavender: #2A2342; --mint: #15302E; --purple-text: #BE93EC; --teal-deep: #2FC7C0;
    background: #16121F; color: #F1EEF7; border-color: rgba(255,255,255,0.10);
  }
  .light-band .case-card.case-card-accent { border-color: var(--teal-deep); }
  .light-band .case-card:hover { box-shadow: 0 16px 36px rgba(23,21,28,0.28); }
  .light-band .case-visual { background: rgba(255,255,255,0.05); }
  .light-band .expand-btn { background: rgba(255,255,255,0.08); color: #F1EEF7; border-color: rgba(255,255,255,0.18); }
  .light-band .expand-btn:hover { background: rgba(255,255,255,0.16); }
  .light-band .sb-seal { background: none; border: 0; opacity: 1; }
  .light-band .sb-seal svg { fill: #5E17B0; }
  .light-band .sb-label { color: #17151C; font-weight: 500; font-size: 14px; }
  .light-band .security-h2 .muted-h { color: #5E17B0; }
  .light-band .security-cap { color: #5E5A6B; }
  .light-band .security-support { color: #5E5A6B; }
  .light-band .security-support svg { stroke: #5E17B0;color:#5E17B0}

  /* ---------- How it works (staggered bento: cards, two with a photo) ---------- */
  .how-head { text-align: left; max-width: none; margin: 0 0 40px; }
  .how-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; margin-bottom: 22px; }
  .how-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-deep); }
  .how-head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; max-width: none; letter-spacing: -0.02em; }
  .how-head h2 .muted-h { color: #9A95AB; display: block; }
  .how-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .hb-card {
    --ink: #F1EEF7; --muted: #AEA8C2; --teal-deep: #2FC7C0;
    background: #16121F; color: #F1EEF7; border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px; min-height: 330px; overflow: hidden;
    padding: 26px 28px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .hb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(23,21,28,0.28); border-color: var(--teal-deep); }
  .hb-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 92px; line-height: .9; color: transparent; -webkit-text-stroke: 1.4px #2FC7C0; letter-spacing: -0.02em; }
  .hb-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; color: #fff; }
  .hb-card p { margin: 0; color: #AEA8C2; font-size: 14.5px; line-height: 1.6; max-width: 34ch; }

  /* wide card = content + image in one rectangle */
  .hb-wide { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .hb-body { padding: 26px 28px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
  .hb-img { position: relative; min-height: 100%; background: #0F1626; }
  .hb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .hb-wide:hover .hb-img img { transform: scale(1.04); }
  .hb-flip .hb-img { order: -1; }

  .hb-c1 { grid-column: 1 / 5; }
  .hb-c2 { grid-column: 5 / 13; }
  .hb-c3 { grid-column: 1 / 9; }
  .hb-c4 { grid-column: 9 / 13; }
  .hb-c2 .hb-img img { object-position: center 28%; }
  .hb-c3 .hb-img img { object-position: center 58%; }
  .how-foot { text-align: left; margin: 32px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
  .how-foot strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 980px) {
    .how-bento { grid-template-columns: 1fr; }
    .hb-c1, .hb-c2, .hb-c3, .hb-c4 { grid-column: auto; }
    .hb-card { min-height: 0; }
  }
  @media (max-width: 640px) {
    .hb-wide { grid-template-columns: 1fr; }
    .hb-flip .hb-img { order: 0; }
    .hb-img { height: 280px; min-height: 280px; }
    .hb-card:not(.hb-wide) { min-height: 230px; }
    .hb-num { font-size: 76px; }
  }

  /* spacing between dark sections and light bands */
  section.build-section { padding-top: 80px; padding-bottom: 88px; }
  section.stat-bar-section { padding-top: 88px; }
  section.scope-gap { padding-bottom: 88px !important; }
  .light-band > section.security-section { padding-top: 80px; padding-bottom: 72px; }
  .how-head { max-width: 780px; }
  @media (max-width: 760px) { .light-band > section { padding-left: 22px !important; padding-right: 22px !important; } }

  /* ---------- Long Island case slider ---------- */
  .cs-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 48px; align-items: stretch; }
  .cs-left { display: flex; flex-direction: column; min-width: 0; }
  .cs-pager { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
  .cs-dot { font-family: 'Outfit', sans-serif; font-style: italic; font-size: 13px; font-weight: 500; color: #9A95AB; background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s ease; }
  .cs-dot.is-active { font-style: normal; color: var(--ink); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
  .cs-dot:hover { color: var(--ink); }
  .cs-pager-line { flex: 1; height: 1px; background: var(--line); }
  .cs-lead { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 38ch; }
  .cs-kicker { margin-top: auto; padding-top: 48px; font-family: 'Outfit', sans-serif; font-style: italic; font-size: 14px; color: #9A95AB; }
  .cs-h { margin: 8px 0 26px; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
  .cs-h .muted-h { color: #9A95AB; }
  .cs-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; background: #17151C; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; transition: transform .2s ease, background .2s ease; }
  .cs-cta:hover { transform: translateY(-2px); background: var(--purple-deep); }
  .cs-cta-ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #17151C; display: inline-flex; align-items: center; justify-content: center; }

  .cs-right { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .cs-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 40px; margin-bottom: -22px; }
  .cs-track::-webkit-scrollbar { display: none; }
  .cs-track::after { content: ''; flex: 0 0 calc(100% - min(340px, 78%) - 32px); }
  .cs-card { position: relative; flex: 0 0 min(340px, 78%); height: 470px; border-radius: 26px; overflow: hidden; background: #16121F; color: #fff; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; isolation: isolate; transform: scale(.94); transform-origin: left bottom; opacity: .75; transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease; }
  .cs-card.is-active { transform: none; opacity: 1; box-shadow: 0 12px 24px rgba(23,21,28,0.22); }
  .cs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
  .cs-card:hover .cs-bg { transform: scale(1.05); }
  .cs-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background:rgba(12,10,20,.95); }
  .cs-p1 .cs-bg { object-position: 0% 30%; filter: brightness(.42) saturate(.8); }
  .cs-p1::after { content: ''; position: absolute; inset: 0; z-index: -1; background:rgba(124,31,224,.35); }
  .cs-p2 .cs-bg { object-position: center 30%; }
  .cs-p3 .cs-bg { object-position: 22% center; }
  .cs-title { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; }
  .cs-title em { font-style: italic; font-weight: 300; }
  .cs-tag { margin-top: 10px; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.72); }
  .cs-bottom { position: relative; z-index: 1; max-width: 78%; }
  .cs-bottom h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.25; color: #fff; }
  .cs-bottom p { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); }
  .cs-more { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border-radius: 999px; border: 0; background: rgba(23,21,28,.85); color: #fff; font: 600 12.5px 'Poppins', sans-serif; cursor: pointer; transition: background .2s ease; }
  .cs-more:hover { background: var(--purple-deep); }
  .cs-more-ic { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #17151C; display: inline-flex; align-items: center; justify-content: center; }
  .cs-num { position: absolute; right: 14px; bottom: 4px; font-family: 'Outfit', sans-serif; font-weight: 200; font-style: italic; font-size: 110px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.55); pointer-events: none; }
  .cs-nav { display: flex; justify-content: flex-end; gap: 10px; padding-right: 4px; }
  .cs-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #17151C; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, opacity .2s ease, background .2s ease; }
  .cs-arrow:hover { transform: translateY(-2px); }
  .cs-arrow-dark { background: #17151C; color: #fff; border-color: #17151C; }
  .cs-arrow:disabled { opacity: .35; cursor: default; transform: none; }
  @media (max-width: 900px) {
    .cs-layout { grid-template-columns: 1fr; gap: 32px; }
    .cs-kicker { padding-top: 28px; }
  }
  @media (max-width: 560px) {
    .cs-card { flex-basis: 84%; height: 440px; padding: 22px; }
    .cs-track::after { flex-basis: calc(16% - 32px); }
    .cs-bottom { max-width: 86%; }
    .cs-num { font-size: 88px; }
  }
  @media (prefers-reduced-motion: reduce) { .cs-card, .cs-bg, .cs-track { transition: none; scroll-behavior: auto; } }

  .cs-h { margin-top: auto; padding-top: 40px; }
  .cs-h .accent { color: var(--purple-text); }
  .cs-track .cs-slide { flex: 0 0 min(320px, 78%); min-height: 430px; scroll-snap-align: start; transform: scale(.94); transform-origin: left bottom; opacity: .75; transition: transform .45s ease, opacity .45s ease, box-shadow .45s ease; }
  .cs-track .cs-slide.is-active { transform: none; opacity: 1; }
  .cs-track .cs-slide .case-visual { flex: 1; height: auto; min-height: 280px; }
  .cs-track::after { flex-basis: calc(100% - min(320px, 78%) - 32px); }
  @media (max-width: 560px) { .cs-track .cs-slide { flex-basis: 84%; min-height: 400px; } .cs-track::after { flex-basis: calc(16% - 32px); } }

  /* ---------- Data, handled right (animated flow) ---------- */
  .sec-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 48px; align-items: center; }
  .sec-left .security-h2 { margin: 0 0 22px; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04; white-space: nowrap; letter-spacing: -0.02em; }
  .sec-left .security-support { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; max-width: 24ch; }
  .sec-left .security-support svg { flex: 0 0 auto; margin-top: 3px; color: #5E17B0; stroke: currentColor; }
  .sec-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .sec-step { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; padding: 22px 20px 20px; min-height: 290px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #16121F; color: #F1EEF7; font: inherit; cursor: pointer; transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease, background .45s ease; }
  .sec-step::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -90px; top: -110px; background:transparent; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
  .sec-step.is-on { transform: translateY(-10px); border-color: rgba(98,239,232,.55); box-shadow: 0 22px 40px rgba(94,23,176,.28); background: #1C1630; }
  .sec-step.is-on::before { opacity: 1; }
  .sec-step:focus-visible { outline: 2px solid #62EFE8; outline-offset: 3px; }
  .sec-icon { position: relative; width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: #8F8AA3; transition: background .45s ease, color .45s ease; }
  .sec-step.is-on .sec-icon { background:#7C1FE0; color: #fff; }
  .si { width: 34px; height: 34px; overflow: visible; }
  .sec-label { position: relative; margin-top: auto; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.15; color: #fff; }
  .sec-cap { position: relative; margin-top: 8px; min-height: 3.2em; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: #8F8AA3; transition: color .45s ease; }
  .sec-step.is-on .sec-cap { color: #62EFE8; }

  /* icon motions */
  .si-shackle { transform: translateY(-5px); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .15s; }
  .sec-step.is-on .si-shackle { transform: none; }
  .si-key { opacity: .35; transition: opacity .3s ease .5s; }
  .sec-step.is-on .si-key { opacity: 1; }
  .si-draw { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .7s ease .2s; }
  .sec-step.is-on .si-draw { stroke-dashoffset: 0; }
  .si-slash { stroke-width: 3; }
  .si-arrow { transform: translateY(-6px); opacity: .5; transition: transform .6s cubic-bezier(.3,1.6,.5,1) .15s, opacity .3s ease; }
  .sec-step.is-on .si-arrow { transform: none; opacity: 1; }

  /* mini demos */
  .sd { position: relative; margin: 18px 0 22px; height: 30px; display: flex; align-items: center; gap: 8px; }
  .sd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .02em; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); color: #CFCAE0; white-space: nowrap; transition: color .3s ease, background .3s ease; }
  .sec-step.is-on .sd-mono { color: #62EFE8; background: rgba(98,239,232,.10); }
  .sd-toggle { width: 30px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; transition: background .35s ease; }
  .sd-toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
  .sec-step.is-on .sd-toggle { background: #2FC7C0; }
  .sec-step.is-on .sd-toggle i { transform: translateX(12px); }
  .sec-step.is-on .sd-toggle + .sd-opt-l + .sd-toggle, .sec-step.is-on .sd-toggle + .sd-opt-l + .sd-toggle i { transition-delay: .35s; }
  .sd-opt-l { font-size: 11.5px; color: #AEA8C2; margin-right: 4px; }
  .sd-chip { position: relative; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.28); color: #CFCAE0; transition: color .4s ease .5s, border-color .4s ease .5s; }
  .sd-strike { position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: #FF6B8A; transform: scaleX(0) rotate(-8deg); transform-origin: left center; transition: transform .5s ease .35s; border-radius: 2px; }
  .sec-step.is-on .sd-strike { transform: scaleX(1) rotate(-8deg); }
  .sec-step.is-on .sd-chip { color: #6E6880; border-color: rgba(255,107,138,.45); }
  .sd-file { position: relative; display: inline-flex; flex-direction: column; gap: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #CFCAE0; padding: 6px 10px 7px; border-radius: 8px; background: rgba(255,255,255,.06); transform: translateY(-6px); opacity: .6; transition: transform .5s ease, opacity .4s ease; }
  .sd-bar { display: block; width: 92px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
  .sd-bar b { display: block; height: 100%; width: 0; background: #62EFE8; transition: width 1.4s ease .3s; }
  .sec-step.is-on .sd-file { transform: none; opacity: 1; }
  .sec-step.is-on .sd-bar b { width: 100%; }

  /* progress track */
  .sec-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; height: 12px; align-items: center; }
  .sec-track::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(23,21,28,.10); border-radius: 2px; }
  .sec-track-fill { position: absolute; left: 12.5%; top: 50%; height: 2px; transform: translateY(-50%); width: 0; background:#7C1FE0; border-radius: 2px; transition: width .7s cubic-bezier(.4,0,.2,1); }
  .sec-node { position: relative; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: #FDFCFE; border: 2px solid rgba(23,21,28,.18); transition: border-color .4s ease, background .4s ease, box-shadow .4s ease; }
  .sec-node.is-done { border-color: #7C1FE0; background: #7C1FE0; }
  .sec-node.is-on { border-color: #2FC7C0; background: #2FC7C0; box-shadow: 0 0 0 6px rgba(47,199,192,.18); }

  @media (max-width: 980px) {
    .sec-layout { grid-template-columns: 1fr; gap: 32px; }
    .sec-left .security-support { max-width: none; }
  }
  @media (max-width: 680px) {
    .sec-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
    .sec-step { min-height: 250px; padding: 18px 16px; }
    .sec-step.is-on { transform: translateY(-4px); }
    .sec-label { font-size: 18px; }
    .sd-mono { font-size: 10.5px; padding: 5px 7px; }
    .sd-opt { gap: 5px; }
    .sd-toggle { width: 26px; height: 16px; }
    .sd-toggle i { width: 12px; height: 12px; }
    .sec-step.is-on .sd-toggle i { transform: translateX(10px); }
    .sd-opt-l { font-size: 10.5px; margin-right: 2px; }
    .sec-track { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sec-step, .sec-step *, .sec-track-fill { transition: none !important; }
  }

  /* ---------- Brands / proof block (light, trimmed) ---------- */
  .pb-band > section.stat-bar-section { padding-top: 80px; padding-bottom: 80px; }
  .pb-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 44px; align-items: center; }
  .pb-photo { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #16121F; }
  .pb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 40%; display: block; transform: scale(1.15); transform-origin: 20% 45%; transition: transform .8s ease; }
  .pb-photo:hover img { transform: scale(1.22); }
  .pb-statement { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: clamp(26px, 3.3vw, 42px); line-height: 1.2; letter-spacing: -0.015em; color: #A7A3B3; }
  .pb-statement .hl { color: #17151C; }
  .pb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
  .pb-stat { min-height: 140px; padding: 22px 24px; border-radius: 18px; background: #F2EFF7; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s ease, background .3s ease; }
  .pb-stat:hover { transform: translateY(-4px); background: #ECE6F7; }
  .pb-stat .stat-bar-num { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: clamp(38px, 4.2vw, 54px); line-height: 1; letter-spacing: -0.02em; color: #17151C; }
  .pb-stat-label { font-size: 13px; color: #5E5A6B; }
  .pb-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
  .pb-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid rgba(23,21,28,0.08); background: #fff; min-width: 0; transition: transform .25s ease, border-color .25s ease; }
  .pb-chip:hover { transform: translateY(-3px); border-color: rgba(94,23,176,.35); }
  .pb-logo { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #16121F; display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
  .pb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pb-chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .pb-chip-t b { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #17151C; }
  .pb-chip-t small { font-size: 11.5px; color: #5E17B0; }
  @media (max-width: 1000px) { .pb-chips { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px) {
    .pb-band > section.stat-bar-section { padding-top: 56px; padding-bottom: 56px; }
    .pb-top { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
    .pb-photo { border-radius: 16px; }
    .pb-statement { font-size: 22px; }
    .pb-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
    .pb-stats .pb-stat:last-child { grid-column: 1 / -1; }
    .pb-stat { min-height: 110px; padding: 18px; }
    .pb-chips { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Data block: dark background, white cards under the heading ---------- */
  section.security-section.sec-dark { padding-top: 96px; padding-bottom: 96px; }
  .sec-dark .sec-layout { grid-template-columns: 1fr; gap: 40px; }
  .sec-dark .sec-left { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .sec-dark .security-h2 { margin: 0; }
  .sec-dark .security-h2 .ink { color: #F1EEF7; }
  .sec-dark .security-h2 .muted-h { color: #BE93EC; }
  .sec-dark .security-support { color: #AEA8C2; max-width: none; margin-bottom: 8px; }
  .sec-dark .security-support svg { color: #62EFE8; stroke: currentColor; }
  .sec-dark .sec-step { background: #FFFFFF; color: #17151C; border-color: transparent; box-shadow: 0 10px 30px rgba(40,20,80,0.087); }
  .sec-dark .sec-step::before { background:transparent; }
  .sec-dark .sec-step.is-on { background: #FFFFFF; border-color: #7C1FE0; box-shadow: 0 24px 50px rgba(124,31,224,.45); }
  .sec-dark .sec-icon { background: #F2EFF7; color: #8F8AA3; }
  .sec-dark .sec-step.is-on .sec-icon { background:#7C1FE0; color: #fff; }
  .sec-dark .sec-label { color: #17151C; }
  .sec-dark .sec-cap { color: #8F8AA3; }
  .sec-dark .sec-step.is-on .sec-cap { color: #5E17B0; }
  .sec-dark .sd-mono { background: #F2EFF7; color: #5E5A6B; }
  .sec-dark .sec-step.is-on .sd-mono { background: #F1EAFB; color: #5E17B0; }
  .sec-dark .sd-toggle { background: rgba(23,21,28,.14); }
  .sec-dark .sec-step.is-on .sd-toggle { background: #1FA9A2; }
  .sec-dark .sd-opt-l { color: #5E5A6B; }
  .sec-dark .sd-chip { border-color: rgba(23,21,28,.25); color: #5E5A6B; }
  .sec-dark .sec-step.is-on .sd-chip { color: #B4AFC2; border-color: rgba(255,107,138,.55); }
  .sec-dark .sd-strike { background: #F0466C; }
  .sec-dark .sd-file { background: #F2EFF7; color: #5E5A6B; }
  .sec-dark .sd-bar { background: rgba(23,21,28,.10); }
  .sec-dark .sd-bar b { background:#7C1FE0; }
  .sec-dark .sec-track::before { background: rgba(255,255,255,.12); }
  .sec-dark .sec-node { background: var(--bg); border-color: rgba(255,255,255,.25); }
  .sec-dark .sec-node.is-done { background: #7C1FE0; border-color: #7C1FE0; }
  .sec-dark .sec-node.is-on { background: #62EFE8; border-color: #62EFE8; box-shadow: 0 0 0 6px rgba(98,239,232,.18); }
  @media (max-width: 760px) {
    section.security-section.sec-dark { padding: 64px 22px !important; }
    .sec-dark .sec-left { flex-direction: column; align-items: flex-start; }
  }

  .pb-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .pb-note { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.65; color: #5E5A6B; padding-left: 14px; border-left: 2px solid #7C1FE0; }
  .pb-note strong { color: #17151C; font-weight: 600; }
  @media (max-width: 760px) {
    .pb-top { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
    .pb-main { display: contents; }
    .pb-note { grid-column: 1 / -1; font-size: 14px; }
  }

  /* ---------- Brands block v3: dark cards, word reveal, marquee ---------- */
  .pb-photo { position: relative; box-shadow: 0 24px 44px rgba(23,21,28,.22); }
  .pb-photo-tag { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(12,10,20,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; }
  .pb-photo-tag .pb-logo { width: 28px; height: 28px; border-radius: 8px; padding: 3px; }
  .pb-photo-tag b { display: block; font-size: 11.5px; line-height: 1.2; }
  .pb-photo-tag small { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #62EFE8; }
  .pb-photo-tag small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #62EFE8; animation: pbPulse 1.6s ease-in-out infinite; }
  @keyframes pbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(98,239,232,.6); } 50% { box-shadow: 0 0 0 5px rgba(98,239,232,0); } }

  .pb-statement .w { color: #E6E3EC; transition: color .5s ease; }
  .pb-statement .w.on { color: #A7A3B3; }
  .pb-statement .w.hl.on { color: #17151C; }
  .pb-statement .hl .w:not(.on) { color: #E6E3EC; }

  .pb-stat { position: relative; overflow: hidden; background: #16121F; color: #F1EEF7; border: 1px solid rgba(255,255,255,.06); min-height: 160px; }
  .pb-stat::after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -100px; bottom: -130px; background:transparent; transition: transform .6s ease; pointer-events: none; }
  .pb-stat:hover { background: #1C1630; transform: translateY(-6px); }
  .pb-stat:hover::after { transform: scale(1.3); }
  .pb-stat .stat-bar-num { color: #fff; position: relative; z-index: 1; }
  .pb-stat-label { color: #AEA8C2; position: relative; z-index: 1; }
  .pb-stat-ic { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); color: #62EFE8; transition: transform .4s ease; }
  .pb-stat:hover .pb-stat-ic { transform: rotate(-10deg) scale(1.08); }
  .pb-stat-hero { background:#7C1FE0; border-color: transparent; }
  .pb-stat-hero::after { background:transparent; }
  .pb-stat-hero:hover { background:#8A2BF0; }
  .pb-stat-hero .pb-stat-label { color: rgba(255,255,255,.8); }
  .pb-stat-hero .pb-stat-ic { background: rgba(255,255,255,.16); color: #fff; }

  .pb-marquee { margin-top: 14px; overflow: hidden; border-radius: 18px; background: #16121F; padding: 12px 0; position: relative; }
  .pb-marquee::before, .pb-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
  .pb-marquee::before { left: 0; background:#16121F; }
  .pb-marquee::after { right: 0; background:#16121F; }
  .pb-marquee .pb-chips { display: flex; width: max-content; gap: 10px; margin: 0; animation: pbScroll 32s linear infinite; }
  .pb-marquee:hover .pb-chips { animation-play-state: paused; }
  @keyframes pbScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
  .pb-marquee .pb-chip { flex: 0 0 auto; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); padding: 8px 16px 8px 8px; }
  .pb-marquee .pb-chip:hover { border-color: rgba(190,147,236,.5); background: rgba(255,255,255,.08); }
  .pb-marquee .pb-chip-t b { color: #F1EEF7; white-space: nowrap; }
  .pb-marquee .pb-chip-t small { color: #62EFE8; }
  .pb-marquee .pb-logo { background: #0C0A14; }
  @media (max-width: 760px) {
    .pb-photo-tag { display: none; }
    .pb-stat-ic { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pb-marquee .pb-chips { animation: none; flex-wrap: wrap; width: auto; padding: 0 12px; }
    .pb-statement .w { transition: none; }
  }

  /* ---------- Brands block, variant B: half-bleed photo + stat rows ---------- */
  .pb-band > section.pb-sec { padding: 0 !important; }
  .pb-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
  .pb-half-photo { position: relative; overflow: hidden; background: #16121F; }
  .pb-half-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 45%; transform: scale(1.08); transform-origin: 0% 40%; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .pb-half-photo:hover > img { transform: scale(1.12); }
  .pb-half-photo::after { content: ''; position: absolute; inset: 0; background:rgba(12,10,20,.55); pointer-events: none; }
  .pb-half-photo .pb-photo-tag { left: 28px; right: auto; bottom: 28px; z-index: 1; padding: 8px 14px 8px 8px; }
  .pb-half-photo .pb-photo-tag .pb-logo { width: 36px; height: 36px; }
  .pb-half-photo .pb-photo-tag b { font-size: 13px; }
  .pb-half-photo .pb-photo-tag small { font-size: 11px; }
  .pb-half-content { padding: 84px max(28px, calc((100vw - 1120px) / 2 + 28px)) 72px 64px; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; }
  .pb-half-content .pb-statement { font-size: clamp(26px, 2.8vw, 38px); }
  .pb-half-content .pb-note { max-width: 56ch; }
  .pb-rows { margin-top: 18px; border-bottom: 1px solid rgba(23,21,28,.12); }
  .pb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(23,21,28,.12); transition: padding .3s ease; }
  .pb-row:hover { padding-left: 8px; }
  .pb-row .stat-bar-num { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; letter-spacing: -0.02em; color: #17151C; }
  .pb-row:first-child .stat-bar-num { color: #5E17B0; }
  .pb-row-label { font-size: 14px; color: #5E5A6B; text-align: right; }
  .pb-sec .pb-marquee { margin: 0; border-radius: 0; padding: 16px 0; }
  .pb-sec .pb-marquee::before, .pb-sec .pb-marquee::after { width: 120px; }
  @media (max-width: 900px) {
    .pb-split { grid-template-columns: 1fr; min-height: 0; }
    .pb-half-photo { height: auto; aspect-ratio: 1 / 1; max-height: 560px; }
    .pb-half-photo > img { object-position: 0% 45%; transform: scale(1.1); transform-origin: 0% 45%; }
    .pb-half-photo:hover > img { transform: scale(1.1); }
    .pb-half-content { padding: 40px 22px 44px; }
    .pb-half-photo .pb-photo-tag { display: flex; left: 16px; bottom: 16px; }
  }
  @media (max-width: 560px) {
    .pb-half-content .pb-statement { font-size: 24px; }
    .pb-row .stat-bar-num { font-size: 36px; }
    .pb-row-label { font-size: 13px; max-width: 16ch; }
  }

  /* ---------- Per-type video slots (placeholders until videos arrive) ---------- */
  .sv-stack { position: relative; width: 100%; height: 100%; min-height: 340px; }
  .sv { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .5s ease, transform .6s ease; pointer-events: none; }
  .sv.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .sv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
  .sv.has-video .sv-video { display: block; }
  .sv.has-video .sv-ph { display: none; }
  .sv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; overflow: hidden; }
  .sv-contest .sv-ph { background:transparent; }
  .sv-offer .sv-ph { background:transparent; }
  .sv-prize .sv-ph { background:transparent; }
  .sv-ph::before { content: ''; position: absolute; inset: -40%; background:rgba(255,255,255,.10); animation: svSpin 8s linear infinite; }
  @keyframes svSpin { to { transform: rotate(360deg); } }
  .sv-play { position: relative; width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding-left: 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin-bottom: 8px; }
  .sv-play::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); animation: svRing 2s ease-out infinite; }
  @keyframes svRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
  .sv-ph-label { position: relative; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.1; }
  .sv-ph-sub { position: relative; font-size: 12.5px; color: rgba(255,255,255,.65); letter-spacing: .04em; }
  .sv-ph-bar { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
  .sv-ph-bar i { display: block; height: 100%; width: 35%; border-radius: 3px; background: rgba(255,255,255,.75); animation: svBar 3s ease-in-out infinite; }
  @keyframes svBar { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
  @media (max-width: 780px) { .sv-stack { min-height: 240px; } }
  @media (prefers-reduced-motion: reduce) { .sv-ph::before, .sv-play::after, .sv-ph-bar i { animation: none; } }

  /* ---------- Prize-type tabs inside the stage (left content, right video) ---------- */
  .stage-text { width: 320px; padding-bottom: 150px; }
  .pt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .pt-tab { position: relative; overflow: hidden; display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid #2C2C32; background: #111115; color: #F3F2ED; font: inherit; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
  .pt-tab:hover { border-color: #45434F; background: #16161B; }
  .pt-tab.is-on { background: #17151F; border-color: rgba(124,31,224,.6); }
  .pt-tab:focus-visible { outline: 2px solid #62EFE8; outline-offset: 2px; }
  .pt-top { display: flex; align-items: center; gap: 12px; }
  .pt-num { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: #6E6E76; transition: color .3s ease; }
  .pt-tab.is-on .pt-num { color: #BE93EC; }
  .pt-name { flex: 1; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; }
  .pt-arrow { color: #6E6E76; transition: transform .3s ease, color .3s ease; }
  .pt-tab:hover .pt-arrow { transform: translateX(3px); }
  .pt-tab.is-on .pt-arrow { color: #62EFE8; transform: rotate(90deg); }
  .pt-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
  .pt-tab.is-on .pt-body { grid-template-rows: 1fr; }
  .pt-body-in { overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding-left: 28px; }
  .pt-head { margin-top: 10px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; color: #F3F2ED; }
  .pt-sub { font-size: 12.5px; line-height: 1.45; color: #8E8C94; }
  .pt-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
  .pt-progress i { display: block; height: 100%; width: 0; background:#7C1FE0; }
  .pt-tab.is-on.is-running .pt-progress i { animation: ptFill var(--pt-dur, 6s) linear forwards; }
  @keyframes ptFill { to { width: 100%; } }
  @media (max-width: 780px) {
    .stage-text { width: 100%; padding-bottom: 20px; }
  }

  /* ---------- Hero: living background, floating flow cards, drawn underline ---------- */
  .hero-a { position: relative; isolation: isolate; padding-top: 130px; padding-bottom: 140px; }
  .hero-bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; pointer-events: none; }
  .hb-grid { position: absolute; inset: 0; background-image:none; background-size: 56px 56px; -webkit-mask:none; mask:none; animation: hbGrid 24s linear infinite; }
  @keyframes hbGrid { to { background-position: 56px 56px, 56px 56px; } }
  .hb-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(30px); opacity: .55; }
  .hb-glow.g1 { left: 8%; top: -180px; background:transparent; animation: hbFloat1 14s ease-in-out infinite; }
  .hb-glow.g2 { right: 6%; top: 40px; background:transparent; animation: hbFloat2 18s ease-in-out infinite; }
  @keyframes hbFloat1 { 50% { transform: translate(90px, 60px) scale(1.1); } }
  @keyframes hbFloat2 { 50% { transform: translate(-110px, 40px) scale(.9); } }
  .hb-spot { position: absolute; width: 420px; height: 420px; border-radius: 50%; left: 0; top: 0; transform: translate(-50%, -50%); background:transparent; opacity: 0; transition: opacity .4s ease; }
  .hero-a:hover .hb-spot { opacity: 1; }

  .hero-mark { position: relative; display: inline-block; white-space: nowrap; color: #D9C2F5; -webkit-text-fill-color: #D9C2F5; background: none; }
  .hero-mark svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: .32em; overflow: visible; }
  .hero-mark path { fill: none; stroke: #62EFE8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: heroDraw 1.1s cubic-bezier(.6,0,.2,1) 1s forwards; }
  @keyframes heroDraw { to { stroke-dashoffset: 0; } }
  .hero-a-h1 .accent { background:none; background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color:inherit; animation: heroShine 6s ease-in-out 2s infinite; ;-webkit-text-fill-color:currentColor;background:none}
  @keyframes heroShine { 0% { background-position: 100% 0; } 40%, 100% { background-position: -100% 0; } }

  .hf { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(28,24,40,.72); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(40,20,80,0.122); text-align: left; opacity: 0; animation: hfIn .7s cubic-bezier(.2,.8,.2,1) forwards, hfBob 6s ease-in-out infinite; }
  .hf small { display: block; font-size: 10.5px; color: #8F8AA3; line-height: 1.3; }
  .hf b { display: block; font-size: 13px; font-weight: 600; color: #F1EEF7; line-height: 1.3; white-space: nowrap; }
  .hf-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
  .hf-ic-p { background:#7C1FE0; color: #fff; }
  .hf-ic-t { background: rgba(98,239,232,.14); color: #62EFE8; }
  .hf-ic-s { background: rgba(190,147,236,.16); color: #BE93EC; }
  .hf-ic-v { background: rgba(98,239,232,.14); color: #62EFE8; }
  .hf-count { margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); text-align: center; }
  .hf-count b { font-family: 'Outfit', sans-serif; font-size: 17px; color: #62EFE8; }
  .hf-check { margin-left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #2FC7C0; color: #0C0A14; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  .hf-prize { left: 0; top: 112px; transform: rotate(-4deg); animation-delay: .9s, 1.6s; }
  .hf-sms { left: 30px; top: 430px; transform: rotate(3deg); animation-delay: 1.3s, 2.4s; }
  .hf-signup { right: 0; top: 98px; transform: rotate(3deg); animation-delay: 1.1s, 1.9s; }
  .hf-venue { right: 24px; top: 422px; transform: rotate(-3deg); animation-delay: 1.5s, 2.8s; }
  @keyframes hfIn { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @keyframes hfBob { 50% { translate: 0 -8px; } }
  #hf-name { transition: opacity .25s ease, transform .25s ease; }
  #hf-name.swap { opacity: 0; transform: translateY(4px); }
  @media (max-width: 1240px) { .hf { display: none; } }
  @media (max-width: 760px) { .hero-a { padding: 72px 22px 64px; } .hb-glow { width: 320px; height: 320px; } }
  @media (prefers-reduced-motion: reduce) {
    .hb-grid, .hb-glow, .hf, .hero-a-h1 .accent { animation: none !important; opacity: 1; }
    .hero-mark path { animation: none; stroke-dashoffset: 0; }
  }

  /* ---------- Brands block, reference layout: photo + statement, overview row, logo grid ---------- */
  .pb-band > section.pv-sec { padding-top: 88px; padding-bottom: 88px; }
  .pv-top { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 56px; align-items: start; }
  .pv-photo { aspect-ratio: 13 / 16; border-radius: 16px; overflow: hidden; background: #16121F; }
  .pv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 45%; display: block; transform: scale(1.06); transform-origin: 0% 45%; transition: transform .8s ease; }
  .pv-photo:hover img { transform: scale(1.12); }
  .pv-sec .pb-statement { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.18; max-width: 22ch; color: #A7A3B3; }
  .pv-mid { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 56px; align-items: start; margin-top: 44px; }
  .pv-pill { justify-self: start; display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; border: 1px solid #17151C; font-size: 13px; font-weight: 500; color: #17151C; }
  .pv-text { max-width: 54ch; }
  .pv-text p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: #5E5A6B; }
  .pv-text strong { color: #17151C; font-weight: 600; }
  .pv-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #17151C; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s ease, gap .2s ease; }
  .pv-link:hover { color: #5E17B0; gap: 9px; }
  .pv-idx { font-size: 13px; color: #8F8AA3; }
  .pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 64px; }
  .pv-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 22px 24px; min-height: 104px; border-radius: 18px; background: #16121F; border: 1px solid rgba(255,255,255,.06); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
  .pv-card::after { content: ''; position: absolute; right: -60px; top: -80px; width: 180px; height: 180px; border-radius: 50%; background:transparent; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .pv-card:hover { transform: translateY(-4px); background: #1C1630; box-shadow: 0 18px 36px rgba(23,21,28,.22); }
  .pv-card:hover::after { opacity: 1; }
  .pv-logo { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: #0C0A14; display: inline-flex; align-items: center; justify-content: center; padding: 6px; transition: transform .3s ease; }
  .pv-card:hover .pv-logo { transform: rotate(-6deg) scale(1.06); }
  .pv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pv-name { flex: 1; min-width: 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: #F1EEF7; }
  .pv-ev { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #62EFE8; padding: 5px 10px; border-radius: 999px; background: rgba(98,239,232,.10); }
  @media (max-width: 900px) {
    .pv-top { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; }
    .pv-mid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
    .pv-idx { display: none; }
    .pv-grid { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  }
  @media (max-width: 560px) {
    .pb-band > section.pv-sec { padding: 56px 22px !important; }
    .pv-top { grid-template-columns: 1fr; gap: 20px; }
    .pv-photo { width: 120px; }
    .pv-sec .pb-statement { font-size: 24px; }
    .pv-grid { grid-template-columns: 1fr; gap: 10px; }
    .pv-card { min-height: 0; padding: 16px 18px; }
  }

  /* ---------- Hero: more air between elements ---------- */
  .hero-a .hero-badge { margin-bottom: 40px; }
  .hero-a .hero-a-h1 { line-height: 1.16; margin-bottom: 32px; max-width: 820px; }
  .hero-a .hero-mark svg { bottom: -0.22em; }
  .hero-a .hero-a-sub { max-width: 62ch; margin-bottom: 48px; line-height: 1.7; }
  .hero-a .hero-ctas.centered { gap: 16px; }
  .hero-a .hero-a-trust { margin-top: 36px; }
  .hf-prize { top: 96px !important; left: -20px !important; }
  .hf-signup { top: 84px !important; right: -20px !important; }
  .hf-sms { top: 500px !important; left: 0 !important; }
  .hf-venue { top: 492px !important; right: -6px !important; }
  @media (max-width: 760px) {
    .hero-a .hero-badge { margin-bottom: 28px; }
    .hero-a .hero-a-h1 { margin-bottom: 22px; }
    .hero-a .hero-a-sub { margin-bottom: 34px; }
    .hero-a .hero-ctas.centered { gap: 12px; }
    .hero-a .hero-a-trust { margin-top: 28px; }
  }

  /* ---------- Brand cards: light version ---------- */
  .pv-card { background: #FFFFFF; border: 1px solid rgba(23,21,28,.08); box-shadow: 0 1px 2px rgba(23,21,28,.04); }
  .pv-card::after { background:transparent; }
  .pv-card:hover { background: #FFFFFF; border-color: rgba(124,31,224,.35); box-shadow: 0 18px 36px rgba(94,23,176,.12); }
  .pv-logo { background: #16121F; }
  .pv-name { color: #17151C; }
  .pv-ev { color: #5E17B0; background: #F1EAFB; }

  /* ---------- Data cards v2: visual panel + mini UI + text ---------- */
  .sec-dark .sec-steps { gap: 16px; }
  .sec-dark .sec-step { min-height: 0; padding: 8px; gap: 0; border-radius: 24px; justify-content: flex-start; }
  .sec-dark .sec-step.is-on { transform: translateY(-8px); }
  .sec-vis { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; width: 100%; height: 186px; border-radius: 18px; background-color: #F6F3FB; background-image:none; background-size: 14px 14px; overflow: hidden; transition: background-color .4s ease; }
  .sec-step.is-on .sec-vis { background-color: #EFE6FB; }
  .sec-dark .sec-vis .sec-icon { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 11px; background: #FFFFFF; color: #8F8AA3; box-shadow: 0 2px 6px rgba(23,21,28,.06); }
  .sec-dark .sec-step.is-on .sec-vis .sec-icon { background:#7C1FE0; color: #fff; box-shadow: 0 6px 14px rgba(124,31,224,.35); }
  .sec-vis .si { width: 20px; height: 20px; }
  .mini-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 76%; max-width: 210px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 10px 24px rgba(23,21,28,.08); border: 1px solid rgba(23,21,28,.06); text-align: left; transform: translateY(6px); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease; }
  .sec-step.is-on .mini-card { transform: translateY(0); box-shadow: 0 16px 32px rgba(94,23,176,.16); border-color: rgba(124,31,224,.25); }
  .mini-field small { font-size: 10.5px; font-weight: 600; color: #8F8AA3; }
  .mini-field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 8px; border: 1px solid rgba(23,21,28,.12); transition: border-color .4s ease; }
  .sec-step.is-on .mini-field-row { border-color: #7C1FE0; }
  .sec-dark .mini-field .sd-mono { padding: 0; background: none; font-size: 11.5px; color: #17151C; overflow: hidden; }
  .sec-dark .sec-step.is-on .mini-field .sd-mono { background: none; color: #5E17B0; }
  .mini-lock { display: inline-flex; color: #B4AFC2; transition: color .4s ease; }
  .sec-step.is-on .mini-lock { color: #1FA9A2; }
  .mini-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: #17151C; }
  .mini-row + .mini-row { padding-top: 8px; border-top: 1px solid rgba(23,21,28,.06); }
  .mini-buyer { align-items: flex-start; }
  .mini-sk { display: flex; align-items: center; gap: 8px; width: 100%; }
  .mini-sk i { width: 18px; height: 18px; border-radius: 50%; background: #ECE8F3; }
  .mini-sk b { flex: 1; height: 7px; border-radius: 4px; background: #ECE8F3; }
  .mini-sk + .mini-sk b { flex: .7 1 0; }
  .sec-dark .mini-buyer .sd-chip { margin-top: 2px; font-size: 11.5px; padding: 5px 11px; }
  .mini-file { flex-direction: row; align-items: center; gap: 12px; }
  .mini-file-ic { flex: 0 0 auto; width: 36px; height: 42px; border-radius: 6px 12px 6px 6px; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background:#B4AFC2; transition: background .4s ease; }
  .sec-step.is-on .mini-file-ic { background:#2FC7C0; }
  .mini-file-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #17151C; }
  .mini-file-t .sd-bar { width: 100%; }
  .sec-txt { position: relative; display: flex; flex-direction: column; width: 100%; padding: 18px 14px 14px; }
  .sec-num { position: absolute; top: 20px; right: 14px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: #B4AFC2; transition: color .4s ease; }
  .sec-step.is-on .sec-num { color: #7C1FE0; }
  .sec-dark .sec-txt .sec-label { margin: 0; font-size: 19px; }
  .sec-dark .sec-txt .sec-cap { margin-top: 6px; min-height: 0; }
  @media (max-width: 1100px) { .sec-dark .sec-txt .sec-label { font-size: 17px; } }
  @media (max-width: 680px) {
    .sec-vis { height: 150px; padding-bottom: 12px; }
    .mini-card { width: 84%; padding: 10px; }
    .sec-dark .sec-vis .sec-icon { width: 30px; height: 30px; top: 8px; left: 8px; }
    .sec-vis .si { width: 16px; height: 16px; }
    .sec-txt { padding: 14px 8px 10px; }
    .sec-dark .sec-txt .sec-label { font-size: 16px; padding-right: 18px; }
    .sec-num { display: none; }
    .sec-dark .sec-txt .sec-label { padding-right: 0; }
    .mini-file { gap: 8px; }
    .mini-file-ic { width: 26px; height: 32px; font-size: 8px; padding-bottom: 4px; }
    .mini-file-t { font-size: 10px; }
    .sec-dark .mini-field .sd-mono { font-size: 10px; }
  }

  /* ---------- After decluttering ---------- */
  .stage-text { padding-bottom: 28px; }
  .stage-caption { margin-top: 40px; }

  /* ---------- Main demo: bigger, no black box, glowing media frame ---------- */
  .stage-wrap { background: transparent; padding: 24px 0 40px; }
  .stage-wrap > .wrap { max-width: 1280px; }
  .stage-frame { max-width: none; }
  .stage { background: transparent; box-shadow: none; padding: 0; overflow: visible; border-radius: 0; }
  .stage-topbar { display: none; }
  .stage-body { gap: 56px; align-items: center; }
  .stage-text { width: 380px; padding-bottom: 0; }
  .stage-tag { font-size: 12px; letter-spacing: .08em; color: #8F8AA3; margin-bottom: 18px; }
  .pt-list { gap: 10px; }
  .pt-tab { padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
  .pt-tab:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
  .pt-tab.is-on { background: rgba(124,31,224,.10); border-color: rgba(190,147,236,.45); }
  .pt-tab:focus { outline: none; }
  .pt-tab:focus-visible { outline: 2px solid #62EFE8; outline-offset: 3px; }
  .pt-name { font-size: 21px; }
  .pt-num { font-size: 13px; }
  .pt-head { font-size: 17px; margin-top: 14px; }
  .pt-sub { font-size: 13.5px; }
  .pt-body-in { padding-left: 32px; }
  .stage-visual.demo-real-fill { position: relative; margin-top: 0; min-height: 0; padding: 10px !important; border-radius: 30px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); overflow: visible; }
  .stage-visual.demo-real-fill::before { content: ''; position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; background: #7C1FE0; transition: background .6s ease; }
  .stage[data-type="offer"] .stage-visual.demo-real-fill::before { background: #1FA9A2; }
  .stage[data-type="prize"] .stage-visual.demo-real-fill::before { background: #E0429A; }
  .stage-visual .sv-stack { min-height: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; }
  .stage-body { position: relative; z-index: 0; }
  .stage-caption { margin-top: 48px; font-size: 14px; }
  @media (max-width: 1000px) {
    .stage-body { gap: 32px; }
    .stage-text { width: 300px; }
  }
  @media (max-width: 780px) {
    .stage-wrap { padding: 8px 0 24px; }
    .stage-text { width: 100%; }
    .pt-tab { padding: 16px 18px; }
    .pt-name { font-size: 18px; }
    .pt-head { font-size: 15px; }
    .stage-visual.demo-real-fill { padding: 6px !important; border-radius: 22px; }
    .stage-visual .sv-stack { aspect-ratio: 4 / 3; border-radius: 17px; }
  }

  /* footer columns aligned */
  .footer-col { margin-top: 0 !important; }

  .pv-photo img { object-position: 50% 30% !important; transform: none !important; }
  .pv-photo:hover img { transform: scale(1.05) !important; }

  .avatars-logos span { display: inline-flex; align-items: center; justify-content: center; background: #16121F !important; overflow: hidden; padding: 4px; }
  .avatars-logos img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .avatars-logos span { width: 38px !important; height: 38px !important; margin-left: -10px; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 0 0 2px #0C0A14; transition: transform .25s ease; }
  .avatars-logos span:first-child { margin-left: 0; }
  .avatars-logos span:hover { transform: translateY(-3px); z-index: 1; }
  .hero-a-trust { gap: 14px; }

  .cv-flyer { position: relative; overflow: hidden; }
  .cv-flyer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; transition: transform .6s ease; }
  .cs-slide:hover .cv-flyer img { transform: scale(1.04); }
  .tool-card-link { text-decoration: none; color: inherit; }
  .tool-card-link .tool-go { margin-left: auto; font-size: 18px; color: var(--muted); transition: transform .25s ease; }
  .tool-card-link:hover .tool-go { transform: translateX(4px); }

  .cs-swap { display: grid; flex: 1; }
  .cs-swap > .cs-alt { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity .45s ease, transform .45s ease; }
  .cs-swap .cs-alt-b { opacity: 0; transform: translateY(10px); pointer-events: none; }
  .cs-swap.is-b .cs-alt-a { opacity: 0; transform: translateY(-10px); pointer-events: none; }
  .cs-swap.is-b .cs-alt-b { opacity: 1; transform: none; pointer-events: auto; }
  .cv-menu img { object-position: 55% 30% !important; }
  .mv-menu { padding: 0 !important; overflow: hidden; }


  /* booking banner */
  .bk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; margin: 56px 0 104px; padding: 44px; border-radius: 32px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); scroll-margin-top: 90px; }
  .bk-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
  .bk-label span { color: rgba(241,238,247,.55); }
  .bk-label b { color: #fff; font-weight: 600; }
  .bk-h { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 700; color: #fff; margin: 18px 0 14px; }
  .bk-h span { color: #6E6880; }
  .bk-p { color: rgba(241,238,247,.68); font-size: 15.5px; line-height: 1.7; margin: 0 0 20px; }
  .bk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .bk-list li { position: relative; padding-left: 20px; color: #F1EEF7; font-size: 15px; }
  .bk-list li:before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #62EFE8; }
  .bk-cal { border-radius: 22px; }
  .bk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 36px; border-radius: 22px; background: #FDFCFE; color: #17151C; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
  .bk-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(40,20,80,0.16); }
  .bk-who { display: flex; align-items: center; gap: 16px; }
  .bk-av { position: relative; width: 76px; height: 76px; flex: 0 0 auto; }
  .bk-av img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(23,21,28,.08); }
  .bk-av i { position: absolute; right: 2px; bottom: 4px; width: 15px; height: 15px; border-radius: 50%; background: #2FC7C0; box-shadow: 0 0 0 3px #FDFCFE; }
  .bk-name { display: flex; flex-direction: column; line-height: 1.2; }
  .bk-name small { font-size: 12.5px; color: #8B8698; }
  .bk-name b { font-size: 26px; font-weight: 700; margin: 2px 0 3px; }
  .bk-name em { font-style: normal; font-size: 14px; color: #5E17B0; font-weight: 600; }
  .bk-note { font-size: 15px; color: #5E5A6B; line-height: 1.6; margin: 0; max-width: 38ch; }
  .bk-go { display: inline-flex; align-items: center; gap: 10px; }
  .bk-go .p { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; background: #17151C; color: #fff; font-weight: 600; font-size: 15px; }
  .bk-go .c { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #62EFE8; color: #17151C; transition: transform .3s ease; }
  .bk-card:hover .bk-go .c { transform: rotate(45deg); }
  @media (max-width: 900px) { .bk { grid-template-columns: 1fr; padding: 26px 18px; gap: 28px; margin: 40px 0 72px; } .bk-card { padding: 26px 22px; } }
  .footer-legal a { color: inherit; text-decoration: none; } .footer-legal a:hover { text-decoration: underline; }


.hc2-panel.hv{display:block;padding:0;height:640px}
.hc2-panel.hv::before,.hc2-panel.hv::after{display:none}
.hv-head{position:absolute;left:32px;top:30px;z-index:5;color:#fff}
.hv-no{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.6)}.hv-no b{color:#62EFE8;font-weight:700}
.hv-caps{position:relative;height:52px;margin-top:6px;width:320px}
.hv-caps h3{position:absolute;left:0;top:0;margin:0;font-family:Outfit,sans-serif;font-weight:800;font-size:42px;line-height:1.1;letter-spacing:-.02em;color:#fff;white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.hv-caps h3.on{opacity:1;transform:none;transition-delay:.15s}
.hv-dots{position:absolute;left:32px;bottom:30px;z-index:5;display:flex;gap:8px}
.hv-dots i{width:8px;height:8px;border-radius:8px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .4s ease,background .4s ease}
.hv-dots i.on{width:28px;background:#62EFE8}
.hv-phone{position:absolute;left:50%;bottom:-20px;transform-origin:50% 100%;transform:scale(.88);transition:transform .8s cubic-bezier(.65,0,.25,1);width:292px;height:606px;margin-left:-146px;border-radius:50px;background:#1b1324;padding:11px;box-shadow:0 0 0 2px #3a2a4f inset,0 40px 80px -20px rgba(20,0,50,.6);z-index:3}
.hv-isl{position:absolute;left:50%;top:22px;width:88px;height:26px;margin-left:-44px;border-radius:20px;background:#000;z-index:6}
.hv-scr{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#111}
.hv-v{position:absolute;inset:0;transform:translateX(100%);transition:transform .7s cubic-bezier(.65,0,.25,1),opacity .7s ease,filter .7s ease}
.hv-v.on{transform:none}
.hv-v.out{transform:translateX(-28%);opacity:.35}
.hv-v.nt{transition:none}
.hv-v>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.v0{background:#2a1a12 center/cover;}
.v0::before{content:"";position:absolute;inset:0;background:rgba(10,5,15,.35)}
.hv-cam{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.hv-paper{width:200px;background:#fff;border-radius:6px;padding:6px 6px 10px;transform:rotate(-4deg);box-shadow:0 20px 40px rgba(40,20,80,0.16);text-align:center}
.hv-paper>img{width:100%;display:block;border-radius:3px}
.hv-qrw{display:flex;align-items:center;gap:8px;margin-top:8px;text-align:left}
.hv-qr{width:62px;height:62px}
.hv-qrw span{font:700 12px/1.2 Outfit,sans-serif;color:#17151C}
.hv-qb{position:relative;flex:none;display:block;width:62px;height:62px}.hv-vf{position:absolute;inset:-9px;border-radius:8px;pointer-events:none;
 background:linear-gradient(#FFD43B,#FFD43B) 0 0/14px 2.5px,linear-gradient(#FFD43B,#FFD43B) 0 0/2.5px 14px,linear-gradient(#FFD43B,#FFD43B) 100% 0/14px 2.5px,linear-gradient(#FFD43B,#FFD43B) 100% 0/2.5px 14px,linear-gradient(#FFD43B,#FFD43B) 0 100%/14px 2.5px,linear-gradient(#FFD43B,#FFD43B) 0 100%/2.5px 14px,linear-gradient(#FFD43B,#FFD43B) 100% 100%/14px 2.5px,linear-gradient(#FFD43B,#FFD43B) 100% 100%/2.5px 14px;background-repeat:no-repeat;overflow:hidden;transform:scale(1.25);opacity:0;transition:transform .5s ease,opacity .4s ease}
.hv[data-s="0"].lock .hv-vf{transform:none;opacity:1}
.hv-vf i{position:absolute;left:4px;right:4px;height:2px;top:10%;background:#FFD43B;box-shadow:0 0 12px 2px rgba(255,212,59,.7);opacity:0}
.hv[data-s="0"].lock .hv-vf i{opacity:1;animation:hvScan2 1.2s ease-in-out infinite alternate}
@keyframes hvScan2{to{top:88%}}
.hv-link{position:absolute;left:12px;right:12px;bottom:36px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);border-radius:16px;padding:10px 12px;transform:translateY(20px);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .35s ease,background .2s}
.hv.link .hv-link{transform:none;opacity:1}
.hv.press .hv-link{background:#e9e3f3;transform:scale(.96)}
.hv-link .ic,#hv .hv-pop .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#E4F6F4;color:#1FA9A2}
.hv-link .ic svg{width:18px;height:18px}
.hv-link small,#hv .hv-pop small{display:block;font-size:10.5px;color:#8B8698}
.hv-link b,#hv .hv-pop b{font-size:14px;color:#17151C}
.hv.zoom .hv-cam{transform:scale(2.6) translate(30px,-34px)}
.hv-in{position:absolute;left:12px;top:451px;width:246px;height:33px;display:flex;align-items:center;padding-left:6px;background:#1b1b1f;border-radius:6px;font-size:13px;color:#fff;font-family:Inter,sans-serif}
.hv-in i{width:1.5px;height:16px;background:#62EFE8;margin-left:1px;animation:hvBlink .8s steps(1) infinite}
.hv-cta{position:absolute;left:0;right:0;bottom:0;height:96px;background:#111;height:72px;display:flex;align-items:flex-end;padding:0 12px 26px}
.hv-cta b{flex:1;height:42px;border-radius:12px;background:#5E17B0;color:#fff;display:grid;place-items:center;font:700 14px Outfit,sans-serif;transition:transform .15s,background .15s}
.hv.press .v1 .hv-cta b{transform:scale(.95);background:#4A1090}
#hv .hv-pop{position:absolute;opacity:1;animation:none;left:14px;right:14px;top:46px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);border-radius:16px;padding:10px 12px;box-shadow:0 14px 30px -10px rgba(40,20,80,0.16);transform:translateY(-90px);transition:transform .5s cubic-bezier(.2,.9,.3,1.15)}
#hv.pop .hv-pop{transform:none}
.v3{background:#2a0f55}
.hv-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 22px}
.hv-ok{width:84px;height:84px;border-radius:50%;background:#62EFE8;color:#0b2b2a;display:grid;place-items:center;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.2,.3,1.3) .2s;box-shadow:0 0 0 0 rgba(98,239,232,.5)}
.hv-ok svg{width:40px;height:40px}
.hv[data-s="3"] .hv-ok{transform:scale(1);animation:hvRing 1.6s .7s ease-out}
@keyframes hvRing{from{box-shadow:0 0 0 0 rgba(98,239,232,.55)}to{box-shadow:0 0 0 34px rgba(98,239,232,0)}}
.hv-done b{font:800 24px/1.15 Outfit,sans-serif;margin-top:22px}
.hv-done span{font-size:14px;color:rgba(255,255,255,.8);margin-top:8px}
.hv-done small{font-size:12px;color:rgba(255,255,255,.5);margin-top:6px}
.hv[data-s="3"] .hv-phone{transform:translateX(-84px) scale(.88)}
.hv-tap{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid #fff;box-shadow:0 6px 18px rgba(40,20,80,0.105);z-index:7;pointer-events:none;opacity:0;transform:scale(1.4);transition:left .6s cubic-bezier(.5,0,.2,1),top .6s cubic-bezier(.5,0,.2,1),opacity .3s,transform .3s}
.hv-tap.show{opacity:1;transform:scale(1)}
.hv-tap.down{transform:scale(.7);background:rgba(98,239,232,.8)}
#hv .hv-rep{position:absolute;margin:0;right:22px;top:210px;width:196px;background:#fff;border-radius:20px;padding:16px 16px 14px;color:#17151C;box-shadow:0 30px 60px -20px rgba(20,0,50,.55);z-index:4;opacity:0;transform:translateX(30px) scale(.96);transition:opacity .5s ease .3s,transform .6s cubic-bezier(.2,.9,.3,1.1) .3s;pointer-events:none}
#hv[data-s="3"] .hv-rep{opacity:1;transform:none}
#hv .hv-rep>small{font-size:12px;color:#8B8698}
#hv .hv-rn{display:flex;align-items:center;gap:8px;margin-top:4px}
#hv .hv-rn b{font:800 46px/1 Outfit,sans-serif;color:#5E17B0}
#hv .hv-plus{font:700 12px Outfit,sans-serif;color:#0b5652;background:#62EFE8;border-radius:99px;padding:5px 9px;opacity:0;transform:translateY(14px) scale(.8);transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.3,1.3)}
#hv.plus .hv-plus{opacity:1;transform:none}
#hv .hv-rep #hv .hv-bars{display:flex;align-items:flex-end;gap:5px;height:46px;margin:12px 0}
#hv .hv-rep #hv .hv-bars i{flex:1;height:0;border-radius:4px 4px 2px 2px;background:#F1EAFB;transition:height .7s ease .5s}
#hv .hv-rep #hv .hv-bars i:last-child{background:#62EFE8}
#hv[data-s="3"] .hv-bars i{height:var(--h)}
#hv .hv-rep #hv .hv-row{display:flex;gap:22px;border-top:1px solid rgba(23,21,28,.08);padding-top:10px}
#hv .hv-rep #hv .hv-row b{display:block;font:800 20px Outfit,sans-serif}
#hv .hv-rep #hv .hv-row small{font-size:11px;color:#8B8698}
.hv.paused *{animation-play-state:paused!important}

@media(max-width:560px){
 .hc2-panel.hv{height:520px}
 .hv-head{left:20px;top:20px}.hv-caps h3{font-size:30px}.hv-caps{height:40px}
 .hv-dots{left:auto;right:20px;top:30px;bottom:auto}
 .hv-phone{transform:scale(.66);bottom:-16px}
 .hv[data-s="3"] .hv-phone{transform:translateX(-62px) scale(.66)}
 #hv .hv-rep{right:10px;top:150px;width:148px;padding:12px}#hv .hv-rn b{font-size:32px}#hv .hv-rep #hv .hv-bars{height:30px;margin:8px 0}
}
@media(prefers-reduced-motion:reduce){.hv-v,.hv-caps h3,.hv-cam,.hv[data-s="3"] .hv-phone{transform:translateX(-84px) scale(.88)}
.hv-tap{transition:none!important}.hv-vf i,.hv-ok{animation:none!important}}


.cs-track .cs-slide .cv-sg,.cv-sg{position:relative;background:#F1EAFB!important;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px}
.sg-card{width:100%;max-width:280px;background:#fff;border-radius:18px;padding:16px 16px 12px;box-shadow:0 20px 40px -22px rgba(94,23,176,.45)}
.sg-top{display:flex;align-items:center;justify-content:space-between}
.sg-top small{font-size:11px;color:#8B8698}
.sg-live{display:inline-flex;align-items:center;gap:6px;font:700 11px Outfit,sans-serif;color:#0b5652;background:#E4F6F4;border-radius:99px;padding:4px 9px}
.sg-live i{width:6px;height:6px;border-radius:50%;background:#1FA9A2;animation:sgP 1.6s ease-in-out infinite}
@keyframes sgP{50%{opacity:.3}}
.sg-num{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px}
.sg-num b{font:800 54px/1 Outfit,sans-serif;color:#5E17B0;letter-spacing:-.02em}
.sg-num span{font-size:14px;color:#5E5A6B}
.sg-chart{display:block;width:100%;height:80px}
.sg-line{stroke-dasharray:320;stroke-dashoffset:320;animation:sgD 1.8s ease .4s forwards}@keyframes sgD{to{stroke-dashoffset:0}}

.sg-ax{display:flex;justify-content:space-around;font-size:11px;color:#8B8698;margin-top:4px}
.sg-pill{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#17151C;color:#fff;border-radius:99px;padding:6px 14px 6px 6px;font:600 12px Outfit,sans-serif;white-space:nowrap}
.sg-av{display:flex}.sg-av i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 9px Outfit,sans-serif;font-style:normal;color:#fff;border:2px solid #17151C;margin-left:-6px}
.sg-av i:first-child{margin-left:0;background:#5E17B0}.sg-av i:nth-child(2){background:#1FA9A2}.sg-av i:nth-child(3){background:#E2725B}
.cv-sg .sg-card{margin-bottom:34px}
.cs-track .cs-slide .cv-mn,.cv-mn{position:relative;background:#5E17B0!important;border-radius:20px;overflow:hidden}
.mn-tag{position:absolute;left:18px;top:16px;font:600 11px Outfit,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);z-index:2}
.mn-phone{position:absolute;left:50%;top:46px;width:70%;max-width:240px;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 0;border-radius:26px;overflow:hidden;box-shadow:0 30px 50px -20px rgba(40,20,80,0.16);transition:transform .6s ease}
.mn-phone img{display:block;width:100%;height:auto}
.cs-slide:hover .mn-phone{transform:translateX(-50%) rotate(-2deg) translateY(-6px)}
.mn-hl{position:absolute;left:7%;right:7%;top:71%;height:13%;border:2px solid #62EFE8;border-radius:12px;box-shadow:0 0 0 4px rgba(98,239,232,.2);animation:mnHl 2.4s ease-in-out infinite}
@keyframes mnHl{50%{box-shadow:0 0 0 8px rgba(98,239,232,.08)}}
.mn-chip{position:absolute;right:12px;bottom:64px;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 18px 30px -14px rgba(40,20,80,0.16);z-index:3}
.mn-chip b{display:block;font:700 14px Outfit,sans-serif;color:#17151C}
.mn-chip small{font-size:11px;color:#8B8698}
.mn-stat{position:absolute;left:14px;bottom:18px;background:#62EFE8;color:#0b2b2a;border-radius:14px;padding:8px 14px;z-index:3}
.mn-stat b{font:800 22px/1 Outfit,sans-serif;display:block}.mn-stat small{font-size:11px;font-weight:600}
html body .sec-track.sec-track{background:none!important}
html body .sec-track.sec-track::before{background:rgba(255,255,255,.28)!important}

[class*="glow"]:not(.hv *),.hb-glow,.fx-glow{display:none!important}
.mini-file-ic{background:#5E17B0!important;color:#fff!important}
}
html[data-theme="dark"],html[data-theme="dark"] body{background:#09080C!important;color:#F1EEF7}
html[data-theme="dark"] header{background:rgba(9,8,12,.85)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
html[data-theme="dark"] .hx{background:#09080C!important}
html[data-theme="dark"] .hx .hero-a-h1,html[data-theme="dark"] .hx .hero-a-h1 .accent{color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-theme="dark"] .hx .hero-mark{color:#BE93EC!important;-webkit-text-fill-color:#BE93EC!important}
html[data-theme="dark"] .hx-sub{color:#AEA8C2!important}
html[data-theme="dark"] .hx-stats b{color:#fff!important}
html[data-theme="dark"] .hx-stats small,html[data-theme="dark"] .hx-logos{color:#8F8AA3!important}
html[data-theme="dark"] .hx-stats div{border-color:rgba(255,255,255,.12)!important}
html[data-theme="dark"] .avatars-logos span{background:#141318!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 0 0 2px #09080C!important}
html[data-theme="dark"] .btn-primary{background:#62EFE8!important;color:#17151C!important;border-color:#62EFE8!important}
html[data-theme="dark"] .btn-outline{background:rgba(255,255,255,.06)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
html[data-theme="dark"] .cv-sg{background:#1B1726!important}
html[data-theme="dark"] .case-card{background:#141318!important;border-color:rgba(255,255,255,.08)!important}
html[data-theme="dark"] .case-card-label{color:#F1EEF7!important}


.hdr-act{display:flex;align-items:center;gap:10px}
.thm{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s}
html[data-theme="light"] .thm{background:#fff;border:1px solid rgba(23,21,28,.16);color:#17151C}
html[data-theme="dark"] .thm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff}
.thm .i-moon{display:block}.thm .i-sun{display:none}
html[data-theme="dark"] .thm .i-moon{display:none}html[data-theme="dark"] .thm .i-sun{display:block}
html[data-theme="dark"] header .btn-primary{background:#62EFE8!important;color:#17151C!important;border-color:#62EFE8!important;backdrop-filter:none!important}
.price-plus{margin:6px 0 14px!important}
@media(max-width:560px){.thm{width:40px;height:40px}.hdr-act{gap:8px}}
svg.fa-i{stroke:none!important;flex:0 0 auto}svg.fa-i path{fill:currentColor!important;stroke:none!important}
.bg-stats svg.fa-i,.post-meta-bar svg.fa-i,.fx-prompt-ic svg.fa-i,.mini-lock svg.fa-i,.cs-visit svg.fa-i,.pv-link svg.fa-i,.rpx-tag svg.fa-i{width:14px!important;height:14px!important}
.price-list svg.fa-i,.ct-y svg.fa-i,.back-ic svg.fa-i,.mp-back svg.fa-i,.cs-arrow svg.fa-i,.security-support svg.fa-i,.hv-link .ic svg.fa-i,.hv-pop .ic svg.fa-i,
.bg-go svg.fa-i,.fit-go svg.fa-i,.fx-goal-go svg.fa-i,.f3-go svg.fa-i,.pk-go svg.fa-i,.bk-go svg.fa-i,.cv-cta2 svg.fa-i,.mnc-cta svg.fa-i,.mp-nc svg.fa-i,[class$="-circle"] svg.fa-i{width:16px!important;height:16px!important}
.ct-ic svg.fa-i,.mp-b svg.fa-i,.pp-ic svg.fa-i,.rp-mail-ic svg.fa-i,.build-bullet-icon svg.fa-i{width:18px!important;height:18px!important}
.mp-v svg.fa-i,.ab-tile-ic svg.fa-i,.cs-tech-ic svg.fa-i,.fit-ic svg.fa-i,.fx-extra-ic svg.fa-i,.fx-goal-ic svg.fa-i,.stat-icon svg.fa-i,.tool-icon svg.fa-i,.mp-brand .ic svg.fa-i,.flow-icon-wrap svg.fa-i,.sec-icon svg.fa-i{width:22px!important;height:22px!important}
.flow-connector svg.fa-i{width:24px!important;height:24px!important}
html[data-theme="light"] .mnav-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;align-items:center;justify-content:center;cursor:pointer;margin-left:auto;margin-right:10px;flex:0 0 auto}
html[data-theme="light"] .mnav-btn span,html[data-theme="light"] .mnav-btn span:before,html[data-theme="light"] .mnav-btn span:after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative;content:""}
html[data-theme="light"] .mnav-btn span:before{position:absolute;top:-6px}
html[data-theme="light"] .mnav-btn span:after{position:absolute;top:6px}
html[data-theme="light"] .mnav{position:fixed;inset:0;z-index:9998;background:rgba(10,8,16,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:22px 22px 32px;opacity:0;pointer-events:none;transition:opacity .25s ease}
html[data-theme="light"] .mnav.open{opacity:1;pointer-events:auto}
html[data-theme="light"] .mnav-top{display:flex;justify-content:flex-end}
html[data-theme="light"] .mnav-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
html[data-theme="light"] .mnav-links{display:flex;flex-direction:column;margin-top:24px}
html[data-theme="light"] .mnav-links a{color:#fff !important;text-decoration:none;font-size:26px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
html[data-theme="light"] .mnav-links a.active{color:#62EFE8 !important}
html[data-theme="light"] .mnav-cta{margin-top:auto;display:flex;justify-content:center;padding:16px;border-radius:999px;background:#62EFE8;color:#17151C !important;font-weight:700;text-decoration:none;font-size:16px}
@media (max-width:900px){html[data-theme="light"] .mnav-btn{display:inline-flex}}
html[data-theme="light"] body.mnav-lock{overflow:hidden}
:root[data-theme="light"]{ --bg:#FFFFFF; --card:#FFFFFF; --surface:#F6F3FB; --ink:#17151C; --muted:#5E5A6B; --line:rgba(23,21,28,.10);
  --lavender:#F1EAFB; --mint:#E4F6F4; --navy:#38353E; --purple-text:#5E17B0; --teal-deep:#1FA9A2; }
html[data-theme="light"],html[data-theme="light"] body{ background:#FFFFFF !important; color:#17151C; }
html[data-theme="light"] header{ background:rgba(255,255,255,.82) !important; border-bottom:1px solid rgba(23,21,28,.08) !important; }
html[data-theme="light"] .header-nav a{ color:#5E5A6B !important; }
html[data-theme="light"] .header-nav a:hover,html[data-theme="light"] .header-nav a.active{ color:#17151C !important; }
html[data-theme="light"] .hb-grid{ background-image:none !important; }
html[data-theme="light"] .hb-glow{ opacity:.28 !important; }
html[data-theme="light"] .light-band,html[data-theme="light"] .pb-band{ background:#F6F3FB !important; }
html[data-theme="light"] footer{ background:#F6F3FB !important; }
html[data-theme="light"] .pt-name,html[data-theme="light"] .pt-head,html[data-theme="light"] .ink{ color:#17151C !important; -webkit-text-fill-color:#17151C; }
html[data-theme="light"] .pt-arrow{ color:#1FA9A2 !important; }
html[data-theme="light"] .pb-statement .w{ color:#A7A3B3 !important; }
html[data-theme="light"] .pb-statement .w.hl,html[data-theme="light"] .pb-statement .hl{ color:#17151C !important; }
html[data-theme="light"] .sec-num{ color:#8B8698 !important; }
html[data-theme="light"] .fc3-label b,html[data-theme="light"] .bk-label b{ color:#17151C !important; }
html[data-theme="light"] .fc3-label span,html[data-theme="light"] .bk-label span{ color:#8B8698 !important; }
html[data-theme="light"] .fc3-h{ color:#A7A3B3 !important; }
html[data-theme="light"] .fc3-h .hl{ color:#17151C !important; }
html[data-theme="light"] .fc3-pill{ color:#17151C !important; border-color:rgba(23,21,28,.3) !important; }
html[data-theme="light"] .fc3-small{ color:#5E5A6B !important; }
html[data-theme="light"] .bk{ background:#F6F3FB !important; border-color:rgba(23,21,28,.08) !important; }
html[data-theme="light"] .bk-h{ color:#17151C !important; }
html[data-theme="light"] .bk-h span{ color:#A7A3B3 !important; }
html[data-theme="light"] .bk-p{ color:#5E5A6B !important; }
html[data-theme="light"] .bk-list li{ color:#17151C !important; }
html[data-theme="light"] .bk-card{ box-shadow:0 20px 50px -30px rgba(23,21,28,.35); }
html[data-theme="light"] .hero-a-h1 .accent,html[data-theme="light"] .accent{ color:#5E17B0 !important; -webkit-text-fill-color:#5E17B0; }
html[data-theme="light"] .muted-h{ color:#5E17B0 !important; }
html[data-theme="light"] .light-band,html[data-theme="light"] .pb-band{ box-shadow:none !important; }
html[data-theme="light"] .light-band::before,html[data-theme="light"] .pb-band::before{ box-shadow:none !important; }
html[data-theme="light"] .fc3-circle{ background:#17151C !important; color:#fff !important; }
html[data-theme="light"] .hex-visual{ background:#F1EAFB !important; }
html[data-theme="light"] .hex-shape{ background:#E4D4F8 !important; }
html[data-theme="light"] .hex-num{ color:#5E17B0 !important; }
html[data-theme="light"] .hex-sub{ color:#5E5A6B !important; }
html[data-theme="light"] .case-card{ background:#FFFFFF !important; border:1px solid rgba(23,21,28,.08) !important; }
html[data-theme="light"] .case-card-label{ color:#17151C !important; }
html[data-theme="light"] .expand-btn{ color:#17151C !important; border-color:rgba(23,21,28,.25) !important; background:#fff !important; }
html[data-theme="light"] .mnav-btn{ border-color:rgba(23,21,28,.2) !important; background:#fff !important; }
html[data-theme="light"] .mnav-btn span,html[data-theme="light"] .mnav-btn span:before,html[data-theme="light"] .mnav-btn span:after{ background:#17151C !important; }
html[data-theme="light"] .hero-mark{ color:#5E17B0 !important; -webkit-text-fill-color:#5E17B0; }
html[data-theme="light"],html[data-theme="light"] body{ background:#FBFAFE !important; }
html[data-theme="light"] .hero-a-h1{ color:#17151C !important; }
html[data-theme="light"] .hero-a-h1 .accent{ color:#17151C !important; -webkit-text-fill-color:#17151C; }
html[data-theme="light"] .hero-a-h1 .hero-mark{ color:#5E17B0 !important; -webkit-text-fill-color:#5E17B0; }
html[data-theme="light"] .hb-grid{ opacity:.6; }
html[data-theme="light"] .hb-glow.g1{ opacity:.35 !important; }
html[data-theme="light"] .hb-glow.g2{ opacity:.25 !important; }
html[data-theme="light"] .btn-primary,html[data-theme="light"] .hero-ctas .btn-primary{ background:#62EFE8 !important; color:#17151C !important; border-color:#62EFE8 !important; box-shadow:none !important; }
html[data-theme="light"] .btn-outline{ color:#17151C !important; border-color:rgba(23,21,28,.25) !important; background:#fff !important; }
html[data-theme="light"] .hero-badge{ background:#fff !important; color:#17151C !important; border-color:rgba(23,21,28,.12) !important; }
html[data-theme="light"] .stage-wrap{ background:#5E17B0 !important; padding:110px 0 120px !important; }
html[data-theme="light"] .stage-wrap .stage-tag{ color:rgba(255,255,255,.75) !important; }
html[data-theme="light"] .stage-wrap .pt-tab{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.22) !important; }
html[data-theme="light"] .stage-wrap .pt-tab .pt-name,html[data-theme="light"] .stage-wrap .pt-tab .pt-num,html[data-theme="light"] .stage-wrap .pt-tab .pt-arrow{ color:#fff !important; -webkit-text-fill-color:#fff; }
html[data-theme="light"] .stage-wrap .pt-tab.is-on{ background:#fff !important; border-color:#fff !important; }
html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-name,html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-head,html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-num{ color:#17151C !important; -webkit-text-fill-color:#17151C; }
html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-sub{ color:#5E5A6B !important; }
html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-arrow{ color:#5E17B0 !important; }
html[data-theme="light"] .stage-wrap .pt-progress i{ background:#62EFE8 !important; }
html[data-theme="light"] .stage-wrap .stage-visual,html[data-theme="light"] .stage-wrap .sv-stack{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.25) !important; box-shadow:none !important; }
html[data-theme="light"] .stage-wrap .stage-visual::before,html[data-theme="light"] .stage-wrap .stage-visual::after{ display:none !important; }
html[data-theme="light"] .stage-wrap .stage-visual *{ color:#fff !important; }
html[data-theme="light"] .stage-wrap + * .stage-note,html[data-theme="light"] .stage-wrap .stage-note,html[data-theme="light"] .stage-wrap p{ color:rgba(255,255,255,.8) !important; }
html[data-theme="light"] .security-section.sec-dark,html[data-theme="light"] .sec-dark{ background:#5E17B0 !important; }
html[data-theme="light"] .security-section{ position:relative; }
html[data-theme="light"] .security-section::before{ content:""; position:absolute; inset:0 calc(50% - 50vw); background:#5E17B0; z-index:-1; }
html[data-theme="light"] .security-h2,html[data-theme="light"] .security-h2 .ink{ color:#fff !important; -webkit-text-fill-color:#fff; }
html[data-theme="light"] .security-h2 .muted-h{ color:#62EFE8 !important; -webkit-text-fill-color:#62EFE8; }
html[data-theme="light"] .security-support,html[data-theme="light"] .security-support *{ color:rgba(255,255,255,.85) !important; }
html[data-theme="light"] .sec-node{ border-color:rgba(255,255,255,.5) !important; }
html[data-theme="light"] .sec-track{ background:rgba(255,255,255,.25) !important; }
html[data-theme="light"] .sec-node.is-on,html[data-theme="light"] .sec-node.is-done,html[data-theme="light"] .sec-track-fill{ background:#62EFE8 !important; border-color:#62EFE8 !important; }
html[data-theme="light"] .light-band,html[data-theme="light"] .pb-band{ background:#FFFFFF !important; }
html[data-theme="light"] .tool-card,html[data-theme="light"] .case-card,html[data-theme="light"] .pv-brand,html[data-theme="light"] .pv-card{ background:#fff !important; border:1px solid rgba(23,21,28,.08) !important; box-shadow:0 10px 30px -20px rgba(94,23,176,.22) !important; }
html[data-theme="light"] .tool-icon{ background:#F1EAFB !important; }
html[data-theme="light"] .tool-icon svg{ stroke:#5E17B0 !important;color:#5E17B0 !important}
html[data-theme="light"] .build-h2,html[data-theme="light"] .cs-h,html[data-theme="light"] .fc3-h,html[data-theme="light"] .bk-h{ text-decoration:none; }
html[data-theme="light"] .cs-h .accent{ color:#5E17B0 !important; }
html[data-theme="light"] .pv-ev{ background:#F1EAFB !important; color:#5E17B0 !important; }
html[data-theme="light"] footer{ background:#FFFFFF !important; border-top:1px solid rgba(23,21,28,.08); }
html[data-theme="light"] .footer-wordmark{ color:rgba(23,21,28,.05) !important; -webkit-text-stroke:0; }
html[data-theme="light"] .stage-wrap .pt-tab:not(.is-on) .pt-head{ color:#fff !important; -webkit-text-fill-color:#fff; }
html[data-theme="light"] .stage-wrap .pt-tab:not(.is-on) .pt-sub{ color:rgba(255,255,255,.75) !important; }
html[data-theme="light"] .stage-wrap .pt-tab.is-on .pt-arrow{ color:#5E17B0 !important; -webkit-text-fill-color:#5E17B0; }
html[data-theme="light"] .light-band .cs-dot{ color:#6E6A7C !important; }
html[data-theme="light"] .fc3-h,html[data-theme="light"] .bk-h span,html[data-theme="light"] .pb-statement .w{ color:#8B8698 !important; }
html[data-theme="light"] .stage-wrap .sv,html[data-theme="light"] .stage-wrap .sv-ph,html[data-theme="light"] .stage-wrap .stage-visual > *{ background:transparent !important; background-image:none !important; }
html[data-theme="light"] .stage-wrap .stage-visual{ background:#4A1290 !important; }
html[data-theme="light"] .stage-wrap .sv-ph-ic,html[data-theme="light"] .stage-wrap [class*="play"]{ background:#fff !important; }
html[data-theme="light"] .stage-wrap [class*="play"] svg,html[data-theme="light"] .stage-wrap [class*="play"] svg *{ fill:#5E17B0 !important; stroke:#5E17B0 !important; color:#5E17B0 !important; }
html[data-theme="light"] .sec-track{ background:rgba(255,255,255,.3) !important; }
html[data-theme="light"] .footer-wordmark{ color:rgba(23,21,28,.035) !important; }
html[data-theme="light"] .hb-glow{ display:none !important; }
html[data-theme="light"] .hf{ background:#FFFFFF !important; border:1px solid rgba(23,21,28,.08) !important; box-shadow:0 18px 40px -18px rgba(94,23,176,.28) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html[data-theme="light"] .hf small{ color:#8B8698 !important; }
html[data-theme="light"] .hf b{ color:#17151C !important; }
html[data-theme="light"] .hf-ic-p{ background:#5E17B0 !important; color:#fff !important; }
html[data-theme="light"] .hf-ic-t,html[data-theme="light"] .hf-ic-v{ background:#E4F6F4 !important; color:#1FA9A2 !important; }
html[data-theme="light"] .hf-ic-s{ background:#F1EAFB !important; color:#5E17B0 !important; }
html[data-theme="light"] .hf-count{ border-left-color:rgba(23,21,28,.1) !important; }
html[data-theme="light"] .hf-count b{ color:#5E17B0 !important; }
html[data-theme="light"] .hf-check{ background:#2FC7C0 !important; color:#fff !important; }
html[data-theme="light"] .avatars-logos span{ background:#FFFFFF !important; border:1px solid rgba(23,21,28,.12) !important; box-shadow:0 0 0 2px #FBFAFE !important; }
html[data-theme="light"] .avatars-logos img{ filter:invert(1) brightness(.15) !important; }
html[data-theme="light"] .build-section{position:relative;color:#F1EEF7}
html[data-theme="light"] .build-section::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#0E0D12;z-index:-1}
html[data-theme="light"] .build-section .build-h2,html[data-theme="light"] .build-section .build-bullet-title,html[data-theme="light"] .build-section .tool-title{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF}
html[data-theme="light"] .build-section .build-bullet-desc,html[data-theme="light"] .build-section .tool-meta{color:#A9A6B4!important}
html[data-theme="light"] .build-section .build-bullet-link{color:#62EFE8!important}
html[data-theme="light"] .build-section .build-bullet-icon svg,html[data-theme="light"] .build-section .build-bullet-icon svg *{stroke:#FFFFFF!important;color:#FFFFFF!important}
html[data-theme="light"] .build-section .tool-card{background:#18171D!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
html[data-theme="light"] .build-section .tool-icon{background:rgba(255,255,255,.08)!important}
html[data-theme="light"] .build-section .tool-icon svg,html[data-theme="light"] .build-section .tool-icon svg *{stroke:#62EFE8!important;color:#62EFE8!important}
html[data-theme="light"] .build-section .tool-go{color:#A9A6B4!important}
html[data-theme="light"] .final-cta-outer{background:#0E0D12!important;padding-bottom:20px!important}
html[data-theme="light"] .final-cta-outer .fc3-label span{color:#8B8698!important}
html[data-theme="light"] .final-cta-outer .fc3-label b{color:#fff!important}
html[data-theme="light"] .final-cta-outer .fc3-small{color:#A9A6B4!important}
html[data-theme="light"] .final-cta-outer .fc3-h{color:#6E6A7C!important}
html[data-theme="light"] .final-cta-outer .fc3-h .hl{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF}
html[data-theme="light"] .final-cta-outer .fc3-pill{color:#fff!important;border-color:rgba(255,255,255,.4)!important;background:transparent!important}
html[data-theme="light"] .final-cta-outer .fc3-circle{background:#62EFE8!important;color:#0E0D12!important}
html[data-theme="light"] .final-cta-outer .bk{background:#18171D!important;border-color:rgba(255,255,255,.08)!important}
html[data-theme="light"] .final-cta-outer .bk-label span{color:#8B8698!important}
html[data-theme="light"] .final-cta-outer .bk-label b{color:#fff!important}
html[data-theme="light"] .final-cta-outer .bk-h{color:#fff!important}
html[data-theme="light"] .final-cta-outer .bk-h span{color:#6E6A7C!important}
html[data-theme="light"] .final-cta-outer .bk-p{color:#A9A6B4!important}
html[data-theme="light"] .final-cta-outer .bk-list li{color:#F1EEF7!important}
html[data-theme="light"] .final-cta-outer .bk-list li:before{background:#62EFE8!important}
html[data-theme="light"] footer{background:#0E0D12!important;border-top:1px solid rgba(255,255,255,.08)!important;color:#A9A6B4}
html[data-theme="light"] footer .footer-col-head{color:#fff!important}
html[data-theme="light"] footer .footer-col a,html[data-theme="light"] footer .footer-tagline,html[data-theme="light"] footer .footer-bottom,html[data-theme="light"] footer .footer-bottom *{color:#A9A6B4!important}
html[data-theme="light"] footer .footer-social a{color:#fff!important;background:transparent!important;border-color:rgba(255,255,255,.2)!important}
html[data-theme="light"] footer .footer-bottom{border-top-color:rgba(255,255,255,.08)!important}
html[data-theme="light"] .footer-wordmark{color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.07)!important}
html[data-theme="light"] .build-section .build-bullet-icon{background:rgba(255,255,255,.08)!important}
html[data-theme="light"] .build-section .build-bullet-icon::before,html[data-theme="light"] .build-section .build-bullet-icon::after{display:none!important}


.mnav-btn{border-color:rgba(23,21,28,.2)!important;background:#fff!important}.mnav-btn span,.mnav-btn span:before,.mnav-btn span:after{background:#17151C!important}
/* HERO 2-COL */
.hx{position:relative;background:#FBFAFE;overflow:hidden;min-height:calc(100vh - 80px);display:flex;align-items:center;padding:60px 0 80px}
.hx-in{width:100%;max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hx .hero-a-h1{text-align:left!important;margin:0 0 22px!important;max-width:none!important;font-size:clamp(42px,5vw,72px)!important;line-height:1!important;letter-spacing:-.03em!important;color:#17151C!important}
.hx .hero-a-h1 .accent{color:#17151C!important;-webkit-text-fill-color:#17151C}
.hx .hero-mark{color:#5E17B0!important;-webkit-text-fill-color:#5E17B0}
.hx-sub{font-size:18px;line-height:1.65;color:#5E5A6B;max-width:46ch;margin:0 0 30px}
.hx-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hx-stats{display:flex;gap:0;margin-bottom:28px}
.hx-stats div{padding-right:28px;margin-right:28px;border-right:1px solid rgba(23,21,28,.1)}
.hx-stats div:last-child{border:0;margin:0;padding:0}
.hx-stats b{display:block;font-family:'Outfit',sans-serif;font-size:32px;font-weight:800;color:#17151C;line-height:1}
.hx-stats small{font-size:13px;color:#8B8698}
.hx-logos{display:flex;align-items:center;gap:14px;font-size:13px;color:#8B8698}
.hx-vis{position:relative;height:620px}
.hx-blob{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-48%);border-radius:50%;background:#5E17B0}
.hx-blob::after{content:"";position:absolute;inset:-34px;border-radius:50%;border:1.5px dashed rgba(94,23,176,.25)}
.hx-phone{position:absolute;left:50%;top:50%;width:270px;transform:translate(-56%,-50%);filter:drop-shadow(0 40px 60px rgba(23,21,28,.35));z-index:3}
.hx-wallet{position:absolute;left:50%;top:50%;width:220px;transform:translate(22%,-40%) rotate(8deg);filter:drop-shadow(0 30px 40px rgba(23,21,28,.3));z-index:2}
.hx-flyer{position:absolute;left:0;top:62%;width:230px;transform:rotate(-9deg);border-radius:14px;border:6px solid #fff;box-shadow:0 30px 50px -20px rgba(23,21,28,.4);z-index:1}
.hx-n{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;border:1px solid rgba(23,21,28,.08);box-shadow:0 18px 40px -18px rgba(94,23,176,.35);white-space:nowrap;animation:hxF 6s ease-in-out infinite}
.hx-n small{display:block;font-size:10.5px;color:#8B8698;line-height:1.2}.hx-n b{display:block;font-size:13px;font-weight:600;color:#17151C;line-height:1.3}
.hx-n .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.hx-n .ic.p{background:#5E17B0;color:#fff}.hx-n .ic.t{background:#E4F6F4;color:#1FA9A2}.hx-n .ic.l{background:#F1EAFB;color:#5E17B0}
.hx-n em{font-style:normal;margin-left:6px;padding-left:10px;border-left:1px solid rgba(23,21,28,.1);text-align:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:17px;color:#5E17B0;line-height:1}
.hx-n em small{font-family:'Poppins',sans-serif;font-weight:500}
.hx-n1{left:2%;top:8%;animation-delay:0s}.hx-n2{right:-2%;top:30%;animation-delay:1.2s}.hx-n3{left:10%;top:46%;animation-delay:2.4s}
@keyframes hxF{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.hx-n{animation:none}}
@media(max-width:960px){.hx{min-height:0;padding:40px 0 60px}.hx-in{grid-template-columns:1fr;padding:0 20px}.hx-vis{height:520px;margin-top:10px}.hx-blob{width:400px;height:400px}.hx-phone{width:220px}.hx-wallet{width:180px}.hx-flyer{width:170px;top:64%}}
@media(max-width:560px){.hx .hero-a-h1{font-size:clamp(36px,10vw,48px)!important}.hx-stats b{font-size:24px}.hx-stats div{padding-right:16px;margin-right:16px}.hx-vis{height:460px}.hx-blob{width:320px;height:320px}.hx-phone{width:190px}.hx-wallet{width:150px;transform:translate(18%,-40%) rotate(8deg)}.hx-flyer{width:140px;left:-4%}.hx-n{transform:scale(.88)}.hx-n2{right:-6%}.hx-n1{left:-2%}.hx-n3{left:-2%}.hx-logos{flex-wrap:wrap}}


.hc2-panel{position:relative;height:640px;border-radius:28px;background:#5E17B0;overflow:hidden}
.hc2-panel::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1.5px solid rgba(255,255,255,.16)}
.hc2-panel::after{content:"";position:absolute;left:-80px;bottom:-160px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.06)}
.hc2-panel .p{position:absolute;left:50%;bottom:-120px;width:300px;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 30px 50px rgba(40,20,80,0.122))}
.hc2-panel .hx-n2{right:24px;top:150px;left:auto}.hc2-panel .hx-n3{left:24px;top:260px}
.hc2-q{position:absolute;left:24px;top:40px;color:#fff;z-index:3}.hc2-q b{display:block;font-family:Outfit,sans-serif;font-size:44px;font-weight:800;line-height:1}.hc2-q small{color:rgba(255,255,255,.75);font-size:13px}
@media(max-width:960px){.hc2-panel{height:540px}}

@media(max-width:560px){.hc2-panel{height:470px}.hc2-panel .p{width:230px;bottom:-110px}.hc2-panel .hx-n2{top:120px;right:12px}.hc2-panel .hx-n3{top:210px;left:12px}.hc2-q b{font-size:36px}}
/* HERO VIDEO-LIKE LOOP */
.hv{display:flex;flex-direction:column;padding:22px 22px 18px}
.hv::before,.hv::after{pointer-events:none}
.hv-steps{position:relative;z-index:3;display:flex;gap:6px;background:rgba(255,255,255,.1);border-radius:999px;padding:5px;align-self:flex-start}
.hv-steps span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.7);font-size:13px;transition:background .3s,color .3s;cursor:pointer}
.hv-steps span b{font-weight:600}
.hv-steps span.on{background:#fff;color:#5E17B0}
.hv-stage{position:relative;flex:1;margin-top:10px}
.hv-sc{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s ease,transform .6s ease}
.hv-sc.on{opacity:1;transform:none}
.hv-cap{position:absolute;left:0;right:0;top:6px;text-align:left;color:#fff;font-family:Outfit,sans-serif;font-weight:700;font-size:22px;line-height:1.2;z-index:4;padding-left:4px}
.hv-cap{background:none}
.hv-fl{width:330px;margin-bottom:40px;border-radius:14px;border:7px solid #fff;transform:rotate(-3deg);box-shadow:0 30px 60px -20px rgba(40,20,80,0.158)}
.hv-scan{position:absolute;left:50%;top:22%;width:360px;height:330px;transform:translateX(-50%);border-radius:18px;overflow:hidden;pointer-events:none}
.hv-scan i{position:absolute;left:0;right:0;height:3px;background:#62EFE8;box-shadow:0 0 18px 4px rgba(98,239,232,.7);top:0}
.hv-s0.on .hv-scan i{animation:hvScan 2.2s ease-in-out infinite}
@keyframes hvScan{0%{top:6%}50%{top:90%}100%{top:6%}}
.hv-ph{width:250px;margin-bottom:-40px;filter:drop-shadow(0 30px 50px rgba(40,20,80,0.14))}
.hv-s1 .hv-ph,.hv-s2 .hv-ph{position:relative;bottom:0}
.hv-type{position:absolute;left:50%;top:44%;transform:translateX(-50%);width:230px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px -16px rgba(40,20,80,0.158);z-index:3}
.hv-type small{display:block;font-size:11px;color:#8B8698}.hv-type b{display:flex;align-items:center;font-size:16px;color:#17151C;height:24px}
.hv-type i{width:2px;height:18px;background:#5E17B0;margin-left:2px;animation:hvBlink .8s steps(1) infinite}
@keyframes hvBlink{50%{opacity:0}}
.hv-pop{position:absolute;left:50%;top:30%;transform:translateX(-50%) translateY(10px);display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 16px 10px 10px;box-shadow:0 20px 40px -16px rgba(40,20,80,0.158);opacity:0;z-index:3;white-space:nowrap}
.hv-s2.on .hv-pop{animation:hvPop .5s .5s ease forwards}
@keyframes hvPop{to{opacity:1;transform:translateX(-50%)}}
.hv-pop .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#E4F6F4;color:#1FA9A2}
.hv-pop small{display:block;font-size:11px;color:#8B8698}.hv-pop b{font-size:14px;color:#17151C}
.hv-rep{align-self:center;margin-bottom:20px;margin-top:40px;width:340px;background:#fff;border-radius:22px;padding:24px;color:#17151C;box-shadow:0 30px 60px -20px rgba(40,20,80,0.158)}
.hv-rep small{font-size:12px;color:#8B8698}.hv-rep>b{display:block;font-family:Outfit,sans-serif;font-size:64px;font-weight:800;line-height:1;margin-top:8px;color:#5E17B0}
.hv-rep>span{font-size:14px;color:#5E5A6B}
.hv-bars{display:flex;align-items:flex-end;gap:8px;height:80px;margin:18px 0}
.hv-bars i{flex:1;height:0;border-radius:6px 6px 2px 2px;background:#F1EAFB;transition:height .7s ease}
.hv-bars i:last-child{background:#5E17B0}
.hv-s3.on .hv-bars i{height:var(--h)}
.hv-row{display:flex;gap:28px;border-top:1px solid rgba(23,21,28,.08);padding-top:14px}
.hv-row b{display:block;font-family:Outfit,sans-serif;font-size:24px;font-weight:800}.hv-row small{font-size:12px;color:#8B8698}
.hv-prog{position:relative;z-index:3;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:8px}
.hv-prog i{display:block;height:100%;width:0;background:#62EFE8}
@media(max-width:560px){.hv-steps span b{display:none}.hv-fl{width:240px;margin-bottom:60px}.hv-scan{width:260px;height:250px}.hv-ph{width:200px}.hv-rep{width:270px;padding:18px}.hv-rep>b{font-size:48px}.hv-type{width:200px}}
@media(prefers-reduced-motion:reduce){.hv-sc{transition:none}.hv-scan i,.hv-type i{animation:none}}