/* =============================================================================
   ProxiesFood site layer: tokens, animated sky, glass nav, cards, glow art,
   stats, FAQ, closing cards, footer. Loaded after style.css on every public
   page (index, proxy-reseller, rotating-proxies, dashboard).
   ============================================================================= */

:root {
    --bg: #ffffff;
    --surface: #f6f7f9;
    --surface-2: #edeff3;
    --ink: #101114;
    --ink-2: #4d5261;
    --mute: #858a97;
    --line: rgba(16,17,20,0.10);
    --line-2: rgba(16,17,20,0.18);
    --accent: #FFC800;
    --accent-2: #FFB300;
    --accent-ink: #9a6600;
    --accent-text: #D97A00;
    --accent-text-glow: 0 0 18px rgba(255,170,0,0.30);
    --accent-soft: rgba(255,200,0,0.16);
    --green: #16a35f;
    --green-soft: rgba(22,163,95,0.12);
    --red: #ff3b2e;
    --shadow: 0 10px 30px rgba(16,17,20,0.07);
    --shadow-lg: 0 30px 80px rgba(16,17,20,0.13);
    --glass: rgba(255,255,255,0.72);
    --glass-2: rgba(255,255,255,0.86);
    --nav-bg: rgba(255,255,255,0.55);
    --nav-bg-2: rgba(255,255,255,0.78);
    --nav-line: rgba(16,17,20,0.08);
    --card-base: #ffffff;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,252,0.94));
    --card-glow: radial-gradient(130% 90% at 0% 0%, rgba(255,200,0,0.07), transparent 55%);
    --edge: linear-gradient(180deg, rgba(16,17,20,0.10), rgba(16,17,20,0.08));
    --edge-hot: linear-gradient(180deg, rgba(255,179,0,0.75), rgba(255,179,0,0.30));
    --hi: inset 0 1px 0 rgba(255,255,255,0.9);
    --art-bg: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255,190,0,0.26), transparent 70%), linear-gradient(180deg, #fffdf6, #fff6da);
    --art-grid: transparent;
    --grid-line: transparent;
    --surface-1: rgba(255,255,255,0.86);
    --surface-3: #e9ebf0;
    --surface-solid: #ffffff;
    --btn-2-bg: rgba(255,255,255,0.86);
    --btn-2-bg-hover: #f6f7f9;
    --btn-2-line: rgba(16,17,20,0.18);
    --sky-bg: #ffffff;
    --well: #f3f4f7;
    --well-in: inset 0 1px 2px rgba(16,17,20,0.06);
    --btn-2-ring: linear-gradient(180deg, rgba(16,17,20,0.16), rgba(16,17,20,0.20));
    --btn-2-fill: linear-gradient(180deg, #ffffff, #fbfbfc);
    --btn-2-fill-hover: linear-gradient(180deg, #ffffff, #f6f7f9);
    --btn-2-ring-hot: linear-gradient(180deg, rgba(240,170,0,0.95), rgba(214,140,0,0.75));
    --stat-glow: rgba(255,190,0,0.16);
    --aurora-a: rgba(255,200,0,0.42);
    --aurora-b: rgba(255,150,0,0.22);
    --aurora-c: rgba(255,226,120,0.40);
    --spot: rgba(255,196,0,0.32);
    --g-pop: linear-gradient(135deg, rgba(255,200,0,0.20), rgba(255,200,0,0.05) 60%, transparent);
    --g-cta: linear-gradient(120deg, #FFC800 0%, #FFB300 45%, #F29B00 100%);
    --g-text: linear-gradient(90deg, #EFB000 0%, #CF8A00 55%, #A86A00 100%);
    --g-shine: linear-gradient(90deg, #EFB000 0%, #CF8A00 25%, #A86A00 50%, #CF8A00 75%, #EFB000 100%);
    --icon-stroke-a: #FFB800;
    --icon-stroke-b: #E07A00;
    --icon-depth: #b86a00;
    --icon-glow: rgba(255,170,0,0.45);
    --ic-bg: radial-gradient(circle at 50% 120%, rgba(255,190,0,0.40), transparent 65%), linear-gradient(180deg, #fffdf5, #fff1c7);
    --ic-edge: rgba(255,179,0,0.45);
    --ic-halo: 0 10px 26px -10px rgba(255,160,0,0.55);

    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --bg-card: var(--surface);
    --bg-card-glass: var(--surface);
    --accent-light: #FFD84D;
    --accent-glow: rgba(255,200,0,0.28);
    --success: var(--green);
    --success-light: var(--green);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--mute);
    --border-color: var(--line);
    --border-glow: rgba(255,200,0,0.45);
    --error: #ff5c6c;
    color-scheme: light;
}
:root[data-theme="dark"] {
    /* True dark: near-black ground, SOLID surfaces one step up, hairline edges
       lit from the top. Gold reads as light on black: small saturated glows,
       never wide low-alpha washes (they turn brown). */
    --bg: #07070a;
    --surface-1: #0f0f12;
    --surface: #16161a;
    --surface-2: #1c1c21;
    --surface-3: #232329;
    --surface-solid: #0f0f12;
    --well: #0b0b0e;
    --well-in: inset 0 1px 2px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.2);
    --ink: #ffffff;
    --ink-2: #a3a3ad;
    --mute: #71717a;
    --line: rgba(255,255,255,0.075);
    --line-2: rgba(255,255,255,0.12);
    --accent-ink: #FFC800;
    --accent-text: #FFB800;
    --accent-text-glow: 0 0 22px rgba(255,170,0,0.38);
    --accent-soft: rgba(255,200,0,0.12);
    --green: #3ad494;
    --green-soft: rgba(34,193,126,0.13);
    --shadow: 0 24px 48px -28px rgba(0,0,0,0.9);
    --shadow-lg: 0 40px 90px -40px rgba(0,0,0,0.95);
    --glass: rgba(12,12,15,0.72);
    --glass-2: rgba(12,12,15,0.86);
    --nav-bg: rgba(10,10,12,0.55);
    --nav-bg-2: rgba(10,10,12,0.80);
    --nav-line: rgba(255,255,255,0.08);
    --btn-2-bg: #141418;
    --btn-2-bg-hover: #1a1a1f;
    --btn-2-line: rgba(255,255,255,0.12);
    --btn-2-ring: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.06));
    --btn-2-fill: linear-gradient(180deg, #1c1c21, #121215);
    --btn-2-fill-hover: linear-gradient(180deg, #232329, #17171b);
    --btn-2-ring-hot: linear-gradient(180deg, rgba(255,214,102,0.95), rgba(255,180,0,0.45) 55%, rgba(255,160,0,0.22));
    --card-base: #0f0f12;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 55%);
    --card-glow: radial-gradient(120% 70% at 50% -10%, rgba(255,200,0,0.045), transparent 60%);
    --edge: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.065) 40%, rgba(255,255,255,0.055));
    --edge-hot: linear-gradient(180deg, rgba(255,214,102,0.9), rgba(255,180,0,0.32) 45%, rgba(255,255,255,0.08) 80%);
    --hi: inset 0 1px 0 rgba(255,255,255,0.05);
    --stat-glow: rgba(255,170,0,0.07);
    --art-bg: radial-gradient(ellipse 70% 90% at 50% 112%, rgba(255,160,0,0.24), transparent 70%), linear-gradient(180deg, #121215, #0c0c0f);
    --art-grid: transparent;
    --grid-line: transparent;
    --sky-bg: radial-gradient(70% 45% at 50% -8%, rgba(255,170,0,0.11), transparent 70%), radial-gradient(50% 40% at 100% 30%, rgba(255,110,0,0.035), transparent 70%), linear-gradient(180deg, #0a0a0d 0%, #07070a 60%);
    --aurora-a: rgba(255,150,0,0.06);
    --aurora-b: rgba(255,100,0,0.045);
    --aurora-c: rgba(255,190,40,0.045);
    --spot: rgba(255,176,0,0.16);
    --g-pop: linear-gradient(180deg, rgba(255,200,0,0.09), rgba(255,200,0,0.02) 55%, rgba(255,200,0,0));
    --g-text: linear-gradient(90deg, #FFEFA6 0%, #FFC800 40%, #FF9500 75%, #E85D00 100%);
    --g-shine: linear-gradient(90deg, #FFEFA6 0%, #FFC800 20%, #FF9500 37%, #E85D00 50%, #FF9500 63%, #FFC800 80%, #FFEFA6 100%);
    --icon-stroke-a: #FFD23F;
    --icon-stroke-b: #FF9A00;
    --icon-depth: #7a4200;
    --icon-glow: rgba(255,170,0,0.5);
    --ic-bg: radial-gradient(circle at 50% 125%, rgba(255,170,0,0.40), transparent 62%), linear-gradient(180deg, #17161a, #0e0e11);
    --ic-edge: rgba(255,190,0,0.32);
    --ic-halo: 0 12px 30px -12px rgba(255,150,0,0.45);
    --success-light: #3ad494;
    color-scheme: dark;
}

html { background: var(--bg); scroll-padding-top: 90px; }
body { font-family: 'Manrope', system-ui, sans-serif; background: transparent; color: var(--ink); font-weight: 500; line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
code, pre { font-family: 'IBM Plex Mono', monospace; }
a { color: inherit; }
.bg-gradient, .particles, .hero-glow { display: none; }
::selection { background: var(--accent); color: #101114; }
main, footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Sky: warm base gradient + aurora blobs + star/network canvas (sky.js),
   fixed behind everything.
   --------------------------------------------------------------------------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky-bg); }
.sky-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.sky-aurora i:nth-child(1) { width: 62vw; height: 52vh; left: -14vw; top: -18vh; background: var(--aurora-a); animation: drift1 38s ease-in-out infinite alternate; }
.sky-aurora i:nth-child(2) { width: 50vw; height: 46vh; right: -16vw; top: 18vh; background: var(--aurora-b); animation: drift2 46s ease-in-out infinite alternate; }
.sky-aurora i:nth-child(3) { width: 58vw; height: 40vh; left: 18vw; bottom: -24vh; background: var(--aurora-c); animation: drift3 52s ease-in-out infinite alternate; }
@keyframes drift1 { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(12vw,8vh,0) scale(1.12); } 100% { transform: translate3d(4vw,20vh,0) scale(0.94); } }
@keyframes drift2 { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-14vw,12vh,0) scale(0.9); } 100% { transform: translate3d(-6vw,-10vh,0) scale(1.1); } }
@keyframes drift3 { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-10vw,-14vh,0) scale(1.15); } 100% { transform: translate3d(14vw,-4vh,0) scale(0.95); } }
.sky-grid { display: none; }
.sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Grain keeps the big gradients from banding. */
.sky::after { content: ""; position: absolute; inset: -50%; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .sky::after { opacity: 0.07; }

/* Spotlight cone from the top of a hero, like a stage light. */
.spot { position: absolute; left: 50%; top: -120px; width: min(1100px, 120vw); height: 760px; transform: translateX(-50%); pointer-events: none; z-index: 0; background: radial-gradient(ellipse 42% 60% at 50% 0%, var(--spot), transparent 72%); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); animation: spotPulse 9s ease-in-out infinite; }
@keyframes spotPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn { position: relative; overflow: hidden; border-radius: 11px; font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: 0; isolation: isolate; }
/* Buttons that position themselves (dashboard.css) keep their own placement. */
.btn.dash-copy { position: absolute; }
/* Primary: gold, crisp. Dark-gold hairline ring, light on the top edge, shade on
   the bottom edge, warm glow underneath; hover lifts and the glow grows. */
.btn-primary { background: linear-gradient(180deg, #FFD84A 0%, #FFC800 48%, #F7B000 100%); color: #101114; border: none; box-shadow: 0 0 0 1px rgba(214,150,0,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(160,90,0,0.30), 0 8px 22px -8px rgba(255,180,0,0.60); transition: box-shadow .25s ease, transform .25s ease, filter .25s ease; }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 0 0 1px rgba(230,165,0,0.75), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(160,90,0,0.30), 0 14px 34px -10px rgba(255,180,0,0.75); }
.btn-primary:active { transform: translateY(0); filter: brightness(.98); }
:root[data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1px rgba(255,200,40,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(150,80,0,0.35), 0 10px 30px -10px rgba(255,170,0,0.65), 0 0 0 5px rgba(255,190,0,0); }
:root[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,220,110,0.85), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(150,80,0,0.35), 0 16px 40px -10px rgba(255,170,0,0.80), 0 0 0 5px rgba(255,190,0,0.08); }
.btn-primary::after, .btn-dark::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-18deg); transition: left .6s ease; }
.btn-dark::after { background: linear-gradient(100deg, transparent, rgba(255,200,0,0.25), transparent); }
.btn-primary:hover::after, .btn-dark:hover::after { left: 130%; }
/* Secondary: a dark (or white) fill inside a gradient ring. The ring is a
   border-box background layer, so it can turn gold at the top on hover. */
.btn-secondary, .btn-ghost { border: 1px solid transparent; background: var(--btn-2-fill) padding-box, var(--btn-2-ring) border-box; color: var(--ink); box-shadow: var(--hi); transition: background .2s ease, box-shadow .25s ease, transform .25s ease, color .2s ease; }
.btn-secondary:hover, .btn-ghost:hover { background: var(--btn-2-fill-hover) padding-box, var(--btn-2-ring-hot) border-box; transform: translateY(-1px); box-shadow: var(--hi), 0 10px 26px -14px rgba(255,170,0,0.45); }
.btn-secondary:active, .btn-ghost:active { transform: translateY(0); }
:root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-ghost { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.5); }
:root[data-theme="dark"] .btn-secondary:hover, :root[data-theme="dark"] .btn-ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 28px -12px rgba(255,170,0,0.40); }
.btn-dark { background: #101114; color: #FFC800; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.25); }
.btn-dark:hover { background: #1c1c21; color: #FFD84D; transform: translateY(-1px); }
.btn-success { background: var(--green); color: #fff; box-shadow: none; }
.theme-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: var(--btn-2-fill) padding-box, var(--btn-2-ring) border-box; box-shadow: var(--hi); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s ease; }
.theme-btn:hover { color: var(--accent-ink); background: var(--btn-2-fill-hover) padding-box, var(--btn-2-ring-hot) border-box; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; } .theme-btn .moon { display: block; }
:root[data-theme="dark"] .theme-btn .sun { display: block; } :root[data-theme="dark"] .theme-btn .moon { display: none; }

/* ---------------------------------------------------------------------------
   Promo bar: flowing gold gradient, drifting stripes, a shine every few
   seconds. One link.
   --------------------------------------------------------------------------- */
.promo-bar { position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 1001; overflow: hidden; background: linear-gradient(90deg, #FFD84D 0%, #FFC800 16%, #FFB300 33%, #F29B00 50%, #FFB300 67%, #FFC800 84%, #FFD84D 100%); background-size: 200% 100%; animation: promoFlow 14s linear infinite; color: #101114; display: flex; align-items: center; justify-content: center; cursor: pointer; font: 600 14px/1 'Manrope', sans-serif; user-select: none; text-decoration: none; }
@keyframes promoFlow { to { background-position: 200% 0; } }
.promo-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.13) 22px 24px, transparent 24px 46px); background-size: 200px 100%; animation: promoStripes 5s linear infinite; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
@keyframes promoStripes { to { background-position: 200px 0; } }
.promo-bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 220px; left: -260px; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent); transform: skewX(-20deg); animation: promoShine 3.6s cubic-bezier(.45,0,.25,1) infinite; pointer-events: none; }
@keyframes promoShine { 0%, 30% { left: -260px; } 100% { left: calc(100% + 60px); } }
.promo-bar-inner { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.promo-bar b { font-weight: 800; }
.promo-bar .tap { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; margin-left: 3px; background: #101114; color: #FFC800; padding: 6px 11px 6px 13px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16,17,20,0.35), 0 4px 14px -4px rgba(16,17,20,0.55); }
.promo-bar .tap svg { width: 14px; height: 14px; transition: transform .25s ease; animation: tapNudge 3.6s ease-in-out infinite; }
@keyframes tapNudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(3px); } 90% { transform: translateX(0); } }
.promo-bar:hover .tap { background: #26262c; }
.promo-bar:hover .tap svg { transform: translateX(3px); }

/* Glass nav: blur, no drop shadow. */
header { position: fixed; top: 38px; left: 0; right: 0; z-index: 1000; padding: 14px 24px; max-width: 100vw; }
.nav-pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 9px 10px 9px 18px; border-radius: 16px; background: var(--nav-bg); border: 1px solid var(--nav-line); box-shadow: var(--hi); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); transition: background .3s ease, border-color .3s ease; }
header.scrolled .nav-pill { background: var(--nav-bg-2); box-shadow: var(--hi); }
.nav-pill .logo { display: flex; align-items: center; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; cursor: pointer; text-decoration: none; color: inherit; }
.logo-img { width: 30px; height: 30px; margin-right: 9px; border-radius: 8px; object-fit: contain; }
.logo-proxies { color: var(--ink); } .logo-food { color: var(--accent-ink); }
.nav-links { display: flex; gap: 6px; }
.nav-links a { position: relative; padding: 8px 11px; border-radius: 9px; color: var(--ink-2); font: 600 14.5px/1 'Manrope', sans-serif; text-decoration: none; transition: color .2s ease, background .2s ease; }
.nav-links a:hover, .nav-links a.on { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-right .btn { padding: 11px 18px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */
.lp { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.lp-section { position: relative; padding: 88px 0; }
.lp-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 7px 13px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(255,179,0,0.38); color: var(--accent-ink); font: 800 12px/1 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-kicker svg { width: 14px; height: 14px; }
.lp-h2 { font: 800 46px/1.06 'Manrope', sans-serif; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.lp-sub { margin: 16px auto 0; max-width: 620px; font: 500 17.5px/1.55 'Manrope', sans-serif; color: var(--ink-2); text-wrap: balance; }
.lp-sub b { color: var(--ink); font-weight: 800; }
/* Accent text is solid. Gradient text is for money only (.money, .shine). */
.hl, .grad, .accent-text { background: none; color: var(--accent-text); -webkit-text-fill-color: currentColor; }
.glow { text-shadow: var(--accent-text-glow); }
/* Gradient text paints only inside its own box: padding on every side keeps
   glyph overhang (Y, $, g) inside the paint area without moving the layout. */
.money, .shine { display: inline-block; padding: 0.1em 0.08em 0.14em; margin: -0.1em -0.08em -0.14em; }
.money { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.shine { background: var(--g-shine); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -200% 0; } }
/* Soft glow behind a section heading. closest-side makes it fade to nothing
   inside its own box, so it never ends in a visible edge. Painted behind the
   section content (main is the stacking context). */
.glow-top::before { content: ""; position: absolute; left: 50%; top: -150px; z-index: -1; width: min(1100px, 100vw); height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--spot), transparent); opacity: 0.5; pointer-events: none; }

/* Cards: opaque base, warm top-left glow, gradient edge, pointer light. */
.lp-card, .card { position: relative; border: 1px solid transparent; border-radius: 18px; background: var(--card-glow) padding-box, var(--card-bg) padding-box, linear-gradient(var(--card-base), var(--card-base)) padding-box, var(--edge) border-box; box-shadow: var(--hi), var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.lp-card::after, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,200,0,0.13), transparent 45%); }
:root[data-theme="dark"] .lp-card::after, :root[data-theme="dark"] .card::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255,200,0,0.07), transparent 50%); }
.lp-card:hover::after, .card:hover::after { opacity: 1; }
.lp-card:hover, .card:hover { --edge: var(--edge-hot); }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--hi), var(--shadow-lg); }
:root[data-theme="dark"] .card.lift:hover { box-shadow: var(--hi), 0 30px 60px -34px rgba(255,170,0,0.45); }

/* Rotating light border for hero cards. */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ring { position: relative; }
.ring::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0deg, rgba(255,200,0,0.0) 40deg, #FFC800 90deg, #F29B00 130deg, transparent 180deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ring 7s linear infinite; pointer-events: none; z-index: 2; }
@keyframes ring { to { --ang: 360deg; } }

/* Art panel: the lit box that holds a glowing icon on a lit pedestal. */
.art { position: relative; height: 176px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--art-bg); border: 1px solid var(--line); }
.art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 50% -10%, rgba(255,214,102,0.16), transparent 70%); }
.art::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 150px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,190,0,0.55), rgba(255,170,0,0.12) 70%, transparent); box-shadow: inset 0 0 0 1px rgba(255,200,0,0.35); pointer-events: none; }
.art .gi { position: relative; z-index: 1; width: 96px; height: 96px; margin-top: -14px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover .art .gi { transform: translateY(-6px) scale(1.04); }
/* Glow icon: gradient stroke, a hard offset shadow for depth, then a soft glow. */
.gi { display: block; overflow: visible; filter: drop-shadow(0 4px 0 var(--icon-depth)) drop-shadow(0 0 16px var(--icon-glow)); }
.gi { stroke-width: 4.5; }
.gi * { stroke: url(#giGrad); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gi .fill { fill: url(#giGrad); stroke: none; }
.gi .dim { opacity: 0.35; }
.gi-sm { width: 30px; height: 30px; stroke-width: 2.1; filter: drop-shadow(0 2px 0 var(--icon-depth)) drop-shadow(0 0 8px var(--icon-glow)); }
.gi-sm * { stroke: url(#giGradS); }
.gi-sm .fill { fill: url(#giGradS); }
/* Icon tile used on feature / pool / use-case cards: a lit glass block. */
.ic { position: relative; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--ic-bg); border: 1px solid var(--ic-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -8px 16px -8px rgba(255,170,0,0.35), var(--ic-halo); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ic .gi-sm { width: 28px; height: 28px; }
.card:hover .ic { transform: translateY(-3px); }

/* ---------------------------------------------------------------------------
   Stats: four lit tiles, each with its own moving icon. Numbers count up
   together (sky.js, [data-to]).
   --------------------------------------------------------------------------- */
.lp-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-stat { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 24px 22px 24px 26px; border: 1px solid transparent; border-radius: 20px; background: radial-gradient(180px 130px at 100% 50%, var(--stat-glow), transparent 70%) padding-box, var(--card-bg) padding-box, linear-gradient(var(--card-base), var(--card-base)) padding-box, var(--edge) border-box; box-shadow: var(--hi), var(--shadow); }
.lp-stat::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,214,102,0.16), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.lp-stat.done::after { animation: statSweep 1.1s ease forwards; }
@keyframes statSweep { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
.lp-stat .stat-num { display: block; font: 800 46px/1 'Manrope', sans-serif; letter-spacing: -0.04em; white-space: nowrap; color: var(--accent-text); }
.lp-stat .lp-stat-label { font: 600 15px/1.35 'Manrope', sans-serif; color: var(--ink-2); margin-top: 9px; }
.stat-art { position: relative; width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: var(--ic-bg); border: 1px solid var(--ic-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -10px 18px -10px rgba(255,170,0,0.4), var(--ic-halo); }
.stat-art .gi-sm { width: 34px; height: 34px; }
.stat-art .gi-sm * { transform-box: fill-box; transform-origin: center; }
/* Per-tile loops */
.stat-art .pulse-n { animation: nodePulse 2.4s ease-in-out infinite; }
.stat-art .pulse-n:nth-of-type(2) { animation-delay: .4s; } .stat-art .pulse-n:nth-of-type(3) { animation-delay: .8s; }
.stat-art .pulse-n:nth-of-type(4) { animation-delay: 1.2s; } .stat-art .pulse-n:nth-of-type(5) { animation-delay: 1.6s; }
@keyframes nodePulse { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
.stat-art .mer { animation: meridian 4s linear infinite; }
.stat-art .mer.b { animation-delay: -2s; }
@keyframes meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.08); } 100% { transform: scaleX(1); } }
.stat-art .lay { animation: layer 3s ease-in-out infinite; }
.stat-art .lay.l2 { animation-delay: .25s; } .stat-art .lay.l3 { animation-delay: .5s; }
@keyframes layer { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } }
.stat-art .hand { transform-box: view-box; transform-origin: 12px 12px; animation: hand 6s linear infinite; }
.stat-art .hand.h { animation-duration: 36s; }
@keyframes hand { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   FAQ: one card, rows split by hairlines. The open row is lit from its
   top-left corner and its icon turns gold.
   --------------------------------------------------------------------------- */
.lp.lp-faq { max-width: 880px; }
.lp-faq-list { position: relative; display: block; overflow: hidden; border: 1px solid transparent; border-radius: 20px; background: var(--card-bg) padding-box, linear-gradient(var(--card-base), var(--card-base)) padding-box, var(--edge) border-box; box-shadow: var(--hi), var(--shadow); }
.lp-faq-list .faq-item, .lp-faq-list .faq-item.open { position: relative; overflow: hidden; margin: 0; padding: 22px 26px; border: none; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; transform: none; transition: background .3s ease; }
.lp-faq-list .faq-item + .faq-item { box-shadow: inset 0 1px 0 var(--line); }
.lp-faq-list .faq-item:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.lp-faq-list .faq-item.open { background: radial-gradient(80% 140% at 0% 0%, rgba(255,200,0,0.10), transparent 60%); }
:root[data-theme="dark"] .lp-faq-list .faq-item.open { background: radial-gradient(80% 140% at 0% 0%, rgba(255,190,0,0.075), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0)); }
.lp-faq-list .faq-question { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 0; font: 800 18px/1.3 'Manrope', sans-serif; letter-spacing: -0.01em; color: var(--ink); }
.lp-faq-list .faq-text { font: inherit; color: inherit; transition: color .2s ease; }
.lp-faq-list .faq-item:not(.open):hover .faq-text { color: var(--ink); }
/* Icon: a drawn plus that turns into a cross. */
.lp-faq-list .faq-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 0; color: var(--ink-2); border: 1px solid transparent; background: var(--btn-2-fill) padding-box, var(--btn-2-ring) border-box; box-shadow: var(--hi); transition: transform .35s cubic-bezier(.3,.8,.25,1), color .2s ease, box-shadow .3s ease; }
.lp-faq-list .faq-icon::before, .lp-faq-list .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; margin: -0.9px 0 0 -5.5px; border-radius: 2px; background: currentColor; }
.lp-faq-list .faq-icon::after { transform: rotate(90deg); }
.lp-faq-list .faq-item:hover .faq-icon { color: var(--accent-ink); background: var(--btn-2-fill) padding-box, var(--btn-2-ring-hot) border-box; }
.lp-faq-list .faq-item.open .faq-icon { transform: rotate(135deg); color: #101114; background: linear-gradient(180deg, #FFD84A, #FFC800 50%, #F7B000) padding-box, linear-gradient(180deg, #FFE27A, #E6A200) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 18px -6px rgba(255,180,0,0.7); }
.lp-faq-list .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.lp-faq-list .faq-item.open .faq-answer { max-height: 420px; }
.lp-faq-list .faq-answer-inner { padding: 0; margin: 12px 50px 2px 0; font: 500 16px/1.65 'Manrope', sans-serif; color: var(--ink-2); }
.lp-faq-list .faq-answer-inner b, .lp-faq-list .faq-answer-inner strong { color: var(--ink); font-weight: 800; }
.lp-faq-list code { font-size: 0.9em; color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   Closing row: yellow Buy card + red Reseller card
   --------------------------------------------------------------------------- */
.lp-cta-section { padding: 16px 0 88px; }
.lp-end { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-cta, .lp-resell { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 36px; padding: 56px; min-height: 320px; }
.lp-cta { background: radial-gradient(90% 120% at 100% 100%, rgba(255,255,255,0.35), transparent 55%), var(--g-cta); color: #101114; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 70px -10px rgba(255,190,0,0.35); }
.lp-resell { background: radial-gradient(90% 120% at 100% 100%, rgba(255,160,140,0.35), transparent 55%), linear-gradient(120deg, #ff3b2e 0%, #f2251a 55%, #d61f14 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 70px -10px rgba(255,59,46,0.35); }
/* A small node network in the top-right corner of both cards. */
.lp-cta::before, .lp-resell::before { content: ""; position: absolute; top: -50px; right: -40px; width: 380px; height: 380px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' fill='none'%3E%3Cg stroke='%23fff' stroke-opacity='.55' stroke-width='1.3'%3E%3Cpath d='M40 300 110 250 90 170 160 120 230 70 320 110 250 160 160 120M110 250 180 210 250 160 300 230 320 110M180 210 210 300 300 230 330 320 210 300 130 335 110 250M90 170 180 210M250 160 230 70'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='40' cy='300' r='3'/%3E%3Ccircle cx='110' cy='250' r='4'/%3E%3Ccircle cx='90' cy='170' r='3'/%3E%3Ccircle cx='160' cy='120' r='3.5'/%3E%3Ccircle cx='230' cy='70' r='3'/%3E%3Ccircle cx='320' cy='110' r='3.5'/%3E%3Ccircle cx='250' cy='160' r='4.5'/%3E%3Ccircle cx='180' cy='210' r='3.5'/%3E%3Ccircle cx='300' cy='230' r='4'/%3E%3Ccircle cx='210' cy='300' r='3.5'/%3E%3Ccircle cx='330' cy='320' r='3'/%3E%3Ccircle cx='130' cy='335' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.38; -webkit-mask-image: radial-gradient(circle at 75% 25%, #000 18%, transparent 62%); mask-image: radial-gradient(circle at 75% 25%, #000 18%, transparent 62%); pointer-events: none; }
/* A slow light sweep across both cards. */
.lp-cta::after, .lp-resell::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -50%; width: 35%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); animation: ctaSweep 7s ease-in-out infinite; pointer-events: none; }
.lp-resell::after { animation-delay: 3.5s; }
@keyframes ctaSweep { 0%, 55% { left: -50%; } 100% { left: 130%; } }
.lp-cta > *, .lp-resell > * { position: relative; }
.lp-cta h2, .lp-resell h2 { margin: 0; font: 800 48px/1.05 'Manrope', sans-serif; letter-spacing: -0.03em; }
.lp-cta h2 { color: #101114; } .lp-resell h2 { color: #fff; margin-bottom: 12px; }
.lp-resell p { margin: 0; font: 600 17px/1.5 'Manrope', sans-serif; color: rgba(255,255,255,0.88); }
.lp-resell p b { color: #fff; font-weight: 800; }
.lp-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-cta .btn, .lp-resell .btn { padding: 20px 36px; font-size: 18px; border-radius: 12px; }
.lp-cta .btn-ghost, :root[data-theme="dark"] .lp-cta .btn-ghost { background: rgba(16,17,20,0.08); color: #101114; border: 1px solid rgba(16,17,20,0.3); box-shadow: none; }
.lp-cta .btn-ghost:hover, :root[data-theme="dark"] .lp-cta .btn-ghost:hover { background: rgba(16,17,20,0.16); box-shadow: none; }
.lp-end .deco { position: absolute; right: 40px; bottom: 34px; width: 170px; height: 170px; opacity: 0.26; pointer-events: none; animation: decoFloat 6s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,0.12)); }
.lp-end .deco * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes decoFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-3deg); } }

/* ---------------------------------------------------------------------------
   Footer: sits on a warm horizon glow, no line on top.
   --------------------------------------------------------------------------- */
footer { border-top: none; background: none; padding: 0 0 32px; overflow: hidden; }
footer::before { content: ""; position: absolute; left: 50%; bottom: -260px; z-index: -1; width: min(1500px, 140vw); height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,176,0,0.22), rgba(255,140,0,0.06) 60%, transparent); pointer-events: none; }
:root[data-theme="dark"] footer::before { background: radial-gradient(closest-side, rgba(255,150,0,0.13), rgba(255,110,0,0.04) 60%, transparent); }
.lp-footer { position: relative; padding: 48px 0 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.lp-footer .brand { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.lp-footer .brand .logo { display: flex; align-items: center; font-size: 1.15rem; font-weight: 800; }
.lp-footer .brand p { margin: 0; max-width: 300px; font: 500 14px/1.55 'Manrope', sans-serif; color: var(--ink-2); }
.lp-footer h4 { font: 800 11px/1 'Manrope', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 16px; }
.lp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.lp-footer a { font: 600 14px/1 'Manrope', sans-serif; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: color .2s ease; }
.lp-footer a:hover { color: var(--ink); }
.foot-legal { display: flex; gap: 22px; font: 500 13px/1 'Manrope', sans-serif; color: var(--mute); }
.lp-footer .foot-legal a { font: inherit; color: var(--mute); }
.lp-footer-bottom { display: none; border-top: 1px solid var(--line); margin-top: 32px; padding: 20px 0 0; justify-content: space-between; align-items: center; font: 500 13px/1 'Manrope', sans-serif; color: var(--mute); }
.lp-footer-bottom a { color: var(--mute); cursor: pointer; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Reveal on scroll (app.js / site.js add .visible)
   --------------------------------------------------------------------------- */
html.js .animate-on-scroll { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
html.js .animate-on-scroll.visible { opacity: 1; transform: none; }
html.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
html.js .stagger.visible > * { opacity: 1; transform: none; }
html.js .stagger.visible > *:nth-child(2) { transition-delay: .07s; }
html.js .stagger.visible > *:nth-child(3) { transition-delay: .14s; }
html.js .stagger.visible > *:nth-child(4) { transition-delay: .21s; }
html.js .stagger.visible > *:nth-child(5) { transition-delay: .28s; }
html.js .stagger.visible > *:nth-child(6) { transition-delay: .35s; }
html.js .stagger.visible > *:nth-child(n+7) { transition-delay: .42s; }
/* Once revealed, cards answer hover right away instead of waiting out the delay. */
html.js .stagger.visible > .card:hover { transition-delay: 0s; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .lp-stat { padding: 22px 18px 22px 22px; }
    .lp-stat .stat-num { font-size: 40px; }
    .stat-art { width: 56px; height: 56px; border-radius: 16px; }
    .stat-art .gi-sm { width: 29px; height: 29px; }
}
@media (max-width: 1100px) {
    .nav-links a { padding: 8px 8px; font-size: 14px; }
}
@media (max-width: 1020px) {
    .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
    .lp-footer .foot-legal { display: none; }
    .lp-footer-bottom { display: flex; }
    .lp-end { grid-template-columns: 1fr; }
    .lp-cta, .lp-resell { min-height: 0; flex-direction: row; align-items: center; }
    .lp-h2 { font-size: 40px; }
}
@media (max-width: 720px) {
    html, body { overflow-x: hidden; }
    html { scroll-padding-top: 130px; }
    .lp { padding: 0 18px; }
    .lp-section { padding: 64px 0; }
    .lp-head { margin-bottom: 32px; }
    .lp-h2 { font-size: 31px; }
    .lp-sub { font-size: 16px; }
    .promo-bar { height: auto; min-height: 38px; padding: 8px 12px; font-size: 12.5px; line-height: 1.3; }
    .promo-bar-inner { white-space: normal; text-align: center; }
    .promo-bar .tap { display: none; }
    header { top: 44px; padding: 10px 12px; }
    .nav-pill { padding: 8px 8px 6px 12px; border-radius: 14px; flex-wrap: wrap; row-gap: 6px; }
    .nav-links { order: 3; flex: 1 0 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a { white-space: nowrap; font-size: 13.5px; padding: 9px 9px; }
    .nav-right { gap: 6px; }
    .nav-right .btn { padding: 10px 12px; font-size: 13px; }
    .lp-stats { margin-top: 48px; gap: 12px; }
    .lp-stat { grid-template-columns: 1fr; gap: 0; padding: 20px 18px; }
    .lp-stat .stat-art { grid-row: 1; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; }
    .lp-stat .stat-art .gi-sm { width: 25px; height: 25px; }
    .lp-stat .stat-num { font-size: 34px; }
    .lp-stat .lp-stat-label { font-size: 14px; margin-top: 7px; }
    .lp-faq-list { border-radius: 18px; }
    .lp-faq-list .faq-item, .lp-faq-list .faq-item.open { padding: 18px 18px; }
    .lp-cta-section { padding: 0 0 56px; }
    .lp-cta, .lp-resell { flex-direction: column; align-items: stretch; padding: 36px 24px; gap: 26px; }
    .lp-cta h2 { font-size: 36px; } .lp-resell h2 { font-size: 34px; }
    .lp-cta-btns { flex-direction: column; }
    .lp-cta .btn, .lp-resell .btn { width: 100%; text-align: center; padding: 18px 20px; }
    .lp-end .deco { display: none; }
    .lp-footer { grid-template-columns: 1fr; gap: 26px; padding-top: 32px; }
    .lp-footer h4 { margin-bottom: 6px; }
    .lp-footer ul { gap: 0; }
    .lp-footer ul a { display: inline-block; padding: 9px 0; }
    .lp-footer-bottom a { display: inline-block; padding: 12px 0; }
    .lp-faq-list .faq-question { font-size: 17px; }
    .lp-faq-list .faq-answer-inner { margin-right: 0; font-size: 15.5px; }
    .art::after { width: 130px; bottom: 14px; }
}
@media (max-width: 560px) {
    .nav-right .btn-primary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sky-aurora i, .spot, .shine, .ring::before, .promo-bar, .promo-bar::before, .promo-bar::after, .promo-bar .tap svg,
    .stat-art *, .lp-stat.done::after, .lp-cta::after, .lp-resell::after, .lp-end .deco { animation: none !important; }
    html.js .animate-on-scroll, html.js .stagger > * { transition: none; opacity: 1; transform: none; }
    .btn, .lp-card, .card, .ic, .lp-faq-list .faq-icon { transition: none; }
}