#page-home {
      --home-ink: #17002b;
      --home-orange: #fe7c01;
      --home-purple: #71248a;
      --home-amber: #fdc834;
      --home-pink: #ff4f9a;
      --home-cyan: #25d5ff;
      --home-lime: #b7ff42;
      --home-card: rgba(255, 255, 255, .82);
      --home-glass: rgba(255, 255, 255, .68);
      --home-line: rgba(23, 0, 43, .14);
      background:
        radial-gradient(circle at 8% 5%, rgba(253, 200, 52, .34), transparent 28rem),
        radial-gradient(circle at 88% 8%, rgba(254, 124, 1, .28), transparent 30rem),
        radial-gradient(circle at 50% 48%, rgba(113, 36, 138, .12), transparent 36rem),
        #fff;
    }

    #page-home .snap-hero {
      position: relative;
      min-height: calc(100vh - 78px);
      padding: 76px 0 58px;
      overflow: hidden;
      isolation: isolate;
    }

    /* Compact spacing calibration */
    #page-home .snap-hero{min-height:min(720px,calc(100vh - 78px));padding:62px 0 46px;}
    #page-home .hero-grid{gap:clamp(28px,4vw,42px);}

    #page-home .snap-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background-image:
        linear-gradient(rgba(23, 0, 43, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 0, 43, .07) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 48%, transparent 100%);
      animation: homeGridDrift 14s linear infinite;
    }

    #page-home .snap-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(120deg, transparent 0 24%, rgba(255,255,255,.74) 24% 25%, transparent 25% 100%),
        radial-gradient(circle at 74% 42%, rgba(37, 213, 255, .18), transparent 22rem);
      pointer-events: none;
    }

    #page-home .home-glow {
      position: absolute;
      border-radius: 999px;
      filter: blur(20px);
      opacity: .62;
      z-index: -1;
      pointer-events: none;
      animation: homeGlowFloat 9s ease-in-out infinite alternate;
    }

    #page-home .home-glow.one {
      width: 340px;
      height: 340px;
      background: rgba(253, 200, 52, .58);
      top: -110px;
      left: 9%;
    }

    #page-home .home-glow.two {
      width: 390px;
      height: 390px;
      background: rgba(254, 124, 1, .35);
      right: -90px;
      top: 90px;
      animation-delay: -2s;
    }

    #page-home .home-glow.three {
      width: 280px;
      height: 280px;
      background: rgba(113, 36, 138, .32);
      left: -80px;
      bottom: 2%;
      animation-delay: -4s;
    }

    #page-home .hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(330px, .86fr);
      gap: 54px;
    }

    #page-home .hero-copy {
      position: relative;
      z-index: 4;
    }

    #page-home .home-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      margin-bottom: 20px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 999px;
      background: var(--home-card);
      box-shadow: 4px 4px 0 var(--home-ink);
      color: var(--home-purple);
      font-family: var(--font-mono);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      animation: homePopIn .65s ease both;
    }

    #page-home .home-kicker-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--home-lime);
      box-shadow: 0 0 0 6px rgba(183, 255, 66, .22);
      animation: homePulse 1.5s ease-in-out infinite;
    }

    #page-home .hero-copy h1 {
      max-width: 760px;
      margin-bottom: 20px;
      letter-spacing: 0;
      animation: homeRise .72s ease .08s both;
    }

    #page-home .hero-copy h1 .accent {
      position: relative;
      color: var(--home-orange);
      text-shadow: 3px 3px 0 rgba(253, 200, 52, .85);
    }

    #page-home .hero-copy h1 .accent::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 0;
      bottom: .08em;
      height: .18em;
      z-index: -1;
      background: var(--home-amber);
      border-radius: 999px;
      transform: rotate(-1.5deg);
    }

    #page-home .hero-copy .lead {
      max-width: 680px;
      color: #4d3d62;
      animation: homeRise .72s ease .18s both;
    }

    #page-home .hero-ctas {
      animation: homeRise .72s ease .28s both;
    }

    #page-home .btn {
      position: relative;
      overflow: hidden;
    }

    #page-home .btn::before {
      content: "";
      position: absolute;
      inset: -30% auto -30% -42%;
      width: 36%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
      transform: skewX(-18deg);
      animation: homeButtonShine 3.4s ease-in-out infinite;
    }

    #page-home .home-proof-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      max-width: 610px;
      margin-top: 28px;
      animation: homeRise .72s ease .38s both;
    }

    #page-home .home-proof {
      min-height: 98px;
      padding: 16px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 18px;
      background: var(--home-card);
      box-shadow: 4px 4px 0 var(--home-ink);
      backdrop-filter: blur(14px);
      transform: rotate(var(--tilt));
      transition: transform .2s ease, box-shadow .2s ease;
    }

    #page-home .home-proof:hover {
      transform: translate(-3px, -3px) rotate(0deg);
      box-shadow: 8px 8px 0 var(--home-ink);
    }

    #page-home .home-proof strong {
      display: block;
      color: var(--home-ink);
      font-family: var(--font-display);
      font-size: 1.65rem;
      line-height: 1;
    }

    #page-home .home-proof span {
      display: block;
      margin-top: 6px;
      color: #665279;
      font-size: .82rem;
      font-weight: 800;
    }

    #page-home .hero-visual {
      min-height: 560px;
      align-items: center;
      perspective: 1000px;
    }

    #page-home .snack-orbit {
      position: absolute;
      width: min(92vw, 540px);
      aspect-ratio: 1;
      border: 2px dashed rgba(23, 0, 43, .18);
      border-radius: 50%;
      animation: homeOrbit 22s linear infinite;
    }

    #page-home .snack-orbit:nth-child(2) {
      width: min(76vw, 430px);
      animation-duration: 16s;
      animation-direction: reverse;
      opacity: .65;
    }

    #page-home .float-snack {
      position: absolute;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 18px;
      background: #fff;
      box-shadow: 4px 4px 0 var(--home-ink);
      font-size: 1.55rem;
      animation: homeSnackWiggle 2.8s ease-in-out infinite;
    }

    #page-home .snack-a { left: 10%; top: 11%; }
    #page-home .snack-b { right: 6%; top: 23%; animation-delay: -.7s; }
    #page-home .snack-c { right: 14%; bottom: 13%; animation-delay: -1.4s; }
    #page-home .snack-d { left: 0; bottom: 26%; animation-delay: -2.1s; }

    #page-home .mock-machine {
      width: min(330px, 78vw);
      padding: 22px;
      border-radius: 30px;
      background:
        linear-gradient(155deg, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(180deg, #8a32a5, var(--home-purple));
      box-shadow: 12px 12px 0 var(--home-ink), 0 36px 80px rgba(113, 36, 138, .35);
      transform: rotate(-2deg);
      animation: homeMachineBob 4.8s ease-in-out infinite;
    }

    #page-home .mock-machine::before {
      content: "";
      position: absolute;
      inset: 16px 16px auto auto;
      width: 12px;
      height: 74%;
      border-radius: 999px;
      background: linear-gradient(#fff, rgba(255,255,255,.08));
      opacity: .26;
    }

    #page-home .mock-screen,
    #page-home .machine-screen {
      border: 2px solid rgba(253, 200, 52, .72);
      box-shadow: inset 0 0 18px rgba(253, 200, 52, .14), 0 0 24px rgba(253, 200, 52, .22);
      animation: homeScreenGlow 1.9s ease-in-out infinite alternate;
    }

    #page-home .mock-grid {
      gap: 10px;
    }

    #page-home .mock-cell {
      border-radius: 14px;
      box-shadow: inset 0 -8px 0 rgba(23, 0, 43, .05);
      animation: homeSlotIdle 3s ease-in-out infinite;
      background:rgba(255,255,255,.72);
      padding:8px;
    }

    #page-home .shelf-product{
      max-height:58px;
      object-fit:contain;
      background:transparent;
    }

    #page-home .mock-cell:nth-child(2n) { animation-delay: -.8s; }
    #page-home .mock-cell:nth-child(3n) { animation-delay: -1.6s; }

    #page-home .mock-tray,
    #page-home .machine-tray {
      position: relative;
      overflow: hidden;
      background: linear-gradient(90deg, var(--home-orange), var(--home-amber), var(--home-orange));
      background-size: 200% 100%;
      animation: homeTrayMove 2.6s linear infinite;
    }

    #page-home .mock-coin {
      width: 90px;
      height: 90px;
      color: var(--home-ink);
      animation: homeCoinBounce 2.2s ease-in-out infinite;
    }

    #page-home .float-card {
      position: absolute;
      z-index: 5;
      min-width: 170px;
      padding: 14px 16px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 18px;
      background: rgba(255,255,255,.84);
      box-shadow: 5px 5px 0 var(--home-ink), 0 18px 38px rgba(23,0,43,.12);
      backdrop-filter: blur(16px);
      color: var(--home-ink);
      font-weight: 900;
      line-height: 1.15;
      animation: homeFloatCard 4.4s ease-in-out infinite;
    }

    #page-home .float-card small {
      display: block;
      margin-top: 5px;
      color: #6a567c;
      font-size: .72rem;
      font-weight: 800;
    }

    #page-home .float-card.one { left: 2%; top: 86px; }
    #page-home .float-card.two { right: -6px; top: 126px; animation-delay: -1.2s; }
    #page-home .float-card.three { left: 0; bottom: 108px; animation-delay: -2.1s; }
    #page-home .float-card.four { right: 8%; bottom: 52px; animation-delay: -3s; }

    #page-home .scroll-cue {
      position: absolute;
      left: 50%;
      bottom: 18px;
      display: grid;
      place-items: center;
      width: 42px;
      height: 58px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 999px;
      background: rgba(255,255,255,.64);
      box-shadow: 3px 3px 0 var(--home-ink);
      transform: translateX(-50%);
    }

    #page-home .scroll-cue::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--home-orange);
      animation: homeScrollDot 1.25s ease-in-out infinite;
    }

    #page-home #demo {
      background:
        radial-gradient(circle at 16% 24%, rgba(254,124,1,.16), transparent 25rem),
        radial-gradient(circle at 82% 78%, rgba(113,36,138,.12), transparent 27rem);
    }

    #page-home .demo-wrap {
      align-items: center;
    }

    #page-home .demo-copy {
      position: relative;
    }

    #page-home .demo-copy::after {
      content: "LIVE DEMO";
      position: absolute;
      right: 8%;
      top: -28px;
      padding: 8px 12px;
      border:var(--border-size) solid var(--home-ink);
      border-radius: 999px;
      background: var(--home-lime);
      box-shadow: 3px 3px 0 var(--home-ink);
      color: var(--home-ink);
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 700;
      transform: rotate(7deg);
      animation: homeSnackWiggle 2.4s ease-in-out infinite;
    }

    #page-home .demo-counter {
      border:var(--border-size) solid var(--home-amber);
      box-shadow: 0 0 26px rgba(253, 200, 52, .16);
    }

    #page-home .machine {
      max-width: 460px;
      padding: 28px;
      border-radius: 32px;
      background:
        linear-gradient(140deg, rgba(255,255,255,.16), transparent 32%),
        linear-gradient(180deg, #7e2b99, #4d1265);
      box-shadow: 12px 12px 0 var(--home-ink), 0 30px 72px rgba(23, 0, 43, .28);
      animation: homeMachineBob 5s ease-in-out infinite;
    }

    #page-home .machine::after {
      content: "SNAPGO OS";
      position: absolute;
      right: 18px;
      top: 50%;
      writing-mode: vertical-rl;
      color: rgba(255,255,255,.38);
      font-family: var(--font-mono);
      font-size: .64rem;
      letter-spacing: .16em;
      font-weight: 700;
    }

    #page-home .machine-grid {
      gap: 12px;
    }

    #page-home .slot {
      min-height: 96px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(255,246,216,.96));
      box-shadow: inset 0 -8px 0 rgba(23,0,43,.05);
      cursor: pointer;
      padding:10px 8px;
    }

    #page-home .slot-product{
      max-height:48px;
      object-fit:contain;
      background:transparent;
    }

    #page-home .slot:hover {
      transform: translateY(-5px) rotate(-1deg);
      background: #fff;
    }

    #page-home .slot-emoji {
      filter: drop-shadow(0 8px 8px rgba(23,0,43,.14));
      transition: transform .18s ease;
    }

    #page-home .slot:hover .slot-emoji {
      transform: scale(1.16) rotate(7deg);
    }

    #page-home .slot.pulse {
      animation: homeProductPop .45s ease;
    }

    #page-home .burst {
      color: transparent;
      font-size: 0;
    }

    #page-home .burst::before {
      content: "\1F4A5";
      color: initial;
      font-size: 1.7rem;
    }

    #page-home .toast {
      background: var(--home-ink);
      color: var(--home-amber);
      box-shadow: 0 16px 38px rgba(23, 0, 43, .28);
    }

    #page-home .feature-card,
    #page-home .preview-card,
    #page-home .card {
      position: relative;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    #page-home .feature-card::before,
    #page-home .preview-card::before,
    #page-home .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.72), transparent 42%);
      pointer-events: none;
    }

    #page-home .feature-card:hover,
    #page-home .preview-card:hover {
      transform: translate(-4px, -4px) rotate(-.5deg);
      box-shadow: 9px 9px 0 var(--home-ink);
    }

    #page-home .home-section-shell {
      position: relative;
    }

    #page-home .home-section-shell::before {
      content: "";
      position: absolute;
      inset: 34px 0 auto;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(23,0,43,.18), transparent);
      pointer-events: none;
    }

    #page-home .promise-banner {
      background:
        radial-gradient(circle at 18% 20%, rgba(253,200,52,.28), transparent 18rem),
        radial-gradient(circle at 82% 70%, rgba(254,124,1,.22), transparent 22rem),
        var(--home-ink);
    }

    #page-home .promise-banner p {
      text-shadow: 0 12px 34px rgba(0,0,0,.24);
    }

    #page-home .split-panel {
      background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%),
        var(--home-ink);
    }

    #page-home .final-cta {
      background:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.45), transparent 14rem),
        radial-gradient(circle at 90% 22%, rgba(253,200,52,.75), transparent 16rem),
        linear-gradient(135deg, var(--home-orange), #ff9d2e);
    }

    @keyframes homeGridDrift {
      from { background-position: 0 0, 0 0; }
      to { background-position: 46px 46px, 46px 46px; }
    }

    @keyframes homeGlowFloat {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(18px, 22px, 0) scale(1.08); }
    }

    @keyframes homeRise {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes homePopIn {
      from { opacity: 0; transform: translateY(12px) rotate(-3deg) scale(.96); }
      to { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
    }

    @keyframes homePulse {
      0%, 100% { transform: scale(.86); opacity: .76; }
      50% { transform: scale(1.18); opacity: 1; }
    }

    @keyframes homeButtonShine {
      0%, 58% { left: -42%; }
      76%, 100% { left: 118%; }
    }

    @keyframes homeOrbit {
      to { transform: rotate(360deg); }
    }

    @keyframes homeSnackWiggle {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-9px) rotate(5deg); }
    }

    @keyframes homeMachineBob {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-14px) rotate(1.5deg); }
    }

    @keyframes homeScreenGlow {
      from { box-shadow: inset 0 0 16px rgba(253, 200, 52, .12), 0 0 16px rgba(253, 200, 52, .12); }
      to { box-shadow: inset 0 0 26px rgba(253, 200, 52, .28), 0 0 34px rgba(253, 200, 52, .28); }
    }

    @keyframes homeSlotIdle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @keyframes homeTrayMove {
      to { background-position: 200% 0; }
    }

    @keyframes homeCoinBounce {
      0%, 100% { transform: rotate(8deg) translateY(0); }
      50% { transform: rotate(-4deg) translateY(-8px); }
    }

    @keyframes homeFloatCard {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-12px) rotate(2deg); }
    }

    @keyframes homeScrollDot {
      0% { transform: translateY(-12px); opacity: 0; }
      35%, 70% { opacity: 1; }
      100% { transform: translateY(12px); opacity: 0; }
    }

    @keyframes homeProductPop {
      0% { transform: scale(1); }
      45% { transform: scale(.9) rotate(-2deg); }
      100% { transform: scale(1.04) rotate(1deg); }
    }

    @media (max-width: 980px) {
      #page-home .snap-hero {
        padding-top: 52px;
      }

      #page-home .hero-grid {
        grid-template-columns: 1fr;
      }

      #page-home .hero-visual {
        min-height: 520px;
      }

      #page-home .float-card.two {
        right: 6%;
      }

      #page-home .home-proof-row {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      #page-home .snap-hero {
        min-height: auto;
        padding: 44px 0 68px;
      }

      #page-home .home-kicker {
        font-size: .66rem;
        max-width: 100%;
      }

      #page-home .hero-copy h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
      }

      #page-home .home-proof-row {
        grid-template-columns: 1fr;
      }

      #page-home .hero-visual {
        min-height: 500px;
      }

      #page-home .mock-machine {
        width: min(285px, 82vw);
      }

      #page-home .float-card {
        min-width: 138px;
        padding: 11px 12px;
        font-size: .86rem;
      }

      #page-home .float-card.one { left: 0; top: 58px; }
      #page-home .float-card.two { right: 0; top: 102px; }
      #page-home .float-card.three { left: 0; bottom: 82px; }
      #page-home .float-card.four { right: 0; bottom: 34px; }

      #page-home .float-snack {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.25rem;
      }

      #page-home .machine {
        padding: 22px;
      }

      #page-home .machine-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      #page-home .slot {
        min-height: 88px;
      }

      #page-home .demo-copy::after {
        right: 0;
        top: -42px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #page-home *,
      #page-home *::before,
      #page-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }

    /* Gen-Z polish: brighter, cleaner, evenly spaced */
    #page-home .snap-hero {
      padding: clamp(56px, 8vw, 92px) 0 clamp(56px, 7vw, 76px);
    }

    #page-home .hero-grid,
    #page-home .demo-wrap {
      gap: clamp(32px, 5vw, 56px);
    }

    #page-home .hero-copy h1 .accent,
    #page-home .section-head h2 {
      background: linear-gradient(90deg, var(--home-orange), var(--home-pink), var(--home-purple));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: none;
    }

    #page-home .home-proof,
    #page-home .feature-card,
    #page-home .preview-card,
    #page-home .split-panel,
    #page-home .final-cta,
    #page-home .machine,
    #page-home .mock-machine {
      border: var(--border);
      border-radius: 22px;
    }

    #page-home .feature-card,
    #page-home .preview-card {
      padding: 28px;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(14px);
    }

    #page-home .home-proof:hover,
    #page-home .feature-card:hover,
    #page-home .preview-card:hover {
      transform: translateY(-6px);
    }

    #page-home .snap-hero{min-height:min(720px,calc(100vh - 78px));padding:62px 0 46px;}
    #page-home .hero-grid{gap:clamp(28px,4vw,42px);}