@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* Brand Design Tokens */
:root {
    --color-obsidian-dark: #0D0D0F;
    --color-obsidian-glass: rgba(22, 22, 26, 0.6);
    --color-obsidian-solid: #16161A;
    --color-gold-accent: #E6C280;
    --color-saffron-accent: #F39237;
    --color-text-primary: #F5F5F7;
    --color-text-secondary: #9E9E9F;
    --color-border-gold-sheen: rgba(230, 194, 128, 0.15);
    
    --font-sacred: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Resets & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-obsidian-dark);
    /* Offset anchor jumps (#download, #how-it-helps, …) so they land below the
       fixed header instead of being clipped behind it. */
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-body);
    /* Transparent on purpose: the base color comes from <html> above. A solid
       body background paints OVER the negative-z-index background layer
       (.cosmic-bg, .ambient-glow-*, .hero-interactive-bg) and hides it. */
    background-color: transparent;
    color: var(--color-text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Background Cosmic Ambient Effects */
.cosmic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background: radial-gradient(circle at 10% 20%, rgba(22, 22, 26, 0.95) 0%, rgba(13, 13, 15, 1) 90%);
}

.ambient-glow-1 {
    position: fixed;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 194, 128, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: floatGlow1 16s ease-in-out infinite;
}

.ambient-glow-2 {
    position: fixed;
    bottom: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 146, 55, 0.06) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: floatGlow2 20s ease-in-out infinite;
}

/* Cosmic ambient floating & breathing keyframes */
@keyframes floatGlow1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50%  { transform: translate(-30px, 20px) scale(1.25); opacity: 1.0; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}

@keyframes floatGlow2 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50%  { transform: translate(30px, -20px) scale(1.25); opacity: 0.9; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
}

/* Typography Utility Classes */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
}

.font-sacred {
    font-family: var(--font-sacred);
}

.text-gold {
    color: var(--color-gold-accent);
}

.text-saffron {
    color: var(--color-saffron-accent);
}

.text-gradient-gold {
    background: linear-gradient(135deg, #FFF 30%, var(--color-gold-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism & Containers */
.glass-panel {
    background: var(--color-obsidian-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-gold-sheen);
    border-radius: 20px;
    transition: var(--transition-smooth);
}

.glass-panel:hover {
    border-color: rgba(230, 194, 128, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(230, 194, 128, 0.05);
}

/* Premium Buttons & CTAs */
.btn-primary {
    background: linear-gradient(135deg, var(--color-saffron-accent) 0%, var(--color-gold-accent) 100%);
    color: #0D0D0F;
    font-family: var(--font-body);
    font-weight: 700;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(243, 146, 55, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 146, 55, 0.4), 0 0 15px rgba(230, 194, 128, 0.2);
    filter: brightness(1.1);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    padding: 13px 27px;
    border: 1px solid var(--color-border-gold-sheen);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-secondary:hover {
    border-color: var(--color-gold-accent);
    background: rgba(230, 194, 128, 0.05);
    color: var(--color-gold-accent);
    transform: translateY(-2px);
}

/* Header & Navigation */
header {
    width: 100%;
    padding: 20px 4%;
    position: fixed;
    top: 0;
    z-index: 100;
    /* Transparent at the top — no floating divider line. The glass background
       and border only fade in once the page is scrolled (see header.scrolled). */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

header.scrolled {
    background: rgba(13, 13, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(230, 194, 128, 0.05);
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(230, 194, 128, 0.3));
}

.logo-text {
    font-family: var(--font-sacred);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-gold-accent);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
}

nav ul li a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    letter-spacing: 0.5px;
}

nav ul li a:hover {
    color: var(--color-gold-accent);
}

nav ul li a.active {
    color: var(--color-gold-accent);
    border-bottom: 2px solid var(--color-gold-accent);
    padding-bottom: 4px;
}

/* Hero Badge */
.hero-badge {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(230, 194, 128, 0.15);
    border: 1px solid var(--color-border-gold-sheen);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gold-accent);
}

/* App Badges Sizing */
.download-badges {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Both store badges share one height so they read as a balanced pair. The
   bundled artwork (app-store-badge.svg / google-play-badge.webp) is trimmed to
   its own edges, so equal height = equal visual weight — no per-badge hacks. */
.badge-link {
    height: 40px;
    display: inline-flex;
    align-items: center;
    transition: var(--transition-smooth);
}

.badge-link img {
    height: 100%;
    width: auto;
    display: block;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

/* No movement on hover — just a very faint gold glow to signal it's interactive. */
.badge-link:hover img {
    box-shadow: 0 0 12px rgba(230, 194, 128, 0.25);
}

/* A badge rendered as a <button> ("coming soon" state) must look identical
   to the anchor version, so strip the native button chrome. */
button.badge-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Lightweight toast for the "coming soon" tap feedback. */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(16px);
    max-width: min(90vw, 420px);
    background: rgba(22, 22, 26, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-gold-sheen);
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Cookie Consent Banner — injected by main.js only where consent is required. */
.consent-banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(24px);
    width: min(92vw, 720px);
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(22, 22, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-gold-sheen);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.consent-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.consent-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

.consent-text a {
    color: var(--color-gold-accent);
    text-decoration: underline;
}

.consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Tighter than the page-level buttons — this is a dismissable bar, not a CTA. */
.consent-banner .btn-primary,
.consent-banner .btn-secondary {
    padding: 9px 18px;
    font-size: 0.85rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .consent-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        bottom: 12px;
        padding: 16px 18px;
    }

    .consent-actions {
        justify-content: flex-end;
    }
}

/* Scroll-Linked Showcase Structure (Desktop Layout) */
.scroll-showcase-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    max-width: 1000px;
    /* No top margin: lets the hero fill the viewport and center against the
       full screen. The fixed header is out of flow, so this stays under it. */
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
}

.showcase-content-wrapper {
    position: relative;
}

/* High track steps for scrolling markers */
.showcase-step {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.showcase-step.hero-step {
    /* Fill the viewport, but bias the content slightly below the vertical
       center (heavier top padding vs the base 60px bottom) for a grounded feel. */
    min-height: 100vh;
    padding-top: 160px;
}

.hero-title {
    font-family: var(--font-sacred);
    font-size: 3.5rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.hero-subtitle {
    color: var(--color-text-secondary);
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 580px;
}

.feature-num {
    font-family: var(--font-sacred);
    color: var(--color-saffron-accent);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.feature-title {
    font-family: var(--font-sacred);
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.feature-desc {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Per-feature mockup — only shown on mobile, where the sticky phone is hidden. */
.step-mockup {
    display: none;
}

/* Sticky Visual Container */
.showcase-visual-wrapper {
    position: relative;
    height: 100%;
}

.showcase-phone-sticky {
    position: sticky;
    top: 120px;
    height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    /* Clips the enlarged phone during the hero so only its top portion shows.
       Applied to the sticky element itself (not an ancestor) so sticky still works. */
    overflow: hidden;
}

/* Phone Frame Mockup */
.phone-frame {
    position: relative;
    height: 65vh;
    max-height: 520px;
    width: auto;
    aspect-ratio: 9/19;
    border: 10px solid #202024;
    border-radius: 36px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(230, 194, 128, 0.05);
    background: #0d0d0f;
    overflow: hidden;
    z-index: 10;
    transform-origin: center top;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hero state: zoomed in. Scrolling past the hero removes this class. */
.phone-frame.hero-zoom {
    transform: scale(1.45);
}

.phone-screen {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
    background: #202024;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 100;
    transition: opacity 0.3s ease-in-out;
}

/* Fallback Wireframe Placeholders */
.screenshot-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    background: radial-gradient(circle at center, #16181d 0%, #0c0d10 100%);
    color: var(--color-text-secondary);
    border-radius: 26px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: 4;
}

.screenshot-placeholder::before,
.screenshot-placeholder::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.screenshot-placeholder::before {
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(230, 194, 128, 0.07) 50%, transparent calc(50% + 0.5px));
}

.screenshot-placeholder::after {
    background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(230, 194, 128, 0.07) 50%, transparent calc(50% + 0.5px));
}

.placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(230, 194, 128, 0.2));
}

.placeholder-title {
    font-family: var(--font-sacred);
    color: var(--color-gold-accent);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 6px;
    z-index: 2;
    letter-spacing: 0.5px;
}

.placeholder-subtitle {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    max-width: 180px;
    z-index: 2;
}

/* Image overlays */
.screenshot-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    z-index: 6;
}

/* Active transitions */
.screenshot-placeholder.active {
    opacity: 1;
    pointer-events: auto;
}

.screenshot-img.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Status-bar crop ───────────────────────────────────────────────────────
   The real screenshots include the Android system bar (time, battery, icons)
   at the very top. We shift the image up so that area slides behind the notch
   and the clean app UI fills the screen. The ~8% offset matches the typical
   status-bar height on a 19:9 device. */
.screenshot-img {
    object-position: center 8%;
}

/* ── Fake clean status bar ─────────────────────────────────────────────────
   A gradient bar: fully opaque at the very top (hiding the Android chrome)
   and feathering into transparent so there is no visible colour seam where
   it meets the screenshot content below. */
.phone-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: linear-gradient(to bottom,
        #121212 0%,
        #121212 50%,
        transparent 100%);
    z-index: 20;
    pointer-events: none;
}

/* Status bar content (time left, battery right) */
.phone-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 21;
    pointer-events: none;
}

.phone-status-bar .status-time {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}

.phone-status-bar .status-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.phone-status-bar .status-icons svg {
    width: 11px;
    height: 11px;
    fill: rgba(255, 255, 255, 0.85);
}

/* Battery icon SVG inline fill */
.battery-icon {
    display: flex;
    align-items: center;
    gap: 1px;
}


/* ── Slide transition upgrade ──────────────────────────────────────────────
   Slightly longer, smoother crossfade between screens for the slideshow. */
.screenshot-img,
.screenshot-placeholder {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Fullscreen expansion classes on scroll */
.phone-frame.fullscreen-mode {
    max-width: 100%;
    aspect-ratio: auto;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.phone-frame.fullscreen-mode .phone-notch {
    opacity: 0;
}

.phone-frame.fullscreen-mode .screenshot-placeholder {
    border-radius: 0;
}

/* Call to Action Banner */
.cta-banner {
    max-width: 1000px;
    margin: 100px auto;
    padding: 0 4%;
    position: relative;
    z-index: 20;
}

.cta-container {
    padding: 60px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cta-title {
    font-family: var(--font-sacred);
    font-size: 2.25rem;
    line-height: 1.3;
}

.cta-desc {
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    max-width: 580px;
    line-height: 1.6;
}

/* Legal Documents Content Layout */
.legal-page {
    padding-top: 140px;
    padding-bottom: 80px;
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 4%;
}

.legal-title {
    font-family: var(--font-sacred);
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.legal-date {
    color: var(--color-saffron-accent);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-border-gold-sheen);
    padding-bottom: 16px;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.legal-content h3 {
    font-family: var(--font-sacred);
    font-size: 1.4rem;
    color: var(--color-gold-accent);
    margin-bottom: 12px;
}

.legal-content p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-content ul {
    margin-left: 24px;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.75;
}

/* Footer Section */
footer {
    width: 100%;
    background: #09090b;
    border-top: 1px solid rgba(230, 194, 128, 0.05);
    padding: 60px 4% 30px 4%;
    position: relative;
    z-index: 20;
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-brand-title {
    font-family: var(--font-sacred);
    font-size: 1.5rem;
    color: var(--color-gold-accent);
    letter-spacing: 1px;
}

.footer-brand-desc {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    max-width: 380px;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 80px;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links-title {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-links-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-col ul li a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.footer-links-col ul li a:hover {
    color: var(--color-gold-accent);
}

.footer-bottom {
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #52525b;
    font-size: 0.85rem;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    color: #52525b;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-bottom-links a:hover {
    color: var(--color-text-secondary);
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .scroll-showcase-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .showcase-visual-wrapper {
        display: none; /* Hide the sticky phone showcase on mobile/tablet */
    }

    /* Stacked story: each feature is a centered block with its own mockup. */
    .showcase-step {
        min-height: auto;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Hairline divider between consecutive feature blocks. */
    .showcase-step + .showcase-step {
        border-top: 1px solid var(--color-border-gold-sheen);
    }

    .showcase-step.hero-step {
        padding-top: 120px;
        min-height: auto;
    }

    .hero-title {
        font-size: 2.75rem;
        text-align: center;
    }

    .hero-subtitle {
        text-align: center;
        margin: 0 auto;
    }

    /* Center the badge on mobile (desktop anchors it to the left). */
    .hero-badge {
        align-self: center;
    }

    .feature-desc {
        max-width: 480px;
    }

    .download-badges {
        justify-content: center;
    }

    /* Reveal the per-feature mockup and give it a premium phone framing. */
    .step-mockup {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 12px;
    }

    /* Scroll-reveal: content of each block eases up + fades in as it enters the
       viewport. Gated behind .reveal-on (added by JS) so it degrades to fully
       visible if scripting is unavailable. Staggered for a layered feel. */
    .reveal-on .showcase-step .hero-badge,
    .reveal-on .showcase-step .hero-title,
    .reveal-on .showcase-step .hero-subtitle,
    .reveal-on .showcase-step .download-badges,
    .reveal-on .showcase-step .feature-num,
    .reveal-on .showcase-step .feature-title,
    .reveal-on .showcase-step .feature-desc,
    .reveal-on .showcase-step .step-mockup {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .reveal-on .showcase-step.in-view .hero-badge,
    .reveal-on .showcase-step.in-view .hero-title,
    .reveal-on .showcase-step.in-view .hero-subtitle,
    .reveal-on .showcase-step.in-view .download-badges,
    .reveal-on .showcase-step.in-view .feature-num,
    .reveal-on .showcase-step.in-view .feature-title,
    .reveal-on .showcase-step.in-view .feature-desc,
    .reveal-on .showcase-step.in-view .step-mockup {
        opacity: 1;
        transform: none;
    }

    .reveal-on .showcase-step.in-view .hero-title,
    .reveal-on .showcase-step.in-view .feature-title {
        transition-delay: 0.06s;
    }

    .reveal-on .showcase-step.in-view .hero-subtitle,
    .reveal-on .showcase-step.in-view .feature-desc {
        transition-delay: 0.12s;
    }

    .reveal-on .showcase-step.in-view .download-badges,
    .reveal-on .showcase-step.in-view .step-mockup {
        transition-delay: 0.18s;
    }

    /* Respect users who prefer reduced motion. */
    @media (prefers-reduced-motion: reduce) {
        .reveal-on .showcase-step [class] {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    }

    .mini-phone {
        position: relative;
        width: 240px;
        aspect-ratio: 9 / 19;
        border: 9px solid #202024;
        border-radius: 34px;
        background: #0d0d0f;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(230, 194, 128, 0.06);
    }

    /* Camera notch to match the desktop device. */
    .mini-phone::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 84px;
        height: 18px;
        background: #202024;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        z-index: 22; /* notch above status bar */
    }

    /* Clean fake status bar overlay for mobile mini-phones */
    .mini-phone::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 38px;
        background: linear-gradient(to bottom,
            #121212 0%,
            #121212 50%,
            transparent 100%);
        z-index: 20;
        pointer-events: none;
    }

    .mini-phone-screen {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 10px;
        background: radial-gradient(circle at center, #16181d 0%, #0c0d10 100%);
    }

    /* Faint sacred crosshair, echoing the desktop placeholder. */
    .mini-phone-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(230, 194, 128, 0.06) 50%, transparent calc(50% + 0.5px)),
            linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(230, 194, 128, 0.06) 50%, transparent calc(50% + 0.5px));
        pointer-events: none;
    }

    .mini-phone-screen .placeholder-icon {
        font-size: 2.25rem;
        filter: drop-shadow(0 0 6px rgba(230, 194, 128, 0.25));
    }

    .mini-phone-screen .placeholder-title {
        font-family: var(--font-sacred);
        color: var(--color-gold-accent);
        font-weight: 600;
        font-size: 1.05rem;
        letter-spacing: 0.5px;
    }

    /* Real screenshot, when present, sits on top and covers the placeholder. */
    .mini-phone-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 8%; /* crop the status bar */
        z-index: 2;
    }

    /* Slideshow for Step 0 Hero on Mobile */
    .hero-step .mini-phone-img {
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-step .mini-phone-img.active {
        opacity: 1;
    }

    .showcase-step:not(.hero-step) .mini-phone-img {
        opacity: 1;
    }

    .footer-links {
        gap: 40px;
    }
    
    .phone-frame.hero-zoom {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    header {
        padding: 16px 5%;
    }

    /* Trim the header to logo + primary CTA; the section links live in the
       footer, so the mobile bar stays clean instead of overflowing. */
    nav ul {
        gap: 12px;
    }

    nav ul li:not(.nav-cta) {
        display: none;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    
    .footer-brand {
        align-items: center;
    }
    
    .footer-links {
        justify-content: center;
        gap: 60px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Full width toast on mobile devices */
    .toast {
        width: calc(100% - 32px);
        max-width: none;
    }
}

/* ── Fixed Grid Page Background ─────────────────────────────────────────── */
.hero-interactive-bg {
    position: fixed; /* stays put on scroll — a persistent page background */
    inset: 0;        /* fill the whole viewport, every section */
    overflow: hidden;
    z-index: -2;     /* above .cosmic-bg (-3), behind all content */
    pointer-events: none;
}

.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(230, 194, 128, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230, 194, 128, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    /* Soft vignette so the grid reads across the page but fades gently at the edges. */
    mask-image: radial-gradient(ellipse at 50% 45%, black 35%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 35%, transparent 88%);
}