/* ==========================================================================
   Dormu Landing Page - Modern & Stunning Design
   World-class animations and visual effects
   ========================================================================== */

/* Color Variables - Enhanced with gradient support */
:root {
    /* Primary Dark Backgrounds */
    --navy-primary-bg: #0b1b2b;
    --deep-navy-gradient: #112d46;
    --soft-navy-card: #0f2439;

    /* Accent & Interactive Elements */
    --teal-accent: #4CD4B0;
    --teal-glow: rgba(76, 212, 176, 0.5);
    --sky-blue-button: #3BAF96;
    --gold-highlight: #fca311;
    --purple-accent: #8b5cf6;

    /* Text & Icons */
    --light-text: #E0E0E0;
    --dark-text: #1E1E1E;
    --error-red: #CF6679;

    /* Additional utilities */
    --white: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.3);
    /* Opaque: this covers the page (mobile menu), it does not tint it. Was
       0.95 alpha over a backdrop-filter; without the blur the remaining 5%
       left the feature copy behind it legible on a dark background. */
    --overlay-color: #0b1b2b;
    --glass-bg: rgba(15, 36, 57, 0.7);
    --glass-border: rgba(76, 212, 176, 0.2);

    /* Animation timing */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--navy-primary-bg);
    color: var(--light-text);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal) var(--ease-out-expo);
}

/* ==========================================================================
   Custom Cursor (Desktop)
   ========================================================================== */

.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--teal-accent);
    border-radius: 50%;
    /* left/top are never written now -- main.js positions this with a
       translate3d, which composites instead of forcing a layout every frame.
       The origin is pinned here so the transform is a pure offset. */
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
    /* NOT transform. main.js rewrites transform 60 times a second, and a
       transition on it gives every one of those writes its own 0.15s easing
       curve -- the lag this animation had, multiplied. Only the properties the
       hover state changes are transitioned. */
    transition: opacity 0.15s ease-out, background 0.15s ease-out;
    transform: translate3d(0, 0, 0) translate(-50%, -50%);
    will-change: transform;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    background: rgba(76, 212, 176, 0.1);
    border-radius: 50%;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9998;
    /* Was `transform 0.3s ease-out` -- 300ms of easing stacked on top of the
       per-frame interpolation. width/height keep theirs: those change once on
       hover, not every frame. */
    transition: width 0.3s ease, height 0.3s ease;
    transform: translate3d(0, 0, 0) translate(-50%, -50%);
    will-change: transform;
}

/* The hover state can no longer set `transform`: main.js owns that property
   now and overwrites it every frame, so a scale here would be discarded within
   16ms. The same emphasis comes from the border and background instead, which
   nothing else is writing. */
.cursor.hover {
    background: rgba(76, 212, 176, 0.2);
    border-width: 3px;
}

/* ==========================================================================
   Animated Background
   ========================================================================== */

.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy-primary-bg) 0%, var(--deep-navy-gradient) 50%, var(--soft-navy-card) 100%);
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    /* No filter and no animation. These were blur(80px) over ~646,000px
       between them, animated -- a full-area CPU repaint every frame on any
       machine without hardware acceleration. Softness now comes from the
       radial-gradients below, which fade to transparent and cost nothing. */
    opacity: 0.5;
}

.bg-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--teal-accent) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation-delay: 0s;
}

.bg-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--sky-blue-button) 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    animation-delay: -7s;
}

.bg-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--teal-accent) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -50px) scale(1.1);
    }
    50% {
        transform: translate(-30px, 30px) scale(0.9);
    }
    75% {
        transform: translate(30px, 50px) scale(1.05);
    }
}

/* Floating particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--teal-accent);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Glass Morphism Card
   ========================================================================== */

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Navigation - Glassmorphism Style
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: all var(--transition-slow) var(--ease-out-expo);
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* OPAQUE, for the same reason as .step-number below. This was frosted
       glass: 80-85% navy plus a backdrop-filter that blurred the page
       scrolling underneath. With the backdrop-filter gone the remaining
       15-20% let content through unblurred, so the feature-card headings
       ("Smart Fall Detection", ...) were legible straight through the bar.
       Same colour, just no longer see-through. */
    background: #0b1b2b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity var(--transition-slow) var(--ease-out-expo);
}

.navbar.scrolled::before {
    opacity: 1;
}

.navbar.scrolled {
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 2.7rem;
    font-weight: 700;
    transition: transform var(--transition-normal) var(--ease-out-back);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-icon-img {
    height: 48px;
    width: 48px;
    object-fit: cover;
    vertical-align: middle;
    margin: 0 3px;
    border-radius: 50%;
    transition: transform var(--transition-normal) var(--ease-out-back);
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px var(--teal-glow));
    }
}

.logo:hover .logo-icon-img {
    animation-play-state: paused;
    transform: rotate(360deg) scale(1.2);
}

.logo-text {
    color: var(--teal-accent);
    font-weight: 700;
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--light-text);
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal-accent), var(--sky-blue-button));
    transition: width var(--transition-normal) var(--ease-out-expo);
}

.nav-link:hover {
    color: var(--teal-accent);
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 28px;
    height: 3px;
    background: var(--teal-accent);
    border-radius: 3px;
    transition: all var(--transition-normal) var(--ease-out-expo);
    transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-color);
    padding: 6rem 2rem 2rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow) var(--ease-out-expo);
    /*
     * The panel scrolls itself. It is fixed to all four edges, so its height is
     * the viewport, and nine links at 1.5rem with 1rem of padding each are
     * taller than a phone -- Login and Download App sat below the fold with no
     * way to reach them. Opening the menu also sets body { overflow: hidden },
     * so a drag had nothing to scroll anywhere and the browser read it as a
     * text selection instead: the reported "scrolling only highlights things".
     *
     * overscroll-behavior: contain stops a flick at either end of the list
     * chaining through to the page behind.
     */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-menu.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all var(--transition-slow) var(--ease-out-expo);
    transition-delay: 0.1s;
}

.mobile-menu.active .mobile-menu-content {
    transform: translateY(0);
    opacity: 1;
}

.mobile-nav-link {
    color: var(--light-text);
    font-weight: 600;
    font-size: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-normal) var(--ease-out-expo);
}

.mobile-nav-link:hover {
    color: var(--teal-accent);
    padding-left: 1rem;
}

/* ==========================================================================
   Buttons - Modern with Glow Effects
   ========================================================================== */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out-expo);
}

.btn-primary {
    /* Glass effect with visible depth */
    background:
        linear-gradient(135deg,
            rgba(76, 212, 176, 0.9) 0%,
            rgba(46, 125, 163, 0.9) 100%
        );
    color: var(--dark-text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 24px rgba(76, 212, 176, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* Glass highlight on top */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        transparent 100%
    );
    border-radius: 13px 13px 50% 50%;
    pointer-events: none;
}

/* Shine sweep */
.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 60%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-primary:hover {
    transform: translateY(-3px);
    background:
        linear-gradient(135deg,
            rgba(76, 212, 176, 0.95) 0%,
            rgba(46, 125, 163, 0.95) 100%
        );
    box-shadow:
        0 8px 32px rgba(76, 212, 176, 0.5),
        0 0 40px rgba(76, 212, 176, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.btn-primary:hover::after {
    transform: rotate(45deg) translateX(100%);
}

.btn-secondary {
    /* iOS Deep Frosted Glass Button */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.1) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(76, 212, 176, 0.08) 0%,
            rgba(46, 125, 163, 0.05) 100%
        );
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* Glass highlight */
.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    border-radius: 13px 13px 50% 50%;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

/* Subtle animated noise texture for depth */
.btn-secondary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 60%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-secondary:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.15) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(76, 212, 176, 0.12) 0%,
            rgba(46, 125, 163, 0.08) 100%
        );
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover::before {
    opacity: 0.9;
}

.btn-secondary:hover::after {
    transform: rotate(45deg) translateX(100%);
}

.btn-large {
    padding: 1.125rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 14px;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Magnetic button effect - handled via JS */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ==========================================================================
   Hero Section - Stunning Animated
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 4rem;
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Animated mesh gradient */
.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(76, 212, 176, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(46, 125, 163, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 60%);
    animation: gradientShift 15s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
    33% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }
    66% {
        transform: scale(0.95) rotate(-2deg);
        opacity: 0.9;
    }
}

/* Animated grid lines */
.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(76, 212, 176, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 212, 176, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    /* animation removed -- hero-grid: a 3D perspective transform over ~7,300,000px, forever. The static grid stays; only the drift is gone. */
    z-index: -1;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }
    100% {
        transform: perspective(500px) rotateX(60deg) translateY(60px);
    }
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-text {
    position: relative;
}

/* Text reveal animation */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--light-text);
    opacity: 0;
    animation: heroTitleReveal 1s var(--ease-out-expo) forwards;
    animation-delay: 0.3s;
}

/* The blur is dropped from this reveal: animating a filter forces a repaint of
   the element on every frame, and the hero title is one of the largest text
   blocks on the page. Opacity and transform both composite, so the reveal
   still reads the same without costing a repaint per frame. */
@keyframes heroTitleReveal {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.highlight {
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button), var(--purple-accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientText 5s ease infinite;
    position: relative;
}

@keyframes gradientText {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--light-text);
    opacity: 0;
    margin-bottom: 2rem;
    line-height: 1.8;
    animation: heroFadeUp 1s var(--ease-out-expo) forwards;
    animation-delay: 0.5s;
}

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.hero-cta {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease-out-expo) forwards;
    animation-delay: 0.7s;
}

/* Stats with animated counters */
.hero-stats {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease-out-expo) forwards;
    animation-delay: 0.9s;
}

.stat {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-normal) var(--ease-out-expo);
}

.stat:hover {
    transform: translateY(-5px);
    border-color: var(--teal-accent);
    box-shadow: 0 10px 40px rgba(76, 212, 176, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--light-text);
    opacity: 0.7;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Phone mockup with 3D effect */
.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    opacity: 0;
    animation: heroImageReveal 1.2s var(--ease-out-expo) forwards;
    animation-delay: 0.6s;
}

@keyframes heroImageReveal {
    0% {
        opacity: 0;
        transform: translateX(100px) rotateY(-30deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0);
    }
}

.phone-mockup {
    position: relative;
    transform-style: preserve-3d;
    /* animation removed -- phone-mockup: a float over ~213,000px. The mockup stays put. */
}

@keyframes phoneFloat {
    0%, 100% {
        transform: translateY(0) rotateY(-5deg) rotateX(2deg);
    }
    50% {
        transform: translateY(-20px) rotateY(5deg) rotateX(-2deg);
    }
}

.phone-frame {
    /* Titanium-style frame */
    background: linear-gradient(
        165deg,
        #2a2a2e 0%,
        #1c1c1e 20%,
        #0d0d0f 50%,
        #1c1c1e 80%,
        #2a2a2e 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 55px;
    padding: 12px;
    box-shadow:
        /* Outer shadow for depth */
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 30px 60px rgba(0, 0, 0, 0.4),
        /* Subtle ambient glow */
        0 0 80px rgba(76, 212, 176, 0.08),
        /* Inner highlight for glass effect */
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    width: 320px;
    height: 660px;
    position: relative;
    transform-style: preserve-3d;
}

/* Side buttons */
.phone-frame::before {
    content: '';
    position: absolute;
    right: -3px;
    top: 120px;
    width: 4px;
    height: 35px;
    background: linear-gradient(180deg, #3a3a3e, #1a1a1e, #3a3a3e);
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
}

.phone-frame::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 180px;
    width: 4px;
    height: 70px;
    background: linear-gradient(180deg, #3a3a3e, #1a1a1e, #3a3a3e);
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
}

/* Power button on left */
.phone-button-left {
    position: absolute;
    left: -3px;
    top: 160px;
    width: 4px;
    height: 100px;
    background: linear-gradient(180deg, #3a3a3e, #1a1a1e, #3a3a3e);
    border-radius: 3px 0 0 3px;
    box-shadow: -1px 0 2px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

/* Phone glow effect */
.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(76, 212, 176, 0.15) 0%,
        rgba(46, 125, 163, 0.1) 30%,
        transparent 70%
    );
    /* filter: blur(50px) removed -- see the note at the end of this file. */
    z-index: -1;
    /* animation removed -- phone-glow: an opacity+scale pulse over ~373,000px. The glow itself stays, at a constant intensity. */
}

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

.phone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 44px;
    position: relative;
    overflow: hidden;
    /* Glass screen effect */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Dynamic Island */
.phone-screen::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 22px;
    background: #000;
    border-radius: 20px;
    z-index: 10;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 5px rgba(0, 0, 0, 0.8);
}

/* Glass reflection overlay */
.phone-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-radius: 44px;
    pointer-events: none;
    z-index: 5;
}

.app-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 44px;
}

/* Screen shine animation */
.phone-mockup::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 60%
    );
    transform: rotate(0deg);
    animation: screenShine 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
    border-radius: 55px;
}

@keyframes screenShine {
    0%, 100% {
        transform: translateX(-100%) rotate(45deg);
        opacity: 0;
    }
    50% {
        transform: translateX(100%) rotate(45deg);
        opacity: 1;
    }
}

/* Floating elements around phone */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 30;
}

.floating-icon {
    pointer-events: auto;
}

.floating-icon {
    position: absolute;
    width: 64px;
    height: 64px;
    /* iOS Frosted Glass Background */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    /* Subtle glass border */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatIcon 8s ease-in-out infinite;
    box-shadow:
        /* Outer shadow for depth */
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        /* Inner highlight for glass effect */
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    overflow: visible;
    cursor: pointer;
}

/* Glass reflection overlay on icons */
.floating-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    border-radius: 18px 18px 50% 50%;
    pointer-events: none;
}

/* Subtle shine sweep */
.floating-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 60%
    );
    animation: iconShine 6s ease-in-out infinite;
    pointer-events: none;
    clip-path: inset(-1px -1px -1px -1px round 18px);
}

@keyframes iconShine {
    0%, 100% {
        transform: translateX(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) rotate(45deg);
    }
}

.floating-icon svg {
    position: relative;
    z-index: 2;
    stroke: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.floating-icon:hover svg {
    stroke: #E8A838;
    filter: drop-shadow(0 0 8px rgba(232, 168, 56, 0.5));
    transform: scale(1.1);
}

/* Tooltip for floating icons */
.icon-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(11, 27, 43, 0.95);
    color: #fff;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    border: 1px solid var(--glass-border);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.floating-icon:hover .icon-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.floating-icon:hover {
    animation-play-state: paused;
    z-index: 50;
}

.floating-icon:nth-child(1) {
    top: 10%;
    left: -20%;
    animation-delay: 0s;
}

.floating-icon:nth-child(2) {
    top: 40%;
    right: -25%;
    animation-delay: -2s;
}

.floating-icon:nth-child(3) {
    bottom: 20%;
    left: -15%;
    animation-delay: -4s;
}

.floating-icon:nth-child(4) {
    bottom: 10%;
    right: -20%;
    animation-delay: -6s;
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(5deg);
    }
    75% {
        transform: translateY(10px) rotate(-5deg);
    }
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

section {
    padding: 7rem 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.section-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 100%
    );
    border-radius: 50px 50px 50% 50%;
    pointer-events: none;
}

.section-badge svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    stroke: rgba(255, 255, 255, 0.9);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--light-text);
    position: relative;
}

.section-title-highlight {
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--light-text);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   Features Section - 3D Cards
   ========================================================================== */

.features {
    background: transparent;
    position: relative;
}

.features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--soft-navy-card) 20%, var(--soft-navy-card) 80%, transparent 100%);
    z-index: -1;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

.feature-card {
    /* iOS Frosted Glass Card */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-slow) var(--ease-out-expo);
    transform-style: preserve-3d;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* Glass highlight on top */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 100%
    );
    border-radius: 24px 24px 50% 50%;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

/* Shine sweep effect */
.feature-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 60%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(76, 212, 176, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.feature-card:hover::before {
    opacity: 0.8;
}

.feature-card:hover::after {
    transform: rotate(45deg) translateX(100%);
}

.feature-icon {
    width: 80px;
    height: 80px;
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all var(--transition-normal) var(--ease-out-back);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* Glass highlight on top */
.feature-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    border-radius: 22px 22px 50% 50%;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

/* Shine sweep effect */
.feature-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 60%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.feature-icon svg {
    position: relative;
    z-index: 2;
    stroke: rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all var(--transition-normal);
}

.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(-3deg);
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.12) 100%
    );
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(76, 212, 176, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.feature-card:hover .feature-icon::before {
    opacity: 0.8;
}

.feature-card:hover .feature-icon::after {
    transform: rotate(45deg) translateX(100%);
}

.feature-card:hover .feature-icon svg {
    stroke: #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    transform: scale(1.1);
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--light-text);
    transition: color var(--transition-normal);
}

.feature-card:hover .feature-title {
    color: var(--teal-accent);
}

.feature-description {
    color: var(--light-text);
    opacity: 0.8;
    line-height: 1.8;
}

/* ==========================================================================
   How It Works Section - Timeline Style
   ========================================================================== */

.how-it-works {
    position: relative;
    overflow: hidden;
}

.steps-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Connecting line - hidden on mobile, shown on desktop */
.steps-line {
    display: none;
}

.steps-line-fill {
    display: none;
}

/* Desktop: Show timeline */
@media (min-width: 1025px) {
    .steps-line {
        display: block;
        position: absolute;
        top: 50px;
        left: 50%;
        width: 4px;
        height: calc(100% - 100px);
        background: linear-gradient(180deg, var(--teal-accent), var(--sky-blue-button), var(--purple-accent));
        transform: translateX(-50%);
        border-radius: 4px;
        opacity: 0.3;
    }

    .steps-line-fill {
        display: block;
        position: absolute;
        top: 50px;
        left: 50%;
        width: 4px;
        height: 0;
        background: linear-gradient(180deg, var(--teal-accent), var(--sky-blue-button));
        transform: translateX(-50%);
        border-radius: 4px;
        transition: height 0.5s ease-out;
        box-shadow: 0 0 20px var(--teal-glow);
    }
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
}

.step {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
}

/* Desktop layout with alternating sides */
@media (min-width: 1025px) {
    .steps-grid {
        gap: 4rem;
    }

    .step {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 3rem;
        align-items: center;
    }

    .step .step-content {
        text-align: right;
    }

    .step .step-content:last-child {
        text-align: left;
    }

    /* First step: content on left, number center, empty on right */
    .step:nth-child(odd) .step-content {
        order: 1;
        text-align: right;
    }

    .step:nth-child(odd) .step-number {
        order: 2;
    }

    .step:nth-child(odd)::after {
        content: '';
        order: 3;
    }

    /* Second step: empty on left, number center, content on right */
    .step:nth-child(even)::before {
        content: '';
        order: 1;
    }

    .step:nth-child(even) .step-number {
        order: 2;
    }

    .step:nth-child(even) .step-content {
        order: 3;
        text-align: left;
    }
}

.step-number {
    width: 80px;
    height: 80px;
    /* The white tint is laid over an OPAQUE base, not over the page.
       This used to be frosted glass: a near-transparent tint plus a
       backdrop-filter that blurred whatever sat behind it. With the
       backdrop-filter gone the tint alone hid nothing, so the connecting
       timeline ran visibly straight through all four circles.
       The base colour matches the section behind it, so the circles read the
       same as before -- they just stop the line rather than blurring it. */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        #0f2439;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
    font-size: 2rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all var(--transition-slow) var(--ease-out-expo);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Glass highlight on step number */
.step-number::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 100%
    );
    border-radius: 50% 50% 60% 60%;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .step-number {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
}

.step:hover .step-number,
.step-branch-option:hover .step-number {
    transform: scale(1.08);
    /* The #0f2439 base has to be repeated here. This rule sets the whole
       `background` shorthand, so without it the hover state drops the opaque
       layer the resting state relies on -- the circle turns translucent and
       the connecting timeline shows straight through it. */
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.12) 100%
        ),
        #0f2439;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(76, 212, 176, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--light-text);
}

@media (min-width: 1025px) {
    .step-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
}

.step-description {
    color: var(--light-text);
    opacity: 0.8;
    line-height: 1.8;
    font-size: 1rem;
}

@media (min-width: 1025px) {
    .step-description {
        font-size: 1.1rem;
    }
}

/* Step 3 forks: set it up yourself, or let family do it remotely.
   Both options sit on one horizontal level. On desktop the centre timeline
   runs straight down through the OR pill while the pill's two arms reach out
   into each gap, so the line reads as branching and then rejoining before
   step 4. The pill is opaque for the same reason as .step-number: it has to
   stop the line rather than let it show through. */
.step-branch {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    position: relative;
}

.step-branch-option {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.step-branch-or {
    justify-self: center;
    align-self: center;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    background: #0f2439;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 2;
}

@media (min-width: 1025px) {
    .step-branch {
        grid-template-columns: 1fr auto 1fr;
        gap: 3rem;
        align-items: center;
    }

    /* The fork arms, spanning the gap between the pill and each option. */
    .step-branch-or::before,
    .step-branch-or::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 3rem;
        height: 4px;
        background: var(--sky-blue-button);
        opacity: 0.3;
        transform: translateY(-50%);
    }

    .step-branch-or::before {
        right: 100%;
    }

    .step-branch-or::after {
        left: 100%;
    }

    /* 3A faces inward toward the fork, mirroring the alternating steps above. */
    .step-branch-option:first-child {
        flex-direction: row-reverse;
        text-align: right;
    }

    /* Two characters, so the full-size 100px/2.5rem step circle is too tight. */
    .step-branch-option .step-number {
        width: 80px;
        height: 80px;
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Early Access Section
   ========================================================================== */

.early-access {
    position: relative;
    overflow: hidden;
}

.early-access::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--deep-navy-gradient), var(--soft-navy-card));
    z-index: -1;
}

.early-access-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.early-access-text {
    position: relative;
}

.benefits-list {
    list-style: none;
    margin-top: 2rem;
}

.benefits-list li {
    padding: 1rem 0;
    padding-left: 3rem;
    position: relative;
    color: var(--light-text);
    font-size: 1.1rem;
    transition: all var(--transition-normal);
}

.benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-list li::after {
    content: '✓';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-text);
    font-weight: 800;
    font-size: 0.9rem;
}

.benefits-list li:hover {
    transform: translateX(10px);
    color: var(--teal-accent);
}

.form-card {
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

/* Glass highlight */
.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 100%
    );
    border-radius: 24px 24px 50% 50%;
    pointer-events: none;
}

/* Accent line at top */
.form-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-accent), var(--sky-blue-button), var(--purple-accent));
    border-radius: 24px 24px 0 0;
}

.form-card h3 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--light-text);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--light-text);
    font-weight: 500;
    font-size: 0.95rem;
}

.form-input,
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"],
.signup-form select {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(11, 27, 43, 0.8);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--light-text);
    font-size: 1rem;
    transition: all var(--transition-normal) var(--ease-out-expo);
}

.form-input:focus,
.signup-form input:focus,
.signup-form select:focus {
    outline: none;
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 4px rgba(76, 212, 176, 0.15);
    background: rgba(11, 27, 43, 1);
}

.form-input::placeholder,
.signup-form input::placeholder {
    color: var(--light-text);
    opacity: 0.5;
}

.form-error {
    color: var(--error-red);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
}

/* ==========================================================================
   Download Section
   ========================================================================== */

.download {
    position: relative;
}

.download::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--soft-navy-card) 20%, var(--soft-navy-card) 80%, transparent 100%);
    z-index: -1;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.store-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%
    );
    padding: 1.25rem 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all var(--transition-normal) var(--ease-out-expo);
    min-width: 220px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* Glass highlight */
.store-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 100%
    );
    border-radius: 16px 16px 50% 50%;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

/* Shine sweep */
.store-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 60%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.store-button:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    transform: translateY(-5px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.12);
}

.store-button:hover::after {
    transform: rotate(45deg) translateX(100%);
}

.store-button svg {
    color: var(--teal-accent);
    transition: transform var(--transition-normal);
}

.store-button:hover svg {
    transform: scale(1.1);
}

.store-text {
    display: flex;
    flex-direction: column;
}

.store-small {
    font-size: 0.65rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.store-large {
    font-size: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Download cards with QR codes */
.download-cards {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    padding: 2rem 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-normal) var(--ease-out-expo);
    max-width: 280px;
    width: 100%;
}

.download-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.download-card .store-button {
    width: 100%;
    min-width: 240px;
    justify-content: center;
    margin: 0;
}

.qr-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-wrapper img {
    width: 140px;
    height: 140px;
    display: block;
}

.qr-divider {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.qr-divider::before,
.qr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Single consolidated download QR (links to /get/, which redirects by device) */
.qr-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (max-width: 768px) {
    .download-cards {
        flex-direction: column;
        align-items: center;
    }

    .download-card {
        max-width: 300px;
    }

    .qr-wrapper {
        display: none;
    }

    .qr-divider {
        display: none;
    }

    .qr-single {
        display: none;
    }
}

.subscription-cta {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem;
    background: var(--glass-bg);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
}

.subscription-cta h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--light-text);
}

.subscription-cta p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

/* ==========================================================================
   Subscription Plans Section - Home Page
   ========================================================================== */

.subscription-plans {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(180deg, rgba(10, 25, 47, 0.5) 0%, rgba(10, 25, 47, 0.9) 100%);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.home-plan-card {
    background: var(--soft-navy-card, #1a2744);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.home-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.home-plan-card.recommended {
    border: 2px solid var(--teal-accent);
}

.home-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--teal-accent), #2a9d8f);
    color: white;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.home-plan-btn-wrap {
    margin-top: auto;
    padding-top: 0.5rem;
}

.home-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.home-plan-price {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.home-plan-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--teal-accent);
    line-height: 1;
}

.home-plan-period {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
}

.home-plan-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.home-plan-limits {
    background: rgba(76, 212, 176, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.home-plan-includes {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--teal-accent);
    background: rgba(76, 212, 176, 0.1);
    border: 1px solid rgba(76, 212, 176, 0.2);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    margin: 0 0 0.75rem;
    text-align: left;
}

.home-plan-includes svg {
    flex-shrink: 0;
}

.home-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.home-plan-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.home-plan-features li.highlighted {
    color: var(--teal-accent);
}

.home-plan-features li svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.home-plan-btn {
    background: linear-gradient(135deg, var(--teal-accent), #2a9d8f);
    color: white;
    border: none;
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    display: block;
    transition: transform 0.2s;
    text-decoration: none;
}

.home-plan-btn:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .home-plan-amount {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Testimonials Section - Modern Cards
   ========================================================================== */

.testimonials {
    position: relative;
    overflow: hidden;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: all var(--transition-slow) var(--ease-out-expo);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Glass highlight */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 100%
    );
    border-radius: 24px 24px 50% 50%;
    pointer-events: none;
}

/* Quote mark */
.testimonial-card::after {
    content: '"';
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 6rem;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.testimonial-rating {
    color: var(--gold-highlight);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 2rem;
    opacity: 0.95;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--dark-text);
    font-size: 1.2rem;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
}

.testimonial-info strong {
    color: var(--teal-accent);
    font-size: 1.1rem;
}

.testimonial-info span {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ==========================================================================
   FAQ Section - Animated Accordion
   ========================================================================== */

.faq {
    position: relative;
}

.faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--soft-navy-card) 20%, var(--soft-navy-card) 80%, transparent 100%);
    z-index: -1;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    /* iOS Frosted Glass */
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    margin-bottom: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all var(--transition-normal) var(--ease-out-expo);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.07) 100%
    );
}

.faq-item.active {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: default;
    text-align: left;
    pointer-events: none;
    user-select: none;
}

.faq-question:hover {
    color: var(--light-text);
}

.faq-icon {
    display: none;
}

.faq-answer {
    max-height: 500px;
    overflow: hidden;
}

.faq-answer p {
    padding: 0 2rem 2rem;
    color: var(--light-text);
    opacity: 0.85;
    line-height: 1.9;
}

/* ==========================================================================
   Final CTA Section - Dramatic
   ========================================================================== */

.final-cta {
    position: relative;
    padding: 8rem 0;
    text-align: center;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(76, 212, 176, 0.2) 0%, transparent 60%),
        linear-gradient(135deg, var(--deep-navy-gradient), var(--navy-primary-bg));
    z-index: -1;
}

.cta-content {
    position: relative;
}

.cta-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--light-text);
}

.cta-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Footer - Modern & Clean
   ========================================================================== */

.footer {
    /* Dark navy glass footer - prevents teal bleed-through */
    background: linear-gradient(
        180deg,
        rgba(11, 27, 43, 0.90) 0%,
        rgba(11, 27, 43, 0.95) 100%
    );
    padding: 5rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-title {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.footer-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--teal-accent);
}

.footer-description {
    opacity: 0.8;
    line-height: 1.8;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-normal);
}

.footer-links a:hover {
    color: var(--teal-accent);
    opacity: 1;
    transform: translateX(5px);
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.newsletter-form input {
    flex: 1;
    min-width: 120px;
    padding: 0.875rem 1rem;
    background: rgba(11, 27, 43, 0.8);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--light-text);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--teal-accent);
    box-shadow: 0 0 0 4px rgba(76, 212, 176, 0.15);
}

.newsletter-form button {
    padding: 0.875rem 1.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    opacity: 0.7;
    font-size: 0.95rem;
}

/* ==========================================================================
   Messages - Toast Notifications
   ========================================================================== */

.messages-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
}

.message {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--glass-bg);
    border-radius: 16px;
    border-left: 4px solid;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: messageSlideIn 0.5s var(--ease-out-expo);
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.message-success {
    border-color: var(--teal-accent);
}

.message-error {
    border-color: var(--error-red);
}

.message-info {
    border-color: var(--sky-blue-button);
}

.message-warning {
    border-color: var(--gold-highlight);
}

.message-close {
    background: transparent;
    border: none;
    color: var(--light-text);
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: 1rem;
    opacity: 0.7;
    transition: all var(--transition-normal);
    padding: 0.25rem;
    border-radius: 50%;
}

.message-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s var(--ease-out-expo);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s var(--ease-out-expo);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s var(--ease-out-expo);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s var(--ease-out-expo);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s var(--ease-out-expo);
}

.stagger-children.active > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.active > *:nth-child(6) { transition-delay: 0.5s; }

.stagger-children.active > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Loading Animation
   ========================================================================== */

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--navy-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s, visibility 0.5s;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-text {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--teal-accent), var(--sky-blue-button));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loader-logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 2px;
}

@keyframes loaderPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   Scroll Progress Bar
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-accent), var(--sky-blue-button), var(--purple-accent));
    z-index: 10001;
    transition: width 0.1s linear;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-image {
        order: -1;
        margin-top: 2rem;
    }

    .step {
        flex-direction: row;
        text-align: left;
        gap: 1.5rem;
    }

    .step .step-content {
        text-align: left;
    }

    .early-access-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .phone-frame {
        width: 280px;
        height: 570px;
        border-radius: 48px;
        padding: 10px;
    }

    .phone-screen {
        border-radius: 38px;
    }

    .phone-screen::before {
        width: 56px;
        height: 18px;
        top: 10px;
    }

    .phone-screen::after {
        border-radius: 38px;
    }

    .app-screenshot {
        border-radius: 38px;
    }

    .phone-button-left {
        top: 130px;
        height: 80px;
    }

    .phone-frame::before {
        top: 100px;
        height: 28px;
    }

    .phone-frame::after {
        top: 145px;
        height: 55px;
    }

    .floating-elements {
        display: none;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .features-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .download-buttons {
        flex-direction: column;
        align-items: center;
    }

    .store-button {
        width: 100%;
        max-width: 300px;
    }

    .cta-title {
        font-size: 1.75rem;
    }

    .messages-container {
        left: 20px;
        right: 20px;
        max-width: none;
    }

    .cursor,
    .cursor-follower {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 6rem 0 3rem;
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .hero-stats {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .stat {
        width: 100%;
        max-width: 200px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn-large {
        padding: 1rem 1.75rem;
        font-size: 1rem;
    }

    .form-card {
        padding: 1.5rem;
    }

    .step-number {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .feature-card,
    .testimonial-card {
        padding: 1.75rem;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .navbar,
    .mobile-menu,
    .cursor,
    .cursor-follower,
    .animated-bg,
    .particles,
    .scroll-progress,
    .page-loader {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero,
    section {
        padding: 2rem 0;
    }
}

/* ==========================================================================
   Reduced motion
   ==========================================================================

   .perf-lite is set on <html> when the visitor has asked their system for
   reduced motion. It used to also fire on software rendering, but the costly
   work is now removed for EVERYONE rather than hidden behind this class -- the
   continuously animated area went from about 7,900,000px to 59,403, and the
   blurs, backdrop-filters, particles and custom cursor are gone outright. A
   Chrome without hardware acceleration no longer needs a stripped page, and
   giving it one made it wholly static, which read worse than the slowness.

   For someone who asked for reduced motion, stopping is the point.
   ========================================================================== */

/* Blur is the single most expensive thing here: three orbs at blur(80px) over
   as much as 367,000px each, plus a 50px phone glow over 397,000px. Removed
   outright rather than reduced -- a softened orb still costs a full-area
   repaint on every animation frame. */
.perf-lite .bg-orb,
.perf-lite .phone-glow {
    filter: none;
    animation: none;
    /* Dimmed to compensate: without the blur these read as hard-edged discs,
       which is worse than not having them. At this opacity they are a wash of
       colour, which is what they were meant to be. */
    opacity: 0.35;
}

/* 55 elements carried backdrop-filter. Each is a read-back of everything
   painted beneath it -- the most expensive effect on the page after the orbs,
   and entirely CPU-side without acceleration. The translucent backgrounds
   underneath survive, so the frosted panels stay legible, just flat. */
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
}

/* The navbar's frosted panel is .navbar::before, faded in by a transition on
   .scrolled. Disabling transitions above froze it at opacity 0, which left the
   bar fully transparent and the page scrolling under the links unreadably --
   a legibility bug introduced by the fix rather than by the original design.
   Its gradient is opaque enough on its own, so it is simply always shown. */
.perf-lite .navbar::before {
    opacity: 1;
}

/* Every decorative animation. Not scoped to a list of names on purpose: a new
   keyframe added later should be covered by default rather than remembered. */
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
    animation: none !important;
    transition: none !important;
}

/* The particles are ~40 absolutely-positioned animated nodes whose whole job is
   decoration. With the animation off they are 40 motionless dots, so they go. */
.perf-lite .particles,
.perf-lite .particle {
    display: none;
}

/* The custom cursor is a per-frame transform write on two fixed-position
   layers. Cheap with a GPU, not cheap without one -- and the native cursor is
   never slow. */
.perf-lite .cursor,
.perf-lite .cursor-follower {
    display: none;
}


/* ==========================================================================
   Removed decorations
   ==========================================================================

   The custom cursor and the particle field are gone for everyone, not just on
   software-rendered machines. Both are decoration; both cost real frame time
   (two fixed layers rewritten every frame, and ~40 animated absolutely
   positioned nodes); and the cursor was the specific thing reported as
   trailing the pointer. The native cursor is never slow.

   The .perf-lite rules further down still apply and are still worth keeping:
   they cover prefers-reduced-motion and any animation added later.
   ========================================================================== */

.cursor,
.cursor-follower,
.particles,
.particle {
    display: none !important;
}

/* ==========================================================================
   Hero visibility without animations
   ==========================================================================

   These five elements are declared `opacity: 0` and rely on their entrance
   animation's `forwards` fill to become visible. Disabling animations for
   reduced motion or software rendering therefore did not merely stop them
   moving -- it left the ENTIRE hero section permanently blank, which is what
   a visitor saw first.

   Restored explicitly rather than by loosening the `animation: none` rule
   above: the animations are the cost being removed, and the fix is to make the
   elements visible without them.

   transform: none matters as much as opacity. heroFadeUp starts translated
   down and heroImageReveal starts scaled, so without it these would render at
   full opacity in the wrong place.

   Anything added later that hides itself pending an animation needs adding
   here too. The pattern to look for is `opacity: 0` beside an `animation`
   ending in `forwards`.
   ========================================================================== */

.perf-lite .hero-title,
.perf-lite .hero-subtitle,
.perf-lite .hero-cta,
.perf-lite .hero-stats,
.perf-lite .hero-image {
    opacity: 1 !important;
    transform: none !important;
}