/* =========================================================
   UpCapital v4 — Design System (full rebuild)
   Premium fintech landing — clean, conversion-focused
   ========================================================= */

:root {
    --bg: #030711;
    --bg-1: #070D1A;
    --bg-2: #0D1626;
    --bg-3: #131F33;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-2: rgba(255, 255, 255, 0.06);
    --line: rgba(148, 163, 184, 0.10);
    --line-strong: rgba(148, 163, 184, 0.18);
    --text: #F8FAFC;
    --text-2: #CBD5E1;
    --muted: #94A3B8;
    --accent: #00E5FF;
    --accent-2: #3B82FF;
    --accent-3: #8B5CF6;
    --accent-glow: rgba(0, 229, 255, 0.42);
    --success: #10D9A0;
    --warning: #F59E0B;
    --danger: #EF4444;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.48);
    --shadow-glow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 12px 32px rgba(0, 229, 255, 0.20);
    --radius: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --container: 1200px;
    --header-h: 72px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    min-width: 320px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

/* ---------- Background layers ---------- */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}

.bg-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.72;
    mix-blend-mode: screen;
    contain: strict;
}

.bg-beams {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-beam {
    position: absolute;
    width: 200%;
    height: 1px;
    left: -50%;
    opacity: 0.5;
    will-change: transform, opacity;
    animation: beamDrift 22s linear infinite;
}
.bg-beam:nth-child(1) { top: 22%; animation-delay: 0s; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.6), transparent); }
.bg-beam:nth-child(2) { top: 58%; animation-delay: -10s; animation-duration: 28s; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent); }
.bg-beam:nth-child(3) { top: 84%; animation-delay: -6s; animation-duration: 24s; background: linear-gradient(90deg, transparent, rgba(59, 130, 255, 0.45), transparent); }
.bg-beam:nth-child(4),
.bg-beam:nth-child(5) { display: none; }
@keyframes beamDrift {
    0% { transform: translate3d(-30%, 0, 0); opacity: 0; }
    20%, 80% { opacity: 0.55; }
    100% { transform: translate3d(30%, 0, 0); opacity: 0; }
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.55;
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.7;
    will-change: transform;
    animation: glowDrift 26s ease-in-out infinite;
}

.bg-glow--1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.45), transparent 70%);
    top: -160px; left: -160px;
}
.bg-glow--2 {
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(59, 130, 255, 0.38), transparent 70%);
    top: 22%; right: -200px;
    animation-delay: -10s;
}
.bg-glow--3 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.32), transparent 70%);
    bottom: -160px; left: 32%;
    animation-delay: -18s;
}

@keyframes glowDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(40px, -30px, 0); }
}

/* ---------- Container ---------- */
.container {
    width: min(calc(100% - 32px), var(--container));
    margin-inline: auto;
}

/* ---------- Skip link ---------- */
.skip-link {
    position: fixed;
    left: 16px; top: 12px;
    z-index: 200;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--accent);
    color: var(--text);
    font-weight: 700;
    transform: translateY(-150%);
    transition: transform 220ms var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- Reading progress ---------- */
.progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width 120ms linear;
}

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 80;
    height: var(--header-h);
    background: rgba(3, 7, 17, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.header.is-scrolled {
    background: rgba(3, 7, 17, 0.94);
    border-bottom-color: var(--line);
}
.header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.brand__logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(59, 130, 255, 0.14));
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 8px 20px rgba(0, 229, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.brand__logo--fallback::before {
    content: "U";
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--accent);
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #FFFFFF 0%, #A9F5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand__tag {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Nav */
.nav {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.nav a {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease), background 200ms var(--ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--sm { padding: 10px 16px; font-size: 0.86rem; border-radius: 10px; }
.btn--md { padding: 13px 20px; font-size: 0.94rem; }
.btn--lg { padding: 17px 26px; font-size: 1rem; border-radius: 14px; letter-spacing: 0.01em; }
.btn--block { width: 100%; }

.btn--primary {
    background: linear-gradient(135deg, #00E5FF 0%, #3B82FF 65%, #2D6FF0 100%);
    color: #02111F;
    box-shadow:
        0 10px 28px rgba(0, 229, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 600ms var(--ease);
    z-index: -1;
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 36px rgba(0, 229, 255, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    filter: brightness(1.06);
}
.btn--primary:hover::before { transform: translateX(100%); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.btn--whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.34);
}
.btn--whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(37, 211, 102, 0.46);
}

/* ---------- Badge ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.24);
    color: #B5F2FF;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge--warm {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.28);
    color: #FFD89B;
}
.badge--success {
    background: rgba(16, 217, 160, 0.08);
    border-color: rgba(16, 217, 160, 0.28);
    color: #A6F5D8;
}
.badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: pulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}
.badge--warm .badge__dot { background: var(--warning); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.42); }
.badge--success .badge__dot { background: var(--success); box-shadow: 0 0 0 0 rgba(16, 217, 160, 0.42); }
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 80px; position: relative; }
.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.85fr;
    gap: 56px;
    align-items: center;
}
.hero__title {
    margin-top: 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 5.4vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 700;
    max-width: 16ch;
}
.grad {
    background: linear-gradient(135deg, #00E5FF 0%, #3B82FF 55%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__sub {
    margin-top: 22px;
    font-size: 1.08rem;
    color: var(--text-2);
    line-height: 1.65;
    max-width: 48ch;
}
.hero__bullets {
    list-style: none;
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    max-width: 480px;
}
.hero__bullets li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-2);
    font-size: 0.94rem;
    font-weight: 500;
}
.hero__bullets svg {
    width: 18px; height: 18px;
    color: var(--success);
    flex-shrink: 0;
}
.hero__cta {
    margin-top: 32px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero__trust {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
}
.hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
}
.hero__trust-item svg {
    width: 16px; height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

/* Device mockup */
.hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.device {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}
.device__frame {
    position: relative;
    padding: 14px;
    border-radius: 42px;
    background: linear-gradient(180deg, #1A2438 0%, #0A1320 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 229, 255, 0.10),
        0 0 80px rgba(0, 229, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.device__notch {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 22px;
    background: #02060D;
    border-radius: 0 0 14px 14px;
    z-index: 6;
}
.device__screen {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 32px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    contain: paint;
}
.device__screen iframe,
.device__screen .youtube-lite__player,
.device__screen .youtube-lite__player > iframe,
.demo__video iframe,
.demo__video .youtube-lite__player,
.demo__video .youtube-lite__player > iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: inherit !important;
    pointer-events: auto;
}
.demo__video { isolation: isolate; contain: paint; }
.device__notch { z-index: 10; }
.device__badge { z-index: 11; }
.device__badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.42);
}
.device__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pulseDot 1.4s ease-in-out infinite;
}

/* Floating mini-cards around device */
.device-card {
    position: absolute;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(13, 22, 38, 0.94);
    border: 1px solid var(--line-strong);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    z-index: 5;
    animation: float 7s ease-in-out infinite;
}
.device-card--up {
    top: 40px; left: -36px;
    animation-delay: -2s;
}
.device-card--down {
    bottom: 60px; right: -32px;
    animation-delay: -4s;
}
.device-card__icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.device-card--up .device-card__icon { background: rgba(16, 217, 160, 0.16); color: var(--success); }
.device-card--down .device-card__icon { background: rgba(0, 229, 255, 0.16); color: var(--accent); }
.device-card__icon svg { width: 18px; height: 18px; }
.device-card__text strong {
    display: block;
    color: var(--text);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
}
.device-card__text span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

/* YouTube lite player */
.youtube-lite {
    position: absolute;
    inset: 0;
    cursor: pointer;
}
.youtube-lite__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) saturate(1.1);
}
.youtube-lite__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.92);
    color: #02111F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px rgba(0, 229, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
    z-index: 2;
}
.youtube-lite__play::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.32);
    z-index: -1;
    animation: ripple 1.8s ease-out infinite;
}
@keyframes ripple {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.youtube-lite__play svg { width: 26px; height: 26px; margin-left: 3px; }
.youtube-lite__play:hover { transform: scale(1.06); }
.youtube-lite__player {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.youtube-lite.is-loaded .youtube-lite__play,
.youtube-lite.is-loaded .youtube-lite__poster { display: none; }
.youtube-lite.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.18), transparent);
    transform: translateX(-100%);
    animation: shimmer 1.4s ease-in-out infinite;
    z-index: 2;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- Sections ---------- */
.section {
    padding: 80px 0;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}
/* Hero NÃO usa content-visibility — precisa renderizar imediatamente */
.section.hero { content-visibility: visible; }
.section--tight { padding: 56px 0; }
.section__head {
    text-align: center;
    margin-bottom: 48px;
}
.section__kicker {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.10);
    border: 1px solid rgba(0, 229, 255, 0.22);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section__title {
    margin-top: 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    max-width: 22ch;
    margin-inline: auto;
}
.section__lead {
    margin-top: 18px;
    color: var(--text-2);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 56ch;
    margin-inline: auto;
}

/* ---------- Stats strip ---------- */
.stats-strip {
    border-block: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.005));
    padding: 36px 0;
}
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.stat { text-align: center; }
.stat__num {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #FFFFFF 0%, #A9F5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat__label {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------- Cards grid ---------- */
.cards {
    display: grid;
    gap: 18px;
}
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--6 { grid-template-columns: repeat(3, 1fr); }

.card {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid var(--line);
    transition: border-color 280ms var(--ease), transform 280ms var(--ease), background 280ms var(--ease);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 280ms var(--ease);
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(59, 130, 255, 0.10));
    border: 1px solid rgba(0, 229, 255, 0.24);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
.card__icon svg { width: 22px; height: 22px; }
.card__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 8px;
}
.card__text {
    color: var(--text-2);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* Steps timeline */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    position: relative;
}
.step {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    position: relative;
}
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00E5FF, #3B82FF);
    color: #02111F;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.04rem;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px rgba(0, 229, 255, 0.28);
}
.step__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.step__text {
    color: var(--text-2);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* ---------- Demo section ---------- */
.demo {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 36px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.demo__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.16;
    margin-bottom: 16px;
}
.demo__list {
    list-style: none;
    margin: 22px 0 28px;
    display: grid;
    gap: 10px;
}
.demo__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-2);
    font-size: 0.96rem;
    line-height: 1.55;
}
.demo__list svg {
    width: 20px;
    height: 20px;
    color: var(--success);
    flex-shrink: 0;
    margin-top: 2px;
}
.demo__video {
    position: relative;
    aspect-ratio: 9 / 16;
    max-width: 360px;
    width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}

/* ---------- Testimonials ---------- */
.testimonial {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.stars {
    display: inline-flex;
    gap: 3px;
    color: #FBBF24;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.32));
}
.stars svg { width: 18px; height: 18px; }
.testimonial__quote {
    font-size: 1rem;
    line-height: 1.62;
    color: var(--text-2);
    flex: 1;
}
.testimonial__person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.testimonial__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00E5FF, #3B82FF);
    color: #02111F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.testimonial__meta { min-width: 0; }
.testimonial__name {
    display: block;
    font-weight: 700;
    font-size: 0.94rem;
    line-height: 1.2;
}
.testimonial__role {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
}
.testimonial__verified {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(16, 217, 160, 0.10);
    border: 1px solid rgba(16, 217, 160, 0.24);
    color: var(--success);
    font-size: 0.7rem;
    font-weight: 700;
}
.testimonial__verified svg { width: 12px; height: 12px; }

/* ---------- Scarcity ---------- */
.scarcity {
    padding: 36px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(239, 68, 68, 0.04)),
                linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: var(--shadow-md);
}
.scarcity__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.scarcity__cell {
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}
.scarcity__cell strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.04rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.scarcity__cell span {
    color: var(--text-2);
    font-size: 0.88rem;
    line-height: 1.55;
}
.bar {
    margin-top: 24px;
}
.bar__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.92rem;
}
.bar__track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.bar__fill {
    display: block;
    height: 100%;
    width: 78%;
    border-radius: inherit;
    background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.42);
    position: relative;
}
.bar__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-100%);
    animation: shimmer 2.4s ease-in-out infinite;
}

/* ---------- FAQ ---------- */
.faq {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-inline: auto;
}
.faq-item {
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color 240ms var(--ease);
}
.faq-item[open] {
    border-color: rgba(0, 229, 255, 0.28);
}
.faq-item summary {
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    list-style: none;
    transition: background 220ms var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(255, 255, 255, 0.03); }
.faq-item summary span {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent);
    transition: transform 240ms var(--ease);
}
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p {
    padding: 0 22px 22px;
    color: var(--text-2);
    line-height: 1.7;
    font-size: 0.96rem;
}

/* ---------- Final CTA ---------- */
.final-cta {
    padding: 56px 36px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(ellipse at top right, rgba(0, 229, 255, 0.16), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(59, 130, 255, 0.16), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    max-width: 22ch;
    margin: 0 auto 18px;
}
.final-cta__text {
    color: var(--text-2);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 50ch;
    margin: 0 auto 28px;
}
.final-cta__actions {
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.final-cta__stamp {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.footer {
    padding: 48px 0 120px;
    border-top: 1px solid var(--line);
    margin-top: 48px;
}
.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.7;
    text-align: center;
}
.footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    color: var(--text);
}
.footer__brand .brand__logo { width: 36px; height: 36px; border-radius: 10px; }

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 90;
    padding: 12px;
    border-radius: 18px;
    background: rgba(7, 13, 26, 0.96);
    border: 1px solid rgba(0, 229, 255, 0.24);
    backdrop-filter: blur(20px);
    box-shadow: 0 -8px 32px rgba(0, 229, 255, 0.18), 0 24px 48px rgba(0, 0, 0, 0.5);
    display: grid;
    gap: 8px;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sticky-cta p {
    text-align: center;
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ---------- Floating Telegram ---------- */
.fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 95;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 38px rgba(42, 171, 238, 0.46), 0 0 0 4px rgba(42, 171, 238, 0.10);
    animation: fabPulse 2.4s ease-in-out infinite;
    transition: transform 240ms var(--ease);
}
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18)); }
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 18px 38px rgba(42, 171, 238, 0.46), 0 0 0 0 rgba(42, 171, 238, 0.5); }
    50% { box-shadow: 0 18px 38px rgba(42, 171, 238, 0.46), 0 0 0 16px rgba(42, 171, 238, 0); }
}
.fab__tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(7, 13, 26, 0.95);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(42, 171, 238, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.fab:hover .fab__tooltip,
.fab:focus-visible .fab__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---------- Activity feed toasts ---------- */
.activity {
    position: fixed;
    left: 16px;
    bottom: 92px;
    z-index: 88;
    width: min(310px, calc(100% - 100px));
    pointer-events: none;
}
.toast {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(7, 13, 26, 0.94);
    border: 1px solid rgba(16, 217, 160, 0.24);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 24px rgba(16, 217, 160, 0.08);
    backdrop-filter: blur(14px);
    transform: translateX(-130%);
    opacity: 0;
    transition: transform 420ms var(--ease), opacity 320ms var(--ease);
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10D9A0, #059669);
    color: #02111F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.94rem;
}
.toast__body { min-width: 0; flex: 1; }
.toast__text {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
}
.toast__time {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

/* ---------- Modals ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 7, 17, 0.86);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease);
}
.modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.modal[hidden] { display: flex; }
.modal__card {
    width: min(100%, 440px);
    padding: 32px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid rgba(0, 229, 255, 0.24);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), 0 0 64px rgba(0, 229, 255, 0.16);
    transform: translateY(20px) scale(0.96);
    transition: transform 320ms var(--ease);
}
.modal.is-open .modal__card { transform: translateY(0) scale(1); }
.modal__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.36rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.modal__text {
    color: var(--text-2);
    font-size: 0.96rem;
    line-height: 1.6;
    margin-bottom: 22px;
}
.modal__field { margin-bottom: 12px; }
.modal__field input {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    outline: none;
    transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}
.modal__field input::placeholder { color: var(--muted); }
.modal__field input:focus {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.04);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.12);
}
.modal__actions {
    margin-top: 8px;
    display: grid;
    gap: 8px;
}
.modal__close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    transition: color 200ms var(--ease), background 200ms var(--ease);
}
.modal__close:hover { color: var(--text); background: var(--surface); }

/* ---------- Price block ---------- */
.price {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at top right, rgba(0, 229, 255, 0.18), transparent 65%),
        linear-gradient(180deg, rgba(0, 229, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 22px 48px rgba(0, 229, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}
.price::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(0, 229, 255, 0.10) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: priceShine 6s ease-in-out infinite;
}
@keyframes priceShine {
    0%, 60% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.price__amount {
    flex: 1;
    min-width: 0;
}
.price__label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.price__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}
.price__currency {
    font-size: 1.2rem;
    color: var(--text-2);
}
.price__number {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    background: linear-gradient(135deg, #FFFFFF 0%, #A9F5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.price__period {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 600;
}
.price__hint {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-2);
    font-weight: 500;
}
.price__seal {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(16, 217, 160, 0.12);
    border: 1px solid rgba(16, 217, 160, 0.32);
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    min-width: 92px;
}
.price__seal svg { width: 22px; height: 22px; }

/* ---------- Landing 2 specific ---------- */
.l2-wrap {
    padding: 32px 0 120px;
}
.l2-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: flex-start;
    margin-top: 40px;
}
.l2-card {
    padding: 32px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.l2-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.7rem, 3.8vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-top: 18px;
}
.l2-title .grad { display: inline; }
.l2-lead {
    margin-top: 16px;
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.65;
}
.l2-steps {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}
.l2-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.l2-step__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00E5FF, #3B82FF);
    color: #02111F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.96rem;
}
.l2-step__body strong {
    display: block;
    font-weight: 700;
    font-size: 0.96rem;
    margin-bottom: 4px;
    color: var(--text);
}
.l2-step__body span {
    color: var(--text-2);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Form */
.form {
    display: grid;
    gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.02em;
}
.field input,
.field select {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    outline: none;
    transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
    appearance: none;
}
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    padding-right: 42px;
}
.field input::placeholder { color: var(--muted); }
.field input:focus,
.field select:focus {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.04);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.14);
}
.field option { background: var(--bg-1); color: var(--text); }

.wa-preview {
    margin-top: 4px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(37, 211, 102, 0.06);
    border: 1px solid rgba(37, 211, 102, 0.24);
}
.wa-preview strong {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    color: #74F1A8;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wa-bubble {
    padding: 14px 16px;
    border-radius: 12px;
    background: #DCF8C6;
    color: #021510;
    font-size: 0.84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    border-bottom-left-radius: 4px;
}

.submit-btn {
    position: relative;
    margin-top: 4px;
    padding: 18px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #02111F;
    background: linear-gradient(135deg, #00E5FF 0%, #3B82FF 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
    box-shadow: 0 12px 28px rgba(0, 229, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.submit-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 600ms var(--ease);
}
.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 229, 255, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    filter: brightness(1.06);
}
.submit-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.submit-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}
.submit-btn.is-loading .btn-label { opacity: 0; }
.submit-btn .btn-loader {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(2, 17, 31, 0.18);
    border-top-color: #02111F;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 200ms var(--ease);
}
.submit-btn.is-loading .btn-loader {
    opacity: 1;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-note {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    text-align: center;
}

.l2-stats {
    margin-top: 56px;
    padding: 32px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.l2-stat { text-align: center; }
.l2-stat strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #A9F5FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.l2-stat span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 920px) {
    .l2-grid { grid-template-columns: 1fr; }
    .l2-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reveal animations ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hero__grid { gap: 36px; }
    .cards--3, .cards--6, .steps, .stats { grid-template-columns: repeat(2, 1fr); }
    .demo { grid-template-columns: 1fr; }
    .nav { display: none; }
}

/* =====================================================
   FX LAYER — click, hover, cursor, motion
   ===================================================== */

/* ---------- Static mesh gradient (background tonal, sem animação) ---------- */
.bg-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 22% 18%, rgba(0, 229, 255, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 78% 14%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 70% 40% at 50% 90%, rgba(59, 130, 255, 0.18) 0%, transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}

/* ---------- Aurora flow — 2 waves leves, GPU-only ---------- */
.bg-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-aurora__wave {
    position: absolute;
    width: 140%;
    height: 60%;
    left: -20%;
    border-radius: 50%;
    opacity: 0.5;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.bg-aurora__wave--1 {
    top: -15%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 229, 255, 0.32), transparent 65%);
    animation: auroraFlowA 28s ease-in-out infinite;
}
.bg-aurora__wave--2 {
    bottom: -15%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(139, 92, 246, 0.28), transparent 65%);
    animation: auroraFlowB 34s ease-in-out infinite;
}
.bg-aurora__wave--3 { display: none; }

@keyframes auroraFlowA {
    0%, 100% { transform: translate3d(-8%, 0, 0); }
    50% { transform: translate3d(8%, 0, 0); }
}
@keyframes auroraFlowB {
    0%, 100% { transform: translate3d(8%, 0, 0); }
    50% { transform: translate3d(-8%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bg-aurora__wave, .bg-beam, .bg-glow { animation: none !important; }
}

@media (max-width: 720px) {
    .bg-glow { filter: blur(70px); opacity: 0.6; }
    .bg-aurora__wave { opacity: 0.4; }
    .bg-mesh { opacity: 0.7; }
}

/* ---------- Noise overlay (subtle film grain, sem animação cara) ---------- */
.bg-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* ---------- Cursor glow follower ---------- */
.cursor-fx {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    margin-left: -210px;
    margin-top: -210px;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 320ms ease, width 200ms ease, height 200ms ease, margin 200ms ease;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.cursor-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.16) 0%, rgba(0, 229, 255, 0.04) 35%, transparent 70%);
    border-radius: 50%;
}
.cursor-fx.is-active { opacity: 1; }
.cursor-fx.is-hover {
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
}
.cursor-fx.is-hover::before {
    background: radial-gradient(circle, rgba(0, 229, 255, 0.36) 0%, rgba(0, 229, 255, 0.08) 50%, transparent 80%);
}

/* ---------- Click ripple on buttons ---------- */
.btn, .submit-btn, [data-bridge-cta] {
    position: relative;
    overflow: hidden;
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleExpand 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
}
@keyframes rippleExpand {
    to {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ---------- Particle burst on click ---------- */
.burst-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: burstFly 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: 0 0 12px currentColor;
    --dx: 0px;
    --dy: 0px;
}
.burst-particle--cyan { background: #00E5FF; color: #00E5FF; }
.burst-particle--blue { background: #3B82FF; color: #3B82FF; }
.burst-particle--purple { background: #8B5CF6; color: #8B5CF6; }
@keyframes burstFly {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
        opacity: 0;
    }
}

/* ---------- 3D tilt on cards ---------- */
.card,
.testimonial,
.step,
.scarcity__cell,
.l2-step,
.l2-card,
.device-card,
.glass-tilt {
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
    will-change: transform;
}
.card.is-tilting,
.testimonial.is-tilting,
.step.is-tilting,
.scarcity__cell.is-tilting,
.l2-step.is-tilting,
.l2-card.is-tilting {
    transition: transform 80ms linear, box-shadow 200ms ease;
}
.card.is-tilting,
.testimonial.is-tilting,
.l2-card.is-tilting {
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.42),
        0 0 32px rgba(0, 229, 255, 0.16);
}

/* ---------- Magnetic button hover ---------- */
.btn--primary,
.btn--lg,
.submit-btn {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, filter 200ms ease, background 200ms ease;
    will-change: transform;
}

/* ---------- Glow rings on focus ---------- */
.field input:focus,
.field select:focus,
.modal__field input:focus {
    animation: focusGlow 1.6s ease-in-out infinite;
}
@keyframes focusGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.14), 0 0 0 1.5px var(--accent); }
    50% { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0.08), 0 0 24px rgba(0, 229, 255, 0.24), 0 0 0 1.5px var(--accent); }
}

/* ---------- Letter stagger on hero title ---------- */
.hero__title .letter,
.l2-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(-30deg);
    animation: letterIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform-origin: 50% 100%;
}
.hero__title .letter--space,
.l2-title .letter--space { width: 0.28em; }

@keyframes letterIn {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* ---------- Glow pulse on important elements ---------- */
.btn--primary.is-attention {
    animation: btnAttention 2.4s ease-in-out infinite;
}
@keyframes btnAttention {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 229, 255, 0.34), 0 0 0 0 rgba(0, 229, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.36); }
    50% { box-shadow: 0 16px 36px rgba(0, 229, 255, 0.48), 0 0 0 14px rgba(0, 229, 255, 0), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
}

/* ---------- Hover glow on links and CTAs ---------- */
.nav a,
.hero__trust-item,
.faq-item summary,
.testimonial,
.card,
.step {
    transition-property: color, background, border-color, transform, box-shadow, filter;
    transition-duration: 240ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__trust-item:hover { color: var(--accent); transform: translateY(-1px); }
.hero__trust-item:hover svg { filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* ---------- Image/icon glow on hover ---------- */
.brand__logo,
.card__icon,
.step__num,
.testimonial__avatar,
.price__seal {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, filter 320ms ease;
}
.brand:hover .brand__logo {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 0 14px var(--accent-glow));
}
.card:hover .card__icon {
    transform: scale(1.1) rotate(-4deg);
    filter: drop-shadow(0 0 14px var(--accent-glow));
}
.step:hover .step__num {
    transform: scale(1.08) rotate(4deg);
    filter: drop-shadow(0 0 14px var(--accent-glow));
}
.testimonial:hover .testimonial__avatar {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

/* ---------- Stars sparkle ---------- */
.stars svg {
    animation: starTwinkle 3s ease-in-out infinite;
    transition: transform 240ms ease;
}
.stars svg:nth-child(1) { animation-delay: 0s; }
.stars svg:nth-child(2) { animation-delay: 0.3s; }
.stars svg:nth-child(3) { animation-delay: 0.6s; }
.stars svg:nth-child(4) { animation-delay: 0.9s; }
.stars svg:nth-child(5) { animation-delay: 1.2s; }
@keyframes starTwinkle {
    0%, 100% { filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.32)); }
    50% { filter: drop-shadow(0 2px 12px rgba(251, 191, 36, 0.62)); transform: scale(1.06); }
}
.testimonial:hover .stars svg {
    animation-duration: 1.2s;
}

/* ---------- Section reveal stagger ---------- */
.cards .card.reveal,
.cards .testimonial.reveal,
.steps .step.reveal {
    transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Animated hero badge ---------- */
.badge {
    position: relative;
    overflow: hidden;
}
.badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(0, 229, 255, 0.32) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: badgeShine 4s ease-in-out infinite;
}
@keyframes badgeShine {
    0%, 70% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ---------- Underline animation on nav ---------- */
.nav a {
    position: relative;
}
.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after { width: 60%; }

/* ---------- FAQ open burst ---------- */
.faq-item[open] {
    animation: faqOpen 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes faqOpen {
    0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.32); }
    50% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.08); }
    100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

/* ---------- Stat number tick on view ---------- */
.stat__num,
.l2-stat strong {
    background: linear-gradient(135deg, #FFFFFF 0%, #A9F5FF 50%, #00E5FF 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientFlow 6s ease-in-out infinite;
}
@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Floating animation tweaks ---------- */
.device { will-change: transform; }
.device-card { will-change: transform; }
.device-card:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: rgba(0, 229, 255, 0.42);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.18);
}

/* ---------- Header logo gleam ---------- */
.brand__logo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
    transform: translateX(-120%) skewX(-22deg);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 3;
}
.brand:hover .brand__logo::after { transform: translateX(120%) skewX(-22deg); }

/* ---------- Form field focus animation ---------- */
.field {
    position: relative;
}
.field label {
    transition: color 220ms ease, transform 240ms ease;
}
.field input:focus ~ label,
.field select:focus ~ label,
.field:focus-within label {
    color: var(--accent);
}

/* ---------- Scroll shockwave indicator ---------- */
.scroll-shockwave {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.42);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.92);
    pointer-events: none;
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-shockwave.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- Progress bar enhancement ---------- */
.progress__bar {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, #8B5CF6 100%);
    background-size: 200% 100%;
    animation: progressFlow 3s ease-in-out infinite;
}
@keyframes progressFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* =========================================================
   PREMIUM FX v5 — MAX CONVERSION VISUAL ENHANCEMENTS
   ========================================================= */

/* ---------- YouTube unmute prompt ---------- */
.youtube-lite__unmute {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(59, 130, 255, 0.95));
    color: #001428;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 32px rgba(0, 229, 255, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 20;
    animation: unmutePulse 1.8s ease-in-out infinite;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.youtube-lite.is-loaded.is-muted .youtube-lite__unmute { display: inline-flex; }
.youtube-lite__unmute:hover { transform: scale(1.06); box-shadow: 0 18px 44px rgba(0, 229, 255, 0.6); }
.youtube-lite__unmute-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.youtube-lite__unmute-icon svg { width: 100%; height: 100%; }
@keyframes unmutePulse {
    0%, 100% { box-shadow: 0 12px 32px rgba(0, 229, 255, 0.45), 0 0 0 0 rgba(0, 229, 255, 0.6); }
    50% { box-shadow: 0 12px 32px rgba(0, 229, 255, 0.55), 0 0 0 14px rgba(0, 229, 255, 0); }
}

.youtube-lite.is-muted::after {
    content: "SEM SOM";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 18;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* ---------- Hero title — animated gradient ---------- */
.hero__title .grad,
.l2-title .grad,
.final-cta__title .grad {
    background: linear-gradient(110deg, #00E5FF 0%, #3B82FF 35%, #8B5CF6 65%, #00E5FF 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradShift 6s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.35));
}
@keyframes gradShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Hero subtitle highlight reveal ---------- */
.hero__sub { position: relative; }
.hero__sub::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
    transform: scaleX(0);
    transform-origin: left;
    animation: subUnderline 2.4s var(--ease) 0.6s forwards;
}
@keyframes subUnderline { to { transform: scaleX(1); } }

/* ---------- Badge — animated dot pulse ---------- */
.badge {
    position: relative;
    overflow: hidden;
}
.badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(0, 229, 255, 0.16) 50%, transparent 70%);
    transform: translateX(-110%);
    animation: badgeSweep 3.6s var(--ease) infinite;
}
@keyframes badgeSweep { to { transform: translateX(110%); } }

.badge__dot {
    position: relative;
}
.badge__dot::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    animation: dotRing 1.6s ease-out infinite;
}
@keyframes dotRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Buttons — luxe shine + lift ---------- */
.btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 240ms var(--ease), box-shadow 260ms var(--ease), filter 220ms var(--ease);
}
.btn--primary::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: translateX(-130%) skewX(-22deg);
    transition: transform 720ms var(--ease);
    z-index: 1;
    pointer-events: none;
}
.btn--primary:hover::before { transform: translateX(140%) skewX(-22deg); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0, 229, 255, 0.42), 0 0 0 1px rgba(0, 229, 255, 0.36); filter: brightness(1.08); }
.btn--primary:active { transform: translateY(-1px) scale(0.985); }
.btn--primary > * { position: relative; z-index: 2; }

/* CTA breathing pulse */
.btn--primary.btn--lg {
    animation: ctaBreath 3.2s ease-in-out infinite;
}
@keyframes ctaBreath {
    0%, 100% { box-shadow: 0 12px 32px rgba(0, 229, 255, 0.25), 0 0 0 0 rgba(0, 229, 255, 0.36); }
    50% { box-shadow: 0 16px 40px rgba(0, 229, 255, 0.32), 0 0 0 12px rgba(0, 229, 255, 0); }
}

/* attention shake */
.btn--primary.is-attention {
    animation: ctaShake 0.7s ease-in-out 0s 3, ctaBreath 3.2s ease-in-out 2.1s infinite !important;
}
@keyframes ctaShake {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-2px) rotate(-1deg); }
    40% { transform: translateY(0) rotate(1deg); }
    60% { transform: translateY(-1px) rotate(-0.5deg); }
    80% { transform: translateY(0) rotate(0.5deg); }
}

/* ---------- Cards — glow hover (sem borda conic bugada) ---------- */
.card,
.testimonial,
.step,
.scarcity__cell,
.l2-card,
.l2-step {
    position: relative;
    transition: transform 360ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.card:hover,
.testimonial:hover,
.step:hover,
.l2-card:hover,
.l2-step:hover {
    border-color: rgba(0, 229, 255, 0.36);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5), 0 0 28px rgba(0, 229, 255, 0.18);
}

.card .card__icon {
    transition: transform 360ms var(--ease), filter 360ms var(--ease);
}
.card:hover .card__icon {
    transform: scale(1.12) rotate(-6deg);
    filter: drop-shadow(0 0 14px var(--accent-glow));
}

/* ---------- Section title — sutil ---------- */
.section__title {
    color: #F8FAFC;
    position: relative;
}

/* ---------- Price — anchor pricing + pulsing glow ---------- */
.price__original {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.01em;
}
.price__strike {
    position: relative;
    color: rgba(248, 250, 252, 0.55);
    text-decoration: none;
    font-weight: 700;
}
.price__strike::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 52%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #EF4444 20%, #EF4444 80%, transparent);
    transform: rotate(-6deg);
    pointer-events: none;
    border-radius: 2px;
}
.price__discount {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10D9A0 0%, #00E5FF 100%);
    color: #001428;
    font-weight: 900;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(16, 217, 160, 0.32);
}

.price {
    position: relative;
    overflow: hidden;
}
.price::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(0, 229, 255, 0.12), transparent 60%);
    animation: priceGlow 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes priceGlow {
    from { opacity: 0.4; }
    to { opacity: 1; }
}
.price__number {
    background: linear-gradient(135deg, #FFFFFF 0%, #00E5FF 60%, #3B82FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(0, 229, 255, 0.35));
    animation: priceBob 3.6s ease-in-out infinite;
    display: inline-block;
}
@keyframes priceBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* ---------- Stats — glow numbers ---------- */
.stat__num {
    background: linear-gradient(135deg, #00E5FF 0%, #3B82FF 50%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.3));
    transition: transform 320ms var(--ease), filter 320ms var(--ease);
}
.stat:hover .stat__num {
    transform: scale(1.08);
    filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.55));
}

/* ---------- FAQ — smooth + glow on open ---------- */
.faq-item {
    transition: border-color 280ms var(--ease), background 280ms var(--ease), box-shadow 280ms var(--ease);
}
.faq-item[open] {
    border-color: rgba(0, 229, 255, 0.28);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 16px 32px rgba(0, 0, 0, 0.32);
}
.faq-item summary {
    transition: color 220ms var(--ease);
}
.faq-item[open] summary { color: var(--accent); }
.faq-item summary span {
    transition: transform 320ms var(--ease), color 220ms var(--ease);
    display: inline-block;
}
.faq-item[open] summary span { transform: rotate(45deg); color: var(--accent); }
.faq-item p {
    animation: faqSlide 360ms var(--ease);
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scarcity bar — flowing gradient ---------- */
.bar__fill {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    background-size: 220% 100%;
    animation: barFlow 4s linear infinite;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
    position: relative;
    overflow: hidden;
}
@keyframes barFlow {
    0% { background-position: 0% 0; }
    100% { background-position: 220% 0; }
}
.bar__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: barShine 2.4s ease-in-out infinite;
}
@keyframes barShine { 50%, 100% { transform: translateX(100%); } }

/* ---------- FAB Telegram — irresistible pulse ---------- */
.fab {
    animation: fabBreath 2.4s ease-in-out infinite;
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
@keyframes fabBreath {
    0%, 100% { box-shadow: 0 12px 32px rgba(42, 171, 238, 0.45), 0 0 0 0 rgba(42, 171, 238, 0.6); }
    50% { box-shadow: 0 14px 40px rgba(42, 171, 238, 0.6), 0 0 0 18px rgba(42, 171, 238, 0); }
}
.fab:hover { transform: scale(1.12) rotate(-6deg); }

/* ---------- Sticky CTA — slide-up + flash ---------- */
.sticky-cta {
    transition: transform 380ms var(--ease), opacity 320ms var(--ease);
    backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(7, 13, 26, 0.96) 0%, rgba(13, 22, 38, 0.96) 100%);
    border-top: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 229, 255, 0.4);
}
.sticky-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: stickyLine 2.4s ease-in-out infinite;
}
@keyframes stickyLine {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---------- Device card — floating + glow on hover ---------- */
.device-card {
    animation: deviceFloat 5s ease-in-out infinite;
}
.device-card--up { animation-delay: 0s; }
.device-card--down { animation-delay: -2.5s; }
@keyframes deviceFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Activity toasts — flashier ---------- */
.toast {
    border: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(16px);
    background: linear-gradient(135deg, rgba(13, 22, 38, 0.92), rgba(19, 31, 51, 0.92));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 229, 255, 0.12);
}
.toast__icon {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #001428;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
}

/* ---------- Modal — refined backdrop ---------- */
.modal {
    backdrop-filter: blur(8px);
    background: rgba(3, 7, 17, 0.78);
}
.modal__card {
    background: linear-gradient(180deg, rgba(13, 22, 38, 0.96) 0%, rgba(7, 13, 26, 0.98) 100%);
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 60px rgba(0, 229, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Inputs — premium focus ring ---------- */
input, select, textarea {
    transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.36) !important;
}

/* ---------- Header — scrolled state ---------- */
.header {
    transition: background 360ms var(--ease), border-color 360ms var(--ease), box-shadow 360ms var(--ease), backdrop-filter 360ms var(--ease);
}
.header.is-scrolled {
    background: linear-gradient(180deg, rgba(3, 7, 17, 0.88) 0%, rgba(7, 13, 26, 0.82) 100%);
    border-bottom: 1px solid rgba(0, 229, 255, 0.16);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Skip link safety ---------- */
.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 8px 14px;
    background: var(--accent);
    color: #001428;
    border-radius: 8px;
    font-weight: 700;
}

/* ---------- Stars — golden glow ---------- */
.stars svg {
    color: #FCD34D;
    filter: drop-shadow(0 0 6px rgba(252, 211, 77, 0.5));
    transition: transform 240ms var(--ease);
}
.testimonial:hover .stars svg {
    animation: starWiggle 0.6s ease-in-out;
}
.testimonial:hover .stars svg:nth-child(1) { animation-delay: 0s; }
.testimonial:hover .stars svg:nth-child(2) { animation-delay: 0.08s; }
.testimonial:hover .stars svg:nth-child(3) { animation-delay: 0.16s; }
.testimonial:hover .stars svg:nth-child(4) { animation-delay: 0.24s; }
.testimonial:hover .stars svg:nth-child(5) { animation-delay: 0.32s; }
@keyframes starWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg) scale(1.18); }
    75% { transform: rotate(10deg) scale(1.18); }
}

/* ---------- Demo section — frame + glow (estático, leve) ---------- */
.demo__video {
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 229, 255, 0.28),
        0 0 60px rgba(0, 229, 255, 0.18);
}
@keyframes demoPulse {
    from { opacity: 0.35; }
    to { opacity: 0.55; }
}

/* =========================================================
   FINAL CTA — 1000X EDITION
   ========================================================= */
.section--final { padding: 80px 0 100px; }
.final-cta {
    position: relative;
    padding: 48px 44px 44px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(13, 22, 38, 0.94) 0%, rgba(7, 13, 26, 0.98) 100%);
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 40px 96px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 120px rgba(0, 229, 255, 0.18), 0 0 200px rgba(139, 92, 246, 0.14);
    overflow: hidden;
    isolation: isolate;
}

/* Orbs animados de fundo */
.final-cta__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}
.final-cta__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    will-change: transform;
    animation: orbFloat 14s ease-in-out infinite;
}
.final-cta__orb--1 {
    top: -10%; left: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
.final-cta__orb--2 {
    bottom: -20%; right: -15%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%);
    animation-delay: -5s;
}
.final-cta__orb--3 { display: none; }
@keyframes orbFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(30px, -20px, 0); }
}

.final-cta__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.final-cta__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 14px;
    color: var(--text);
}

.final-cta__text {
    text-align: center;
    color: var(--text-2);
    font-size: clamp(0.96rem, 1.6vw, 1.1rem);
    line-height: 1.55;
    max-width: 60ch;
    margin: 0 auto 36px;
}
.final-cta__text b { color: var(--text); font-weight: 700; }

.final-cta__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.final-cta__stack {
    padding: 26px 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.final-cta__stack-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.final-cta__stack-list {
    list-style: none;
    display: grid;
    gap: 12px;
}
.final-cta__stack-list li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.14);
    color: var(--text-2);
    font-size: 0.94rem;
    line-height: 1.45;
}
.final-cta__stack-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.final-cta__stack-list svg { width: 22px; height: 22px; color: var(--success); flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(16, 217, 160, 0.4)); }
.final-cta__stack-list b { color: var(--text); font-weight: 700; }
.final-cta__stack-list i {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 217, 160, 0.14);
    color: var(--success);
    white-space: nowrap;
}
.final-cta__total {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}
.final-cta__total s { color: var(--muted); }

.final-cta__buy {
    padding: 26px 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.08) 0%, rgba(7, 13, 26, 0.6) 100%);
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.36), 0 0 40px rgba(0, 229, 255, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final-cta__price {
    text-align: center;
    margin-bottom: 22px;
}
.final-cta__price-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--muted);
    margin-bottom: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.final-cta__price-tag s {
    position: relative;
    color: rgba(248, 250, 252, 0.55);
    font-weight: 700;
    text-decoration: none;
}
.final-cta__price-tag s::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 52%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #EF4444 20%, #EF4444 80%, transparent);
    transform: rotate(-6deg);
    border-radius: 2px;
}
.final-cta__price-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    margin: 4px 0 12px;
}
.final-cta__currency {
    font-size: 1.6rem;
    color: var(--text-2);
    font-weight: 700;
    transform: translateY(-14px);
}
.final-cta__number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 11vw, 6rem);
    font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF 0%, #00E5FF 60%, #3B82FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 28px rgba(0, 229, 255, 0.5));
    letter-spacing: -0.04em;
    animation: priceBob 3.6s ease-in-out infinite;
}
.final-cta__period {
    font-size: 1.1rem;
    color: var(--muted);
    font-weight: 600;
    transform: translateY(-6px);
}
.final-cta__price-hint {
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
}
.final-cta__price-hint b { color: var(--accent); font-weight: 800; }

.final-cta__pay-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.final-cta__pay-methods span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.final-cta__pay-methods svg { width: 16px; height: 16px; color: var(--accent); }

.final-cta__btn {
    font-size: 1.04rem !important;
    letter-spacing: 0.02em;
    padding: 20px 24px !important;
    margin-bottom: 14px;
    box-shadow: 0 20px 48px rgba(0, 229, 255, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.final-cta__btn span { font-weight: 900; }

.final-cta__seals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 4px 0 14px;
}
.final-cta__seals span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
}
.final-cta__seals svg { width: 14px; height: 14px; color: var(--accent); }

.final-cta__urgency {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(239, 68, 68, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: #FED7AA;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}
.final-cta__urgency svg { width: 16px; height: 16px; color: #FCD34D; flex-shrink: 0; }
.final-cta__urgency b {
    color: #FFFFFF;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.final-cta__social {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
}
.final-cta__avatars {
    display: inline-flex;
}
.final-cta__avatars span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 900;
    font-size: 0.86rem;
    border: 2px solid var(--bg-1);
    margin-left: -10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
    transition: transform 240ms var(--ease);
}
.final-cta__avatars span:first-child { margin-left: 0; }
.final-cta__avatars:hover span { transform: translateY(-2px); }
.final-cta__social > span {
    color: var(--text-2);
    font-size: 0.94rem;
}
.final-cta__social b { color: var(--text); font-weight: 800; }

@media (max-width: 760px) {
    .section--final { padding: 48px 0 60px; }
    .final-cta { padding: 32px 20px 28px; border-radius: 22px; }
    .final-cta__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .final-cta__text { margin-bottom: 24px; }
    .final-cta__split { grid-template-columns: 1fr; gap: 16px; }
    .final-cta__stack, .final-cta__buy { padding: 22px 18px; }
    .final-cta__number { font-size: clamp(3.4rem, 14vw, 5rem); }
    .final-cta__currency { font-size: 1.3rem; transform: translateY(-10px); }
    .final-cta__btn { padding: 17px 20px !important; font-size: 0.94rem !important; }
    .final-cta__btn span { font-size: 0.9rem; }
    .final-cta__orb--1, .final-cta__orb--2, .final-cta__orb--3 { width: 220px; height: 220px; opacity: 0.3; }
    .final-cta__social { flex-direction: column; gap: 12px; }
    .final-cta__stack-list li { font-size: 0.88rem; gap: 8px; }
    .final-cta__stack-list i { font-size: 0.72rem; padding: 2px 8px; }
}

/* ---------- Hero visual — depth shadow ---------- */
.hero__visual {
    perspective: 1200px;
}
.device {
    transform-style: preserve-3d;
    transition: transform 400ms var(--ease);
}
.device:hover {
    transform: rotateY(-3deg) rotateX(2deg) translateZ(8px);
}

/* ---------- Burst particles enhancement ---------- */
.burst-particle {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* ---------- Hero bullets — subtle slide-in ---------- */
.hero__bullets li {
    transition: transform 220ms var(--ease), color 220ms var(--ease);
}
.hero__bullets li:hover {
    transform: translateX(6px);
    color: var(--accent);
}
.hero__bullets li svg {
    transition: transform 240ms var(--ease), filter 240ms var(--ease);
}
.hero__bullets li:hover svg {
    transform: scale(1.2) rotate(-6deg);
    filter: drop-shadow(0 0 8px currentColor);
}

/* ---------- Landing2 specific ---------- */
.submit-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
    animation: ctaBreath 3.2s ease-in-out infinite;
}
.submit-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translateX(-130%) skewX(-22deg);
    transition: transform 720ms var(--ease);
    z-index: 1;
}
.submit-btn:hover::before { transform: translateX(140%) skewX(-22deg); }
.submit-btn:hover { transform: translateY(-3px) scale(1.02); }

/* ---------- Trust items — animated check icons ---------- */
.hero__trust-item {
    position: relative;
    transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.hero__trust-item:hover {
    color: var(--accent);
    transform: translateY(-2px);
}
.hero__trust-item svg {
    transition: transform 240ms var(--ease), filter 240ms var(--ease);
}
.hero__trust-item:hover svg {
    transform: scale(1.18);
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* ---------- Glow ambient floaters ---------- */
.bg-glow {
    animation: glowDrift 18s ease-in-out infinite alternate;
}
.bg-glow--1 { animation-delay: 0s; }
.bg-glow--2 { animation-delay: -6s; }
.bg-glow--3 { animation-delay: -12s; }
@keyframes glowDrift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.15); }
    100% { transform: translate(-30px, 40px) scale(0.95); }
}

/* ---------- Hero CTA group ---------- */
.hero__cta { position: relative; z-index: 2; }

/* ---------- Reveal — refined entrance ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Hover pop sutil — não conflita com tilt ---------- */
.step:hover,
.scarcity__cell:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.28);
}

/* ---------- Tilt enhanced shadow ---------- */
.card.is-tilting,
.testimonial.is-tilting,
.l2-card.is-tilting {
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 229, 255, 0.22) !important;
}

/* ---------- Conversion counters ---------- */
.urgency-bar {
    position: relative;
    z-index: 60;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(245, 158, 11, 0.18), rgba(220, 38, 38, 0.18));
    background-size: 200% 100%;
    animation: urgencyFlow 4s ease-in-out infinite;
    border-bottom: 1px solid rgba(245, 158, 11, 0.32);
    padding: 10px 16px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: #FED7AA;
    backdrop-filter: blur(12px);
}
@keyframes urgencyFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.urgency-bar strong {
    color: #FCD34D;
    margin: 0 6px;
}
.urgency-bar__timer {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    color: #FFFFFF;
}
.urgency-bar__timer span {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Trust badges row ---------- */
.proof-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 32px;
    padding: 24px 16px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.78;
}
.proof-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 220ms var(--ease), color 220ms var(--ease);
}
.proof-row span:hover { opacity: 1; color: var(--accent); }

/* ---------- Live indicator pulse ---------- */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.18);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #FCA5A5;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.live-indicator::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: liveDot 1.4s ease-out infinite;
}
@keyframes liveDot {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------- Hover lift utility ---------- */
.lift-on-hover {
    transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.lift-on-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.18);
}

/* =========================================================
   CONVERSION STACK — Bonus, Compare, Trust, Guarantee
   ========================================================= */

/* ---------- Trust strip ---------- */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 28px;
    margin-top: 36px;
    padding: 20px 22px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line);
}
.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.trust-strip__item:hover { color: var(--accent); transform: translateY(-2px); }
.trust-strip__item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.trust-strip__pix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #32BCAD, #00B4A8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 10px rgba(50, 188, 173, 0.4);
}

/* ---------- Bonus stack ---------- */
.bonus-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}
.bonus-item {
    position: relative;
    padding: 24px 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.04) 0%, rgba(7, 13, 26, 0.5) 100%);
    border: 1px solid rgba(0, 229, 255, 0.18);
    transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.bonus-item:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.38);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 28px rgba(0, 229, 255, 0.18);
}
.bonus-item__tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #001428;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.bonus-item__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.bonus-item__text {
    color: var(--text-2);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.bonus-item__price {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 0.86rem;
}
.bonus-item__price s { color: var(--muted); font-weight: 600; }
.bonus-item__price b {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 217, 160, 0.16);
    color: var(--success);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* ---------- Value stack ---------- */
.value-stack {
    max-width: 640px;
    margin: 0 auto 32px;
    padding: 26px 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.04) 0%, rgba(7, 13, 26, 0.6) 100%);
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4), 0 0 32px rgba(0, 229, 255, 0.10);
}
.value-stack__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
    color: var(--text-2);
    font-size: 0.96rem;
}
.value-stack__row b { color: var(--text); font-weight: 700; }
.value-stack__row--total {
    padding-top: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--muted);
    font-size: 0.92rem;
}
.value-stack__row--total b { color: var(--muted); text-decoration: line-through; font-weight: 700; }
.value-stack__row--final {
    padding: 16px 0 4px;
    border-bottom: 0;
    font-size: 1.1rem;
    color: var(--text);
    font-weight: 700;
}
.value-stack__row--final b {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
.value-stack__row--final small {
    font-size: 0.86rem;
    color: var(--muted);
    font-weight: 600;
    -webkit-text-fill-color: var(--muted);
    margin-left: 4px;
}

/* ---------- Guarantee callout ---------- */
.guarantee {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(16, 217, 160, 0.10), rgba(0, 229, 255, 0.06));
    border: 1px solid rgba(16, 217, 160, 0.32);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32), 0 0 32px rgba(16, 217, 160, 0.14);
}
.guarantee__seal {
    flex-shrink: 0;
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success) 0%, var(--accent) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #001428;
    box-shadow: 0 12px 28px rgba(16, 217, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    animation: sealSpin 14s linear infinite;
}
.guarantee__seal svg { width: 28px; height: 28px; }
.guarantee__seal span { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes sealSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
.guarantee__body h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.guarantee__body p {
    color: var(--text-2);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* ---------- Compare table ---------- */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}
.compare__col {
    padding: 28px 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    transition: transform 280ms var(--ease), border-color 280ms var(--ease);
}
.compare__col--bad {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(7, 13, 26, 0.4));
    border-color: rgba(239, 68, 68, 0.22);
}
.compare__col--good {
    background: linear-gradient(180deg, rgba(16, 217, 160, 0.08), rgba(0, 229, 255, 0.04));
    border-color: rgba(16, 217, 160, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 32px rgba(16, 217, 160, 0.12);
    transform: translateY(-4px);
}
.compare__head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.compare__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 900;
    flex-shrink: 0;
}
.compare__icon--x { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
.compare__icon--v { background: rgba(16, 217, 160, 0.18); color: var(--success); }
.compare__col ul {
    list-style: none;
    display: grid;
    gap: 12px;
}
.compare__col li {
    position: relative;
    padding-left: 26px;
    color: var(--text-2);
    font-size: 0.96rem;
    line-height: 1.55;
}
.compare__col--bad li::before {
    content: "×";
    position: absolute;
    left: 0;
    top: -2px;
    color: #FCA5A5;
    font-weight: 900;
    font-size: 1.2rem;
}
.compare__col--good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--success);
    font-weight: 900;
    font-size: 0.96rem;
}

/* ---------- Form progress (landing2) ---------- */
.form-progress {
    margin: 18px 0 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.form-progress__track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
    position: relative;
}
.form-progress__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    background-size: 200% 100%;
    transition: width 360ms var(--ease);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
    animation: barFlow 4s linear infinite;
}
.form-progress__fill.is-complete {
    background: linear-gradient(90deg, #10D9A0, #00E5FF);
}
.form-progress__label {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
.form-progress__label b {
    color: var(--accent);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* ---------- Form seals (landing2) ---------- */
.form-seals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 14px;
}
.form-seal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.form-seal:hover {
    color: var(--accent);
    border-color: rgba(0, 229, 255, 0.42);
    background: rgba(0, 229, 255, 0.10);
}
.form-seal svg { width: 14px; height: 14px; color: var(--accent); }


/* =========================================================
   LANDING2 — CTA direto Telegram (sem formulário)
   ========================================================= */
.l2-card--cta {
    position: relative;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.06) 0%, rgba(7, 13, 26, 0.7) 100%);
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 80px rgba(0, 229, 255, 0.14);
    overflow: hidden;
}
.l2-card--cta::before {
    content: "";
    position: absolute;
    top: -40%; right: -25%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 171, 238, 0.16), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

/* Estado "Mensagem enviada" pós-click no Telegram */
.l2-card--cta.is-sent {
    border-color: rgba(16, 217, 160, 0.55);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(16, 217, 160, 0.32), 0 0 80px rgba(16, 217, 160, 0.22);
    animation: cardSentPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.l2-card--cta.is-sent .section__kicker {
    background: rgba(16, 217, 160, 0.18);
    border-color: rgba(16, 217, 160, 0.42);
    color: var(--success);
    animation: kickerCheck 0.6s ease-out;
}
@keyframes cardSentPop {
    0% { transform: scale(0.98); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes kickerCheck {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cta-price {
    margin: 26px 0 22px;
    padding: 24px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), rgba(7, 13, 26, 0.5));
    border: 1px solid rgba(0, 229, 255, 0.22);
    text-align: center;
}
.cta-price__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.cta-price__tag s {
    position: relative;
    color: rgba(248, 250, 252, 0.55);
    font-weight: 700;
    text-decoration: none;
}
.cta-price__tag s::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    top: 52%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #EF4444 20%, #EF4444 80%, transparent);
    transform: rotate(-6deg);
    border-radius: 2px;
}
.cta-price__value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    margin: 6px 0 10px;
}
.cta-price__currency {
    font-size: 1.4rem;
    color: var(--text-2);
    font-weight: 700;
    transform: translateY(-12px);
}
.cta-price__number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.6rem, 10vw, 5.4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF 0%, #00E5FF 60%, #3B82FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.5));
    letter-spacing: -0.04em;
    animation: priceBob 3.6s ease-in-out infinite;
}
.cta-price__period {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 600;
    transform: translateY(-4px);
}
.cta-price__hint {
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}
.cta-price__hint b { color: var(--accent); font-weight: 800; }

.cta-tg-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 20px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #FFFFFF;
    text-decoration: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 22px 52px rgba(42, 171, 238, 0.5), 0 0 0 1px rgba(42, 171, 238, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), filter 240ms var(--ease);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: ctaBreath 2.4s ease-in-out infinite;
    cursor: pointer;
}
.cta-tg-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
    transform: translateX(-130%) skewX(-22deg);
    transition: transform 720ms var(--ease);
    z-index: 1;
    pointer-events: none;
}
.cta-tg-btn:hover::before { transform: translateX(140%) skewX(-22deg); }
.cta-tg-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 28px 64px rgba(42, 171, 238, 0.62), 0 0 0 1px rgba(42, 171, 238, 0.5);
}
.cta-tg-btn:active { transform: translateY(-1px) scale(0.985); }
.cta-tg-btn svg, .cta-tg-btn .btn-label { position: relative; z-index: 2; }

.cta-trust {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}
.cta-trust__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}
.cta-trust__row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 600;
}
.cta-trust__row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.cta-trust__row--pay {
    padding-top: 10px;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

@media (max-width: 720px) {
    .l2-card--cta { padding: 24px 20px; }
    .cta-price { padding: 20px 16px; margin: 22px 0 20px; }
    .cta-price__number { font-size: clamp(3rem, 13vw, 4.4rem); }
    .cta-tg-btn { padding: 17px 18px; font-size: 0.94rem; }
    .cta-trust__row { gap: 8px 14px; }
    .cta-trust__row span { font-size: 0.78rem; }
}

/* ---------- L2 video frame ---------- */
.l2-video-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    max-width: 320px;
    width: 100%;
    margin-inline: auto;
    background: #000;
    box-shadow:
        0 32px 64px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 229, 255, 0.22),
        0 0 60px rgba(0, 229, 255, 0.16);
    isolation: isolate;
    contain: paint;
}
.l2-video-frame::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.45), transparent 40%, transparent 60%, rgba(139, 92, 246, 0.45));
    z-index: -1;
    filter: blur(20px);
    opacity: 0.6;
    animation: demoPulse 4s ease-in-out infinite alternate;
}
.l2-video-frame__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.42);
    pointer-events: none;
}
.l2-video-frame__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pulseDot 1.4s ease-in-out infinite;
}
.l2-video-frame .youtube-lite,
.l2-video-frame .youtube-lite__poster,
.l2-video-frame .youtube-lite__player,
.l2-video-frame .youtube-lite__player > iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* ---------- Telegram pós-submit modal ---------- */
.tg-modal__card {
    max-width: 560px;
    padding: 28px 28px 26px;
    border: 1px solid rgba(42, 171, 238, 0.42);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(42, 171, 238, 0.32), 0 0 80px rgba(42, 171, 238, 0.22);
}
.tg-modal__check {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10D9A0, #00E5FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001428;
    box-shadow: 0 14px 32px rgba(16, 217, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    animation: tgCheckPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tg-modal__check svg { width: 38px; height: 38px; }
@keyframes tgCheckPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

.tg-modal__preview {
    margin-top: 20px;
    border-radius: 14px;
    background: rgba(7, 13, 26, 0.6);
    border: 1px solid rgba(42, 171, 238, 0.22);
    overflow: hidden;
}
.tg-modal__preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(42, 171, 238, 0.10);
    border-bottom: 1px solid rgba(42, 171, 238, 0.18);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.tg-modal__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(42, 171, 238, 0.18);
    border: 1px solid rgba(42, 171, 238, 0.42);
    color: #FFFFFF;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.tg-modal__copy:hover { background: rgba(42, 171, 238, 0.32); transform: translateY(-1px); }
.tg-modal__copy svg { width: 14px; height: 14px; }
.tg-modal__copy.is-copied {
    background: rgba(16, 217, 160, 0.28);
    border-color: rgba(16, 217, 160, 0.6);
    color: #BBFFE0;
}
.tg-modal__bubble {
    margin: 0;
    padding: 16px 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(28, 91, 134, 0.32), rgba(42, 171, 238, 0.18));
}
.tg-modal__bubble::-webkit-scrollbar { width: 8px; }
.tg-modal__bubble::-webkit-scrollbar-thumb { background: rgba(42, 171, 238, 0.32); border-radius: 4px; }

.tg-modal__open {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%) !important;
    box-shadow: 0 18px 44px rgba(42, 171, 238, 0.5), 0 0 0 1px rgba(42, 171, 238, 0.32) !important;
    color: #FFFFFF !important;
    animation: ctaBreath 2.4s ease-in-out infinite !important;
}
.tg-modal__open:hover {
    box-shadow: 0 22px 56px rgba(42, 171, 238, 0.62), 0 0 0 1px rgba(42, 171, 238, 0.48) !important;
    filter: brightness(1.08) !important;
}

@media (max-width: 720px) {
    .tg-modal__card { padding: 24px 20px; max-width: 92vw; }
    .tg-modal__check { width: 64px; height: 64px; }
    .tg-modal__check svg { width: 32px; height: 32px; }
    .tg-modal__bubble { font-size: 0.84rem; padding: 14px 16px; max-height: 200px; }
    .tg-modal__preview-head { font-size: 0.68rem; padding: 9px 12px; }
    .tg-modal__copy { font-size: 0.7rem; padding: 5px 10px; }
}

/* ---------- Submit toast (clipboard confirmation) ---------- */
.submit-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 240;
    padding: 16px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.94rem;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 44px rgba(42, 171, 238, 0.5), 0 0 0 1px rgba(42, 171, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    opacity: 0;
    transition: opacity 280ms var(--ease), transform 360ms var(--ease);
    pointer-events: none;
    max-width: calc(100vw - 32px);
    text-align: center;
    line-height: 1.45;
}
.submit-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- WA preview — make it look like a real WhatsApp bubble ---------- */
.wa-preview {
    display: block;
    margin: 22px 0 18px;
}
.wa-preview > strong {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.wa-bubble {
    position: relative;
    padding: 14px 16px;
    border-radius: 14px 14px 14px 4px;
    background: linear-gradient(180deg, #1C5B86 0%, #2AABEE 100%);
    color: #EAF6FF;
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-line;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(42, 171, 238, 0.32);
    max-height: 240px;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wa-bubble::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, #1C5B86, #2AABEE);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.wa-bubble::after {
    content: "✓✓";
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 0.66rem;
    color: rgba(0, 229, 255, 0.85);
    letter-spacing: 0.04em;
}

/* =========================================================
   LANDING REFATORADA — Hero X, Telegram-first, conversão MAX
   ========================================================= */

/* ---------- LIVE BAR topo ---------- */
.live-bar {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(245, 158, 11, 0.16), rgba(220, 38, 38, 0.18));
    border-bottom: 1px solid rgba(245, 158, 11, 0.36);
    color: #FFE7C2;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    backdrop-filter: blur(8px);
}
.live-bar__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: livePulseRed 1.6s ease-out infinite;
    flex-shrink: 0;
}
.live-bar__text b {
    color: #FFFFFF;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
@keyframes livePulseRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------- Botão Telegram (header pequeno) ---------- */
.btn--tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 0.86rem;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(42, 171, 238, 0.42);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn--tg:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(42, 171, 238, 0.55); }
.btn--tg svg { width: 18px; height: 18px; }

/* ---------- BOTÃO TELEGRAM MEGA (CTA principal) ---------- */
.btn-tg-mega {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2AABEE 0%, #1E96D0 100%);
    color: #FFFFFF !important;
    text-decoration: none;
    font-family: inherit;
    font-size: 1.06rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 18px 44px rgba(42, 171, 238, 0.5), 0 0 0 1px rgba(42, 171, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    animation: tgPulseBreath 2.2s ease-in-out infinite;
    will-change: transform, box-shadow;
}
.btn-tg-mega::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
    transform: translateX(-130%) skewX(-22deg);
    transition: transform 700ms var(--ease);
    pointer-events: none;
}
.btn-tg-mega:hover::before { transform: translateX(140%) skewX(-22deg); }
.btn-tg-mega:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 24px 54px rgba(42, 171, 238, 0.62), 0 0 0 1px rgba(42, 171, 238, 0.55); }
.btn-tg-mega:active { transform: translateY(-1px) scale(0.985); }
.btn-tg-mega svg { width: 22px; height: 22px; position: relative; z-index: 2; }
.btn-tg-mega span { position: relative; z-index: 2; }
.btn-tg-mega__arrow { width: 18px !important; height: 18px !important; }
.btn-tg-mega--block { display: flex; width: 100%; }
.btn-tg-mega--xl { padding: 24px 32px; font-size: 1.16rem; }
@keyframes tgPulseBreath {
    0%, 100% { box-shadow: 0 18px 44px rgba(42, 171, 238, 0.5), 0 0 0 0 rgba(42, 171, 238, 0.6), 0 0 0 1px rgba(42, 171, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
    50% { box-shadow: 0 20px 50px rgba(42, 171, 238, 0.58), 0 0 0 14px rgba(42, 171, 238, 0), 0 0 0 1px rgba(42, 171, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
}

/* ---------- HERO X (agressivo) ---------- */
.hero-x {
    padding: 56px 0 64px;
    content-visibility: visible;
}
.hero-x__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.85fr;
    gap: 48px;
    align-items: center;
}
.hero-x__content { max-width: 640px; }
.hero-x__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.42);
    color: #FCA5A5;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.hero-x__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: livePulseRed 1.6s ease-out infinite;
}
.hero-x__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 5.6vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 18px;
}
.hero-x__red {
    color: #FCA5A5;
    text-decoration: line-through;
    text-decoration-color: #EF4444;
    text-decoration-thickness: 3px;
}
.hero-x__sub {
    font-size: clamp(1rem, 1.8vw, 1.22rem);
    line-height: 1.5;
    color: var(--text-2);
    margin-bottom: 32px;
}
.hero-x__sub b { color: #00E5FF; font-weight: 700; }
.hero-x__price-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.10), rgba(7, 13, 26, 0.6));
    border: 1px solid rgba(0, 229, 255, 0.32);
    margin-bottom: 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 0 24px rgba(0, 229, 255, 0.10);
}
.hero-x__price-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero-x__price-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF, #00E5FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.hero-x__price-value small {
    font-size: 0.7rem;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    font-weight: 600;
    margin-left: 2px;
}
.hero-x__price-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 217, 160, 0.16);
    color: var(--success);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.hero-x__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.hero-x__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    font-size: 0.86rem;
    color: var(--text-2);
    font-weight: 600;
}

/* ---------- Reel frame vertical 9:16 ---------- */
.hero-x__visual {
    display: flex;
    justify-content: center;
}
.reel-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.32), 0 0 60px rgba(0, 229, 255, 0.22);
    isolation: isolate;
    contain: paint;
}
.reel-frame--md { max-width: 360px; }
.reel-frame__badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.95);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.42);
    pointer-events: none;
}
.reel-frame__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: livePulseRed 1.4s ease-in-out infinite;
}
.reel-frame .youtube-lite,
.reel-frame .youtube-lite__poster,
.reel-frame .youtube-lite__player,
.reel-frame .youtube-lite__player > iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* ---------- Kicker / H2 padronizados ---------- */
.kicker-x {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.10);
    border: 1px solid rgba(0, 229, 255, 0.32);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
.h2-x {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
}
.grad-green { background: linear-gradient(135deg, #10D9A0, #00E5FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-cyan { background: linear-gradient(135deg, #00E5FF, #3B82FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.grad-red { background: linear-gradient(135deg, #EF4444, #F59E0B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- RESULTS STRIP ---------- */
.results-strip {
    padding: 56px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
}
.results-strip__head { text-align: center; margin-bottom: 36px; }
.results-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}
.result-card {
    padding: 22px 20px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(7, 13, 26, 0.5));
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
.result-card__tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.result-card__value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.result-card__meta {
    font-size: 0.84rem;
    color: var(--text-2);
}
.result-card--green { border-color: rgba(16, 217, 160, 0.42); box-shadow: 0 0 32px rgba(16, 217, 160, 0.14); }
.result-card--green:hover { border-color: rgba(16, 217, 160, 0.6); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 40px rgba(16, 217, 160, 0.22); }
.result-card--green .result-card__value { color: #34D399; }
.result-card--blue { border-color: rgba(59, 130, 255, 0.32); }
.result-card--blue .result-card__value { color: #60A5FA; }
.result-card--purple { border-color: rgba(139, 92, 246, 0.32); }
.result-card--purple .result-card__value { color: #C4B5FD; }
.result-card--cyan { border-color: rgba(0, 229, 255, 0.32); }
.result-card--cyan .result-card__value { color: var(--accent); }

.results-cta { text-align: center; }
.results-cta__hint { color: var(--muted); font-size: 0.86rem; margin-top: 10px; }

/* ---------- PROOF V (video + copy) ---------- */
.proof-v {
    padding: 64px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
}
.proof-v__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}
.proof-v__copy { max-width: 540px; }
.proof-v__copy .h2-x { margin: 6px 0 22px; }
.proof-v__list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: 26px;
}
.proof-v__list li {
    font-size: 1rem;
    color: var(--text-2);
    line-height: 1.45;
}
.proof-v__list b { color: var(--text); font-weight: 700; }
.proof-v__video { display: flex; justify-content: center; }

/* ---------- TESTIMONIALS X ---------- */
.testi-x {
    padding: 64px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}
.testi-x__head { text-align: center; margin-bottom: 36px; }
.testi-x__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.testi-x__card {
    padding: 26px 24px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(7, 13, 26, 0.4));
    transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.testi-x__card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42), 0 0 24px rgba(0, 229, 255, 0.16);
}
.testi-x__stars {
    color: #FCD34D;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 8px rgba(252, 211, 77, 0.5));
}
.testi-x__quote {
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 22px;
    font-style: italic;
}
.testi-x__person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.testi-x__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    flex-shrink: 0;
}
.testi-x__person strong {
    display: block;
    color: var(--text);
    font-weight: 700;
    font-size: 0.94rem;
}
.testi-x__person span {
    color: var(--muted);
    font-size: 0.78rem;
}

/* ---------- WHY TG (lista grande) ---------- */
.why-tg {
    padding: 64px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}
.why-tg__box {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 32px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.05), rgba(7, 13, 26, 0.5));
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42), 0 0 60px rgba(0, 229, 255, 0.14);
    text-align: center;
}
.why-tg__box .h2-x { margin: 6px 0 26px; }
.why-tg__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
    text-align: left;
}
.why-tg__list li {
    font-size: 0.98rem;
    color: var(--text-2);
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.10);
}
.why-tg__list b { color: var(--text); font-weight: 700; }
.why-tg__hint { color: var(--muted); font-size: 0.86rem; margin-top: 14px; }

.why-tg__price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 217, 160, 0.10), rgba(0, 229, 255, 0.06));
    border: 1px solid rgba(16, 217, 160, 0.42);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 32px rgba(16, 217, 160, 0.14);
    text-align: left;
}
.why-tg__price-left { display: flex; flex-direction: column; gap: 2px; }
.why-tg__price-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.why-tg__price-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, #FFFFFF, #10D9A0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.why-tg__price-value small {
    font-size: 0.8rem;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    font-weight: 600;
}
.why-tg__price-day {
    font-size: 0.78rem;
    color: var(--text-2);
    font-weight: 600;
    margin-top: 4px;
}
.why-tg__price-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
}

.final-x__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 6px 0 26px;
}
.final-x__price-line {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 900;
    color: var(--text);
}
.final-x__price-line s {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.7em;
    position: relative;
    text-decoration: none;
}
.final-x__price-line s::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    top: 52%;
    height: 2px;
    background: #EF4444;
    transform: rotate(-6deg);
}
.final-x__price-line b {
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg, #FFFFFF, #00E5FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.final-x__price-line span {
    font-size: 0.74em;
    color: var(--muted);
    font-weight: 600;
}
.final-x__price-day {
    color: var(--text-2);
    font-size: 0.86rem;
    font-weight: 600;
}

/* Mobile dos componentes de preço */
@media (max-width: 720px) {
    .hero-x__price-pill {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
        margin-bottom: 22px;
    }
    .hero-x__price-value { font-size: 1.4rem; }
    .why-tg__price-box { flex-direction: column; gap: 14px; padding: 18px 16px; text-align: center; }
    .why-tg__price-right { align-items: center; }
    .final-x__price-line { font-size: clamp(1.4rem, 6vw, 1.8rem); flex-wrap: wrap; justify-content: center; }
}

/* ---------- FAQ MINI ---------- */
.faq-mini {
    padding: 48px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}
.faq-mini__list {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.faq-mini__item {
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(7, 13, 26, 0.4));
    overflow: hidden;
    transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.faq-mini__item[open] {
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32), 0 0 24px rgba(0, 229, 255, 0.12);
}
.faq-mini__item summary {
    padding: 16px 20px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
.faq-mini__item summary::-webkit-details-marker { display: none; }
.faq-mini__item summary span {
    font-size: 1.2rem;
    color: var(--accent);
    transition: transform 280ms var(--ease);
    display: inline-block;
}
.faq-mini__item[open] summary span { transform: rotate(45deg); }
.faq-mini__item p {
    padding: 0 20px 18px;
    color: var(--text-2);
    font-size: 0.94rem;
    line-height: 1.55;
}
.faq-mini__item b { color: var(--text); font-weight: 700; }

/* ---------- FINAL X (CTA explosivo) ---------- */
.final-x {
    padding: 64px 0 80px;
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}
.final-x__box {
    position: relative;
    padding: 44px 36px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(7, 13, 26, 0.92));
    border: 1px solid rgba(239, 68, 68, 0.42);
    box-shadow: 0 40px 96px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.32), 0 0 80px rgba(239, 68, 68, 0.16);
    text-align: center;
    overflow: hidden;
}
.final-x__alert {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #FCA5A5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.final-x__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 4.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    color: var(--text);
}
.final-x__text {
    color: var(--text-2);
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    line-height: 1.5;
    max-width: 52ch;
    margin: 0 auto 28px;
}
.final-x__text b { color: var(--text); font-weight: 700; }
.final-x__stamps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 22px;
    margin-top: 24px;
    color: var(--text-2);
    font-size: 0.88rem;
    font-weight: 600;
}

/* ---------- FOOTER X ---------- */
.footer-x {
    padding: 30px 0 100px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* ---------- STICKY TELEGRAM mobile ---------- */
.sticky-tg {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(7, 13, 26, 0.94), rgba(3, 7, 17, 0.98));
    border-top: 1px solid rgba(42, 171, 238, 0.42);
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6);
    z-index: 90;
    transform: translateY(110%);
    transition: transform 360ms var(--ease);
    pointer-events: none;
    backdrop-filter: blur(12px);
}
.sticky-tg.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* ---------- ACTIVITY TOAST X ---------- */
.activity-x {
    position: fixed;
    left: 16px;
    bottom: 88px;
    z-index: 75;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 260px;
}
.toast-x {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(7, 13, 26, 0.95);
    border: 1px solid rgba(16, 217, 160, 0.32);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 320ms var(--ease), transform 360ms var(--ease);
    pointer-events: auto;
}
.toast-x.is-visible { opacity: 1; transform: translateX(0); }
.toast-x__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #10D9A0;
    box-shadow: 0 0 12px rgba(16, 217, 160, 0.6);
    flex-shrink: 0;
}
.toast-x__body p {
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.3;
}
.toast-x__body b { color: var(--text); font-weight: 700; }
.toast-x__body span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.72rem;
}

/* ---------- PÁGINA /OBRIGADO ---------- */
.body-obrigado { }
.obrigado-wrap {
    min-height: 100vh;
    padding: 48px 0 80px;
    display: flex;
    align-items: flex-start;
}
.obrigado-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 36px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(16, 217, 160, 0.06), rgba(7, 13, 26, 0.92));
    border: 1px solid rgba(16, 217, 160, 0.42);
    box-shadow: 0 40px 96px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(16, 217, 160, 0.28), 0 0 80px rgba(16, 217, 160, 0.18);
    text-align: center;
}
.obrigado-check {
    width: 88px; height: 88px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10D9A0, #00E5FF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #001428;
    box-shadow: 0 16px 36px rgba(16, 217, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    animation: obrCheckPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.obrigado-check svg { width: 44px; height: 44px; }
@keyframes obrCheckPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.obrigado-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(16, 217, 160, 0.18);
    border: 1px solid rgba(16, 217, 160, 0.42);
    color: var(--success);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}
.obrigado-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 4.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    color: var(--text);
}
.obrigado-sub {
    color: var(--text-2);
    font-size: clamp(0.96rem, 1.7vw, 1.08rem);
    line-height: 1.55;
    margin-bottom: 28px;
}
.obrigado-sub b { color: var(--text); font-weight: 700; }
.obrigado-steps {
    text-align: left;
    margin: 32px 0;
    padding: 22px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
}
.obrigado-steps h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    text-align: center;
}
.obrigado-steps ol {
    padding-left: 22px;
    display: grid;
    gap: 10px;
    color: var(--text-2);
    font-size: 0.94rem;
    line-height: 1.5;
}
.obrigado-steps b { color: var(--text); font-weight: 700; }
.obrigado-video {
    margin: 32px 0;
}
.obrigado-video h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}
.obrigado-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 32px 0 22px;
    padding: 20px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
}
.obrigado-stats article {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.obrigado-stats strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.obrigado-stats span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.obrigado-note {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.32);
    color: #FED7AA;
    font-size: 0.88rem;
    line-height: 1.45;
}
.obrigado-note b { color: #FCD34D; }


/* =========================================================
   MOBILE REFINEMENTS — Tablet & Phone breakpoints
   ========================================================= */

/* ---------- Tablet (<= 920px) ---------- */
@media (max-width: 920px) {
    .container { padding-inline: 22px; }
    .bonus-stack { grid-template-columns: repeat(2, 1fr); }
    .compare { grid-template-columns: 1fr; }
    .compare__col--good { transform: none; }
    .trust-strip { gap: 14px 22px; padding: 18px 18px; }
    .guarantee { padding: 22px 22px; }
    .device { max-width: 320px; }
}

/* ---------- Phone (<= 720px) — Landing refatorada ---------- */
@media (max-width: 720px) {
    .container { padding-inline: 16px; }

    /* Live bar topo */
    .live-bar { font-size: 0.74rem; padding: 8px 12px; flex-wrap: wrap; }

    /* Hero X mobile */
    .hero-x { padding: 28px 0 40px; }
    .hero-x__grid { grid-template-columns: 1fr; gap: 28px; }
    .hero-x__visual { order: -1; }
    .hero-x__title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
    .hero-x__sub { font-size: 1rem; }
    .hero-x__cta-wrap { align-items: stretch; }
    .hero-x__badge { font-size: 0.68rem; padding: 5px 11px; }
    .reel-frame { max-width: 240px; }
    .reel-frame--md { max-width: 260px; }

    /* Botão Telegram mega mobile */
    .btn-tg-mega {
        width: 100%;
        padding: 17px 18px;
        font-size: 0.94rem;
        letter-spacing: 0.01em;
    }
    .btn-tg-mega--xl { padding: 20px 20px; font-size: 1rem; }
    .btn-tg-mega svg { width: 20px; height: 20px; }
    .btn-tg-mega__arrow { display: none; }

    /* Botão header */
    .btn--tg { padding: 9px 12px; font-size: 0.78rem; }
    .btn--tg svg { width: 16px; height: 16px; }
    .btn--tg span { display: none; }
    .btn--tg::after { content: "Telegram"; }

    /* Results strip mobile */
    .results-strip { padding: 40px 0; }
    .results-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .result-card { padding: 16px 14px; }
    .result-card__value { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
    .result-card__tag { font-size: 0.64rem; }
    .result-card__meta { font-size: 0.74rem; }

    /* Proof V mobile */
    .proof-v { padding: 40px 0; }
    .proof-v__grid { grid-template-columns: 1fr; gap: 28px; }
    .proof-v__copy { max-width: 100%; }
    .proof-v__list li { font-size: 0.94rem; }

    /* Testimonials X */
    .testi-x { padding: 40px 0; }
    .testi-x__grid { grid-template-columns: 1fr; gap: 14px; }
    .testi-x__card { padding: 22px 20px; }
    .testi-x__quote { font-size: 0.94rem; }

    /* Why TG mobile */
    .why-tg { padding: 40px 0; }
    .why-tg__box { padding: 28px 20px; }
    .why-tg__list { grid-template-columns: 1fr; gap: 10px; }
    .why-tg__list li { font-size: 0.92rem; padding: 11px 13px; }

    /* FAQ mini mobile */
    .faq-mini { padding: 32px 0; }
    .faq-mini__item summary { font-size: 0.94rem; padding: 14px 16px; }
    .faq-mini__item p { font-size: 0.9rem; padding: 0 16px 14px; }

    /* Final X mobile */
    .final-x { padding: 44px 0 60px; }
    .final-x__box { padding: 32px 20px; border-radius: 20px; }
    .final-x__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .final-x__text { font-size: 0.96rem; }
    .final-x__alert { font-size: 0.7rem; padding: 5px 11px; }
    .final-x__stamps { gap: 8px 14px; font-size: 0.78rem; }

    /* Footer mobile */
    .footer-x { padding: 24px 0 140px; font-size: 0.78rem; }

    /* Activity feed mobile — fica fora pra não atrapalhar */
    .activity-x { display: none; }

    /* Página /obrigado mobile */
    .obrigado-wrap { padding: 28px 0 130px; }
    .obrigado-card { padding: 28px 20px; border-radius: 20px; }
    .obrigado-check { width: 72px; height: 72px; }
    .obrigado-check svg { width: 36px; height: 36px; }
    .obrigado-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    .obrigado-sub { font-size: 0.96rem; }
    .obrigado-steps { padding: 18px 18px; }
    .obrigado-steps ol { font-size: 0.9rem; }
    .obrigado-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .obrigado-stats strong { font-size: 1.2rem; }
    .obrigado-stats span { font-size: 0.68rem; }
    .obrigado-note { font-size: 0.84rem; padding: 11px 14px; }

    /* Container/section spacing — landing antiga compat */
    .section { padding: 48px 0; }
    .section--tight { padding: 36px 0; }
    .section__head { margin-bottom: 32px; }
    .section__title { font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.18; }
    .section__lead { font-size: 0.96rem; }

    /* Urgency bar */
    .urgency-bar {
        font-size: 0.72rem;
        padding: 8px 12px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .urgency-bar__timer { margin-left: 4px; gap: 2px; }
    .urgency-bar__timer span { padding: 2px 6px; font-size: 0.72rem; }
    .live-indicator { font-size: 0.62rem; padding: 3px 8px; }

    /* Header */
    .header { height: 60px; }
    .header__inner { gap: 10px; padding-inline: 0; }
    .brand__tag { display: none; }
    .brand__logo { width: 36px; height: 36px; }
    .brand__name { font-size: 1rem; }
    .nav { display: none; }
    .header .btn--sm { padding: 9px 14px; font-size: 0.82rem; }
    .header .btn--sm svg { width: 14px; height: 14px; }

    /* Hero */
    .hero { padding: 24px 0 44px; }
    .hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .hero__visual { order: -1; margin-top: 8px; }
    .hero__title { font-size: clamp(2rem, 8.4vw, 3.2rem); line-height: 1.06; margin-top: 18px; }
    .hero__sub { font-size: 1rem; line-height: 1.55; }
    .hero__bullets { grid-template-columns: 1fr; gap: 8px; }
    .hero__bullets li { font-size: 0.94rem; }
    .hero__cta { flex-direction: column; gap: 12px; }
    .hero__cta .btn { width: 100%; justify-content: center; }
    .hero__trust { flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
    .hero__trust-item { font-size: 0.8rem; }

    /* Device (Reel 9:16) */
    .device { max-width: 240px; margin-inline: auto; }
    .device__frame { padding: 10px; border-radius: 36px; }
    .device__screen { border-radius: 28px; }
    .device__notch { width: 72px; height: 18px; top: 18px; }
    .device-card { display: none; }
    .device__badge { top: 14px; left: 14px; padding: 5px 9px; font-size: 0.6rem; }

    /* Stats */
    .stats-strip { padding: 36px 0; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .stat__num { font-size: clamp(1.6rem, 6.4vw, 2.2rem); }
    .stat__label { font-size: 0.78rem; }

    /* Trust strip */
    .trust-strip {
        gap: 10px 16px;
        padding: 14px 14px;
        margin-top: 28px;
        font-size: 0.78rem;
    }
    .trust-strip__item { font-size: 0.78rem; }
    .trust-strip__item svg { width: 16px; height: 16px; }

    /* Bonus stack */
    .bonus-stack { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
    .bonus-item { padding: 20px 18px; }
    .bonus-item__title { font-size: 1.05rem; }
    .bonus-item__text { font-size: 0.88rem; }

    /* Value stack */
    .value-stack { padding: 22px 18px; }
    .value-stack__row { font-size: 0.9rem; padding: 9px 0; }
    .value-stack__row--final { flex-direction: column; gap: 4px; text-align: center; padding: 14px 0 4px; }
    .value-stack__row--final b { font-size: 2rem; }

    /* Guarantee */
    .guarantee {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        padding: 22px 20px;
    }
    .guarantee__seal { width: 76px; height: 76px; }
    .guarantee__seal svg { width: 24px; height: 24px; }
    .guarantee__seal span { font-size: 0.64rem; }
    .guarantee__body h3 { font-size: 1.15rem; }
    .guarantee__body p { font-size: 0.9rem; }

    /* Compare */
    .compare { grid-template-columns: 1fr; gap: 14px; }
    .compare__col { padding: 22px 20px; }
    .compare__col--good { transform: none; }
    .compare__head { font-size: 1.08rem; padding-bottom: 12px; margin-bottom: 14px; }
    .compare__icon { width: 28px; height: 28px; font-size: 1.05rem; }
    .compare__col li { font-size: 0.9rem; }

    /* Steps */
    .steps { grid-template-columns: 1fr; gap: 16px; }
    .step { padding: 22px 20px; }

    /* Cards (benefícios) */
    .cards--3, .cards--6 { grid-template-columns: 1fr; gap: 14px; }
    .card { padding: 22px 20px; }
    .card__title { font-size: 1.05rem; }
    .card__text { font-size: 0.9rem; }

    /* Testimonials */
    .testimonial { padding: 22px 20px; }
    .testimonial__quote { font-size: 0.95rem; }

    /* Demo (com vídeo Reel) */
    .demo {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 20px;
    }
    .demo__title { font-size: clamp(1.3rem, 5.2vw, 1.8rem); }
    .demo__video { max-width: 280px; margin-inline: auto; }

    /* Scarcity */
    .scarcity { padding: 24px 20px; }
    .scarcity__row { grid-template-columns: 1fr; gap: 12px; }

    /* Price */
    .price {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
        gap: 16px;
    }
    .price__seal {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        padding: 10px 14px;
    }
    .price__seal svg { width: 18px; height: 18px; }
    .price__seal span { font-size: 0.84rem; }
    .price__number { font-size: clamp(3rem, 12vw, 4rem); }

    /* Final CTA */
    .final-cta { padding: 32px 22px; }
    .final-cta__title { font-size: clamp(1.6rem, 6.4vw, 2.4rem); }
    .final-cta__text { font-size: 0.96rem; }
    .final-cta__actions { flex-direction: column; gap: 14px; }
    .final-cta__actions .btn { width: 100%; }
    .final-cta__stamp { font-size: 0.78rem; }

    /* FAQ */
    .faq-item summary { font-size: 0.96rem; padding: 16px 18px; }
    .faq-item p { font-size: 0.9rem; padding: 0 18px 16px; }

    /* Footer */
    .footer { padding: 36px 0 140px; }
    .footer p { font-size: 0.84rem; }

    /* Modals */
    .modal__card { padding: 28px 22px; max-width: 92vw; }
    .modal__title { font-size: 1.2rem; }
    .modal__text { font-size: 0.94rem; }

    /* Sticky CTA / FAB / Activity */
    .activity { display: none; }
    .fab {
        width: 54px; height: 54px;
        right: 14px; bottom: 96px;
    }
    .fab svg { width: 26px; height: 26px; }
    .fab__tooltip { display: none; }
    .sticky-cta { padding: 12px 14px 14px; }
    .sticky-cta p { font-size: 0.86rem; margin-bottom: 8px; }
    .sticky-cta .btn { padding: 13px 16px; font-size: 0.92rem; }

    /* Landing2 */
    .l2-wrap { padding: 18px 0 130px; }
    .l2-grid { grid-template-columns: 1fr; gap: 18px; }
    .l2-card { padding: 22px 18px; }
    .l2-title { font-size: clamp(1.2rem, 5.2vw, 1.7rem); }
    .l2-stats { padding: 22px 18px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .l2-video-frame { max-width: 260px; }
    .l2-video-frame__badge { top: 10px; left: 10px; padding: 4px 10px; font-size: 0.6rem; }

    /* Form (landing2) */
    .form { gap: 14px; }
    .field input, .field select, .field textarea {
        font-size: 16px; /* impede zoom no iOS */
        padding: 13px 14px;
    }
    .submit-btn { padding: 18px 18px; font-size: 0.96rem; }
    .submit-btn .btn-label { font-size: 0.94rem; letter-spacing: 0.01em; }
    .form-progress { margin: 14px 0 6px; }
    .form-progress__label { font-size: 0.78rem; }
    .form-seals { gap: 6px 10px; }
    .form-seal { font-size: 0.74rem; padding: 4px 9px; }
    .form-seal svg { width: 12px; height: 12px; }
    .wa-bubble { font-size: 0.84rem; padding: 12px 14px; max-height: 200px; }
    .wa-preview > strong { font-size: 0.72rem; }

    /* YouTube unmute btn */
    .youtube-lite__unmute {
        padding: 8px 12px 8px 10px;
        font-size: 0.74rem;
        bottom: 10px;
        right: 10px;
        gap: 6px;
    }
    .youtube-lite__unmute-text { display: none; }
    .youtube-lite__unmute-icon { width: 18px; height: 18px; }
    .youtube-lite__play { width: 54px; height: 54px; }
    .youtube-lite__play svg { width: 22px; height: 22px; }

    /* Submit toast */
    .submit-toast { bottom: 110px; font-size: 0.86rem; padding: 12px 18px; }

    /* Badges */
    .badge { font-size: 0.78rem; padding: 6px 11px; }

    /* Progress bar (top scroll) */
    .progress { height: 2px; }

    /* Scroll shockwave (hide on mobile, less useful) */
    .scroll-shockwave { font-size: 0.7rem; padding: 5px 11px; top: 12px; }
}

/* ---------- Tiny phones (<= 380px) ---------- */
@media (max-width: 380px) {
    .urgency-bar { font-size: 0.66rem; padding: 7px 10px; }
    .urgency-bar > span:not(.live-indicator):not(.urgency-bar__timer) { font-size: 0.66rem; }
    .hero__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .price__number { font-size: 2.6rem; }
    .device { max-width: 200px; }
    .l2-video-frame { max-width: 220px; }
    .demo__video { max-width: 220px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat__num { font-size: 1.5rem; }
    .header .btn--sm { padding: 8px 10px; font-size: 0.76rem; }
    .header .btn--sm svg { display: none; }
    .submit-btn .btn-label { font-size: 0.86rem; }
}

/* ---------- Landscape phone ---------- */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
    .hero { padding: 20px 0 32px; }
    .device { max-width: 200px; }
    .urgency-bar { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .cursor-fx { display: none; }
}