/* ==========================================
   Better.ette Website Styles
   Jeton-Inspired Premium Design
   ========================================== */

/* ==========================================
   CSS Reset & Base
   ========================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: #091626;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile: prevent horizontal scroll without breaking position:sticky */
@media (max-width: 900px) {
    html {
        overflow-x: clip;
        max-width: 100vw;
        background-color: #091626;
    }
    body {
        overflow-x: clip;
        max-width: 100vw;
        background-color: #091626;
        min-height: 100svh;
    }
}

@media (max-width: 1024px) {
    body {
        overscroll-behavior-y: none;
    }
}

/* iOS Safari overscroll bleed fix (prevents white top/bottom gutters) */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        html,
        body {
            background-color: #091626;
        }
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
}

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

ul, ol {
    list-style: none;
}

/* ==========================================
   Design Tokens
   ========================================== */

:root {
    /* Better.ette design system – calming, fresh, clarity & renewal */
    /* Primary – Cyan/Turquoise (water, nature, clarity) */
    --primary: #7DD3D0;
    --primary-light: #A0E7E5;
    --primary-dark: #5BC4C1;
    /* Secondary – Sky Blue (trust, primary actions) */
    --secondary: #5EB3E8;
    --secondary-light: #7DC4EE;
    --secondary-dark: #4A9FD8;
    /* Success / growth – Vibrant Green */
    --accent: #5FD96A;
    --accent-light: #7AE384;
    --accent-dark: #4BC456;
    /* Warm accent – Orange/Amber (energy, enthusiasm) */
    --accent-warm: #FDB44B;
    --accent-warm-dark: #F5A623;
    /* Teal/Mint – balanced, refreshing */
    --teal: #6BDBDA;

    --gradient-primary: linear-gradient(135deg, #A0E7E5 0%, #7DD3D0 50%, #6BDBDA 100%);
    --gradient-hero: linear-gradient(180deg, #070B1A 0%, #0C1628 15%, #101D35 28%, #1A3A4A 42%, #2A7A72 55%, #5BC4C1 68%, #7DD3D0 78%, #A0E7E5 86%, #C8F0EE 91%, #D4F5F4 94%, #E5F8F7 97.5%, #EEF9F9 100%);
    --gradient-actions: linear-gradient(135deg, #5EB3E8 0%, #4A9FD8 100%);
    --gradient-success: linear-gradient(135deg, #5FD96A 0%, #4BC456 100%);
    --gradient-warm: linear-gradient(135deg, #FDB44B 0%, #F5A623 100%);
    --gradient-dark: linear-gradient(180deg, #0A1929 0%, #000000 100%);
    --gradient-mint: linear-gradient(180deg, #F0F8F7 0%, #E8F4F3 50%, #D8EDEC 100%);

    --text-primary: #2C3E50;
    --text-secondary: #1A1A1A;
    --text-muted: #6B7C8C;
    --text-inverse: #FFFFFF;

    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F8F7;
    --bg-tertiary: #E8F4F3;
    --bg-dark: #0A1929;
    --bg-card: rgba(255, 255, 255, 0.92);

    /* Liquid glass */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-blur: 16px;

    --border-light: rgba(44, 62, 80, 0.08);
    --border-medium: rgba(44, 62, 80, 0.12);

    --shadow-sm: 0 2px 12px rgba(44, 62, 80, 0.06);
    --shadow-md: 0 4px 24px rgba(44, 62, 80, 0.08);
    --shadow-lg: 0 12px 48px rgba(44, 62, 80, 0.1);
    --shadow-xl: 0 24px 80px rgba(44, 62, 80, 0.12);
    --shadow-glow: 0 8px 40px rgba(125, 211, 208, 0.35);
    
    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
    --text-hero: clamp(3rem, 8vw, 6rem);
    
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* Layout */
    --container-max: 1280px;
    --container-narrow: 800px;
    --section-padding: clamp(80px, 12vh, 160px);
    
    /* Borders */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================
   Utility Classes
   ========================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
}

/* ==========================================
   Typography
   ========================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #C8F0EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 4px rgba(125, 211, 208, 0.15));
}


/* ==========================================
   Buttons (with glass variants)
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn:hover::before {
    opacity: 1;
}

.btn-primary {
    background: var(--gradient-actions);
    color: var(--text-inverse);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 50px rgba(94, 179, 232, 0.4);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--secondary);
    color: var(--secondary-dark);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--bg-dark);
    color: var(--text-inverse);
}

.btn-dark:hover {
    background: #0d2137;
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover {
    color: var(--secondary-dark);
}

/* Liquid glass button variant */
.btn-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
}

/* App Store Badges */
.app-badges {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.app-badge {
    height: 48px;
    transition: transform var(--transition-base);
}

.app-badge:hover {
    transform: scale(1.05);
}

/* ==========================================
   Skip Link
   ========================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--primary);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    z-index: 1000;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: var(--space-4);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-teal, #5fc8b8);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==========================================
   Navigation (Glass Effect)
   ========================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-3) 0;
    transition: all var(--transition-base);
}

/* Glass effect - more transparent initially */
.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
    z-index: -1;
    transition: all var(--transition-base);
}

/* More opaque when scrolled */
.nav.scrolled::before {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.nav-logo {
    height: 40px;
}

/* Glass pill for nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    transition: all var(--transition-base);
}

.nav.scrolled .nav-links {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.nav-link {
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.nav-link:hover {
    color: var(--secondary-dark);
    background: rgba(94, 179, 232, 0.12);
    text-shadow: none;
}

.nav-link.active {
    color: var(--secondary-dark);
    background: rgba(94, 179, 232, 0.18);
    text-shadow: none;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.nav-cta .btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    
    .nav-cta .btn {
        padding: var(--space-2) var(--space-4);
    }
}

/* ==========================================
   Hero Section - Jeton Style with 3D iPhone
   ========================================== */

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-32) clamp(1.5rem, 5vw, 6rem) var(--space-16);
    background: var(--gradient-hero);
    position: relative;
    overflow: hidden;
}

/* Extended hero - full viewport, no scroll jacking */
.hero.hero-extended {
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    display: block;
    position: relative;
    /* overflow:hidden moved to .hero-sticky so the hero background gradient
       renders all the way to the section's natural bottom edge without clipping */
    overflow: visible;

    /*
     * -------------------------------------------------------------------------
     * Hero layout controls (desktop: viewport width > 900px)
     * Adjust these values only — child rules reference them via var().
     * Mobile uses a flex column; see @media (max-width: 900px) for --hero-m-*.
     * -------------------------------------------------------------------------
     */
    /* Lower % = headline block sits lower in the viewport (more weight in lower half) */
    --hero-headline-bottom: 26%;
    --hero-headline-shift-y: 54%;
    --hero-headline-left: clamp(2rem, 5vw, 6rem);
    --hero-headline-max-width: 600px;
    --hero-headline-cta-margin-top: var(--space-12);

    /* Match the lowered left column so the right stack doesn’t float high alone */
    --hero-badges-bottom: 42%;
    --hero-badges-shift-y: 54%;
    --hero-badges-right: clamp(2rem, 5vw, 6rem);

    --hero-topbar-top: var(--space-6);
    --hero-topbar-inset: clamp(1.5rem, 4vw, 5rem);

    --hero-iphone-top: 50%;
    --hero-iphone-left: 50%;
    --hero-iphone-translate-x: calc(-50% + 150px);
    /* Nudge phone down vs. dead-center so it aligns with the lowered text column */
    --hero-iphone-translate-y: calc(-50% + 28px);
    --hero-iphone-width: 280px;
    --hero-iphone-height: 574px;
}

/* Nebula mesh — hidden for stillness; HTML kept for future use */
.hero-mesh {
    display: none;
}

.hero-mesh-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* Primary cyan nebula — anchored in the night sky crown */
.hero-mesh-blob:nth-child(1) {
    width: 50vmax;
    height: 50vmax;
    top: -25%;
    left: -10%;
    background: radial-gradient(circle, rgba(125, 211, 208, 0.5) 0%, transparent 70%);
    animation: meshDrift1 18s ease-in-out infinite alternate;
}

/* Deep teal cloud — upper-right */
.hero-mesh-blob:nth-child(2) {
    width: 45vmax;
    height: 45vmax;
    top: -28%;
    right: -12%;
    background: radial-gradient(circle, rgba(107, 219, 218, 0.4) 0%, transparent 70%);
    animation: meshDrift2 22s ease-in-out infinite alternate;
}

/* Sky blue nebula — left side, spilling into transition */
.hero-mesh-blob:nth-child(3) {
    width: 38vmax;
    height: 38vmax;
    top: -5%;
    left: -12%;
    background: radial-gradient(circle, rgba(94, 179, 232, 0.3) 0%, transparent 70%);
    animation: meshDrift3 20s ease-in-out infinite alternate;
}

/* Teal wisp — right side accent */
.hero-mesh-blob:nth-child(4) {
    width: 35vmax;
    height: 35vmax;
    top: -8%;
    right: -8%;
    background: radial-gradient(circle, rgba(107, 219, 218, 0.28) 0%, transparent 70%);
    animation: meshDrift4 24s ease-in-out infinite alternate;
}

/* Light cyan haze — center-top, subtle glow */
.hero-mesh-blob:nth-child(5) {
    width: 32vmax;
    height: 32vmax;
    top: -12%;
    left: 35%;
    background: radial-gradient(circle, rgba(160, 231, 229, 0.35) 0%, transparent 70%);
    animation: meshDrift5 19s ease-in-out infinite alternate;
}

/* Secondary blue — small accent */
.hero-mesh-blob:nth-child(6) {
    width: 28vmax;
    height: 28vmax;
    top: -20%;
    right: 30%;
    background: radial-gradient(circle, rgba(74, 159, 216, 0.22) 0%, transparent 70%);
    animation: meshDrift6 21s ease-in-out infinite alternate;
}

@keyframes meshDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6vw, 10vh) scale(1.12); }
}
@keyframes meshDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-8vw, 6vh) scale(1.08); }
}
@keyframes meshDrift3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5vw, -8vh) scale(1.15); }
}
@keyframes meshDrift4 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-6vw, -5vh) scale(1.1); }
}
@keyframes meshDrift5 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4vw, 5vh) scale(1.1); }
}
@keyframes meshDrift6 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5vw, -4vh) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-mesh-blob { animation: none !important; }
    .hero-star { animation: none !important; }
    .hero-shooting-star::before,
    .hero-shooting-star::after { animation: none !important; display: none; }
}

/* Star field — JS-generated individual stars with independent twinkle */
.hero-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 45%);
    mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 45%);
}

.hero-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: starTwinkle var(--tw-dur) ease-in-out var(--tw-delay) infinite alternate;
    will-change: opacity;
}

@keyframes starTwinkle {
    0%   { opacity: var(--tw-min); }
    100% { opacity: var(--tw-max); }
}

/* Cosmic dust — barely perceptible texture in the dark sky */
.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 45%);
    mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 45%);
}

/* Stardust — dense, tiny, faint dots for cosmic depth */
.hero-stardust {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 42%);
    mask-image: linear-gradient(180deg, #000 0%, #000 20%, transparent 42%);
}

.hero-stardust::before,
.hero-stardust::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hero-stardust::before {
    background-image:
        radial-gradient(0.5px 0.5px at 3% 4%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 7% 12%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 12% 7%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 16% 22%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 21% 3%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 27% 18%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 33% 9%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 38% 28%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 44% 6%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 48% 16%, rgba(255, 255, 255, 0.18) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 53% 24%, rgba(255, 255, 255, 0.22) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 58% 11%, rgba(255, 255, 255, 0.28) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 63% 2%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 67% 20%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 72% 8%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 77% 26%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 82% 14%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 87% 5%, rgba(255, 255, 255, 0.18) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 91% 19%, rgba(255, 255, 255, 0.22) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 96% 10%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
    opacity: 0.7;
}

.hero-stardust::after {
    background-image:
        radial-gradient(0.5px 0.5px at 2% 30%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 9% 35%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 14% 42%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 19% 33%, rgba(255, 255, 255, 0.18) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 24% 38%, rgba(255, 255, 255, 0.22) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 31% 44%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 36% 31%, rgba(255, 255, 255, 0.28) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 42% 40%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 47% 36%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 54% 43%, rgba(255, 255, 255, 0.22) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 59% 32%, rgba(255, 255, 255, 0.18) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 66% 39%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 71% 45%, rgba(255, 255, 255, 0.15) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 76% 34%, rgba(255, 255, 255, 0.2) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 83% 41%, rgba(255, 255, 255, 0.22) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 88% 37%, rgba(255, 255, 255, 0.18) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 93% 29%, rgba(255, 255, 255, 0.25) 50%, transparent 100%),
        radial-gradient(0.5px 0.5px at 97% 44%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    opacity: 0.5;
}

/* Shooting star — a rare, quiet surprise */
.hero-shooting-star {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 42%);
    mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 42%);
}

.hero-shooting-star::before {
    content: '';
    position: absolute;
    top: 14%;
    left: 18%;
    width: 80px;
    height: 1.5px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 20%, transparent 100%);
    border-radius: 1px;
    opacity: 0;
    transform: rotate(32deg) translateX(-20px);
    animation: shootingStar1 20s linear 7s infinite;
}

.hero-shooting-star::after {
    content: '';
    position: absolute;
    top: 8%;
    right: 22%;
    width: 60px;
    height: 1px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 20%, transparent 100%);
    border-radius: 1px;
    opacity: 0;
    transform: rotate(25deg) translateX(-20px);
    animation: shootingStar2 26s linear 18s infinite;
}

@keyframes shootingStar1 {
    0%    { opacity: 0;   transform: rotate(32deg) translateX(-20px); }
    95%   { opacity: 0;   transform: rotate(32deg) translateX(-20px); }
    95.3% { opacity: 0.9; transform: rotate(32deg) translateX(0); }
    97%   { opacity: 0.7; transform: rotate(32deg) translateX(100px); }
    98%   { opacity: 0;   transform: rotate(32deg) translateX(180px); }
    100%  { opacity: 0;   transform: rotate(32deg) translateX(180px); }
}

@keyframes shootingStar2 {
    0%    { opacity: 0;   transform: rotate(25deg) translateX(-20px); }
    95%   { opacity: 0;   transform: rotate(25deg) translateX(-20px); }
    95.3% { opacity: 0.8; transform: rotate(25deg) translateX(0); }
    97%   { opacity: 0.6; transform: rotate(25deg) translateX(80px); }
    98%   { opacity: 0;   transform: rotate(25deg) translateX(150px); }
    100%  { opacity: 0;   transform: rotate(25deg) translateX(150px); }
}

.hero-sticky {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    overflow: visible;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Center glow — the app's light radiating into the night */
.hero-spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 55% 65% at 55% 50%,
            rgba(160, 231, 229, 0.08) 0%,
            rgba(107, 219, 218, 0.03) 40%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 28% 38% at 57% 48%,
            rgba(125, 211, 208, 0.12) 0%,
            rgba(160, 231, 229, 0.04) 45%,
            transparent 65%
        );
}

/* Bottom-left headline — position from .hero.hero-extended variables */
.hero-headline {
    position: absolute;
    bottom: var(--hero-headline-bottom);
    transform: translateY(var(--hero-headline-shift-y));
    left: var(--hero-headline-left);
    z-index: 10;
    max-width: var(--hero-headline-max-width);
    text-align: left;
    animation: fadeSlideUp 0.8s ease 0.2s both;
}

.hero-headline .hero-title {
    font-size: clamp(2.8rem, 5vw, 4rem);
    line-height: 1.25;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.88);
    text-shadow:
        0 2px 16px rgba(125, 211, 208, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Sub-headline beneath the title */
.hero-sub {
    font-size: 1.3rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    color: rgba(125, 211, 208, 0.72);
    margin-top: var(--space-4);
    animation: fadeSlideUp 0.8s ease 0.35s both;
}

@media (min-width: 901px) {
    .hero-sub {
        color: #C2DDDF;
    }
}

/* Bottom-right badges — position from .hero.hero-extended variables */
.hero-badges-section {
    position: absolute;
    bottom: var(--hero-badges-bottom);
    transform: translateY(var(--hero-badges-shift-y));
    right: var(--hero-badges-right);
    z-index: 10;
    /* One column as wide as the widest badge; label spans full column → centered over badges */
    display: grid;
    grid-template-columns: max-content;
    justify-items: stretch;
    text-align: center;
    animation: fadeSlideUp 0.8s ease 0.3s both;
}

.hero-coming-soon-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.hero-badges-section .app-badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.hero-badges-section .app-badge {
    height: 40px;
}

/* Mobile-only CTA - hidden on desktop */
.hero-mobile-cta {
    display: none;
}

/* Desktop: headline CTAs row (Get Early Access + Donate) */
.hero-headline-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: clamp(var(--space-5), 2.2vh, var(--space-10));
}

.hero-headline-ctas .hero-headline-cta {
    margin-top: 0;
}

/* Desktop CTA below headline — solid fill to stand out against the dark hero */
.hero-headline-cta {
    display: inline-flex;
    animation: fadeSlideUp 0.8s ease 0.45s both;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: 1px solid rgba(160, 231, 229, 0.5);
    color: var(--bg-primary);
    text-shadow: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-8);
    box-shadow:
        0 0 0 1px rgba(160, 231, 229, 0.2),
        0 0 24px rgba(125, 211, 208, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.hero-headline-cta:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    border-color: rgba(160, 231, 229, 0.7);
    box-shadow:
        0 0 40px rgba(125, 211, 208, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.hero-headline-cta.hero-cta-secondary {
    background: rgba(7, 11, 26, 0.16);
    border: 1px solid rgba(160, 231, 229, 0.44);
    color: rgba(226, 242, 245, 0.9);
    font-weight: var(--weight-semibold);
    padding: var(--space-4) var(--space-8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-headline-cta.hero-cta-secondary:hover {
    background: rgba(7, 11, 26, 0.24);
    border-color: rgba(160, 231, 229, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 14px rgba(0, 0, 0, 0.24);
}

.hero-headline-ctas .hero-headline-cta:nth-child(2) {
    animation-delay: 0.52s;
}

/* Desktop: match hero CTA contrast to the stronger mobile treatment */
@media (min-width: 901px) {
    .hero-headline-cta.btn-cta-glass {
        background: rgba(7, 11, 26, 0.82);
        border-color: rgba(125, 211, 208, 0.45);
        color: #ffffff;
        text-shadow: none;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow:
            0 4px 28px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(125, 211, 208, 0.18);
    }

    .hero-headline-cta.btn-cta-glass:hover {
        background: rgba(7, 11, 26, 0.92);
        border-color: rgba(125, 211, 208, 0.6);
    }

    .hero-headline-cta.hero-cta-secondary.btn-cta-glass {
        background: #C2DDDF;
        border-color: rgba(77, 154, 150, 0.28);
        color: rgba(10, 40, 50, 0.92);
        font-weight: var(--weight-semibold);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 0 0 1px rgba(77, 154, 150, 0.1),
            0 10px 24px rgba(0, 0, 0, 0.25);
    }

    .hero-headline-cta.hero-cta-secondary.btn-cta-glass:hover {
        background: #C9E2E4;
        border-color: rgba(77, 154, 150, 0.38);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 0 0 1px rgba(77, 154, 150, 0.14),
            0 14px 30px rgba(0, 0, 0, 0.3);
    }
}

/* Topbar CTA hidden on desktop — will be re-enabled in a later stage */
.hero-topbar-actions > .btn {
    display: none;
}

.hero-topbar {
    position: absolute;
    top: var(--hero-topbar-top);
    left: var(--hero-topbar-inset);
    right: var(--hero-topbar-inset);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    z-index: 100;
    min-height: 46px;
}

.hero-logo-link {
    position: relative;
    z-index: 2;
}

.hero-logo {
    height: 36px;
}

.hero-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    z-index: 2;
}

/* Hero top links — hidden for now, placeholder kept for future re-enable */
.hero-top-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: var(--space-3);
}

.hero-top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 var(--space-4);
    box-sizing: border-box;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-base), background var(--transition-base),
        border-color var(--transition-base), box-shadow var(--transition-base);
}

.hero-top-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn-compact {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    height: 46px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hero CTA: cyan glass — a gentle doorway into the app */
.btn-cta-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(125, 211, 208, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 24px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(125, 211, 208, 0.06);
    color: #ffffff;
    font-weight: var(--weight-semibold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform var(--transition-base), background var(--transition-base),
        border-color var(--transition-base), box-shadow var(--transition-base);
}

.btn-cta-glass:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(125, 211, 208, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 0 50px rgba(125, 211, 208, 0.1);
}

/* Shimmer sweep — like a shooting star across the button */
.btn-cta-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(160, 231, 229, 0.1) 35%,
        rgba(240, 248, 255, 0.3) 50%,
        rgba(160, 231, 229, 0.1) 65%,
        transparent 100%
    );
    animation: btnShimmer 5s ease-in-out infinite;
}

.btn-cta-glass .btn-cta-glass-text {
    position: relative;
    z-index: 1;
}

@keyframes btnShimmer {
    0% { left: -100%; }
    60% { left: -100%; }
    100% { left: 150%; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta-glass::after {
        animation: none;
        display: none;
    }
}

.hero-extended .hero-title {
    animation: fadeSlideUp 0.8s ease 0.1s both;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.hero-extended .hero-subtitle {
    animation: fadeSlideUp 0.8s ease 0.2s both;
    font-size: var(--text-lg);
}

.hero-extended .hero-cta {
    animation: fadeSlideUp 0.8s ease 0.3s both;
    align-items: flex-start;
}

/* Hide the in-content scroll indicator in extended hero */
.hero-extended .hero-content .hero-scroll {
    display: none;
}

/* Wave pseudo-elements removed — replaced by mesh gradient blobs */

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin-top: var(--space-6);
    box-shadow: var(--shadow-md);
    animation: fadeSlideDown 0.8s ease 0.5s forwards;
    opacity: 0;
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: var(--weight-extrabold);
    line-height: 1.05;
    margin-bottom: var(--space-6);
    animation: fadeSlideUp 0.8s ease 0.1s forwards;
    opacity: 0;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-10);
    line-height: 1.6;
    animation: fadeSlideUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    animation: fadeSlideUp 0.8s ease 0.3s forwards;
    opacity: 0;
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-buttons {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-16);
    color: var(--text-muted);
    font-size: var(--text-sm);
    animation: fadeIn 1s ease 0.6s forwards;
    opacity: 0;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-full);
    position: relative;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--secondary);
    border-radius: var(--radius-full);
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0%, 100% { opacity: 1; top: 8px; }
    50% { opacity: 0.3; top: 20px; }
}

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

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   3D iPhone Scene
   ========================================== */

/* Shared iPhone mockup (How It Works uses .how-it-works-iphone-scene for its own layout) */
.iphone-scene {
    perspective: 1200px;
    perspective-origin: 50% 50%;
    z-index: 5;
}

/* Hero iPhone only — position/size from .hero.hero-extended variables */
.hero-sticky > .iphone-scene {
    position: absolute;
    top: var(--hero-iphone-top);
    left: var(--hero-iphone-left);
    transform: translate(var(--hero-iphone-translate-x), var(--hero-iphone-translate-y));
    width: var(--hero-iphone-width, 280px);
    height: var(--hero-iphone-height, 574px);
}

/* Luminous halo behind the phone — soft white bloom on cyan */
.hero .iphone-scene::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 115%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        rgba(160, 231, 229, 0.18) 0%,
        rgba(125, 211, 208, 0.07) 35%,
        transparent 65%
    );
    z-index: -1;
    pointer-events: none;
    animation: phoneGlow 8s ease-in-out infinite alternate;
}

@keyframes phoneGlow {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.03); }
}

.iphone-model {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    opacity: 1;
    transform: 
        translateX(0)
        translateY(0)
        translateZ(0)
        rotateY(-8deg)
        rotateX(4deg)
        rotateZ(-1deg);
    will-change: transform, opacity;
    -webkit-animation: iphoneEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
                       iphoneFloat 7s ease-in-out 2.5s infinite alternate;
    animation: iphoneEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
               iphoneFloat 7s ease-in-out 2.5s infinite alternate;
}

/* iPhone entrance animation on page load */
@-webkit-keyframes iphoneEntrance {
    0% {
        opacity: 0;
        transform: 
            translateX(120px)
            translateY(60px)
            translateZ(-300px)
            rotateY(30deg)
            rotateX(10deg)
            rotateZ(4deg);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: 
            translateX(0)
            translateY(0)
            translateZ(0)
            rotateY(-8deg)
            rotateX(4deg)
            rotateZ(-1deg);
    }
}

@keyframes iphoneEntrance {
    0% {
        opacity: 0;
        transform: 
            translateX(120px)
            translateY(60px)
            translateZ(-300px)
            rotateY(30deg)
            rotateX(10deg)
            rotateZ(4deg);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: 
            translateX(0)
            translateY(0)
            translateZ(0)
            rotateY(-8deg)
            rotateX(4deg)
            rotateZ(-1deg);
    }
}

@keyframes iphoneFloat {
    0%   { transform: translateY(0) rotateY(-8deg) rotateX(4deg) rotateZ(-1deg); }
    100% { transform: translateY(-3px) rotateY(-8deg) rotateX(4deg) rotateZ(-1deg); }
}

/* iPhone Frame Structure */
.iphone-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.iphone-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        145deg,
        #1a1a1f 0%,
        #2d2d35 15%,
        #1a1a1f 30%,
        #0f0f12 50%,
        #1a1a1f 70%,
        #2d2d35 85%,
        #1a1a1f 100%
    );
    border-radius: 58px;
    box-shadow:
        /* Soft drop shadow — tight spread so it stays close to the device */
        0 24px 40px -14px rgba(3, 10, 22, 0.42),
        0 10px 20px -8px rgba(3, 10, 22, 0.26),
        /* Inner depth */
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        /* Edge highlights */
        0 0 0 1px rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
}

/* Titanium frame edge effect */
.iphone-body::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 61px;
    background: linear-gradient(
        135deg,
        rgba(120, 120, 130, 0.4) 0%,
        rgba(80, 80, 90, 0.2) 25%,
        rgba(60, 60, 70, 0.1) 50%,
        rgba(80, 80, 90, 0.2) 75%,
        rgba(120, 120, 130, 0.3) 100%
    );
    z-index: -1;
    transform: translateZ(-2px);
}

/* Bezel area */
.iphone-bezel {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: #000;
    border-radius: 50px;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Dynamic Island */
.iphone-dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 25px;
    background: #000;
    border-radius: 14px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 1px;
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.5);
}

.dynamic-island-camera {
    position: relative;
    width: 10px;
    height: 12px;
    background: radial-gradient(
        circle at 30% 30%,
        #2a2a35 0%,
        #0a0a0f 40%,
        #000 60%
    );
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
}

.dynamic-island-camera::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(
        circle,
        rgba(100, 130, 255, 0.6) 0%,
        transparent 70%
    );
    border-radius: 50%;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
}

.dynamic-island-sensor {
    width: 6px;
    height: 8px;
    background: #0a0a12;
    border-radius: 50%;
    opacity: 0.6;
}

/* Screen glass */
.iphone-screen-glass {
    position: absolute;
    inset: 0;
    background: url('../images/phonescreen.webp') center/cover no-repeat;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Screen content container */
.iphone-screen-content {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    overflow: hidden;
    z-index: 1;
}

/* Screen reflections for realism */
.screen-reflection {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 20%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.02) 80%,
        rgba(255, 255, 255, 0.08) 100%
    );
    pointer-events: none;
    z-index: 50;
    animation: reflectionShift 8s ease-in-out infinite alternate;
}

@keyframes reflectionShift {
    0% { transform: translate(-10%, -10%) rotate(0deg); }
    100% { transform: translate(5%, 5%) rotate(2deg); }
}

.screen-reflection-edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 30%,
        transparent 100%
    );
    border-radius: 50px 50px 0 0;
    pointer-events: none;
    z-index: 51;
}

/* Side buttons */
.iphone-button {
    position: absolute;
    background: linear-gradient(
        90deg,
        #1a1a1f 0%,
        #3a3a42 50%,
        #1a1a1f 100%
    );
    border-radius: 3px;
    z-index: 10;
}

.iphone-button-silent {
    left: -4px;
    top: 120px;
    width: 4px;
    height: 32px;
}

.iphone-button-volume-up {
    left: -4px;
    top: 175px;
    width: 4px;
    height: 55px;
}

.iphone-button-volume-down {
    left: -4px;
    top: 245px;
    width: 4px;
    height: 55px;
}

.iphone-button-power {
    right: -4px;
    top: 190px;
    width: 4px;
    height: 80px;
}

/* Frame edge highlights for 3D depth */
.iphone-edge-highlight {
    position: absolute;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    z-index: 5;
}

.iphone-edge-highlight.top {
    top: 0;
    left: 60px;
    right: 60px;
    height: 1px;
}

.iphone-edge-highlight.bottom {
    bottom: 0;
    left: 60px;
    right: 60px;
    height: 1px;
}

.iphone-edge-highlight.left {
    left: 0;
    top: 60px;
    bottom: 60px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

.iphone-edge-highlight.right {
    right: 0;
    top: 60px;
    bottom: 60px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 100%
    );
}

/* iPhone shadow — ground ellipse sitting clearly below the phone */
.iphone-shadow {
    display: block;
    position: absolute;
    bottom: -44px;
    left: 10%;
    width: 80%;
    height: 50px;
    background: radial-gradient(
        ellipse at center,
        rgba(5, 14, 28, 0.28) 0%,
        rgba(18, 55, 72, 0.14) 50%,
        transparent 76%
    );
    filter: blur(20px);
    opacity: 1;
    transform: scaleY(0.55) scaleX(0.88);
    z-index: -1;
    -webkit-animation: shadowEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    animation: shadowEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@-webkit-keyframes shadowEntrance {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shadowEntrance {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* ==========================================
   Placeholder App UI inside iPhone
   ========================================== */

   .app-placeholder {
    width: 100%;
    height: 100%;
    background: url('../images/phonescreen.webp') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    padding-top: 55px; /* Below Dynamic Island */
    font-family: var(--font-primary);
    color: #fff;
}

.app-status-bar {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    z-index: 10;
}

.status-time {
    font-weight: 500;
    font-size: 12px;
    color: #000;
}

.status-icons {
    display: flex;
    gap: 6px;
    font-size: 10px;
    opacity: 0.9;
}

.status-icons svg {
    display: block;
    width: auto;
    height: 9px;
    fill: #000;
    color: #000;
}

.status-signal svg,
.status-wifi svg {
    height: 9px;
    fill: #000;
    color: #000;
}

.status-battery svg {
    height: 9px;
    fill: #000;
    color: #000;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
}

.app-title {
    font-size: 18px;
    font-weight: 500;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-main {
    flex: 1;
    position: relative;
    padding: 16px 16px 0px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.app-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    border: none;
}

.app-card-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.8);
    margin-top: 30px;
}

/* Widget Carousel */
.app-widget-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    margin-top: auto;
}

.app-widget-track {
    display: flex;
    width: 300%;
    transition: transform 0.5s ease;
}

.app-widget-slide {
    width: 33.333%;
    flex-shrink: 0;
}

.app-widget-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.app-nav {
    display: flex;
    justify-content: space-around;
    padding: 0 0 0;
    overflow: visible;
    margin-top: auto;
}

.app-nav-image {
    display: block;
    width: 100%;
    height: auto;
}



/* ==========================================
   iPhone Responsive Styles
   ========================================== */

@media (max-width: 1200px) {
    .hero.hero-extended {
        --hero-iphone-width: 260px;
        --hero-iphone-height: 533px;
    }

    .hero-extended .hero-content {
        max-width: 480px;
    }

    .hero-sticky {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
        gap: var(--space-6);
    }
}

@media (max-width: 1024px) {
    .hero.hero-extended {
        height: 120vh;
        --hero-iphone-width: 240px;
        --hero-iphone-height: 492px;
    }
    
    .hero-extended .hero-content {
        max-width: 420px;
    }
    
    .iphone-body {
        border-radius: 48px;
    }
    
    .iphone-bezel {
        border-radius: 42px;
    }
    
    .iphone-screen-glass,
    .iphone-screen-content {
        border-radius: 42px;
    }
    
    .iphone-dynamic-island {
        /* ... keep position, left, transform, background, etc. ... */
        width: 92px;
        height: 26px;
        border-radius: 14px;
        top: 12px;
        gap: 8px;
        /* ... rest unchanged ... */
    }
}

/*
 * Mid-width desktop / large tablet landscape: headline (max 600px) can meet the
 * iPhone (centered + offset). Cap width so copy ends before the device.
 */
@media (min-width: 901px) and (max-width: 1350px) {
    .hero.hero-extended {
        --hero-headline-max-width: min(600px, calc(50vw - 6rem));
    }

    .hero-headline .hero-title {
        font-size: clamp(2.35rem, 4.2vw, 3.65rem);
    }
}

/* Tighter again where 1024 rules already shrink the phone */
@media (min-width: 901px) and (max-width: 1100px) {
    .hero.hero-extended {
        --hero-headline-max-width: min(520px, calc(50vw - 5rem));
        --hero-iphone-translate-x: calc(-50% + min(195px, 16vw));
    }
}

/* ==========================================
   Mobile Hero — phones & tablets ≤ 900px
   ========================================== */
@media (max-width: 900px) {
    /*
     * Mobile hero: flex column (desktop --hero-* position vars are ignored here).
     * Tweak spacing with --hero-m-* on .hero.hero-extended below.
     */
    .hero.hero-extended {
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
        min-height: 0;
        overflow: hidden;
        touch-action: pan-y;

        /* Extra inset below status bar / notch; bottom for home indicator */
        --hero-m-sticky-padding-block-start: 10px;
        --hero-m-sticky-padding-inline: var(--space-5);
        --hero-m-sticky-padding-block-end: 14px;
        /* Fluid rhythm between headline, phone, footer row */
        --hero-m-sticky-gap: clamp(10px, 2.2vh + 4px, 24px);
        --hero-m-badges-margin-top: 0;
        --hero-m-cta-margin-top: 4px;
    }

    /* Flex column — even vertical distribution so the block doesn’t hug the top */
    .hero-sticky {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        position: relative;
        top: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding-top: calc(var(--hero-m-sticky-padding-block-start) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(var(--hero-m-sticky-padding-block-end) + env(safe-area-inset-bottom, 0px));
        padding-left: var(--hero-m-sticky-padding-inline);
        padding-right: var(--hero-m-sticky-padding-inline);
        gap: var(--hero-m-sticky-gap);
        overflow: hidden;
    }

    /* Topbar — hidden on mobile (logo src is empty, no content) */
    .hero-topbar {
        display: none;
    }

    /* 1 — Headline block (title + sub) */
    .hero-headline {
        position: relative;
        bottom: auto; left: auto;
        width: 100%;
        max-width: 22rem;
        text-align: center;
        order: 1;
        margin: 0;
        flex-shrink: 0;
        transform: none !important;
        animation: none;
    }
    .hero-headline .hero-title {
        font-size: clamp(1.55rem, 6.8vw, 2.45rem);
        text-align: center;
        line-height: 1.18;
    }

    /* 2 — iPhone: 260×533px (0.929× of 280px desktop base) */
    .hero-sticky .iphone-scene {
        position: relative;
        top: auto; left: auto; right: auto;
        width: 260px;
        height: 533px;
        transform: none;
        perspective: none;
        margin: 0 auto;
        order: 2;
        flex-shrink: 0;
        align-self: center;
    }

    /* Flatten 3D on mobile — removes the "bump" caused by preserve-3d + rotation */
    .hero-sticky .iphone-model {
        transform-style: flat;
        transform: none;
    }
    .hero-sticky .iphone-frame { transform-style: flat; }
    .hero-sticky .iphone-body  { transform-style: flat; }
    /* Hide the titanium frame ring — only meaningful in 3D perspective */
    .hero-sticky .iphone-body::before { display: none; }

    /* ── iPhone internals at 0.929× scale of 280px desktop base ── */
    .hero-sticky .iphone-scene .iphone-body     { border-radius: 54px; }
    .hero-sticky .iphone-scene .iphone-bezel    { top: 7px; left: 7px; right: 7px; bottom: 7px; border-radius: 47px; }
    .hero-sticky .iphone-scene .iphone-screen-glass,
    .hero-sticky .iphone-scene .iphone-screen-content { border-radius: 47px; }
    /* Dynamic Island */
    .hero-sticky .iphone-scene .iphone-dynamic-island {
        width: 86px; height: 23px; top: 11px;
        border-radius: 13px; gap: 6px;
    }
    .hero-sticky .iphone-scene .dynamic-island-camera { width: 9px; height: 11px; }
    .hero-sticky .iphone-scene .dynamic-island-sensor { width: 6px; height: 7px; }
    /* Side buttons — all proportional to 0.929× base */
    .hero-sticky .iphone-scene .iphone-button-silent      { left: -4px; top: 112px; width: 4px; height: 30px; }
    .hero-sticky .iphone-scene .iphone-button-volume-up   { left: -4px; top: 163px; width: 4px; height: 51px; }
    .hero-sticky .iphone-scene .iphone-button-volume-down { left: -4px; top: 228px; width: 4px; height: 51px; }
    .hero-sticky .iphone-scene .iphone-button-power       { right: -4px; top: 177px; width: 4px; height: 74px; }
    /*
     * App content — match web (280px) proportions at 260px (× 260/280 ≈ 0.929).
     * Prior pass was too tight: sunburst rode up, card/nav felt cramped vs desktop.
     */
    .hero-sticky .iphone-scene .app-placeholder {
        padding-top: 51px; /* 55px desktop × 0.929 */
        padding-bottom: 6px; /* keeps dock above rounded screen clip */
    }
    .hero-sticky .iphone-scene .app-status-bar {
        top: 11px;
        height: 26px;
        padding: 0 22px;
        font-size: 11px;
    }
    .hero-sticky .iphone-scene .app-status-bar .status-time {
        font-size: 11px;
    }
    .hero-sticky .iphone-scene .app-status-bar .status-icons svg,
    .hero-sticky .iphone-scene .app-status-bar .status-signal svg,
    .hero-sticky .iphone-scene .app-status-bar .status-battery svg {
        height: 8px;
    }
    .hero-sticky .iphone-scene .app-main {
        flex: 1 1 auto;
        min-height: 0;
        padding: 15px 15px 6px;
        gap: 15px;
        justify-content: center;
    }
    .hero-sticky .iphone-scene .app-card-image {
        transform: scale(1.55);
        margin-top: 22px; /* ~30px × 0.929 — same visual weight as web */
    }
    /* Reserve space at the bottom so content doesn't slide under the pinned nav */
    .hero-sticky .iphone-scene .app-placeholder {
        position: relative;
        padding-bottom: 62px; /* nav height + bottom inset */
    }
    .hero-sticky .iphone-scene .app-main {
        overflow: hidden;
    }
    .hero-sticky .iphone-scene .app-widget-carousel {
        margin-top: auto;
    }
    /* Pin nav absolutely to the bottom of the screen — reliable on all mobile sizes */
    .hero-sticky .iphone-scene .app-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
        margin-top: 0;
    }
    .hero-sticky .iphone-scene .app-nav-image {
        width: 100%;
        max-width: 240px;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        object-position: center bottom;
        transform: none;
    }

    /* Disable light-up glow + float animation — phone stays still */
    .hero .iphone-scene::before { animation: none !important; }
    .hero-sticky .iphone-model {
        -webkit-animation: iphoneEntranceMobile 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both !important;
                animation: iphoneEntranceMobile 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both !important;
    }

    /* Coming Soon + store badges — desktop only (frees vertical space for mobile CTAs) */
    .hero-badges-section {
        display: none;
    }

    .hero-sub {
        text-align: center;
        margin-top: var(--space-3);
        font-size: clamp(0.8rem, 3.2vw, 1rem);
    }

    /* Headline CTAs hidden on mobile; same links shown in .hero-mobile-cta below the phone */
    .hero-headline-ctas {
        display: contents;
    }
    .hero-headline-cta {
        display: none !important;
    }

    /* 3 — Mobile CTA stack: Get Early Access, then Donate */
    .hero-mobile-cta {
        display: flex;
        justify-content: center;
        order: 3;
        margin-top: var(--hero-m-cta-margin-top);
        padding-bottom: 2px;
        flex-shrink: 0;
        width: 100%;
        max-width: 20rem;
    }
    .hero-mobile-cta-stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        width: 100%;
    }
    .hero-mobile-cta-stack .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-mobile-cta .btn-cta-glass {
        background: rgba(7, 11, 26, 0.82);
        border-color: rgba(125, 211, 208, 0.45);
        color: #ffffff;
        text-shadow: none;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow:
            0 4px 28px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(125, 211, 208, 0.18);
    }
    .hero-mobile-cta .hero-cta-secondary {
        background: #C2DDDF;
        border-color: rgba(77, 154, 150, 0.28);
        color: rgba(10, 40, 50, 0.92);
        font-weight: var(--weight-semibold);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 0 0 1px rgba(77, 154, 150, 0.1),
            0 10px 24px rgba(0, 0, 0, 0.25);
    }
    .hero-mobile-cta .btn-cta-glass:hover {
        background: rgba(7, 11, 26, 0.92);
        border-color: rgba(125, 211, 208, 0.6);
    }
    .hero-mobile-cta .hero-cta-secondary:hover {
        background: #C9E2E4;
        border-color: rgba(77, 154, 150, 0.38);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.95) inset,
            0 0 0 1px rgba(77, 154, 150, 0.14),
            0 14px 30px rgba(0, 0, 0, 0.3);
    }

    /* Mobile entrance — flat fade-up (no 3D rotation = no bumps) */
    @-webkit-keyframes iphoneEntranceMobile {
        0%   { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes iphoneEntranceMobile {
        0%   { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
}

/*
 * Tablet / large-phone band (481–900px):
 * - Fixed 100vh + overflow:hidden clips the bottom CTA when content is tall.
 *   Let the hero grow (min full viewport) so mobile CTAs stay inside the
 *   section above the motto — no overlap with the next block.
 * - Slightly smaller phone scale frees space in the first screenful.
 */
@media (max-width: 900px) and (min-width: 481px) {
    .hero.hero-extended {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: visible;
        --hero-m-sticky-padding-block-end: 22px;
        --hero-m-cta-margin-top: 10px;
    }

    .hero-sticky {
        min-height: 100vh;
        min-height: 100svh;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .hero-sticky .iphone-scene {
        --hero-m-iphone-scale: 0.82;
        transform: scale(var(--hero-m-iphone-scale));
        transform-origin: top center;
        margin-bottom: calc(-533px * (1 - var(--hero-m-iphone-scale)));
    }

    .hero-mobile-cta {
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
}

/* Short viewports: centered stack avoids clipping with space-evenly */
@media (max-width: 900px) and (max-height: 640px) {
    .hero-sticky {
        justify-content: center;
        gap: clamp(6px, 1.8vh, 14px);
    }
}

/* ==========================================
   Phones ≤ 480px (SE, mini, older Android)
   ========================================== */
@media (max-width: 480px) {
    .hero.hero-extended {
        --hero-m-sticky-padding-block-start: 8px;
        --hero-m-sticky-padding-inline: var(--space-4);
        --hero-m-sticky-padding-block-end: 12px;
        --hero-m-sticky-gap: clamp(8px, 1.8vh, 18px);
    }

    .hero-sticky {
        gap: var(--hero-m-sticky-gap);
    }
    .hero-headline .hero-title {
        font-size: clamp(1.45rem, 8vw, 1.9rem);
    }
    /* iPhone at 161×330px (0.575× base) — fills available height on small phones */
    .hero-sticky .iphone-scene {
        width: 161px;
        height: 330px;
    }
    .hero-sticky .iphone-scene .iphone-body     { border-radius: 33px; }
    .hero-sticky .iphone-scene .iphone-bezel    { top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 29px; }
    .hero-sticky .iphone-scene .iphone-screen-glass,
    .hero-sticky .iphone-scene .iphone-screen-content { border-radius: 29px; }
    .hero-sticky .iphone-scene .iphone-dynamic-island {
        width: 53px; height: 14px; top: 7px;
        border-radius: 8px; gap: 4px;
    }
    .hero-sticky .iphone-scene .dynamic-island-camera { width: 6px; height: 7px; }
    .hero-sticky .iphone-scene .dynamic-island-sensor { width: 3px; height: 5px; }
    .hero-sticky .iphone-scene .iphone-button-silent      { left: -3px; top: 69px;  width: 3px; height: 18px; }
    .hero-sticky .iphone-scene .iphone-button-volume-up   { left: -3px; top: 101px; width: 3px; height: 32px; }
    .hero-sticky .iphone-scene .iphone-button-volume-down { left: -3px; top: 141px; width: 3px; height: 32px; }
    .hero-sticky .iphone-scene .iphone-button-power       { right: -3px; top: 109px; width: 3px; height: 46px; }
    /* 161×330 ≈ 0.575× desktop — proportional to web layout, not ultra-tight */
    .hero-sticky .iphone-scene .app-placeholder {
        padding-top: 32px;
        padding-bottom: 4px;
    }
    .hero-sticky .iphone-scene .app-status-bar {
        top: 7px;
        height: 18px;
        font-size: 9px;
        padding: 0 12px;
    }
    .hero-sticky .iphone-scene .app-status-bar .status-time { font-size: 9px; }
    .hero-sticky .iphone-scene .app-status-bar .status-icons svg,
    .hero-sticky .iphone-scene .app-status-bar .status-signal svg,
    .hero-sticky .iphone-scene .app-status-bar .status-battery svg {
        height: 7px;
    }
    .hero-sticky .iphone-scene .app-main {
        flex: 1 1 auto;
        min-height: 0;
        padding: 9px 9px 4px;
        gap: 9px;
        justify-content: center;
    }
    .hero-sticky .iphone-scene .app-card-image {
        transform: scale(1.28);
        margin-top: 14px;
    }
    .hero-sticky .iphone-scene .app-placeholder {
        position: relative;
        padding-bottom: 40px; /* nav height at small scale */
    }
    .hero-sticky .iphone-scene .app-main {
        overflow: hidden;
    }
    /* Pin nav absolutely to the bottom — same approach as ≤900px */
    .hero-sticky .iphone-scene .app-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
        margin-top: 0;
    }
    .hero-sticky .iphone-scene .app-nav-image {
        width: 100%;
        max-width: 150px;
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        object-position: center bottom;
        transform: none;
    }
    .hero-mobile-cta { margin-top: var(--hero-m-cta-margin-top); }
}

/* Reduced motion support for iPhone animation */
@media (prefers-reduced-motion: reduce) {
    .iphone-model {
        animation: none;
        opacity: 1;
        transform: 
            translateX(0)
            translateY(0)
            translateZ(0)
            rotateY(-5deg)
            rotateX(3deg)
            rotateZ(0deg);
    }
    
    .screen-reflection {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .iphone-body {
        box-shadow: 0 0 0 2px #fff;
    }
    
    .iphone-bezel {
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================
   Scroll-Driven Motto Section
   ========================================== */

/* ==========================================
   Motto: Jeton-style stacking + "others." zoom reveal
   ========================================== */

.motto {
    height: 220vh;
    position: relative;
    margin-top: -1px;
    background:
        linear-gradient(180deg,
            #EEF9F9 0%,
            #E8F5F3 20%,
            #F0FAF9 50%,
            #EDF7F6 80%,
            #E5F3F1 100%
        );
}

/* Light-mode grain — textural continuity with hero */
.motto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.012;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


.motto-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* Ambient radial pools — very subtle, doesn't compete with text contrast */
.motto-sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60vmax 60vmax at 15% 30%, rgba(160, 231, 229, 0.04) 0%, transparent 70%),
        radial-gradient(50vmax 50vmax at 80% 65%, rgba(94, 179, 232, 0.025) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Soft radial bloom — JS toggles .has-bloom (subtle, doesn't compete with text) */
.motto-sticky::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(91, 196, 193, 0.07) 0%,
        rgba(91, 196, 193, 0.03) 35%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
}

.motto-sticky.has-bloom::after {
    opacity: 1;
}

/* ---- Group A: stacking phrase ---- */

.motto-stack {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: opacity;
}

.motto-word {
    font-family: var(--font-primary);
    font-weight: var(--weight-extrabold);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #0C1628;
    text-align: center;
    white-space: nowrap;
    will-change: transform, opacity;
}

.motto-word-hero {
    /* Absolutely centered — doesn't affect stack layout */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 1.05;
    white-space: normal;
    max-width: 90vw;
    text-align: center;
    z-index: 3;
}

.motto-word[data-word="2"],
.motto-word[data-word="3"] {
    font-size: clamp(3.5rem, 10vw, 8rem);
    opacity: 0;
    transform: translateY(60px) scale(0.97);
}

.motto-word[data-word="2"] {
    box-sizing: border-box;
}

.motto-word[data-word="3"] {
    transform-origin: center center;
    will-change: transform, opacity;
    -webkit-font-smoothing: antialiased;
}

.motto-stack {
    gap: 0.18em;
}

/* "others." — turquoise gradient */
.motto-glow {
    font-style: normal;
    display: inline-block;
    background: linear-gradient(135deg, #2A9D8F 0%, #5BC4C1 40%, #7DD3D0 70%, #A0E7E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow breath while "others." is at readable scale */
.motto-word.has-glow .motto-glow {
    animation: othersBreath 4s ease-in-out infinite;
}

/* iOS Safari performance trim: keep visual identity, reduce expensive animated blur */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 1024px) {
        .motto-word.has-glow .motto-glow {
            animation: none;
            filter: drop-shadow(0 0 6px rgba(91, 196, 193, 0.16));
        }

        .motto-sticky::after {
            transition-duration: 0.6s;
        }
    }
}

@keyframes othersBreath {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(91, 196, 193, 0.18))
                drop-shadow(0 0 28px rgba(91, 196, 193, 0.06));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(91, 196, 193, 0.3))
                drop-shadow(0 0 44px rgba(91, 196, 193, 0.1));
    }
}

/* ---- Responsive ---- */

@media (min-width: 901px) and (max-height: 900px) {
    .motto-word-hero {
        font-size: clamp(3rem, min(8vw, 11vh), 6rem);
        max-width: 92vw;
    }

    .motto-word[data-word="2"],
    .motto-word[data-word="3"] {
        font-size: clamp(3rem, min(8vw, 11vh), 6rem);
    }
}

@media (max-width: 900px) {
    .motto-word-hero { font-size: clamp(2.5rem, 9vw, 5rem); }
    .motto-word[data-word="2"],
    .motto-word[data-word="3"] { font-size: clamp(2.5rem, 9vw, 5rem); }
    .motto-sticky::after { width: 400px; height: 400px; }
}

@media (max-width: 480px) {
    .motto-word-hero { font-size: clamp(2rem, 10vw, 3.5rem); }
    .motto-word[data-word="2"],
    .motto-word[data-word="3"] { font-size: clamp(2rem, 10vw, 3.5rem); }
}

/* ==========================================
   Feature Snippets (Jeton-style animated cards)
   ========================================== */

.snippets {
    padding: var(--section-padding) 0;
    background: var(--bg-secondary);
}

.snippets-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.snippets-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.snippets-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.snippets-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 400px;
    margin: 0 auto;
}

.snippet-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

.snippet-card:hover,
.snippet-card.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--secondary);
    box-shadow: 0 8px 32px rgba(94, 179, 232, 0.18);
    transform: translateX(8px);
}

.snippet-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: var(--text-2xl);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.snippet-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

.snippet-content p {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ==========================================
   How It Works - Scroll-driven, hero-style iPhone
   ========================================== */

.how-it-works {
    height: 450vh;
    position: relative;
    background: linear-gradient(180deg,
        #E5F3F1 0%,
        #9ECAC5 3%,
        #4D9A96 7%,
        #2D7A7C 12%,
        #1A5566 22%,
        #123E55 38%,
        #0C2A45 55%,
        #081D36 72%,
        #051530 88%,
        #020610 100%
    );
}

/* Grain texture — fades in as background darkens */
.how-it-works::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--hiw-grain-opacity, 0.02);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Section-level bottom wash — same hue as bridge (#020610) only, avoids a blue band above Night Sky */
.how-it-works::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: min(30vh, 320px);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(2, 6, 16, 0) 0%,
        rgba(2, 6, 16, 0.28) 62%,
        rgba(2, 6, 16, 0.82) 90%,
        #020610 100%
    );
}

.how-it-works-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3.5rem);
    padding: clamp(3.5rem, 13vh, 8rem) clamp(1.5rem, 5vw, 6rem) var(--space-8);
}

/* Soft radial — anchored on phone side, smaller falloff so step 4 doesn’t read as a center blob */
.how-it-works-sticky::before {
    content: '';
    position: absolute;
    top: 38%;
    left: min(58%, calc(50% + 9rem));
    width: min(520px, 78vw);
    height: min(600px, 72vh);
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 48% 46% at 50% 50%,
        rgba(91, 196, 193, var(--hiw-glow-alpha, 0.06)) 0%,
        rgba(91, 196, 193, calc(var(--hiw-glow-alpha, 0.06) * 0.38)) 36%,
        transparent 62%);
    pointer-events: none;
    z-index: 0;
}

/* Bottom fade: ramp only through rgb(2,6,16) so Night Sky meets one continuous dark navy */
.how-it-works-sticky::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: linear-gradient(180deg,
        rgba(2, 6, 16, 0) 0%,
        rgba(2, 6, 16, 0) 20%,
        rgba(2, 6, 16, 0.2) 42%,
        rgba(2, 6, 16, 0.48) 65%,
        rgba(2, 6, 16, 0.82) 88%,
        var(--nightsky-bridge-base) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.how-it-works-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.how-it-works-visual {
    width: 320px;
    min-width: 280px;
    height: 560px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
    transform: translateX(-1.5rem);
}

/* Eyebrow label — replaces the old h2 title */
.how-eyebrow {
    font-size: clamp(0.95rem, 1vw, 1.12rem);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
    transition: color 0.2s ease;
}

/* ── Vertical step timeline (desktop) ────────────────────────────── */

.hiw-timeline {
    position: relative;
    padding-left: 34px;
    display: flex;
    flex-direction: column;
}

/* Rail segments — one between each pair of adjacent dots, positioned by JS */
.hiw-rail-seg {
    position: absolute;
    left: 6px;
    width: 2px;
    background: rgba(91, 196, 193, 0.3);
    border-radius: 1px;
}

/* Step item */
.hiw-step {
    position: relative;
    padding: clamp(0.7rem, 1.8vh, 1.15rem) 0;
}

/* Marker dot on the rail */
.hiw-marker {
    position: absolute;
    left: -34px;
    top: clamp(0.7rem, 1.5vh, 1.1rem);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    transform: scale(0.7);
    transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.5s ease,
                box-shadow 0.6s ease,
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-step.past .hiw-marker {
    background: rgba(91, 196, 193, 0.4);
    border-color: rgba(91, 196, 193, 0.15);
    transform: scale(0.85);
}

.hiw-step.active .hiw-marker {
    background: rgba(91, 196, 193, 0.85);
    border-color: rgba(91, 196, 193, 0.5);
    box-shadow: 0 0 14px rgba(91, 196, 193, 0.4), 0 0 4px rgba(91, 196, 193, 0.6);
    transform: scale(1);
}

/* Headlines — default state is compact (future) */
.hiw-step h3 {
    font-size: clamp(0.92rem, 1.2vw, 1.1rem);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.22);
    margin-bottom: 0;
    line-height: 1.35;
    transition: font-size 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.5s ease,
                margin-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                line-height 0.5s ease;
}

.hiw-step.past h3 {
    color: rgba(255, 255, 255, 0.48);
    font-weight: var(--weight-semibold);
}

.hiw-step.active h3 {
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: var(--weight-bold);
    color: #fff;
    margin-bottom: var(--space-4);
    line-height: 1.12;
    text-wrap: balance;
}

/* Semantic lineation: br.br-desk = body copy (all viewports). Step 1 headline break = mobile only. */
@media (min-width: 901px) {
    br.br-hiw-mob-only { display: none; }
}

/* Body text — visible only on active step */
.hiw-step p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    max-width: 520px;
    text-wrap: pretty;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                margin 0.5s ease;
}

.hiw-step.active p {
    max-height: 16em;
    opacity: 1;
    margin-bottom: clamp(0.25rem, 0.8vh, 0.5rem);
}

/* How-it-works: Hero-style iPhone (scoped) */
.how-it-works-iphone-scene {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 260px;
    height: 533px;
    perspective: 1000px;
}

/* Turquoise glow — local to handset; single teal core avoids a second “center sun” */
.how-it-works-iphone-scene::before {
    content: '';
    position: absolute;
    top: 52%;
    left: 50%;
    width: 480px;
    height: 480px;
    max-width: 125%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse 50% 52% at 50% 48%,
        rgba(91, 196, 193, var(--hiw-phone-glow, 0.09)) 0%,
        rgba(91, 196, 193, calc(var(--hiw-phone-glow, 0.09) * 0.5)) 36%,
        rgba(91, 196, 193, calc(var(--hiw-phone-glow, 0.09) * 0.18)) 56%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
}

.how-it-works-iphone-scene .iphone-model {
    animation: none;
    transform: translateX(0) translateY(0) translateZ(0) rotateY(-6deg) rotateX(2deg) rotateZ(0);
}

/* Use same screen look as hero (phonescreen.png) */
.how-it-works .iphone-screen-glass {
    background: url('../images/phonescreen.webp') center/cover no-repeat;
}

/* Single static widget (no carousel) in How It Works */
.how-it-works .app-widget-carousel--single .app-widget-track {
    width: 100%;
    transform: none;
}
.how-it-works .app-widget-carousel--single .app-widget-slide {
    width: 100%;
}

/* How it works: logo with own background – full-bleed behind island, content on top */
.how-it-works .app-placeholder {
    position: relative;
    padding-top: 0; /* remove gap so bg image reaches top edge / under island */
    background: none;  /* the logo PNG is the background now */
}
.how-it-works .app-card--logo-with-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.how-it-works .app-card--logo-with-bg .app-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    margin: 0;
    transform: scale(0.95) ;
    border-radius: 0;
}
.how-it-works .app-status-bar {
    z-index: 2;
}
.how-it-works .app-main {
    position: relative;
    z-index: 1;
    padding-top: 55px; /* restore spacing for content below island */
}
.how-it-works .app-nav {
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════════
   Step 1 — Deed Input Screen
   Full-bleed, always-visible, bright bg.
   Typewriter loops via JS.
   ══════════════════════════════════════════ */

/* Step 1 has no padding — deed screen fills inset:0 */
.steps-phone-step[data-step="1"] {
    padding-top: 0;
}

.deed-input-screen {
    position: absolute;
    inset: 0;
    background: url("../images/HOW%20IT%20WORKS/Step%201/bright%20background.webp") center / cover no-repeat;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Status bar: same component as step 2 mockup (.steps-phone-status-bar) ── */
.deed-input-screen .steps-phone-status-bar {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    z-index: 5;
}
.deed-input-screen .steps-phone-status-bar .status-icons {
    display: flex;
    gap: 6px;
}
.deed-input-screen .steps-phone-status-bar .status-icons svg {
    display: block;
    height: 9px;
    fill: currentColor;
    color: #1a1a1a;
}

/* ── Back arrow ── */
.deed-back {
    margin-top: 46px;
    margin-left: 10px;
    margin-bottom: 0;
    align-self: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    color: #2a3a4a;
    padding: 6px 8px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Title ── */
.deed-title {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #0d1b2a;
    margin: 8px 18px 0;
    line-height: 1.3;
    flex-shrink: 0;
    text-wrap: balance;
}

/* ── Typewriter area — takes remaining space ── */
.deed-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-height: 0;
}
.deed-typed-text {
    font-size: 13px;
    color: #1a2a3a;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}
/* Blinking cursor */
.deed-cursor {
    display: inline-block;
    margin-left: 1px;
    animation: deed-cursor-blink 0.75s step-end infinite;
    color: #2d7abe;
    font-weight: 300;
}
@keyframes deed-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Control row: keyboard · mic (center, larger) · gallery ── */
.deed-controls {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(8px, 2.5vw, 16px);
    padding: 12px 14px 8px;
    flex-shrink: 0;
}

@media (min-width: 901px) {
    .deed-controls {
        gap: clamp(4px, 0.65vw, 8px);
    }
}
.deed-ctrl {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
    line-height: 0;
}
/* Side icons slightly smaller; center mic larger (reference layout) */
.deed-ctrl-gallery img,
.deed-ctrl-keyboard img {
    display: block;
    width: clamp(48px, 13vw, 62px);
    height: auto;
    object-fit: contain;
}
.deed-ctrl-mic img {
    display: block;
    width: clamp(56px, 15vw, 76px);
    height: auto;
    object-fit: contain;
}

/* ── Send (Button.png) ── */
.deed-send {
    margin: 6px 12px 14px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    width: calc(100% - 24px);
    max-width: 100%;
    align-self: center;
    line-height: 0;
    box-shadow: none;
}
.deed-send img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ══════════════════════════════════════════
   Step 2 — Score: one shockwave, then subtle glow frame cycle
   ══════════════════════════════════════════ */

.steps-phone-step[data-step="2"] {
    padding-top: 0;
}

.deed-score-screen {
    position: absolute;
    inset: 0;
    background: url("../images/HOW%20IT%20WORKS/Step%202/bright%20background.webp") center / cover no-repeat;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.deed-score-screen .steps-phone-status-bar {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    z-index: 5;
}

.deed-score-screen .steps-phone-status-bar .status-icons {
    display: flex;
    gap: 6px;
}

.deed-score-screen .steps-phone-status-bar .status-icons svg {
    display: block;
    height: 9px;
    fill: currentColor;
    color: #1a1a1a;
}

/* Match step 1: .deed-title */
.deed-score-win {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #0d1b2a;
    margin: 8px 18px 0;
    line-height: 1.3;
    flex-shrink: 0;
    text-wrap: balance;
    opacity: 0;
}

/* Match step 1: .deed-typed-text (body copy in deed-body) */
.deed-score-copy {
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    color: #1a2a3a;
    margin: 8px 20px 0;
    line-height: 1.6;
    flex-shrink: 0;
    text-wrap: balance;
    opacity: 0;
}

/* Staged reveals — triggered by .deed-score-animating on .deed-score-screen */
.deed-score-screen.deed-score-animating .deed-score-win {
    animation: deed-fade-up 0.55s ease-out 1.00s forwards;
}
.deed-score-screen.deed-score-animating .deed-score-copy {
    animation: deed-fade-up 0.55s ease-out 1.25s forwards;
}
.deed-score-screen.deed-score-animating .deed-continue {
    animation: deed-fade-up 0.55s ease-out 2.05s forwards;
}
.deed-score-screen.deed-score-animating .deed-score-img {
    animation: deed-score-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s forwards;
}

@keyframes deed-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes deed-score-pop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.deed-score-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 6px 8px 2px;
}

.deed-score-orbit {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 336px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-28px);
}

/* Single shockwave ring */
.deed-score-waves {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 1;
}

.deed-score-waves span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    border: 1.5px solid rgba(140, 230, 255, 0.55);
    box-shadow:
        0 0 28px rgba(80, 170, 255, 0.35),
        inset 0 0 22px rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: scale(0.35);
}

.deed-score-orbit.deed-score-animating .deed-score-waves span {
    animation: deed-shockwave 1.38s cubic-bezier(0.16, 0.72, 0.25, 1) 0.25s forwards;
}

@keyframes deed-shockwave {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }
    12% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: scale(6.2);
    }
}

/*
 * Badge stacking: avoid isolation + offset drop-shadow — together they paint a
 * dark silhouette “halo” between the score and the rotating glow, which reads as
 * a black/grey ring once the glow moves. Glow provides depth instead.
 */
.deed-score-badge {
    position: relative;
    width: min(82%, 286px);
    max-width: 286px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Glow: wrapper fades in smoothly; inner layer orbits + crossfades frames */
.deed-score-glow-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108%;
    height: 108%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform-origin: center center;
}

.deed-score-glow-seq {
    position: absolute;
    inset: 0;
    pointer-events: none;
    backface-visibility: hidden;
}

.deed-score-glow-seq img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: blur(6px);
}

/*
 * Glow: fade wrapper first (no rotation yet = no “snap”). Orbit + frame crossfade
 * begin only after fade completes so it reads as soft light, then slow drift.
 */
.deed-score-orbit.deed-score-animating .deed-score-glow-wrap {
    animation:
        deed-glow-wrap-fade 1.65s cubic-bezier(0.22, 1, 0.36, 1) 2.05s forwards,
        deed-glow-orbit 22s linear 2.05s infinite;
}

.deed-score-orbit.deed-score-animating .deed-score-glow-seq img:nth-child(1) {
    animation: deed-glow-op-0 10s ease-in-out 2.05s infinite;
}

.deed-score-orbit.deed-score-animating .deed-score-glow-seq img:nth-child(2) {
    animation: deed-glow-op-1 10s ease-in-out 2.05s infinite;
}

.deed-score-orbit.deed-score-animating .deed-score-glow-seq img:nth-child(3) {
    animation: deed-glow-op-2 10s ease-in-out 2.05s infinite;
}

.deed-score-orbit.deed-score-animating .deed-score-glow-seq img:nth-child(4) {
    animation: deed-glow-op-3 10s ease-in-out 2.05s infinite;
}

@keyframes deed-glow-wrap-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.62;
    }
}

@keyframes deed-glow-orbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Frame opacities always ease through 0→1→0 (no step to full opacity = no pop) */
@keyframes deed-glow-op-0 {
    0% {
        opacity: 0;
    }
    9% {
        opacity: 1;
    }
    21% {
        opacity: 1;
    }
    27% {
        opacity: 0;
    }
    86% {
        opacity: 0;
    }
    92% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes deed-glow-op-1 {
    0%,
    19% {
        opacity: 0;
    }
    26% {
        opacity: 1;
    }
    44% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes deed-glow-op-2 {
    0%,
    44% {
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
    69% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes deed-glow-op-3 {
    0%,
    69% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }
    86% {
        opacity: 1;
    }
    92% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.deed-score-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 22px rgba(95, 195, 235, 0.28));
    backface-visibility: hidden;
    opacity: 0;
    transform: scale(0.94);
}

.deed-continue {
    margin: 4px 12px 14px;
    padding: 0;
    border: none;
    background: none;
    cursor: default;
    flex-shrink: 0;
    width: calc(100% - 24px);
    max-width: 100%;
    align-self: center;
    line-height: 0;
    box-shadow: none;
    opacity: 0;
}

.deed-continue img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .deed-score-orbit.deed-score-animating .deed-score-waves span {
        animation: none !important;
        opacity: 0;
    }

    .deed-score-orbit.deed-score-animating .deed-score-glow-wrap {
        animation: none !important;
        transform: translate(-50%, -50%);
        opacity: 0.55;
        will-change: auto;
    }

    .deed-score-orbit.deed-score-animating .deed-score-glow-seq img {
        animation: none !important;
        opacity: 0;
    }

    .deed-score-orbit.deed-score-animating .deed-score-glow-seq img:last-child {
        opacity: 0.62;
    }

    /* Keep staged elements visible without motion */
    .deed-score-screen.deed-score-animating .deed-score-win,
    .deed-score-screen.deed-score-animating .deed-score-copy,
    .deed-score-screen.deed-score-animating .deed-continue,
    .deed-score-screen.deed-score-animating .deed-score-img {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════
   Step 3 — Night Sky: mirrors step 2 shell; full-bleed sky + card
   ══════════════════════════════════════════ */

.steps-phone-step[data-step="3"] {
    padding-top: 0;
}

.deed-star-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-primary);
    color: #fff;
}

/* Base sky — visible as soon as step 3 is shown */
.deed-star-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/HOW%20IT%20WORKS/Step%203/Sky.webp") center / cover no-repeat;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

/* Richer sky — fades in with the deed card */
.deed-star-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/HOW%20IT%20WORKS/Step%203/Sky_Option_3.webp") center / cover no-repeat;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.deed-star-screen .steps-phone-status-bar {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    z-index: 5;
}

.deed-star-screen .steps-phone-status-bar .status-icons {
    display: flex;
    gap: 6px;
}

.deed-star-screen .steps-phone-status-bar .status-icons svg {
    display: block;
    height: 9px;
    fill: currentColor;
    color: #fff;
}

.deed-star-screen .steps-phone-status-bar .status-time {
    color: #fff;
}

.deed-star-screen .deed-back {
    color: rgba(255, 255, 255, 0.92);
}

/* Main stage — same role as .deed-score-stage */
.deed-star-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 6px 16px 2px;
    position: relative;
    z-index: 1;
}

/* Star-deed card */
.deed-star-card {
    position: relative;
    width: 86%;
    max-width: 88%;
    margin-top: 20px;
    padding: 9px 12px 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(22, 42, 75, 0.92) 0%, rgba(12, 24, 48, 0.92) 100%);
    border: 1px solid rgba(120, 160, 210, 0.25);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(70, 140, 210, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    text-align: center;
    opacity: 0;
    z-index: 2;
}

.deed-star-card-text {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    text-wrap: balance;
    letter-spacing: 0.1px;
}

.deed-star-card-loc {
    margin: 4px 0 0;
    font-size: 9px;
    font-weight: 500;
    color: #a8c4e8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.deed-star-card-loc svg {
    flex-shrink: 0;
}

/* Staged reveals triggered when step 3 becomes active */
.deed-star-screen.deed-star-animating::after {
    animation: deed-star-sky-option-fade 0.7s ease-out 0.75s forwards;
}
.deed-star-screen.deed-star-animating .deed-star-card {
    animation: deed-star-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}

@keyframes deed-star-sky-option-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes deed-star-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .deed-star-screen.deed-star-animating::after,
    .deed-star-screen.deed-star-animating .deed-star-card {
        animation: none !important;
        opacity: 1;
    }
    .deed-star-screen.deed-star-animating .deed-star-card {
        transform: translateY(0);
    }
}

/* Step-specific screens inside iPhone */
.steps-phone-screen {
    position: absolute;
    inset: 0;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    font-family: var(--font-primary);
    color: #fff;
}

.steps-phone-step {
    position: absolute;
    inset: 0;
    padding-top: 48px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.steps-phone-step.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.steps-phone-status-bar {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    z-index: 5;
}

.steps-phone-status-bar .status-icons {
    display: flex;
    gap: 6px;
}

.steps-phone-status-bar .status-icons svg {
    display: block;
    height: 9px;
    fill: currentColor;
    color: #1a1a1a;
}

.steps-phone-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
    text-align: center;
}

/* Step 4 — Inspire others: Stories deck + tab bar (gradient matches reference comp) */
.steps-phone-step[data-step="4"] {
    background: linear-gradient(168deg, #dff2fb 0%, #d2f4f3 42%, #c2ebe4 100%);
}

.steps-phone-step[data-step="4"] .steps-phone-main {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
}

/* Pin nav to bottom of screen — same as .hero-sticky .iphone-scene .app-nav (≤1200px) */
.steps-phone-step[data-step="4"] .app-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0;
    margin-top: 0;
    z-index: 6;
}

.steps-phone-step[data-step="4"] .app-nav-image {
    width: 100%;
    max-width: 240px; /* matches .hero-sticky .iphone-scene .app-nav-image at 260px-wide phone */
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
}

.steps-phone-step[data-step="4"] .steps-phone-main--stories {
    position: relative;
}

.hiw-stories {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 4px 11px 72px; /* bottom inset clears absolutely positioned app-nav */
    z-index: 1;
}

.hiw-stories-title {
    flex-shrink: 0;
    margin: 0 0 8px;
    padding: 0 2px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0d1b2a;
    line-height: 1.2;
}

.hiw-stories-card-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.hiw-stories-card-wrap img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 374px; /* was 340px; +10% desktop */
    margin: 0 auto;
    object-fit: contain;
    object-position: top center;
}

.steps-phone-headline {
    font-size: 15px;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    color: #fff;
}

.steps-phone-hint,
.steps-phone-feedback {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-3);
}

.steps-phone-score {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.steps-phone-number {
    font-size: 36px;
    font-weight: var(--weight-bold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.steps-phone-star {
    font-size: 48px;
    margin: var(--space-2) 0;
}

.steps-phone-input-placeholder {
    width: 100%;
    max-width: 200px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: var(--space-2);
}


/* ─── How-it-works ≤900px ─────────────────────────────────────────────
 * Phone-first layout: compact centered text header + large iPhone.
 * The phone IS the content — text is a supporting label, not competing.
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .how-it-works-sticky {
        position: sticky;
        display: block;
        padding: 0 var(--space-5);
    }

    /* Phone is centered — keep ambient glow over the handset, not biased right */
    .how-it-works-sticky::before {
        left: 50%;
        top: 62%;
        width: min(400px, 92vw);
        height: min(420px, 48vh);
    }

    /* ── Text zone: vmin-heavy spacing tracks better across tall/narrow vs short/wide phones ── */
    .how-it-works-content {
        position: absolute;
        top: clamp(2.4rem, 5.5vmin, 4rem);
        left: var(--space-5);
        right: var(--space-5);
        text-align: center;
        z-index: 2;
    }

    .how-eyebrow {
        text-align: center;
        margin-bottom: clamp(0.6rem, 1.65vmin, 0.95rem);
        font-size: 0.78rem;
    }

    /* Mobile: hide timeline rail/markers, show one step at a time */
    .hiw-timeline {
        padding-left: 0;
        display: block;
    }

    .hiw-rail-seg,
    .hiw-marker {
        display: none;
    }

    .hiw-step {
        display: none;
        padding: 0;
    }

    .hiw-step.active {
        display: block;
    }

    .hiw-step.past,
    .hiw-step.future {
        display: none;
    }

    /* Headline→body: more air. Body→phone: mockup lifted (larger bottom) + modest p tail — balances both gaps on varied AR */
    .hiw-step h3 {
        font-size: clamp(1.45rem, 5.8vw, 2.05rem) !important;
        font-weight: var(--weight-bold) !important;
        color: #fff !important;
        margin-bottom: clamp(1.15rem, 3.5vmin, 1.85rem) !important;
        line-height: 1.12 !important;
        transition: none !important;
        text-wrap: balance;
    }

    .hiw-step p {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin: 0 !important;
        margin-bottom: clamp(0.45rem, 1.5vmin, 0.85rem) !important;
        transition: none !important;
        max-width: 34ch;
        margin-inline: auto !important;
        font-size: clamp(0.95rem, 3.8vw, 1.08rem);
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.78);
        text-wrap: balance;
    }

    /* ── Phone: higher bottom inset closes mid-field void; still clears toolbar + safe area ── */
    .how-it-works-visual {
        position: absolute;
        bottom: calc(clamp(4rem, 20vmin, 9rem) + env(safe-area-inset-bottom, 0px));
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 236px;
        height: 484px;
        z-index: 1;
    }

    .how-it-works-iphone-scene {
        width: 236px;
        height: 484px;
        perspective: none;
    }

    /* Flatten 3D — same as hero mobile */
    .how-it-works-iphone-scene .iphone-model {
        transform-style: flat;
        transform: none;
    }
    .how-it-works-iphone-scene .iphone-frame { transform-style: flat; }
    .how-it-works-iphone-scene .iphone-body  { transform-style: flat; }
    .how-it-works-iphone-scene .iphone-body::before { display: none; }

    /* 260×533 — same as hero mobile iPhone (0.929× of 280 base) */
    .how-it-works-iphone-scene .iphone-body     { border-radius: 54px; }
    .how-it-works-iphone-scene .iphone-bezel    { top: 7px; left: 7px; right: 7px; bottom: 7px; border-radius: 47px; }
    .how-it-works-iphone-scene .iphone-screen-glass,
    .how-it-works-iphone-scene .iphone-screen-content { border-radius: 47px; }

    .how-it-works-iphone-scene .iphone-dynamic-island {
        width: 86px; height: 23px; top: 11px;
        border-radius: 13px; gap: 6px;
    }
    .how-it-works-iphone-scene .dynamic-island-camera { width: 9px; height: 11px; }
    .how-it-works-iphone-scene .dynamic-island-sensor { width: 6px; height: 7px; }

    .how-it-works-iphone-scene .iphone-button-silent      { left: -4px; top: 112px; width: 4px; height: 30px; }
    .how-it-works-iphone-scene .iphone-button-volume-up   { left: -4px; top: 163px; width: 4px; height: 51px; }
    .how-it-works-iphone-scene .iphone-button-volume-down { left: -4px; top: 228px; width: 4px; height: 51px; }
    .how-it-works-iphone-scene .iphone-button-power       { right: -4px; top: 177px; width: 4px; height: 74px; }

    /* Phone screen internals — match hero proportions */
    .steps-phone-screen { border-radius: 47px; padding-top: 48px; }
    .steps-phone-step   { padding-top: 48px; }

    .steps-phone-status-bar {
        top: 11px;
        height: 26px;
        padding: 0 22px;
        font-size: 11px;
    }
    .steps-phone-status-bar .status-time { font-size: 11px; }
    .steps-phone-status-bar .status-icons { gap: 5px; }
    .steps-phone-status-bar .status-icons svg { height: 8px; }

    .deed-input-screen .steps-phone-status-bar {
        top: 11px;
        height: 26px;
        padding: 0 22px;
        font-size: 11px;
    }
    .deed-input-screen .steps-phone-status-bar .status-icons svg { height: 8px; }
    .deed-score-screen .steps-phone-status-bar {
        top: 11px;
        height: 26px;
        padding: 0 22px;
        font-size: 11px;
    }
    .deed-score-screen .steps-phone-status-bar .status-icons svg { height: 8px; }
    .deed-star-screen .steps-phone-status-bar {
        top: 11px;
        height: 26px;
        padding: 0 22px;
        font-size: 11px;
    }
    .deed-star-screen .steps-phone-status-bar .status-icons svg { height: 8px; }
    /* Step 4: hero mobile tab bar cap at 236–260px-class handsets */
    .steps-phone-step[data-step="4"] .app-nav-image {
        max-width: 240px;
    }
    .hiw-stories {
        padding: 4px 10px 68px;
    }
    .hiw-stories-title {
        font-size: 16px;
        margin-bottom: 7px;
    }
    .hiw-stories-card-wrap img {
        max-height: 390px; /* was 300px; +30% mobile (≤900px) */
    }
    /* Step 3: bias card below vertical center (flex-start+padding had pulled it up) */
    .deed-star-card {
        margin-top: calc(20px + clamp(2.25rem, 16vmin, 5rem));
    }
    .deed-back { margin-top: 42px; }

    .steps-phone-headline { font-size: 15px; }
    .steps-phone-hint,
    .steps-phone-feedback { font-size: 12px; }
    .steps-phone-score    { font-size: 11px; }
    .steps-phone-number   { font-size: 32px; }
    .steps-phone-star     { font-size: 40px; }

    .steps-phone-input-placeholder {
        max-width: 180px;
        height: 40px;
    }
}

/* ─── How-it-works ≤480px ─────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Same scroll length as desktop (450vh) so each step gets equal travel; 405vh felt too short and skipped steps with momentum + dynamic toolbar */
    .how-it-works {
        height: 450vh;
    }

    .how-it-works-sticky {
        padding: 0 var(--space-4);
    }

    .how-it-works-content {
        top: clamp(2.1rem, 5.2vmin, 3.4rem);
        left: var(--space-4);
        right: var(--space-4);
    }

    .hiw-step h3 {
        font-size: clamp(1.55rem, 6.4vw, 2rem) !important;
        margin-bottom: clamp(1.05rem, 3.25vmin, 1.65rem) !important;
    }

    .hiw-step p {
        font-size: clamp(0.98rem, 3.85vw, 1.08rem);
        line-height: 1.5;
        max-width: 30ch;
        margin-bottom: clamp(0.4rem, 1.4vmin, 0.8rem) !important;
    }

    .how-it-works-visual {
        width: 232px;
        height: 476px;
        bottom: calc(clamp(3.75rem, 19vmin, 8.5rem) + env(safe-area-inset-bottom, 0px));
        top: auto;
        transform: translateX(-50%);
    }

    .how-it-works-iphone-scene {
        width: 232px;
        height: 476px;
    }

    .how-it-works-iphone-scene .iphone-body     { border-radius: 42px; }
    .how-it-works-iphone-scene .iphone-bezel    { top: 6px; left: 6px; right: 6px; bottom: 6px; border-radius: 37px; }
    .how-it-works-iphone-scene .iphone-screen-glass,
    .how-it-works-iphone-scene .iphone-screen-content { border-radius: 37px; }

    .how-it-works-iphone-scene .iphone-dynamic-island {
        width: 66px; height: 18px; top: 9px;
        border-radius: 10px; gap: 5px;
    }
    .how-it-works-iphone-scene .dynamic-island-camera { width: 7px; height: 9px; }
    .how-it-works-iphone-scene .dynamic-island-sensor { width: 5px; height: 6px; }

    .how-it-works-iphone-scene .iphone-button-silent      { left: -3px; top: 86px;  width: 3px; height: 23px; }
    .how-it-works-iphone-scene .iphone-button-volume-up   { left: -3px; top: 125px; width: 3px; height: 39px; }
    .how-it-works-iphone-scene .iphone-button-volume-down { left: -3px; top: 175px; width: 3px; height: 39px; }
    .how-it-works-iphone-scene .iphone-button-power       { right: -3px; top: 136px; width: 3px; height: 57px; }

    .steps-phone-screen { border-radius: 37px; padding-top: 38px; }
    .steps-phone-step   { padding-top: 38px; }

    .steps-phone-status-bar {
        top: 9px;
        height: 20px;
        padding: 0 16px;
        font-size: 10px;
    }
    .steps-phone-status-bar .status-time { font-size: 10px; }
    .steps-phone-status-bar .status-icons { gap: 4px; }
    .steps-phone-status-bar .status-icons svg { height: 7px; }

    .deed-input-screen .steps-phone-status-bar {
        top: 9px;
        height: 20px;
        padding: 0 16px;
        font-size: 10px;
    }
    .deed-input-screen .steps-phone-status-bar .status-icons svg { height: 7px; }
    .deed-score-screen .steps-phone-status-bar {
        top: 9px;
        height: 20px;
        padding: 0 16px;
        font-size: 10px;
    }
    .deed-score-screen .steps-phone-status-bar .status-icons svg { height: 7px; }
    .deed-star-screen .steps-phone-status-bar {
        top: 9px;
        height: 20px;
        padding: 0 16px;
        font-size: 10px;
    }
    .deed-star-screen .steps-phone-status-bar .status-icons svg { height: 7px; }
    /*
     * Step 4 @480: HIW handset 232×476 — tab bar ~240/246 of inner screen on hero; use full strip + 2px inset for glass curve.
     */
    .steps-phone-step[data-step="4"] .app-nav {
        transform: translateY(6px);
        padding: 0 2px;
        box-sizing: border-box;
    }
    .steps-phone-step[data-step="4"] .app-nav-image {
        max-width: none;
        width: 100%;
    }
    .hiw-stories {
        padding: 2px 8px 60px;
    }
    .hiw-stories-title {
        font-size: 15px;
        margin-bottom: 6px;
    }
    .hiw-stories-card-wrap img {
        max-height: 335px; /* was 258px; +30% small phones (≤480px) */
    }
    .deed-star-card {
        margin-top: calc(10px + clamp(2.75rem, 19vmin, 5.75rem));
    }
    .deed-back { margin-top: 34px; }

    .steps-phone-headline { font-size: 13px; }
    .steps-phone-hint,
    .steps-phone-feedback { font-size: 11px; }
    .steps-phone-score    { font-size: 10px; }
    .steps-phone-number   { font-size: 28px; }
    .steps-phone-star     { font-size: 32px; }

    .steps-phone-input-placeholder {
        max-width: 140px;
        height: 34px;
    }
}

/* ==========================================
   Night Sky Experience Section
   ========================================== */

:root {
    --nightsky-top: #020610;
    --nightsky-mid: #051536;
    --nightsky-low: #051e46;
    --nightsky-horizon: #062444;
    --nightsky-bg-top: #020408;
    /* Must match HIW sticky bottom-fade end colour — used on both sides of the seam */
    --nightsky-bridge-base: #020610;
    --star-color: #f0f8ff;
}

.nightsky-experience {
    /* Extra height vs old 500vh: first ~16% of scroll = swipe-in + static intro; rest = star journey (same distance as before) */
    height: 595vh;
    position: relative;
    /* Directly follows How It Works — no negative margin so Night Sky does not overlap HIW */
    margin-top: 0;
    z-index: 3;
    background: var(--nightsky-bridge-base);
}

/* Swipes up with the document like HIW — no separate entrance fade/slide */
.nightsky-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Entrance opacity/transform run here — not on .nightsky-sticky (avoids iOS sticky + JS transform jank) */
.nightsky-sticky-inner {
    width: 100%;
    height: 100%;
    position: relative;
    will-change: transform, opacity;
}

/* Base layer = same color as HIW bottom — no flash when section mounts */
.nightsky-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--nightsky-bridge-base);
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Full night-sky gradient fades in on top of the shared base */
.nightsky-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        var(--nightsky-top) 0%, 
        var(--nightsky-mid) 40%, 
        var(--nightsky-low) 70%, 
        var(--nightsky-horizon) 100%
    );
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.33, 0.7, 0.25, 1);
    will-change: opacity;
}

.nightsky-bg.active::before {
    opacity: 1;
}

/* Canvas for stars and shooting stars */
#nightsky-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.33, 0.7, 0.25, 1);
    will-change: opacity;
}

/* Star dust layer - rendered via canvas in JS */
.nightsky-dust {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.nightsky-bg.active .nightsky-dust {
    opacity: 1;
}

/* Night sky phases */
.nightsky-phase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

/* Phase intro — always light on dark base (#051530 / night overlay) */
.phase-intro .phase-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.96);
    transition: color 0.6s ease;
}

.nightsky-bg.active ~ .phase-intro .phase-content {
    color: rgba(255, 255, 255, 0.98);
}

.nightsky-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.nightsky-title .title-line {
    display: block;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.nightsky-title .title-line.highlight {
    text-shadow: none;
}

.nightsky-title .highlight {
    /* Match hero .motto-glow ("others.") + same soft glow as .motto-word.has-glow idle */
    background: linear-gradient(135deg, #2A9D8F 0%, #5BC4C1 40%, #7DD3D0 70%, #A0E7E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(91, 196, 193, 0.18))
        drop-shadow(0 0 28px rgba(91, 196, 193, 0.06));
}

.nightsky-subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
}

.scroll-arrow {
    animation: bounce-down 2s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* Star description card — same visual language as .deed-star-card (HIW step 3), scaled for section */
.phase-star {
    z-index: 15;
}

.star-description-card {
    position: absolute;
    left: 50%;
    top: calc(62% + 10px); /* 10px lower than before */
    width: 72%;
    max-width: min(268px, 82vw);
    margin-top: 0;
    padding: clamp(9px, 2vw, 12px) clamp(8px, 1.8vw, 11px) clamp(8px, 1.8vw, 10px);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(22, 42, 75, 0.92) 0%, rgba(12, 24, 48, 0.92) 100%);
    border: 1px solid rgba(120, 160, 210, 0.25);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(70, 140, 210, 0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    text-align: center;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    font-family: var(--font-primary);
}

.nightsky-phase.active .star-description-card {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.star-description-text {
    margin: 0;
    font-size: clamp(0.82rem, 2.75vw, 1.02rem);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    text-wrap: balance;
    letter-spacing: 0.1px;
}

.star-description-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 4px;
}

.star-description-loc {
    margin: 0;
    font-size: clamp(0.7rem, 2.2vw, 0.85rem);
    font-weight: 500;
    color: #a8c4e8;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.star-description-loc svg {
    flex-shrink: 0;
    width: clamp(10px, 2.8vw, 12px);
    height: clamp(10px, 2.8vw, 12px);
}

.star-time {
    font-size: clamp(0.68rem, 2vw, 0.8rem);
    font-weight: 500;
    color: rgba(168, 196, 232, 0.92);
    white-space: nowrap;
}

/* Phase finale */
.phase-finale {
    z-index: 20;
}

.finale-content {
    text-align: center;
    color: var(--text-inverse);
    position: relative;
}

.finale-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, 0.95);
}

.finale-text {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-10);
}

.btn-glow {
    box-shadow: 
        var(--shadow-glow),
        0 0 40px rgba(94, 179, 232, 0.4),
        0 0 80px rgba(95, 217, 106, 0.2);
    animation: btn-pulse 2s ease-in-out infinite;
}

@keyframes btn-pulse {
    0%, 100% { 
        box-shadow: 
            var(--shadow-glow),
            0 0 40px rgba(94, 179, 232, 0.4),
            0 0 80px rgba(95, 217, 106, 0.2);
    }
    50% { 
        box-shadow: 
            var(--shadow-glow),
            0 0 60px rgba(94, 179, 232, 0.6),
            0 0 100px rgba(95, 217, 106, 0.3);
    }
}


/* Responsive */
@media (max-width: 768px) {
    .nightsky-experience {
        height: 476vh;
    }
    
    .nightsky-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }
    
    .star-description-card {
        width: min(74%, 248px);
        max-width: min(248px, 86vw);
        padding: 9px 8px 7px;
        top: calc(64% + 10px);
    }
    
    .star-description-text {
        font-size: clamp(0.78rem, 3.6vw, 0.9rem);
    }
    
    .star-description-meta {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
    }
    
    .star-description-loc {
        font-size: clamp(0.66rem, 3.1vw, 0.78rem);
    }
    
    .star-time {
        display: block;
        width: 100%;
        text-align: center;
        font-size: clamp(0.64rem, 2.9vw, 0.74rem);
    }
    
    .finale-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }
    
    .finale-text {
        font-size: var(--text-lg);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .shooting-star,
    .star-icon,
    .star-glow,
    .constellation-star,
    .btn-glow,
    .scroll-arrow {
        animation: none;
    }
}

/* ==========================================
   Testimonials — reversed hero ramp (light top → dark bottom) + grain + spotlight; no stars
   ========================================== */

.testimonials {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
    /* Light top → deep teal at bottom, blending seamlessly into Join */
    background: linear-gradient(180deg,
        #eef9f9 0%,
        #e5f8f7 5%,
        #d4f5f4 12%,
        #c8f0ee 20%,
        #a0e7e5 32%,
        #7dd3d0 44%,
        #5bc4c1 56%,
        #42a8a2 66%,
        #34918c 74%,
        #2a7e7a 80%,
        #226b70 86%,
        #1d5d67 92%,
        #19535f 100%
    );
}

/* Noise — same asset/opacity as .hero-grain; full-height (no hero top-only mask) */
.testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Glow biased mid/lower — sits in teal→navy after gradient flip */
.testimonials::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 55% 65% at 55% 62%,
            rgba(160, 231, 229, 0.08) 0%,
            rgba(107, 219, 218, 0.03) 40%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 28% 38% at 57% 58%,
            rgba(125, 211, 208, 0.12) 0%,
            rgba(160, 231, 229, 0.04) 45%,
            transparent 65%
        );
}

.testimonials > .container {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
}

.t-header {
    text-align: left;
    margin-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.t-eyebrow {
    margin: 0;
    font-size: clamp(0.95rem, 1vw, 1.12rem);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary-dark);
    transition: color 0.2s ease;
}

.t-header h2 {
    font-size: var(--text-4xl);
    color: var(--text-primary);
    margin: 0;
}

.t-header p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0;
}

.t-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 28px);
}

.t-card {
    margin: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    background-clip: padding-box;
    isolation: isolate;
    transform: translateZ(0);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: clamp(16px, 2.6vw, 24px);
    box-shadow:
        var(--shadow-md),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(77, 154, 150, 0.08);
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-column-gap: var(--space-4);
    align-items: start;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-base);
}

.t-card:hover {
    transform: translate3d(0, -4px, 0);
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 14px 40px rgba(44, 62, 80, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 28px rgba(77, 154, 150, 0.12);
}

.t-avatar {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 18px rgba(44, 62, 80, 0.12);
}

.t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Raghda portrait: tighter crop + optional ring trim on PNG */
.t-avatar--raghda img {
    object-position: 50% 45%;
    transform: scale(1.06);
    mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
}

/* Anita portrait: source is circular on square canvas; zoom past outer padding */
.t-avatar--anita img {
    object-position: 50% 42%;
    transform: scale(1.12);
}

.t-quote {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: var(--space-5) 0 var(--space-4);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.6;
    color: var(--text-secondary);
    quotes: "“" "”" "‘" "’";
}

.t-quote::before {
    content: open-quote;
    color: #000;
    font-weight: var(--weight-semibold);
    margin-right: 0.06em;
}

.t-quote::after {
    content: close-quote;
    color: #000;
    font-weight: var(--weight-semibold);
    margin-left: 0.06em;
}

.t-meta {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.t-name {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.t-role,
.t-loc {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Reduced motion: keep cards visible, no lift */
@media (prefers-reduced-motion: reduce) {
    .t-card,
    .t-card:hover {
        transform: none !important;
    }
}

/* Mobile: 1-column stack (no scroll-snap / iOS blur glitches), quote + spacing */
@media (max-width: 900px) {
    /* SVG feTurbulence grain + backdrop-filter repaints badly on some Android GPUs while scrolling */
    .testimonials::before {
        display: none;
    }

    .t-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-columns: unset;
        overflow: visible;
        gap: clamp(14px, 3.5vw, 18px);
        padding-bottom: 0;
    }

    .t-header {
        margin-bottom: var(--space-8);
        align-items: center;
        text-align: center;
    }

    .t-eyebrow {
        font-size: 0.78rem;
    }

    .t-header h2 {
        font-size: clamp(1.55rem, 6.4vw, 2rem);
        line-height: 1.18;
    }

    .t-card {
        grid-template-columns: 56px 1fr;
        padding: clamp(14px, 3.5vw, 18px);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.94);
        isolation: auto;
        transform: none;
        box-shadow:
            var(--shadow-md),
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 0 0 1px rgba(77, 154, 150, 0.08);
    }

    .t-card:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.98);
        box-shadow:
            var(--shadow-md),
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 0 0 1px rgba(77, 154, 150, 0.08);
    }

    .t-avatar {
        width: 56px;
        height: 56px;
    }

    .t-quote {
        font-size: clamp(1rem, 3.9vw, 1.06rem);
        line-height: 1.55;
    }

    /* Avoid vh here: Android Chrome URL bar show/hide changes vh and nudges layout while scrolling */
    .testimonials {
        padding: clamp(56px, 14vw, 96px) 0;
    }
}

@media (max-width: 380px) {
    .t-card {
        grid-template-columns: 50px 1fr;
    }

    .t-avatar {
        width: 50px;
        height: 50px;
    }
}

/* ==========================================
   Organizations Section
   ========================================== */

/* SECTION ON HOLD — revisit after UI design. Remove the display:none to restore. */
.organizations {
    display: none;
    padding: var(--section-padding) 0;
    background:
        radial-gradient(circle at 78% 18%, rgba(160, 231, 229, 0.22) 0%, transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
    position: relative;
    overflow: hidden;
}

.organizations::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.organizations > .container {
    position: relative;
    z-index: 1;
}

.organizations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-12), 6vw, var(--space-20));
}

/* Top content row: intro copy left, benefit cards right */
.organizations-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(var(--space-10), 6vw, var(--space-16));
    align-items: start;
}

.org-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.org-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--primary-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.org-intro h2 {
    font-size: var(--text-4xl);
    line-height: 1.08;
    margin-bottom: var(--space-5);
}

.org-intro > p:not(.org-eyebrow):not(.org-principle) {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.org-intro > .org-principle {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
    border: 1px solid rgba(125, 211, 208, 0.26);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 10px 30px rgba(44, 62, 80, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

.org-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-content: start;
}

.org-benefit {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow:
        0 10px 28px rgba(44, 62, 80, 0.05),
        0 0 0 1px rgba(77, 154, 150, 0.06);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.org-benefit:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(8px);
    box-shadow:
        0 14px 34px rgba(44, 62, 80, 0.09),
        0 0 28px rgba(77, 154, 150, 0.1);
}

.org-benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    box-shadow: 0 10px 24px rgba(77, 154, 150, 0.25);
    flex-shrink: 0;
}

.org-benefit-content h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

.org-benefit-content p {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ---- Organizations: visual wrapper ---- */
.organizations-visual {
    position: relative;
}

/* ============================================
   iPad Pro Mockup — landscape, Space Gray
   ============================================ */

.ipad-mockup {
    position: relative;
    width: 100%;
}

.ipad-frame {
    position: relative;
    /* Thin uniform bezel matching real iPad Pro proportions */
    padding: 16px 18px;
    border-radius: 26px;
    /* Space Gray: very dark matte surface */
    background: #1c1c1e;
    /* Polished aluminum chamfer edge (outer) + realistic depth */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0 0 2.5px rgba(8, 8, 10, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 12px 36px rgba(0, 0, 0, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Camera dot — top bezel, centered (landscape orientation) */
.ipad-camera {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0e0e10;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* Volume buttons — right short edge (in landscape = portrait bottom) */
.ipad-btn-power {
    position: absolute;
    right: -2px;
    top: 56px;
    width: 2px;
    height: 32px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #1a1a1c, #2a2a2c);
}

.ipad-btn-vol-up {
    position: absolute;
    top: -2px;
    right: 110px;
    width: 38px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #2a2a2c, #1a1a1c);
}

.ipad-btn-vol-dn {
    position: absolute;
    top: -2px;
    right: 60px;
    width: 38px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #2a2a2c, #1a1a1c);
}

/* Speaker grilles — left and right short bezels */
.ipad-speaker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 3px;
}

.ipad-speaker::before,
.ipad-speaker::after {
    content: '';
    display: block;
    width: 2px;
    height: 18px;
    border-radius: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 0,
        rgba(0, 0, 0, 0.85) 2px,
        rgba(255, 255, 255, 0.04) 2px,
        rgba(255, 255, 255, 0.04) 4px
    );
}

.ipad-speaker-l { left: 5px; }
.ipad-speaker-r { right: 5px; }

/* Screen — proper 4:3 landscape aspect ratio */
.ipad-screen {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background: #06101a;
    aspect-ratio: 4 / 3;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Subtle screen glass glare */
.ipad-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background: linear-gradient(
        128deg,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 38%,
        transparent 65%,
        rgba(255, 255, 255, 0.015) 100%
    );
    border-radius: inherit;
}

/* ============================================
   Dashboard App UI  —  Vision UI dark style
   ============================================ */

.dash-app {
    display: flex;
    height: 100%;
    font-size: 10px;
    line-height: 1.4;
}

/* Sidebar */
.dash-sidebar {
    width: 82px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 12px;
    background: linear-gradient(180deg, #050d1e 0%, #071525 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-sidebar-logo {
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.dash-sidebar-logo svg { width: 100%; height: 100%; }

.dash-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 0 8px;
}

.dash-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px;
    border-radius: 10px;
    cursor: default;
}

.dash-nav-item svg {
    width: 17px;
    height: 17px;
    color: rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}

.dash-nav-item span {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.28);
    font-weight: 500;
    text-align: center;
}

.dash-nav-active { background: rgba(160, 231, 229, 0.12); }
.dash-nav-active svg { color: #a0e7e5; }
.dash-nav-active span { color: #a0e7e5; }

.dash-sidebar-anon {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dash-sidebar-anon svg { width: 14px; height: 14px; }

.dash-sidebar-anon span {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
}

/* Main area — dark navy (Vision UI style) */
.dash-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 11px 9px;
    background: linear-gradient(160deg, #060d20 0%, #091525 60%, #071e2a 100%);
    overflow: hidden;
}

/* Header */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.dash-company-name {
    margin: 0 0 1px;
    font-size: 7.5px;
    font-weight: 700;
    color: #a0e7e5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-date {
    margin: 0;
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.dash-header-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dash-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(42, 157, 143, 0.12);
    border: 1px solid rgba(42, 157, 143, 0.3);
    font-size: 8px;
    font-weight: 700;
    color: #a0e7e5;
}

.dash-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2a9d8f;
    box-shadow: 0 0 8px rgba(42, 157, 143, 0.9);
    animation: dashLivePulse 1.6s ease-in-out infinite;
}

@keyframes dashLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.dash-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a9d8f, #a0e7e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

/* KPI Strip — Vision UI card style */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex-shrink: 0;
}

.dash-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dash-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dash-kpi-label {
    margin: 0;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.dash-kpi-val {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin: 2px 0;
}

.dash-kpi-trend {
    font-size: 7.5px;
    font-weight: 600;
    color: #22c55e;
}

.dash-kpi-sub {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.35);
}

.dash-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.dash-kpi-icon svg {
    width: 15px;
    height: 15px;
    color: white;
    flex-shrink: 0;
}

/* Body (main charts area) */
.dash-body {
    display: grid;
    grid-template-columns: 1fr 175px;
    gap: 7px;
    flex: 1;
    min-height: 0;
}

/* Glass card base */
.dash-glass-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card head */
.dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.dash-card-title {
    margin: 0 0 1px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.04em;
}

.dash-card-sub {
    margin: 0;
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.35);
}

.dash-chart-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 7.5px;
    font-weight: 700;
    color: #22c55e;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-chart-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

/* Area chart panel */
.dash-chart-card {
    gap: 0;
}

.dash-area-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.dash-area-svg {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: block;
    overflow: visible;
}

.dash-axis-labels {
    display: flex;
    justify-content: space-between;
    padding: 3px 0 0;
    flex-shrink: 0;
}

.dash-axis-labels span {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.dash-chart-note {
    margin: 5px 0 0;
    font-size: 7px;
    color: rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}

/* Right column */
.dash-right-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
}

/* SDG detail card */
.dash-sdg-detail {
    flex: 0 0 auto;
}

.dash-sdg-pct {
    font-size: 8.5px;
    color: #a0e7e5;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-sdg-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dash-sdg-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-sdg-badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.5px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dash-sdg-bar-wrap {
    flex: 1;
    min-width: 0;
}

.dash-sdg-bar-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.dash-sdg-bar-label-row span {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.dash-sdg-bar-label-row b {
    font-size: 7px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

.dash-sdg-rail {
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.dash-sdg-fill {
    height: 100%;
    border-radius: 99px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* Mission ring card */
.dash-mission-ring-card {
    flex: 1;
    min-height: 0;
}

.dash-active-badge {
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(42, 157, 143, 0.14);
    border: 1px solid rgba(42, 157, 143, 0.3);
    font-size: 7px;
    font-weight: 700;
    color: #a0e7e5;
    flex-shrink: 0;
}

.dash-ring-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.dash-ring-wrap {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.dash-ring-wrap svg { width: 100%; height: 100%; }

.dash-ring-info {
    flex: 1;
    min-width: 0;
}

.dash-mission-name {
    margin: 0 0 3px;
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.25;
}

.dash-mission-count {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #a0e7e5;
    margin-bottom: 5px;
}

.dash-mission-avatars {
    display: flex;
    align-items: center;
}

.dash-mission-avatars span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(6, 13, 32, 0.9);
    margin-right: -4px;
    background: linear-gradient(135deg, #e8f8f7, #a0e7e5);
}

.dash-mission-avatars span:nth-child(2) { background: linear-gradient(135deg, #fef3e2, #7dd3d0); }
.dash-mission-avatars span:nth-child(3) { background: linear-gradient(135deg, #e8f4ff, #5bc4c1); }
.dash-mission-avatars span:nth-child(4) { background: linear-gradient(135deg, #f0f0ff, #2a9d8f); }

/* Mini activity feed */
.dash-mini-feed {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 7px;
    flex: 1;
    min-height: 0;
}

.dash-mini-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.dash-mini-star {
    font-size: 9px;
    color: #a0e7e5;
    flex-shrink: 0;
}

.dash-mini-item > span {
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-mini-item > em {
    font-size: 7px;
    color: rgba(255, 255, 255, 0.3);
    font-style: normal;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Celebration effect ---- */
.org-celebration {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.org-celebration span {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a0e7e5;
    opacity: 0;
    box-shadow: 0 0 18px rgba(160, 231, 229, 0.8);
}

.org-celebration span:nth-child(1) { left: 24%; top: 12%; }
.org-celebration span:nth-child(2) { left: 70%; top: 10%; background: #ffffff; }
.org-celebration span:nth-child(3) { left: 86%; top: 46%; }
.org-celebration span:nth-child(4) { left: 18%; top: 64%; background: #ffffff; }
.org-celebration span:nth-child(5) { left: 58%; top: 78%; }

.organizations-visual.dashboard-celebrate .org-celebration span {
    animation: orgSpark 1.15s ease-out;
}

.organizations-visual.dashboard-celebrate .org-celebration span:nth-child(2) { animation-delay: 0.08s; }
.organizations-visual.dashboard-celebrate .org-celebration span:nth-child(3) { animation-delay: 0.16s; }
.organizations-visual.dashboard-celebrate .org-celebration span:nth-child(4) { animation-delay: 0.24s; }
.organizations-visual.dashboard-celebrate .org-celebration span:nth-child(5) { animation-delay: 0.32s; }

@keyframes orgDashboardGlow {
    0% { opacity: 0; }
    24% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes orgSpark {
    0% { opacity: 0; transform: translateY(16px) scale(0.4); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-42px) scale(1.5); }
}

@keyframes orgStarTwinkle {
    0%, 100% { opacity: 0.55; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* ---- Responsive ---- */
@media (prefers-reduced-motion: reduce) {
    .dash-live-dot,
    .dash-sparkle,
    .organizations-visual.dashboard-celebrate .org-celebration span {
        animation: none;
    }
}

@media (max-width: 860px) {
    .organizations-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .org-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .dash-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-body {
        grid-template-columns: 1fr;
    }

    .dash-right-col {
        display: none;
    }
}

@media (max-width: 640px) {
    .organizations {
        padding: clamp(56px, 14vw, 96px) 0;
    }

    .org-benefit {
        align-items: flex-start;
    }

    .org-benefit:hover {
        transform: none;
    }

    .org-benefits {
        grid-template-columns: 1fr;
    }

    .ipad-frame {
        padding: 10px 12px;
        border-radius: 20px;
    }

    .ipad-camera {
        top: 4px;
        width: 5px;
        height: 5px;
    }

    .dash-sidebar {
        width: 52px;
    }

    .dash-nav-item span,
    .dash-sidebar-anon span {
        display: none;
    }

    .dash-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   CTA Section (Jeton Style)
   ========================================== */

/* ==========================================
   Join Section — waitlist (Brevo) + contribution (Stripe)
   ========================================== */

.join {
    padding: var(--section-padding) 0;
    padding-top: calc(var(--section-padding) + 20px); /* slight extra for the transparent fade zone */
    margin-top: -80px; /* pull up into testimonials to hide the seam */
    position: relative;
    overflow: hidden;
    /* Starts transparent so testimonials gradient shows through, then fades into dark teal → navy */
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(25, 83, 95, 0.4) 40px,
        #19535f 80px,
        #174e5c calc(80px + 8%),
        #154958 calc(80px + 16%),
        #134354 calc(80px + 26%),
        #103b4e calc(80px + 38%),
        #0d3247 calc(80px + 52%),
        #0b2b41 calc(80px + 66%),
        #0a2439 calc(80px + 80%),
        #091e33 calc(80px + 90%),
        #0a1929 100%);
    color: var(--text-inverse);
}

/* Ambient teal glows — atmospheric depth like the Hero / How It Works */
.join::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 50% 38%,
            rgba(125, 211, 208, 0.22) 0%,
            rgba(91, 196, 193, 0.08) 45%,
            transparent 75%),
        radial-gradient(ellipse 50% 40% at 12% 82%,
            rgba(91, 196, 193, 0.10) 0%,
            transparent 70%),
        radial-gradient(ellipse 50% 40% at 88% 18%,
            rgba(160, 231, 229, 0.10) 0%,
            transparent 70%);
}

/* Subtle film grain for tactile depth */
.join::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.join > .container {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
}

/* ── Header — left-aligned, matching .t-header / .how-eyebrow pattern (dark theme) ── */
.join-header {
    scroll-margin-top: 48px; /* breathing room between viewport top and the eyebrow when scrolled to */
    margin-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
}

.join-eyebrow {
    margin: 0;
    font-size: clamp(0.95rem, 1vw, 1.12rem);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary-light);
    transition: color 0.2s ease;
}

.join-title {
    margin: 0;
    font-size: var(--text-4xl);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-weight: var(--weight-bold);
}

.join-lede {
    margin: 0;
    font-size: var(--text-lg);
    color: rgba(226, 242, 245, 0.72);
    line-height: 1.55;
    max-width: 56ch;
}

/* ── Two-option grid (Brevo waitlist + Stripe contribution) ───────── */
.join-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 28px);
    align-items: stretch;
}

/* ── Each option card (dark glass) ────────────────────────────────── */
/* Waitlist card — quieter dark glass (secondary visual weight) */
.join-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    background: #0E2238;
    border-radius: var(--radius-2xl);
    padding: clamp(24px, 3.5vw, 40px);
    border: 1px solid rgba(125, 211, 208, 0.12);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: box-shadow var(--transition-slow), border-color var(--transition-base);
}

.join-option:hover {
    border-color: rgba(125, 211, 208, 0.22);
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Donate card — solid bright surface (no backdrop-filter, prevents Chrome paint
   artifacts when child tier cards animate on hover) */
.join-option--donate {
    background: #C2DDDF;
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(77, 154, 150, 0.1),
        0 24px 60px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-base);
}

.join-option--donate:hover {
    transform: translate3d(0, -4px, 0);
    background: #C9E2E4;
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(77, 154, 150, 0.14),
        0 28px 70px rgba(0, 0, 0, 0.35);
}

/* ── Card head: tag, title, description ───────────────────────────── */
.join-option-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.join-option-title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: var(--weight-bold);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.25;
}

.join-option-desc {
    margin: 0;
    font-size: var(--text-base);
    color: rgba(226, 242, 245, 0.7);
    line-height: 1.5;
}

/* Donate card text — dark on the bright #C7DEE0 background, mirrors t-card text colours */
.join-option--donate .join-option-title {
    color: rgba(10, 40, 50, 0.92);
}

.join-option--donate .join-option-desc {
    color: rgba(30, 65, 75, 0.75);
}

.join-option--donate .join-embed-placeholder {
    border-color: rgba(77, 154, 150, 0.3);
    color: rgba(10, 40, 50, 0.7);
}

/* ── Embed wrappers (Brevo + Stripe) ──────────────────────────────── */
.join-brevo,
.join-stripe {
    width: 100%;
}

/* Brevo form pushes its submit button to the bottom of the card so the
   waitlist CTA aligns with the donation tier grid in the resting state. */
.join-brevo {
    margin-top: auto;
}

.join-stripe {
    min-height: 0;
}

/* Donation tiers — four Stripe Payment Link CTAs */
.join-donate-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 16px);
    width: 100%;
}

.join-donate-tier,
a.join-donate-tier {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: #E5EFEF;
    border: 1px solid rgba(77, 154, 150, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.join-donate-tier:hover,
a.join-donate-tier:hover {
    background: #EEF6F6;
    border-color: rgba(77, 154, 150, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 4px 14px rgba(44, 62, 80, 0.08);
}

/* €25 — preferred tier, clear turquoise ring with soft halo */
.join-donate-tier--highlight,
a.join-donate-tier--highlight {
    border: 2px solid var(--primary-dark);
    box-shadow:
        0 0 0 4px rgba(91, 196, 193, 0.35),
        0 0 18px 2px rgba(91, 196, 193, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.join-donate-tier--highlight:hover,
a.join-donate-tier--highlight:hover {
    border-color: var(--primary-dark);
    box-shadow:
        0 0 0 4px rgba(91, 196, 193, 0.5),
        0 0 22px 3px rgba(91, 196, 193, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 14px rgba(44, 62, 80, 0.12);
}

/* Custom tier — slightly softer edge */
.join-donate-tier--custom {
    border-color: rgba(77, 154, 150, 0.28);
}

.join-donate-tier--custom:hover {
    border-color: rgba(77, 154, 150, 0.5);
}

a.join-donate-tier:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.join-donate-tier__amount {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: rgba(10, 55, 60, 0.92);
    line-height: 1.1;
}

.join-donate-tier__amount--custom {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: rgba(10, 55, 60, 0.92);
    text-transform: none;
}

.join-donate-tier__title {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    font-weight: var(--weight-bold);
    color: rgba(10, 40, 50, 0.95);
    line-height: 1.25;
}

.join-donate-tier__desc {
    margin: 0;
    flex: 1 1 auto;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgba(30, 65, 75, 0.78);
}

@media (max-width: 700px) {
    .join-donate-tiers {
        grid-template-columns: 1fr;
    }
}

/* Stripe iframe (when using Payment Link iframe option) */
.join-stripe-iframe {
    width: 100%;
    min-height: 380px;
    border: 0;
    border-radius: var(--radius-lg);
    background: rgba(7, 18, 32, 0.35);
    display: block;
}

/* Stripe Buy Button host element — center it and give breathing room */
.join-stripe stripe-buy-button {
    display: block;
    margin: 0 auto;
}

/* ── Brevo embed overrides — strip inline styles, apply Better.ette dark tokens ── */

/* Wipe Brevo's white container backgrounds */
.join-brevo .sib-form,
.join-brevo {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.join-brevo #sib-form-container,
.join-brevo .sib-form-container,
.join-brevo #sib-container,
.join-brevo .sib-container--large,
.join-brevo .sib-container--vertical {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.join-brevo #sib-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* Form spacing */
.join-brevo .sib-form-block,
.join-brevo .sib-input {
    padding: 0 !important;
    margin-bottom: var(--space-4) !important;
    background: transparent !important;
}

/* Labels */
.join-brevo .entry__label {
    color: rgba(226, 242, 245, 0.85) !important;
    font-family: inherit !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    margin-bottom: var(--space-2) !important;
}

/* Inputs */
.join-brevo input[type="text"],
.join-brevo input[type="email"],
.join-brevo input[type="tel"],
.join-brevo input[type="url"],
.join-brevo input[type="password"],
.join-brevo input[type="number"],
.join-brevo select,
.join-brevo textarea {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid rgba(160, 231, 229, 0.28) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--text-base) !important;
    font-family: inherit !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(7, 18, 32, 0.55) !important;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

.join-brevo input:focus,
.join-brevo select:focus,
.join-brevo textarea:focus {
    border-color: var(--primary) !important;
    background: rgba(7, 18, 32, 0.75) !important;
    box-shadow: 0 0 0 4px rgba(125, 211, 208, 0.18) !important;
}

.join-brevo input::placeholder,
.join-brevo textarea::placeholder {
    color: rgba(226, 242, 245, 0.40) !important;
    font-family: inherit !important;
}

/* Override browser autofill yellow — the background cannot be set directly,
   so a large inset box-shadow paints over it with our dark field colour. */
.join-brevo input:-webkit-autofill,
.join-brevo input:-webkit-autofill:hover,
.join-brevo input:-webkit-autofill:focus,
.join-brevo input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 999px rgba(7, 18, 32, 0.95) inset !important;
    box-shadow: 0 0 0 999px rgba(7, 18, 32, 0.95) inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    caret-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(160, 231, 229, 0.28) !important;
    transition: background-color 99999s ease !important;
}

/* Hidden honeypot — keep invisible */
.join-brevo .input--hidden {
    display: none !important;
}

/* Hide the native browser checkbox — Brevo's sib-styles.css does this normally,
   but we need to guarantee it given our !important override chain.
   The element stays in the DOM so Brevo's JS can still read its .checked state. */
.join-brevo .input_replaced {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* GDPR checkbox row */
.join-brevo .sib-optin {
    margin-bottom: var(--space-3) !important;
}

.join-brevo .entry__choice label {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
    cursor: pointer !important;
    color: rgba(226, 242, 245, 0.7) !important;
    font-size: var(--text-sm) !important;
    font-family: inherit !important;
    line-height: 1.45 !important;
}

.join-brevo .entry__choice span:not(.checkbox) {
    color: rgba(226, 242, 245, 0.7) !important;
    font-family: inherit !important;
    font-size: var(--text-sm) !important;
}

.join-brevo .entry__choice a {
    color: var(--primary-light) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ── Custom animated checkbox ─────────────────────────────── */
/* Keep Brevo's .checkbox classes on the element so its JS stays happy;
   we suppress the default ::after tick and replace it with an SVG stroke animation. */
.join-brevo .checkbox.be-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 1.5px solid rgba(160, 231, 229, 0.4) !important;
    border-radius: 6px !important;
    background: rgba(7, 18, 32, 0.55) !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;
    cursor: pointer !important;
}

/* Hide Brevo's default ::after tick — we use an SVG instead */
.join-brevo .checkbox.be-checkbox::after {
    display: none !important;
}

.join-brevo .input_replaced:checked + .checkbox.be-checkbox {
    border-color: rgba(125, 211, 208, 0.9) !important;
    background: rgba(125, 211, 208, 0.14) !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 208, 0.18) !important;
}

/* Validation error pulse — added/removed by main.js */
.join-brevo .be-checkbox--error {
    border-color: rgba(252, 165, 165, 0.85) !important;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.22) !important;
    animation: be-checkbox-shake 0.35s ease !important;
}

.join-brevo .entry__field.be-field--error {
    animation: be-checkbox-shake 0.35s ease !important;
}

@keyframes be-checkbox-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-4px); }
    50%  { transform: translateX(4px); }
    75%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

.join-brevo .be-checkbox-tick {
    width: 12px !important;
    height: 12px !important;
    stroke: var(--primary-light, #7dd3d0) !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 22 !important;
    stroke-dashoffset: 22 !important;
    transition: stroke-dashoffset 0.32s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.join-brevo .input_replaced:checked + .checkbox.be-checkbox .be-checkbox-tick {
    stroke-dashoffset: 0 !important;
}

/* Field-level error text */
.join-brevo .entry__error {
    color: #fca5a5 !important;
    background: rgba(127, 29, 29, 0.35) !important;
    border-color: rgba(252, 165, 165, 0.35) !important;
    border-radius: var(--radius-md) !important;
    font-family: inherit !important;
    font-size: var(--text-sm) !important;
    padding: var(--space-2) var(--space-3) !important;
    margin-top: var(--space-1) !important;
}

.join-brevo .entry__error:empty {
    display: none !important;
}

.join-brevo .entry__error:not(:empty) {
    display: block !important;
}

/* Success / error banner panels */
.join-brevo .sib-form-message-panel {
    max-width: 100% !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
    font-family: inherit !important;
    font-size: var(--text-sm) !important;
}

.join-brevo #error-message {
    display: none;
    background-color: rgba(127, 29, 29, 0.35) !important;
    border-color: rgba(252, 165, 165, 0.35) !important;
    color: #fca5a5 !important;
}

.join-brevo #error-message.sib-form-message-panel--active {
    display: block;
}

/* ── Success panel (custom layout, below the button) ─────── */
.join-brevo #success-message {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.join-brevo .be-success-panel {
    display: none;
}

.join-brevo .be-success-panel.sib-form-message-panel--active {
    display: block;
    animation: be-success-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes be-success-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.join-brevo .be-success-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5);
    background: rgba(6, 78, 59, 0.25);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--radius-xl);
    margin-top: var(--space-4);
}

.join-brevo .be-success-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: #34d399;
}

.join-brevo .be-success-circle {
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
    animation: be-circle-draw 0.55s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.join-brevo .be-success-check {
    stroke-dasharray: 38;
    stroke-dashoffset: 38;
    animation: be-check-draw 0.4s 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes be-circle-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes be-check-draw {
    to { stroke-dashoffset: 0; }
}

.join-brevo .be-success-text strong {
    display: block;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: #6ee7b7;
    margin-bottom: var(--space-1);
}

.join-brevo .be-success-text p {
    font-size: var(--text-sm);
    color: rgba(226, 242, 245, 0.72);
    line-height: 1.55;
    margin: 0;
}

.join-brevo .sib-form-message-panel__inner-text,
.join-brevo .sib-form-message-panel__text {
    color: inherit !important;
    font-family: inherit !important;
}

/* Brevo compliance / declaration block */
.join-brevo .sib-form__declaration {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
    border-top: 1px solid rgba(160, 231, 229, 0.12) !important;
    margin-top: var(--space-4) !important;
    padding-top: var(--space-4) !important;
    background: transparent !important;
}

.join-brevo .declaration-block-icon {
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
}

.join-brevo .sib-form__declaration p,
.join-brevo .sib-form__declaration div {
    color: rgba(226, 242, 245, 0.45) !important;
    font-size: 11px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    background: transparent !important;
    margin: 0 !important;
}

.join-brevo .sib-form__declaration a {
    color: rgba(160, 231, 229, 0.7) !important;
    text-decoration: underline !important;
}

/* Push the submit row to the bottom of its flex parent for even vertical rhythm */
.join-brevo .sib-form-block:last-of-type {
    margin-top: auto !important;
    padding-top: var(--space-3) !important;
}

/* Submit button */
.join-brevo .sib-form-block__button,
.join-brevo button[type="submit"] {
    width: 100% !important;
    padding: var(--space-4) var(--space-6) !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--bg-dark) !important;
    border: 1px solid rgba(160, 231, 229, 0.5) !important;
    border-radius: var(--radius-lg) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-bold) !important;
    font-family: inherit !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
    box-shadow: 0 4px 18px rgba(125, 211, 208, 0.32) !important;
    text-align: center !important;
    margin-top: var(--space-2) !important;
}

.join-brevo .sib-form-block__button:hover,
.join-brevo button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;
    box-shadow: 0 10px 28px rgba(125, 211, 208, 0.45) !important;
}

/* ── Submit button loader spinner ─────────────────────────── */
/* Brevo shows this SVG while the form is submitting;
   constrain it so it doesn't explode to full button width. */
.join-brevo .sib-form-block__button .progress-indicator__icon {
    display: none !important;          /* hidden by default (class sib-hide-loader-icon) */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    fill: var(--bg-dark) !important;
    flex-shrink: 0 !important;
    animation: be-spin 0.8s linear infinite !important;
}

/* Brevo removes sib-hide-loader-icon to reveal the spinner */
.join-brevo .sib-form-block__button .progress-indicator__icon:not(.sib-hide-loader-icon) {
    display: inline-block !important;
}

@keyframes be-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Shared placeholder shown until embeds are pasted in ──────────── */
.join-embed-placeholder {
    margin: 0;
    padding: var(--space-6) var(--space-5);
    border: 2px dashed rgba(160, 231, 229, 0.35);
    border-radius: var(--radius-lg);
    background: rgba(7, 18, 32, 0.35);
    color: rgba(226, 242, 245, 0.7);
    font-size: var(--text-sm);
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.join-embed-placeholder strong {
    color: var(--primary-light);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

.join-option--donate .join-embed-placeholder {
    border-color: rgba(125, 211, 208, 0.18);
}

.join-option--donate .join-embed-placeholder strong {
    color: rgba(160, 231, 229, 0.8);
}

.join-embed-placeholder code {
    background: rgba(125, 211, 208, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.92em;
    color: var(--primary-light);
}

.join-option--donate .join-embed-placeholder code {
    background: rgba(125, 211, 208, 0.1);
    color: rgba(160, 231, 229, 0.75);
}

/* ── Mobile: stack the two options, parity with Testimonials ──────── */
@media (max-width: 900px) {
    .join {
        padding: clamp(56px, 14vw, 96px) 0;
        padding-top: calc(clamp(56px, 14vw, 96px) + 20px);
    }

    .join::after {
        display: none;
    }

    .join-header {
        align-items: center;
        text-align: center;
        margin-bottom: var(--space-8);
        gap: var(--space-3);
    }

    .join-eyebrow {
        font-size: 0.78rem;
    }

    .join-title {
        font-size: clamp(1.55rem, 6.4vw, 2rem);
        line-height: 1.18;
    }

    .join-lede {
        font-size: var(--text-base);
    }

    .join-options {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .join-option:not(.join-option--donate) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(15, 35, 55, 0.85);
    }

    .join-option:hover {
        transform: none;
    }
}

/* ==========================================
   Footer
   ========================================== */

.footer {
    margin-top: -60px; /* pull up into join to hide the seam */
    padding-top: calc(var(--space-16) + 60px);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(10, 25, 41, 0.5) 30px,
        #0a1929 60px,
        #081424 calc(60px + 35%),
        #050d18 calc(60px + 70%),
        #000 100%);
    color: var(--text-inverse);
    padding-bottom: var(--space-8);
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(var(--space-8), 4vw, var(--space-12));
    margin-bottom: var(--space-12);
    align-items: start;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10) var(--space-8);
    }

    .footer-brand {
        grid-column: 1 / -1;
        margin-bottom: var(--space-4);
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    height: 56px;
    width: auto;
    margin-bottom: var(--space-4);
    display: block;
}

.footer-tagline {
    color: rgba(226, 242, 245, 0.7);
    font-size: var(--text-base);
    margin: 0 0 var(--space-6);
    line-height: 1.5;
}

@media (max-width: 520px) {
    .footer-brand {
        max-width: none;
    }
    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

.social-links {
    display: flex;
    gap: var(--space-3);
}

@media (max-width: 520px) {
    .social-links {
        justify-content: center;
    }
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(160, 231, 229, 0.08);
    border: 1px solid rgba(160, 231, 229, 0.18);
    color: rgba(226, 242, 245, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.social-link:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-color: rgba(160, 231, 229, 0.6);
    color: var(--bg-dark);
    transform: translateY(-3px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.footer-column h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 var(--space-5);
    color: var(--primary-light);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-3);
}

.footer-links a {
    color: rgba(226, 242, 245, 0.78);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary-light);
}

.footer-bottom {
    padding-top: var(--space-8);
    border-top: 1px solid rgba(160, 231, 229, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

.footer-bottom p {
    font-size: var(--text-sm);
    color: rgba(226, 242, 245, 0.55);
    margin: 0;
}

.footer-copyright {
    font-weight: var(--weight-medium);
}

/* ==========================================
   Legal Pages — Terms of Use & Privacy Policy
   ========================================== */

.legal-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) clamp(1.5rem, 5vw, 6rem);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    border-bottom: 1px solid rgba(91, 196, 193, 0.14);
}

.legal-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.legal-logo {
    height: 36px;
    width: auto;
    display: block;
}

.legal-back {
    color: var(--primary-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color var(--transition-base);
}

.legal-back:hover {
    color: var(--primary);
}

.legal-page {
    padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 128px);
    background: linear-gradient(180deg,
        #091626 0%,
        #0d1f35 58%,
        #132946 100%);
    position: relative;
    overflow: hidden;
}

.legal-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 100% 0%,
            rgba(160, 231, 229, 0.18) 0%,
            transparent 70%),
        radial-gradient(ellipse 40% 30% at 0% 100%,
            rgba(125, 211, 208, 0.10) 0%,
            transparent 70%);
}

.legal-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) clamp(1.5rem, 5vw, 2.5rem);
    background: rgba(9, 22, 38, 0.62);
    border: 1px solid rgba(160, 231, 229, 0.14);
    border-radius: 24px;
    color: rgba(240, 248, 255, 0.94);
    font-size: 1.05rem;
    line-height: 1.7;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.legal-header {
    margin-bottom: clamp(32px, 5vw, 56px);
    text-align: left;
    border-bottom: 1px solid rgba(91, 196, 193, 0.18);
    padding-bottom: clamp(20px, 3vw, 32px);
}

.legal-eyebrow {
    margin: 0 0 var(--space-3);
    font-size: clamp(0.95rem, 1vw, 1.12rem);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary-dark);
}

.legal-content h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgba(248, 253, 255, 0.98);
}

.legal-meta {
    margin: 0;
    font-size: var(--text-sm);
    color: rgba(213, 229, 240, 0.82);
}

.legal-toc {
    margin: 0 0 clamp(40px, 6vw, 64px);
    padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 32px);
    background: rgba(9, 22, 38, 0.72);
    border: 1px solid rgba(125, 211, 208, 0.28);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(3, 10, 20, 0.34);
}

.legal-toc h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(238, 248, 255, 0.95);
}

.legal-toc ol,
.legal-toc ul {
    margin: 0;
    padding-left: 1.4em;
    columns: 2;
    column-gap: var(--space-8);
}

.legal-toc li {
    margin-bottom: var(--space-2);
    break-inside: avoid;
    font-size: var(--text-sm);
    color: rgba(204, 228, 241, 0.88);
}

.legal-toc a {
    color: rgba(141, 205, 214, 0.9);
    text-decoration: none;
    transition: color var(--transition-base);
}

.legal-toc a:hover {
    color: rgba(186, 226, 233, 0.95);
}

.legal-content section {
    margin-bottom: clamp(40px, 5vw, 56px);
    scroll-margin-top: 88px;
}

.legal-content h2 {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: rgba(244, 251, 255, 0.97);
}

.legal-content h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.3;
    color: rgba(235, 246, 252, 0.96);
    font-weight: var(--weight-semibold);
}

.legal-content p {
    margin: 0 0 var(--space-4);
    color: rgba(220, 235, 245, 0.9);
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--space-5);
    padding-left: 1.4em;
}

.legal-content li {
    margin-bottom: var(--space-2);
    color: rgba(220, 235, 245, 0.9);
}

.legal-content li::marker {
    color: var(--primary-dark);
}

.legal-content a {
    color: rgba(135, 201, 210, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(135, 201, 210, 0.45);
    transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

.legal-content a:hover {
    color: rgba(180, 224, 232, 0.96);
    text-decoration-color: rgba(180, 224, 232, 0.96);
}

.legal-content strong {
    color: rgba(248, 253, 255, 0.98);
    font-weight: var(--weight-semibold);
}

.legal-content em {
    color: rgba(241, 250, 255, 0.95);
}

.legal-content address {
    font-style: normal;
    margin: var(--space-2) 0 var(--space-4);
    color: rgba(220, 235, 245, 0.9);
}

@media (max-width: 720px) {
    .legal-toc ol,
    .legal-toc ul {
        columns: 1;
    }

    .legal-back {
        font-size: 0.85rem;
    }

    .legal-content {
        font-size: 1rem;
    }
}

/* ==========================================
   Animations & Scroll Effects
   ========================================== */

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .fade-in, .fade-in-left, .fade-in-right {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================
   Cookie Consent Banner
   ========================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(7, 18, 32, 0.95);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid rgba(125, 211, 208, 0.25);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
    animation: cookieSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cookie-banner--hidden {
    display: none;
}

.cookie-banner--dismissing {
    animation: cookieSlideDown 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes cookieSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) clamp(1.5rem, 5vw, 6rem);
    position: relative;
}

.cookie-banner-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--text-sm);
    color: rgba(226, 242, 245, 0.8);
    line-height: 1.55;
}

.cookie-banner-text a {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-text a:hover {
    color: var(--primary);
}

.cookie-banner-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

.cookie-btn {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--transition-base), background var(--transition-base),
        border-color var(--transition-base), box-shadow var(--transition-base);
    white-space: nowrap;
    line-height: 1.4;
}

.cookie-btn--accept {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--bg-dark);
    border: 1px solid rgba(160, 231, 229, 0.5);
    box-shadow: 0 4px 14px rgba(125, 211, 208, 0.3);
}

.cookie-btn--accept:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    box-shadow: 0 6px 20px rgba(125, 211, 208, 0.4);
}

.cookie-btn--decline {
    background: transparent;
    color: rgba(226, 242, 245, 0.8);
    border: 1px solid rgba(160, 231, 229, 0.3);
}

.cookie-btn--decline:hover {
    border-color: rgba(160, 231, 229, 0.5);
    color: rgba(226, 242, 245, 1);
}

.cookie-banner-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    background: transparent;
    border: none;
    color: rgba(226, 242, 245, 0.5);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--space-1);
    transition: color var(--transition-base);
}

.cookie-banner-close:hover {
    color: rgba(226, 242, 245, 0.9);
}

@media (max-width: 900px) {
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding-right: calc(clamp(1.5rem, 5vw, 6rem) + 28px);
    }

    .cookie-banner-actions {
        flex-direction: row;
        gap: var(--space-2);
    }

    .cookie-btn {
        flex: 1 1 0;
        text-align: center;
    }
}