:root {
    --red: #ef4444;
    --red-dark: #dc2626;
    --red-glow: rgba(239,68,68,0.35);
    --blue: #3b82f6;
    --blue-dark: #2563eb;
    --blue-glow: rgba(59,130,246,0.35);
    --mono: 'Share Tech Mono', monospace;
}

/* ── Active nav ── */
.nav-link.active { color: var(--red); }

/* ── Gradient text ── */
.grad-red {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.grad-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px var(--red-glow);
    transition: box-shadow .25s, transform .2s;
}
.btn-primary:hover  { box-shadow: 0 6px 28px rgba(239,68,68,0.55); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.97); }

.btn-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 15px var(--blue-glow);
    transition: background .25s, box-shadow .25s, transform .2s;
    color: #fff;
}
.btn-blue:hover  { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 6px 28px rgba(59,130,246,0.55); transform: translateY(-1px); color: #fff; }
.btn-blue:active { transform: scale(.97); }

.btn-glass {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: box-shadow .25s, transform .2s;
}
.btn-glass:hover  { box-shadow: 0 8px 30px rgba(0,0,0,0.13); transform: translateY(-1px); }
.btn-glass:active { transform: scale(.97); }

/* ── Glass surface ── */
.glass {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 2px 20px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}
.glass-hover {
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.4,0,.2,1);
}
.glass-hover:hover {
    box-shadow: 0 14px 44px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    transform: translateY(-4px);
}

/* ── Icon containers ── */
.icon-red {
    background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(239,68,68,0.07));
    box-shadow: 0 0 0 1px rgba(239,68,68,0.14), 0 4px 12px rgba(239,68,68,0.10);
}
.icon-blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(59,130,246,0.07));
    box-shadow: 0 0 0 1px rgba(59,130,246,0.14), 0 4px 12px rgba(59,130,246,0.10);
}

/* ── Glow dividers ── */
.glow-divider-red {
    width: 48px; height: 3px;
    background: linear-gradient(90deg, #ef4444, #f97316);
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(239,68,68,0.5);
}
.glow-divider-blue {
    width: 48px; height: 3px;
    background: linear-gradient(90deg, #3b82f6, #818cf8);
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(59,130,246,0.5);
}

/* ── Section tag ── */
.section-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: bold;
}

/* ── Hero entrance ── */
@keyframes heroUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0); }
}
.h-enter {
    opacity: 0;
    animation: heroUp .75s cubic-bezier(.4,0,.2,1) forwards;
}
#hero-text > .h-enter:nth-child(1) { animation-delay:.05s; }
#hero-text > .h-enter:nth-child(2) { animation-delay:.15s; }
#hero-text > .h-enter:nth-child(3) { animation-delay:.25s; }
#hero-text > .h-enter:nth-child(4) { animation-delay:.35s; }
#hero-text > .h-enter:nth-child(5) { animation-delay:.45s; }

/* ── Hero phone ── */
#hero-phone {
    opacity: 0;
    transform: translateY(32px) scale(.97);
    transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 30px 60px rgba(239,68,68,0.18)) drop-shadow(0 15px 30px rgba(0,0,0,0.14));
}
#hero-phone.in { opacity:1; transform:translateY(0) scale(1); }

/* ── Scroll reveal ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"] { transition-delay:.04s; }
[data-reveal][data-d="2"] { transition-delay:.12s; }
[data-reveal][data-d="3"] { transition-delay:.20s; }
[data-reveal][data-d="4"] { transition-delay:.28s; }
[data-reveal][data-d="5"] { transition-delay:.36s; }
[data-reveal][data-d="6"] { transition-delay:.44s; }

/* ── Step connector ── */
.step-connector { display: none; }
@media (min-width: 768px) { .step-connector { display: flex; } }

/* ── Jump CTA ── */
@keyframes jumpLoop {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-8px); }
    50%       { transform: translateY(-4px); }
    70%       { transform: translateY(-8px); }
}
.btn-jump { animation: jumpLoop 1.6s cubic-bezier(.4,0,.2,1) infinite; }
.btn-jump:hover, .btn-jump:active { animation-play-state: paused; }

/* ── Touch safe ── */
.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ── Stat card ── */
.stat-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 20px 24px;
    transition: transform .25s, box-shadow .25s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}