/* ===== CSS Variables - "The Friendly Game" Design System ===== */
:root {
    /* ===== Core Palette ===== */
    --white: #FFFFFF;
    --black: #1C1C1E;

    /* ===== Light Theme Backgrounds ===== */
    --bg-primary: #FAFAF8;           /* Warm off-white - main background */
    --bg-secondary: #F5F3EF;         /* Slightly warmer for alternating sections */
    --bg-tertiary: #EDEAE4;          /* Even warmer for depth */
    --bg-elevated: #FFFFFF;          /* Pure white for cards */

    /* ===== App Brand Colors ===== */
    --orange: #FF9500;               /* iOS orange from app - primary */
    --orange-light: #FFB84D;         /* Lighter variant for backgrounds */
    --orange-dark: #E68600;          /* Darker for hover states */
    --orange-subtle: rgba(255, 149, 0, 0.1);  /* Very subtle orange tint */

    /* ===== Accent Colors (soft, friendly) ===== */
    --green: #34C759;                /* Success, positive feedback */
    --green-light: #E8F9ED;          /* Light green background */
    --blue: #5AC8FA;                 /* Info, secondary accent */
    --blue-light: #E8F6FD;           /* Light blue background */
    --purple: #AF52DE;               /* Special, achievements */
    --purple-light: #F4E8FB;         /* Light purple background */
    --pink: #FF6B9D;                 /* Playful accent */
    --pink-light: #FFEBF1;           /* Light pink background */
    --yellow: #FFCC00;               /* Highlight, badges */
    --yellow-light: #FFF9E0;         /* Light yellow background */

    /* ===== Typography Colors ===== */
    --text-primary: #1C1C1E;         /* Near black, warm */
    --text-secondary: #636366;       /* Medium gray */
    --text-tertiary: #8E8E93;        /* Light gray */
    --text-muted: #AEAEB2;           /* Very light */
    --text-inverse: #FFFFFF;         /* White text for dark backgrounds */

    /* ===== Surface & Card Styles ===== */
    --card-bg: #FFFFFF;
    --card-border: rgba(0, 0, 0, 0.06);
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.10);
    --card-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);

    /* ===== Button Shadows ===== */
    --btn-shadow: 0 4px 14px rgba(255, 149, 0, 0.3);
    --btn-shadow-hover: 0 6px 20px rgba(255, 149, 0, 0.4);

    /* ===== Gradients ===== */
    --gradient-orange: linear-gradient(135deg, #FF9500 0%, #FF6B00 100%);
    --gradient-warm: linear-gradient(135deg, #FFB84D 0%, #FF9500 100%);
    --gradient-hero: linear-gradient(180deg, #FAFAF8 0%, #F5F3EF 100%);
    --gradient-section: linear-gradient(180deg, #F5F3EF 0%, #FAFAF8 100%);

    /* Decorative gradient blobs */
    --gradient-blob-orange: radial-gradient(circle, rgba(255, 149, 0, 0.15) 0%, transparent 70%);
    --gradient-blob-blue: radial-gradient(circle, rgba(90, 200, 250, 0.12) 0%, transparent 70%);
    --gradient-blob-purple: radial-gradient(circle, rgba(175, 82, 222, 0.10) 0%, transparent 70%);

    /* ===== Spacing Scale ===== */
    --space-xs: 0.25rem;             /* 4px */
    --space-sm: 0.5rem;              /* 8px */
    --space-md: 1rem;                /* 16px */
    --space-lg: 1.5rem;              /* 24px */
    --space-xl: 2rem;                /* 32px */
    --space-2xl: 3rem;               /* 48px */
    --space-3xl: 4rem;               /* 64px */
    --space-4xl: 6rem;               /* 96px */
    --space-5xl: 8rem;               /* 128px */

    /* Section spacing aliases (keeping for compatibility) */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;
    --spacing-5xl: 6rem;

    /* ===== Layout Widths ===== */
    --content-wide: 1280px;
    --content-max: 1140px;
    --content-medium: 960px;
    --content-narrow: 720px;
    --content-readable: 640px;

    /* ===== Border Radius ===== */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ===== Typography - Fonts ===== */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Roboto Mono', 'Menlo', monospace;

    /* Legacy aliases for compatibility */
    --font-system: var(--font-body);

    /* ===== Type Scale ===== */
    --text-xs: 0.75rem;              /* 12px */
    --text-sm: 0.875rem;             /* 14px */
    --text-base: 1rem;               /* 16px */
    --text-lg: 1.125rem;             /* 18px */
    --text-xl: 1.25rem;              /* 20px */
    --text-2xl: 1.5rem;              /* 24px */
    --text-3xl: 2rem;                /* 32px */
    --text-4xl: 2.5rem;              /* 40px */
    --text-5xl: 3.5rem;              /* 56px */
    --text-6xl: 4.5rem;              /* 72px */

    /* ===== Font Weights ===== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ===== Line Heights ===== */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* ===== Transitions ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Z-Index Scale ===== */
    --z-base: 0;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;

    /* ===== Legacy Variables (for backwards compatibility during transition) ===== */
    /* These map old dark theme vars to new light theme equivalents */
    --glass-bg: var(--card-bg);
    --glass-border: var(--card-border);
    --glass-shadow: var(--card-shadow);
    --surface: var(--bg-secondary);
    --surface-elevated: var(--bg-elevated);
    --surface-border: var(--card-border);
    --gradient: var(--gradient-orange);
    --gradient-soft: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(90, 200, 250, 0.10));
    --gold: var(--yellow);
    --text-2xs: 0.625rem;
}
/* ===== Reset - "The Friendly Game" Light Theme ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: var(--leading-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== Selection ===== */
::selection {
    background: var(--orange-light);
    color: var(--text-primary);
}

/* ===== Images ===== */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== Form Elements ===== */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ===== Links ===== */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--orange);
}

/* ===== Lists ===== */
ul,
ol {
    list-style: none;
}

/* ===== Screen Reader Only ===== */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Focus States ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ===== Skip Link ===== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-tooltip);
    padding: 1rem 2rem;
    background: var(--orange);
    color: var(--text-inverse);
    font-weight: var(--font-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--btn-shadow);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 1rem;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Scroll Progress Bar ===== */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: calc(var(--z-sticky) + 1);
}

.scroll-progress-bar {
    height: 100%;
    background: var(--gradient-orange);
    width: 0%;
    transition: width 50ms linear;
}
/* ===== Typography - "The Friendly Game" ===== */

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2.5rem, 6vw, var(--text-6xl));
    font-weight: var(--font-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h2 {
    font-size: clamp(2rem, 4vw, var(--text-5xl));
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, var(--text-2xl));
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

/* ===== Body Text ===== */
p {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* ===== Small Text ===== */
small,
.text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

/* ===== Large Text ===== */
.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

/* ===== Font Weights ===== */
.font-normal {
    font-weight: var(--font-normal);
}

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

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

/* ===== Text Colors ===== */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.text-muted {
    color: var(--text-muted);
}

.text-orange {
    color: var(--orange);
}

/* ===== Gradient Text ===== */
.title-gradient,
.text-gradient {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Lead Text (intro paragraphs) ===== */
.lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ===== Section Overline (small label above headings) ===== */
.section-overline {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--orange);
    margin-bottom: var(--space-md);
}

/* ===== Section Title ===== */
.section-title {
    margin-bottom: var(--space-lg);
}

.section-title.center {
    text-align: center;
}

.section-title.align-left {
    text-align: left;
}

/* ===== Section Subtitle ===== */
.section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 640px;
    line-height: var(--leading-relaxed);
}

.section-subtitle.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Links ===== */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link {
    color: var(--orange);
    font-weight: var(--font-medium);
}

.link:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

/* ===== Lists ===== */
.list {
    list-style: none;
    padding: 0;
}

.list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: bold;
}

/* ===== Blockquote ===== */
blockquote {
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--text-secondary);
    border-left: 4px solid var(--orange);
    padding-left: var(--space-lg);
    margin: var(--space-xl) 0;
}

/* ===== Code ===== */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-secondary);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}
/* ===== Floating Score Bubbles - "The Friendly Game" ===== */
/* Subtle floating bubbles for light theme */

.floating-scores {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.score-bubble {
    position: absolute;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--orange);
    box-shadow: var(--card-shadow);
    animation: float-upward 25s infinite ease-in-out;
    will-change: transform, opacity;
}

.score-bubble:nth-child(1) {
    top: 85%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 22s;
}

.score-bubble:nth-child(2) {
    top: 90%;
    right: 15%;
    animation-delay: 5s;
    animation-duration: 24s;
    color: var(--blue);
}

.score-bubble:nth-child(3) {
    top: 88%;
    left: 5%;
    animation-delay: 10s;
    animation-duration: 26s;
    color: var(--green);
}

.score-bubble:nth-child(4) {
    top: 92%;
    right: 10%;
    animation-delay: 15s;
    animation-duration: 23s;
    color: var(--purple);
}

.score-bubble.xp {
    top: 87%;
    right: 20%;
    animation-delay: 20s;
    animation-duration: 25s;
    color: var(--yellow);
}

/* Gradient-filled bubble variants for enhanced visual interest */
.score-bubble.gradient-orange {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8F6B 100%);
    color: white;
    border: none;
    box-shadow:
        0 4px 20px rgba(255, 107, 53, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-bubble.gradient-cyan {
    background: linear-gradient(135deg, #00D9FF 0%, #00B4D8 100%);
    color: #050712;
    border: none;
    box-shadow:
        0 4px 20px rgba(0, 217, 255, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.score-bubble.gradient-purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    color: white;
    border: none;
    box-shadow:
        0 4px 20px rgba(139, 92, 246, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Upward floating animation - simulating bubbles rising */
@keyframes float-upward {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
        transform: translateY(-50px) translateX(10px) rotate(2deg) scale(0.95);
    }
    25% {
        transform: translateY(-30vh) translateX(-15px) rotate(-3deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-55vh) translateX(20px) rotate(3deg) scale(1.05);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-80vh) translateX(-10px) rotate(-2deg) scale(1);
        opacity: 0.4;
    }
    95% {
        transform: translateY(-105vh) translateX(15px) rotate(1deg) scale(0.95);
        opacity: 0.1;
    }
    100% {
        transform: translateY(-110vh) translateX(0) rotate(0deg) scale(0.9);
        opacity: 0;
    }
}

/* Common animations */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes glow {
    0%, 100% {
        box-shadow: var(--card-shadow);
    }
    50% {
        box-shadow: var(--card-shadow-hover);
    }
}

/* Edge browser fallback */
html.is-edge .score-bubble {
    animation: none !important;
    will-change: auto;
    transform: translate3d(0, 0, 0);
}

/* Disable floating bubbles on mobile for performance */
@media (max-width: 768px) {
    .floating-scores {
        display: none;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .score-bubble {
        animation: none;
        opacity: 0.4;
    }
}
/* ===== Navigation - "The Friendly Game" ===== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(250, 250, 248, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    transition: all var(--transition-base);
}

/* Solid state on scroll */
.nav.nav-solid {
    background: rgba(250, 250, 248, 0.98);
    box-shadow: var(--card-shadow);
}

.nav-container {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 0.875rem var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
}

/* ===== Brand ===== */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-logo {
    height: 36px;
    width: auto;
    transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .nav-logo:hover {
        transform: scale(1.05);
    }
}

/* Badge (In Development / Beta) */
.nav-badge {
    background: var(--orange-subtle);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--orange);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateY(-8px);
    transition: all var(--transition-base);
}

.nav-badge.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Nav Items Container ===== */
.nav-items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xl);
}

/* ===== Nav Links ===== */
.nav-links {
    display: flex;
    gap: var(--space-xl);
    align-items: center;
}

.nav-links a {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover {
        color: var(--orange);
    }
}

/* ===== Nav Actions ===== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Ghost Button in Nav */
.nav-ghost {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .nav-ghost:hover {
        border-color: var(--orange);
        color: var(--orange);
        background: var(--orange-subtle);
    }
}

/* Primary CTA in Nav */
.nav-cta {
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-full);
    background: var(--gradient-orange);
    color: var(--text-inverse) !important;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    box-shadow: var(--btn-shadow);
    transition: all var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

@media (hover: hover) and (pointer: fine) {
    .nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: var(--btn-shadow-hover);
    }
}

/* ===== Mobile Menu Toggle ===== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.nav-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== Mobile Menu ===== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    padding: var(--space-xl);
    flex-direction: column;
    gap: var(--space-lg);
    z-index: calc(var(--z-sticky) - 1);
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    pointer-events: none;
}

.mobile-menu.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-menu a {
    display: block;
    padding: var(--space-md) 0;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    border-bottom: 1px solid var(--card-border);
}

.mobile-menu .nav-cta {
    margin-top: var(--space-lg);
    width: 100%;
    justify-content: center;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .nav-container {
        padding: 0.75rem var(--space-md);
    }

    .nav-links,
    .nav-ghost {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .mobile-menu {
        display: flex;
    }

    .nav-actions .nav-cta {
        display: none;
    }
}

/* ===== Back to Top Button ===== */
#back-to-top {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: var(--z-above);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    #back-to-top:hover {
        background: var(--orange);
        color: var(--text-inverse);
        border-color: var(--orange);
        transform: translateY(-2px);
    }
}

@media (max-width: 768px) {
    #back-to-top {
        bottom: var(--space-lg);
        right: var(--space-lg);
        width: 44px;
        height: 44px;
    }
}
/* ===== Footer - "The Friendly Game" ===== */

.footer {
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    border-top: 1px solid var(--card-border);
    background: var(--bg-primary);
}

.footer-container {
    max-width: var(--content-wide);
    margin: 0 auto;
}

/* ===== Footer Top: Brand + Link Columns ===== */
.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--card-border);
}

/* ===== Footer Brand ===== */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-brand-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.footer-copihue {
    width: 48px;
    height: auto;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.footer-copihue:hover {
    opacity: 1;
}

.footer-title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.footer-tagline {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-tertiary);
    max-width: 280px;
}

/* ===== Footer Link Columns ===== */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-column-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.footer-column a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
    padding: var(--space-xs) 0;
}

@media (hover: hover) and (pointer: fine) {
    .footer-column a:hover {
        color: var(--orange);
    }
}

/* ===== Footer Bottom: Copyright Bar ===== */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-lg);
    gap: var(--space-md);
}

.footer-copyright {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.footer-consent {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .footer-consent:hover {
        color: var(--orange);
    }
}

/* ===== Legacy support for old footer structure ===== */
.footer-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-subtitle {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.footer-meta {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Legacy single-row links (for pages not yet updated) */
.footer-links {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    align-items: center;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.footer-divider {
    color: var(--card-border);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
    .footer-links a:hover {
        color: var(--orange);
    }
}

/* ===== Social Links (if needed) ===== */
.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .footer-social a:hover {
        background: var(--orange-subtle);
        border-color: var(--orange);
        color: var(--orange);
    }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-brand {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-lg);
        border-bottom: 1px solid var(--card-border);
        margin-bottom: var(--space-sm);
    }

    .footer-tagline {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: var(--space-xl) var(--space-md) var(--space-lg);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .footer-brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }

    .footer-brand-header {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .footer-copihue {
        width: 40px;
    }

    .footer-title {
        font-size: var(--text-sm);
    }

    .footer-column {
        align-items: center;
        text-align: center;
    }

    .footer-column-title {
        font-size: 0.65rem;
    }

    .footer-column a {
        font-size: var(--text-xs);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    /* Legacy footer styles */
    .footer-container:not(:has(.footer-top)) {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-lg);
    }

    .footer-links {
        gap: var(--space-md);
        justify-content: center;
    }

    .footer-links a {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .footer {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding-bottom: var(--space-md);
    }

    .footer-brand {
        border-bottom: 1px solid var(--card-border);
        padding-bottom: var(--space-md);
        margin-bottom: 0;
    }

    /* Horizontal link layout on small mobile */
    .footer-column {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs) var(--space-md);
        padding-top: 0;
        border-top: none;
    }

    .footer-column-title {
        width: 100%;
        margin-bottom: 0;
    }

    .footer-column a {
        padding: var(--space-2xs) 0;
    }

    .footer-bottom {
        padding-top: var(--space-md);
    }
}
/* ===== Buttons - "The Friendly Game" ===== */

/* ===== Base Button ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 48px;
}

/* ===== Primary Button ===== */
.btn-primary {
    background: var(--gradient-orange);
    color: var(--text-inverse);
    box-shadow:
        0 6px 24px rgba(255, 107, 53, 0.35),
        0 2px 8px rgba(255, 149, 0, 0.2);
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow:
            0 10px 40px rgba(255, 107, 53, 0.45),
            0 4px 12px rgba(255, 149, 0, 0.25);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow:
            0 4px 16px rgba(255, 107, 53, 0.3),
            0 2px 6px rgba(255, 149, 0, 0.15);
    }
}

/* ===== Secondary Button ===== */
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

@media (hover: hover) and (pointer: fine) {
    .btn-secondary:hover {
        border-color: var(--orange);
        color: var(--orange);
        transform: translateY(-2px);
        box-shadow: var(--card-shadow-hover);
    }

    .btn-secondary:active {
        transform: translateY(0);
    }
}

/* ===== Ghost Button ===== */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 0.75rem 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover {
        color: var(--orange);
        background: var(--orange-subtle);
    }
}

/* ===== Outline Button ===== */
.btn-outline {
    background: transparent;
    color: var(--orange);
    border: 2px solid var(--orange);
}

@media (hover: hover) and (pointer: fine) {
    .btn-outline:hover {
        background: var(--orange);
        color: var(--text-inverse);
        transform: translateY(-2px);
    }
}

/* ===== Button Sizes ===== */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
    min-height: 36px;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: var(--text-base);
    min-height: 56px;
}

/* ===== Button with Icon ===== */
.btn-icon {
    padding: 0.75rem;
    min-height: 44px;
    min-width: 44px;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
}

/* ===== Pulse Animation (for CTAs) ===== */
.btn-pulse {
    position: relative;
}

.btn-pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--gradient-orange);
    opacity: 0;
    z-index: -1;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* ===== Button States ===== */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

/* ===== App Store Style Button ===== */
.btn-appstore {
    background: var(--black);
    color: var(--text-inverse);
    padding: 0.75rem 1.5rem;
    gap: var(--space-md);
}

.btn-appstore svg {
    width: 24px;
    height: 24px;
}

.btn-appstore-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.btn-appstore-label {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    opacity: 0.8;
}

.btn-appstore-store {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

@media (hover: hover) and (pointer: fine) {
    .btn-appstore:hover {
        background: #333;
        transform: translateY(-2px);
    }
}

/* ===== Link Style Button ===== */
.btn-link {
    background: none;
    color: var(--orange);
    padding: 0;
    min-height: auto;
    font-weight: var(--font-medium);
}

.btn-link:hover {
    text-decoration: underline;
    color: var(--orange-dark);
}
/* ===== Pills and Badges - "The Friendly Game" ===== */

/* ===== Base Pill ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

/* ===== Pill Variants ===== */
.pill-orange {
    background: var(--orange-subtle);
    border-color: rgba(255, 149, 0, 0.2);
    color: var(--orange);
}

.pill-blue {
    background: var(--blue-light);
    border-color: rgba(90, 200, 250, 0.3);
    color: var(--blue);
}

.pill-green {
    background: var(--green-light);
    border-color: rgba(52, 199, 89, 0.3);
    color: var(--green);
}

.pill-purple {
    background: var(--purple-light);
    border-color: rgba(175, 82, 222, 0.3);
    color: var(--purple);
}

.pill-pink {
    background: var(--pink-light);
    border-color: rgba(255, 107, 157, 0.3);
    color: var(--pink);
}

.pill-yellow {
    background: var(--yellow-light);
    border-color: rgba(255, 204, 0, 0.3);
    color: #B8860B; /* Darker yellow for readability */
}

/* ===== Pill with Icon ===== */
.pill-icon {
    font-size: 0.9rem;
}

/* ===== Live/Active Pill ===== */
.pill-live {
    background: var(--orange-subtle);
    border-color: rgba(255, 149, 0, 0.2);
    color: var(--orange);
}

.pill-live::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ===== Badge (smaller, more compact) ===== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-bold);
    background: var(--orange);
    color: var(--white);
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--orange);
    color: var(--orange);
}

/* ===== Tag (for categories/labels) ===== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.tag:hover {
    background: var(--orange-subtle);
    color: var(--orange);
}

/* ===== Status Indicators ===== */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active .status-dot {
    background: var(--green);
}

.status-pending .status-dot {
    background: var(--yellow);
}

.status-inactive .status-dot {
    background: var(--text-muted);
}
/* ===== Cards - "The Friendly Game" ===== */

/* ===== Base Card ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-4px);
    }
}

/* ===== Glass Card (Legacy - maps to new card) ===== */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--card-shadow);
    padding: var(--space-xl);
}

/* ===== Feature Card ===== */
.feature-card {
    position: relative;
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: 100%;
    overflow: hidden;
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .feature-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-4px);
    }
}

/* Feature Card Color Variants */
.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.feature-card.progress::before {
    background: var(--gradient-orange);
}

.feature-card.collect::before {
    background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%);
}

.feature-card.compete::before {
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
}

/* Feature Card Header */
.feature-header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    font-size: 1.25rem;
}

.feature-card.progress .feature-icon {
    background: var(--orange-subtle);
}

.feature-card.collect .feature-icon {
    background: var(--blue-light);
}

.feature-card.compete .feature-icon {
    background: var(--purple-light);
}

.feature-pill {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Feature Card Text */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.feature-text h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.feature-text p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: 0;
}

.feature-subtext {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.feature-phone-frame {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

/* ===== Company Card ===== */
.company-card {
    position: relative;
    min-width: 180px;
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .company-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

.company-logo {
    height: 60px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .company-card:hover .company-logo {
        filter: grayscale(0%);
        opacity: 1;
    }
}

.company-label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ===== Insight Card ===== */
.insight-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.insight-icon {
    font-size: 1.75rem;
}

.insight-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.insight-label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.insight-value {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* ===== Stat Card ===== */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--orange);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ===== Colored Background Cards ===== */
.card-orange {
    background: var(--orange-subtle);
    border-color: rgba(255, 149, 0, 0.2);
}

.card-blue {
    background: var(--blue-light);
    border-color: rgba(90, 200, 250, 0.3);
}

.card-green {
    background: var(--green-light);
    border-color: rgba(52, 199, 89, 0.3);
}

.card-purple {
    background: var(--purple-light);
    border-color: rgba(175, 82, 222, 0.3);
}

.card-pink {
    background: var(--pink-light);
    border-color: rgba(255, 107, 157, 0.3);
}

.card-yellow {
    background: var(--yellow-light);
    border-color: rgba(255, 204, 0, 0.3);
}

/* ===== Contact Card ===== */
.contact-card {
    padding: var(--space-2xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-card h3 {
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

.contact-card p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ===== FAQ Card ===== */
.faq-item {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.faq-item h3 {
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.faq-item p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ===== Step Card (for Daily Loop) ===== */
.step-card {
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--gradient-orange);
    color: var(--text-inverse);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}

/* ===== Progression Card ===== */
.progression-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.progression-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    font-size: 1.75rem;
    background: var(--gradient-orange);
    box-shadow: var(--btn-shadow);
}

.progression-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ===== Beta Form Card ===== */
.beta-form-card {
    padding: var(--space-2xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.beta-form-card h3 {
    font-size: var(--text-xl);
    color: var(--text-primary);
}

/* ===== Cycle Cards (Legacy - for daily loop) ===== */
.cycle-card,
.cycle-hub {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cycle-card p,
.cycle-hub-copy {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-secondary);
}

.cycle-label {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.cycle-chip {
    align-self: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.cycle-hub-title {
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* ===== Phone Frames - "The Friendly Game" ===== */

.phone-frame {
    position: relative;
    background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
    .phone-frame:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow:
            0 35px 70px rgba(0, 0, 0, 0.2),
            0 15px 30px rgba(0, 0, 0, 0.15),
            inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }
}

/* ===== Phone Frame Sizes ===== */
.hero-phone .phone-frame {
    width: 400px;
}

.phone-frame.large {
    width: 380px;
}

.phone-frame.medium {
    width: 320px;
}

.phone-frame.small {
    width: 260px;
}

.phone-frame.xs {
    width: 200px;
    border-radius: 32px;
    padding: 8px;
}

/* ===== Phone Screen ===== */
.phone-screen {
    width: 100%;
    height: auto;
    border-radius: 34px;
    display: block;
    animation: image-fade-in 0.6s ease;
}

.phone-frame.xs .phone-screen {
    border-radius: 26px;
}

@keyframes image-fade-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== White/Light Phone Frame Variant ===== */
.phone-frame.light {
    background: linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) and (pointer: fine) {
    .phone-frame.light:hover {
        box-shadow:
            0 35px 70px rgba(0, 0, 0, 0.15),
            0 15px 30px rgba(0, 0, 0, 0.08),
            inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }
}

/* ===== Phone Frame with Notch ===== */
.phone-frame.with-notch::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #1C1C1E;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

/* ===== Phone Frame Glow Effect ===== */
.phone-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero-phone .phone-frame {
        width: 350px;
    }

    .phone-frame.large {
        width: 320px;
    }

    .phone-frame.medium {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .hero-phone .phone-frame {
        width: 300px;
    }

    .phone-frame {
        border-radius: 36px;
        padding: 10px;
    }

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

    .phone-frame.large {
        width: 280px;
    }

    .phone-frame.medium {
        width: 250px;
    }

    .phone-frame.small {
        width: 220px;
    }
}

@media (max-width: 480px) {
    .hero-phone .phone-frame {
        width: 260px;
    }

    .phone-frame.large {
        width: 250px;
    }
}
/* ===== Forms - "The Friendly Game" ===== */

/* ===== Base Form Styles ===== */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ===== Form Group ===== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* ===== Input Fields ===== */
.form-input,
.email-input,
input[type="email"],
input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: all var(--transition-fast);
}

.form-input::placeholder,
.email-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

.form-input:focus,
.email-input:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-subtle);
    background: var(--white);
}

/* ===== Textarea ===== */
textarea {
    min-height: 120px;
    resize: vertical;
}

/* ===== Select ===== */
select {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: var(--font-body);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10L6 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    transition: all var(--transition-fast);
}

select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-subtle);
}

/* ===== Beta Form Specific ===== */
.beta-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.beta-form .btn-primary {
    width: 100%;
}

.beta-note {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* ===== Form Hint / Help Text ===== */
.form-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ===== Form Error ===== */
.form-error {
    font-size: var(--text-xs);
    color: var(--red);
}

.form-input.error,
input.error {
    border-color: var(--red);
}

.form-input.error:focus,
input.error:focus {
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

/* ===== Form Success ===== */
.form-input.success,
input.success {
    border-color: var(--green);
}

.form-input.success:focus,
input.success:focus {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.15);
}

/* ===== Checkbox & Radio ===== */
.form-checkbox,
.form-radio {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-checkbox input,
.form-radio input {
    width: 20px;
    height: 20px;
    accent-color: var(--orange);
    cursor: pointer;
}

/* ===== Inline Form (email + button) ===== */
.form-inline {
    display: flex;
    gap: var(--space-sm);
}

.form-inline input {
    flex: 1;
}

.form-inline .btn {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .form-inline {
        flex-direction: column;
    }

    .form-inline .btn {
        width: 100%;
    }
}
/* ===== Scoring Components - "The Friendly Game" ===== */

/* ===== Score Items ===== */
.score-item,
.summary-card {
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: all var(--transition-base);
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .score-item:hover,
    .summary-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

/* Colored top accent for score items */
.score-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.score-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
}

.score-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.score-icon,
.bonus-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.score-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.score-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
}

.score-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
}

.score-num {
    min-width: 2ch;
    font-weight: var(--font-extrabold);
    transition: color var(--transition-fast);
}

.score-divider {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.score-max {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
}

/* ===== Score Delta ===== */
.score-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    min-width: 3rem;
    display: none;
}

.score-delta.is-positive {
    background: var(--green-light);
    border-color: rgba(52, 199, 89, 0.3);
    color: var(--green);
}

.score-delta.is-negative {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.3);
    color: var(--red);
}

/* ===== Score Meter ===== */
.score-meter {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.score-meter-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Score Breakdown List ===== */
.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.breakdown-label {
    color: var(--text-secondary);
}

.breakdown-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-bold);
    font-size: var(--text-xs);
    padding: 0.1rem 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

/* ===== Theme-Specific Styling ===== */
.score-item.exposure::before {
    background: var(--gradient-orange);
}

.score-item.exposure .score-icon {
    color: var(--orange);
}

.score-item.exposure .score-num {
    color: var(--orange);
}

.score-item.exposure .score-meter-fill {
    background: var(--gradient-orange);
}

.score-item.focus::before {
    background: linear-gradient(135deg, var(--blue) 0%, #00BCD4 100%);
}

.score-item.focus .score-icon {
    color: var(--blue);
}

.score-item.focus .score-num {
    color: var(--blue);
}

.score-item.focus .score-meter-fill {
    background: linear-gradient(135deg, var(--blue) 0%, #00BCD4 100%);
}

.score-item.comp::before {
    background: linear-gradient(135deg, var(--green) 0%, #00BFA5 100%);
}

.score-item.comp .score-icon {
    color: var(--green);
}

.score-item.comp .score-num {
    color: var(--green);
}

.score-item.comp .score-meter-fill {
    background: linear-gradient(135deg, var(--green) 0%, #00BFA5 100%);
}

.score-item.theme::before {
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
}

.score-item.theme .score-icon {
    color: var(--purple);
}

.score-item.theme .score-num {
    color: var(--purple);
}

.score-item.theme .score-meter-fill {
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
}

/* ===== Summary Cards ===== */
.score-item.summary-card {
    gap: var(--space-sm);
}

.score-item.summary-card .score-meter {
    margin-top: var(--space-xs);
}

.score-value-percent {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.score-prefix,
.score-suffix {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.score-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.bonus-note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    flex: 1 1 150px;
}

.bonus-multiplier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--orange-subtle);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--orange);
    flex-shrink: 0;
}

.score-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.score-info-label {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: var(--font-medium);
}

.score-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
}

.summary-card.bonus-display::before {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
}

.summary-card.bonus-display .score-icon,
.summary-card.total-score .score-icon {
    color: var(--orange);
}

.summary-card.bonus-display .score-num {
    color: var(--orange);
}

.summary-card.total-score::before {
    background: var(--gradient-orange);
}

.summary-card.total-score .score-num {
    color: var(--orange);
}

/* ===== Critic Panel ===== */
.critic-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.critic-panel h3 {
    font-size: clamp(1.25rem, 2vw, var(--text-xl));
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-xs) 0 0;
}

.critic-overview,
.critic-bio {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-size: var(--text-sm);
}

.critic-quote {
    margin: 0;
    padding: var(--space-md);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.critic-focus {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.critic-heading {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.critic-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.critic-chip-list li {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.critic-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ===== Tabular Numbers ===== */
.score-value,
.score-delta,
.score-num,
.score-max,
.score-prefix,
.score-suffix {
    font-variant-numeric: tabular-nums;
}
/* ===== UI Enhancements - "The Friendly Game" ===== */

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1001; /* Above nav */
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    background: var(--gradient-orange);
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(255, 149, 0, 0.4);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    box-shadow: var(--card-shadow);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 149, 0, 0.3);
}

/* Pulse Animation for CTAs */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.3);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(255, 149, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0);
    }
}

.btn-pulse {
    animation: pulse-glow 2s infinite;
}

.btn-pulse:hover {
    animation: none; /* Stop pulse on hover as the button has its own hover state */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}
/* ===== Hero Section - "The Friendly Game" ===== */

.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: calc(var(--space-3xl) + 80px) var(--space-xl) var(--space-2xl);
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

/* Atmospheric gradient orbs */
.hero::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    top: -450px;
    right: -250px;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.12) 0%,
        rgba(255, 149, 0, 0.06) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
}

.hero::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    bottom: -350px;
    left: -150px;
    background: radial-gradient(
        circle,
        rgba(0, 217, 255, 0.08) 0%,
        rgba(0, 180, 216, 0.04) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

/* Subtle grid texture overlay */
.hero-grid-texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* ===== Hero Content Grid ===== */
.hero-content {
    width: 100%;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ===== Hero Text Column ===== */
.hero-text {
    position: relative;
    z-index: 1;
}

/* Badge (Beta/Coming Soon) */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--orange-subtle);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--orange);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    animation: fade-in-down 0.8s ease-out;
}

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

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

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

/* ===== Hero Title ===== */
.hero-title {
    font-size: clamp(2.75rem, 5.5vw, var(--text-6xl));
    font-weight: var(--font-extrabold);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    animation: fade-in-up 0.8s ease-out 0.1s both;
}

.hero-gradient {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Hero Subtitle ===== */
.hero-subtitle {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 32rem;
    min-height: 4.2rem; /* Reserve space for 2 lines to prevent layout shift during typewriter */
    animation: fade-in-up 0.8s ease-out 0.2s both;
}

/* ===== Hero Actions ===== */
.hero-actions {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
    animation: fade-in-up 0.8s ease-out 0.3s both;
}

.hero-actions .btn-primary {
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .hero-actions .btn-primary:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: var(--btn-shadow-hover);
    }
}

/* ===== Hero Stats Card ===== */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--space-xl);
    animation: fade-in-up 0.8s ease-out 0.4s both;
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .hero-stats:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }
}

.hero-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.hero-stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.hero-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--orange);
    line-height: 1;
}

.hero-stat-label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ===== Hero Insights ===== */
.hero-insights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    animation: fade-in-up 0.8s ease-out 0.5s both;
    max-width: 28rem;
}

.hero-insight {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .hero-insight:hover {
        transform: translateY(-3px);
        box-shadow: var(--card-shadow-hover);
        border-color: var(--orange-light);
    }
}

.hero-insight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hero-insight-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hero-insight-label {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.hero-insight-value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* ===== Hero Phone Column ===== */
.hero-phone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    animation: fade-in-up 1s ease-out 0.3s both;
}

/* Soft glow behind phone */
.hero-phone::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(
        circle at 50% 50%,
        var(--orange-subtle) 0%,
        transparent 60%
    );
    border-radius: 50%;
    z-index: 0;
    opacity: 0.6;
}

.hero-phone .phone-frame {
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.15));
}

/* Parallax effect hint */
.hero-phone .phone-frame[data-parallax] {
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .hero-phone:hover .phone-frame {
        transform: translateY(-8px) scale(1.02);
    }
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    .hero {
        padding: calc(var(--space-2xl) + 70px) var(--space-lg) var(--space-xl);
    }

    .hero-content {
        gap: var(--space-2xl);
    }

    .hero-title {
        font-size: clamp(2.25rem, 5vw, 3rem);
    }

    .hero-stats {
        padding: var(--space-md) var(--space-lg);
    }

    .hero-stat-value {
        font-size: var(--text-xl);
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
    .hero {
        padding: calc(var(--space-2xl) + 60px) var(--space-md) var(--space-xl);
        min-height: auto;
        padding-bottom: var(--space-3xl);
    }

    .hero::before {
        width: 500px;
        height: 500px;
        top: -250px;
        right: -150px;
        filter: blur(30px);
    }

    .hero::after {
        width: 400px;
        height: 400px;
        bottom: -200px;
        left: -100px;
        filter: blur(40px);
    }

    .hero-grid-texture {
        background-size: 32px 32px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }

    .hero-text {
        order: 1;
    }

    .hero-phone {
        order: 2;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        margin-bottom: var(--space-md);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        min-height: 3.75rem; /* Reserve space for 2 lines on mobile */
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        padding: var(--space-md);
        gap: var(--space-sm);
        margin-bottom: var(--space-lg);
    }

    .hero-stat {
        gap: 0.25rem;
    }

    .hero-stat-icon {
        font-size: 1.25rem;
    }

    .hero-stat-value {
        font-size: var(--text-lg);
    }

    .hero-stat-label {
        font-size: 0.65rem;
    }

    .hero-insights {
        max-width: 100%;
        gap: var(--space-sm);
    }

    .hero-insight {
        padding: var(--space-sm);
        gap: var(--space-xs);
    }

    .hero-insight-icon {
        font-size: 1.25rem;
    }

    .hero-insight-value {
        font-size: var(--text-xs);
    }

    .hero-insight-label {
        font-size: 0.6rem;
    }

    .hero-phone::before {
        width: 100%;
        height: 100%;
    }

    .hero-phone .phone-frame {
        max-width: 280px;
    }
}

/* ===== Small Mobile ===== */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .hero-stat {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-sm);
        text-align: left;
    }

    .hero-insights {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   VIDEO DEMO SECTION - "The Friendly Game"
   Portrait video with side content highlights
   ============================================================ */

.video-demo {
    position: relative;
    padding: var(--space-3xl) clamp(var(--space-md), 7vw, var(--space-2xl));
    background: var(--bg-secondary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.video-demo::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.6;
}

.video-demo::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.video-demo-container {
    position: relative;
    z-index: 1;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-2xl), 7vw, var(--space-3xl));
}

.video-header {
    max-width: var(--content-readable);
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
}

.video-header .section-overline {
    margin: 0;
}

.video-header .section-title {
    margin: 0;
}

.video-header .section-subtitle {
    max-width: min(var(--content-readable), 640px);
    margin: 0 auto;
    font-size: clamp(var(--text-base), 2.4vw, 1.25rem);
    color: var(--text-secondary);
    line-height: 1.65;
}

.video-content-wrapper {
    display: grid;
    grid-template-columns: clamp(260px, 30vw, 360px) minmax(0, 1fr);
    gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    align-items: center;
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
}

.video-phone-container {
    position: relative;
    display: flex;
    justify-content: center;
    padding: clamp(var(--space-sm), 3vw, var(--space-md)) 0;
    isolation: isolate;
}

.video-phone-frame {
    position: relative;
    width: 100%;
    max-width: clamp(280px, 30vw, 360px);
    aspect-ratio: 1320 / 2868;
    border-radius: calc(var(--radius-2xl) + 4px);
    background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
    padding: clamp(10px, 1.4vw, 14px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-phone-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: calc(var(--radius-2xl) - 8px);
    background: #000;
    display: block;
}

.video-highlights {
    display: grid;
    gap: clamp(var(--space-md), 3.2vw, var(--space-lg));
}

.video-highlight-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(var(--space-sm), 2vw, var(--space-md));
    align-items: center;
    padding: clamp(var(--space-md), 3.2vw, var(--space-lg));
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
}

.highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 5vw, 58px);
    height: clamp(52px, 5vw, 58px);
    font-size: clamp(1.75rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    flex-shrink: 0;
}

.highlight-content {
    display: grid;
    gap: var(--space-xs);
}

.highlight-title {
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.35;
}

.highlight-text {
    font-size: clamp(var(--text-sm), 2vw, var(--text-base));
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Subtle glow behind phone */
.video-phone-container::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

.video-phone-container::after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .video-phone-frame:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 35px 70px rgba(0, 0, 0, 0.2),
            0 15px 30px rgba(0, 0, 0, 0.15),
            inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }

    .video-highlight-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .video-demo {
        padding: var(--space-2xl) clamp(var(--space-md), 6vw, var(--space-xl));
    }

    .video-content-wrapper {
        grid-template-columns: clamp(240px, 36vw, 320px) minmax(0, 1fr);
        gap: clamp(var(--space-lg), 4.5vw, var(--space-xl));
    }

    .video-highlight-item {
        padding: clamp(var(--space-md), 4.5vw, var(--space-lg));
    }
}

@media (max-width: 768px) {
    .video-demo {
        padding: var(--space-2xl) clamp(var(--space-sm), 7vw, var(--space-lg));
    }

    .video-demo-container {
        gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
    }

    .video-content-wrapper {
        grid-template-columns: 1fr;
        gap: clamp(var(--space-lg), 6vw, var(--space-xl));
    }

    .video-phone-container {
        margin: 0 auto;
        max-width: 360px;
    }

    .video-highlights {
        gap: clamp(var(--space-md), 5vw, var(--space-lg));
    }
}

@media (max-width: 520px) {
    .video-demo {
        padding: var(--space-xl) clamp(var(--space-sm), 6vw, var(--space-md));
    }

    .video-phone-container {
        padding: var(--space-sm) 0;
    }

    .video-phone-frame {
        max-width: 100%;
        border-radius: calc(var(--radius-xl) + 6px);
        padding: clamp(8px, 2.6vw, 12px);
    }

    .video-phone-frame iframe {
        border-radius: calc(var(--radius-xl) - 4px);
    }

    .video-highlights {
        gap: clamp(var(--space-sm), 5vw, var(--space-md));
    }

    .video-highlight-item {
        gap: clamp(var(--space-xs), 3.5vw, var(--space-sm));
        padding: clamp(var(--space-sm), 6vw, var(--space-md));
        border-radius: var(--radius-lg);
    }

    .highlight-icon {
        width: clamp(42px, 14vw, 48px);
        height: clamp(42px, 14vw, 48px);
        font-size: clamp(1.4rem, 5vw, 1.65rem);
        border-radius: var(--radius-md);
    }

    .highlight-title {
        font-size: clamp(0.98rem, 4.8vw, 1.1rem);
    }

    .highlight-text {
        font-size: clamp(0.85rem, 4.2vw, 0.98rem);
    }
}

@media (max-width: 360px) {
    .video-demo {
        padding: var(--space-lg) var(--space-sm);
    }

    .video-highlights {
        gap: var(--space-sm);
    }

    .video-highlight-item {
        padding: clamp(0.85rem, 6vw, 1rem);
    }
}

/* YouTube Facade - Lazy load */
.youtube-facade {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: calc(var(--radius-2xl) - 8px);
    overflow: hidden;
    background: #000;
}

.youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.youtube-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.youtube-facade:hover .youtube-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}
/* ===== Manifesto Section - "The Friendly Game" ===== */

.manifesto {
    position: relative;
    padding: var(--space-3xl) clamp(var(--space-md), 8vw, var(--space-2xl));
    background: var(--bg-primary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.manifesto::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.manifesto::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -80px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.manifesto-container {
    max-width: var(--content-medium);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.manifesto-content {
    position: relative;
    padding: clamp(var(--space-xl), 6vw, var(--space-2xl));
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: grid;
    gap: clamp(var(--space-md), 3vw, var(--space-lg));
}

.manifesto-title {
    margin: 0 0 var(--space-md) 0;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-wrap: balance;
}

.manifesto-title .title-gradient {
    display: inline-block;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.manifesto-body {
    display: grid;
    gap: var(--space-md);
    max-width: var(--content-readable);
}

.manifesto-body p {
    margin: 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1.75;
    color: var(--text-secondary);
    text-wrap: pretty;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.manifesto-body p + p {
    position: relative;
    padding-top: var(--space-md);
}

.manifesto-body p + p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--gradient-orange);
}

.manifesto-closing {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    line-height: 1.8;
}

.manifesto-line.revealed {
    opacity: 1;
    transform: translateY(0);
}

.manifesto-highlight {
    color: var(--orange);
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
}

.manifesto-emphasis {
    color: var(--text-primary);
    font-style: italic;
}

.manifesto-gradient-text {
    display: inline-block;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 1024px) {
    .manifesto {
        padding: var(--space-2xl) clamp(var(--space-md), 6vw, var(--space-xl));
    }

    .manifesto-content {
        padding: clamp(var(--space-lg), 7vw, var(--space-xl));
    }
}

@media (max-width: 768px) {
    .manifesto {
        padding: var(--space-xl) var(--space-md);
    }

    .manifesto-content {
        padding: clamp(var(--space-md), 8vw, var(--space-lg));
    }

    .manifesto-title {
        margin-bottom: var(--space-sm);
    }

    .manifesto-body {
        gap: var(--space-md);
    }

    .manifesto-body p {
        font-size: 1rem;
        line-height: 1.7;
        will-change: auto;
    }

    .manifesto-body p + p::before {
        width: 36px;
    }
}

@media (max-width: 480px) {
    .manifesto-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .manifesto-body p {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manifesto-body p {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .manifesto-gradient-text {
        animation: none !important;
    }
}
/* ===== How It's Different Section - "The Friendly Game" ===== */

.different {
    position: relative;
    padding: var(--space-3xl) clamp(var(--space-md), 7vw, var(--space-2xl));
    background: var(--bg-secondary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.different::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    left: -150px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.different::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.different-container {
    position: relative;
    z-index: 1;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.different-header {
    max-width: var(--content-readable);
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: var(--space-sm);
}

.different-grid {
    display: grid;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.different-item {
    grid-column: span 4;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: clamp(var(--space-lg), 2.6vw, var(--space-xl));
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

/* Colored top accent */
.different-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.different-item:nth-child(1)::before {
    background: var(--gradient-orange);
}

.different-item:nth-child(2)::before {
    background: linear-gradient(135deg, var(--green) 0%, #00BFA5 100%);
}

.different-item:nth-child(3)::before {
    background: linear-gradient(135deg, var(--blue) 0%, #00BCD4 100%);
}

.different-item:last-child::before {
    background: var(--gradient-orange);
}

@media (hover: hover) and (pointer: fine) {
    .different-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

.different-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    font-size: 1.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
}

.different-item:nth-child(1) .different-icon {
    color: var(--orange);
}

.different-item:nth-child(2) .different-icon {
    color: var(--green);
}

.different-item:nth-child(3) .different-icon {
    color: var(--blue);
}

.different-item h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.different-item p {
    font-size: var(--text-base);
    line-height: 1.68;
    color: var(--text-secondary);
    margin: 0;
}

/* Last item - full width highlight */
.different-item:last-child {
    grid-column: span 12;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: clamp(var(--space-md), 3vw, var(--space-xl));
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
    background: linear-gradient(135deg, var(--orange-subtle) 0%, var(--blue-light) 100%);
    border-color: rgba(255, 149, 0, 0.2);
}

.different-item:last-child .different-icon {
    grid-row: 1 / span 2;
    font-size: 2rem;
    width: 64px;
    height: 64px;
    background: var(--white);
    color: var(--orange);
}

.different-item:last-child h3 {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.different-item:last-child p {
    max-width: 60ch;
    color: var(--text-primary);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .different-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .different-item {
        grid-column: auto;
    }

    .different-item:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .different {
        padding: var(--space-2xl) var(--space-md);
    }

    .different-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .different-item {
        padding: clamp(var(--space-md), 6vw, var(--space-lg));
    }

    .different-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .different-item h3 {
        font-size: var(--text-lg);
    }

    .different-item:last-child {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .different-item:last-child .different-icon {
        margin-bottom: var(--space-sm);
        grid-row: auto;
    }
}
/* ===== Demo Video Section - "The Friendly Game" ===== */

.demo {
    position: relative;
    padding: var(--space-3xl) clamp(var(--space-md), 6vw, var(--space-lg));
    background: var(--bg-primary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.demo::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.demo::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -80px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.demo-container {
    max-width: min(920px, var(--content-medium));
    margin: 0 auto;
    position: relative;
    text-align: center;
    z-index: 1;
}

.demo-content {
    display: grid;
    gap: var(--space-xl);
    justify-items: center;
}

.demo-subtitle {
    max-width: min(var(--content-readable), 620px);
    margin: 0 auto;
    color: var(--text-secondary);
}

.demo-video-wrapper {
    position: relative;
    width: clamp(260px, 38vw, 360px);
    aspect-ratio: 9/16;
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.demo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-2xl);
}

.demo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--text-secondary);
    text-align: center;
    background: var(--bg-secondary);
}

.demo-placeholder-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-placeholder-copy {
    font-size: var(--text-sm);
    line-height: 1.55;
    max-width: 220px;
    color: var(--text-tertiary);
}

.demo-note {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    max-width: 420px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .demo {
        padding: var(--space-xl) var(--space-md);
    }

    .demo-video-wrapper {
        width: clamp(220px, 70vw, 280px);
    }
}
/* ===== Daily Loop Section - "The Friendly Game" ===== */

.daily-loop {
    position: relative;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--bg-primary);
    overflow: hidden;
}

/* Decorative background */
.daily-loop::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: -300px;
    right: -200px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.3;
}

.daily-loop .cycle-background {
    display: none; /* Remove old animated background */
}

.loop-container {
    max-width: var(--content-wide);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== Loop Header ===== */
.loop-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.loop-header .section-subtitle {
    max-width: 640px;
    margin: var(--space-md) auto 0;
    color: var(--text-secondary);
}

/* ===== Daily Flow ===== */
.daily-flow-wrapper {
    width: 100%;
}

.daily-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* ===== Flow Step Card ===== */
.flow-step-new {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-2xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    max-width: 1000px;
    margin-inline: auto;
    transition: all var(--transition-base);
    opacity: 1;
    transform: none;
    animation: none;
}

/* Remove old glassmorphism effects */
.flow-step-new::before,
.flow-step-new::after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .flow-step-new:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-4px);
    }

    .flow-step-new:hover .phone-frame {
        transform: translateY(-6px) scale(1.02);
    }
}

/* Alternate layout */
.flow-step-new.reverse .step-info {
    order: 1;
}

.flow-step-new.reverse .step-screenshot {
    order: 2;
}

/* ===== Step Screenshot ===== */
.step-screenshot {
    display: flex;
    justify-content: center;
    position: relative;
}

.step-screenshot::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
}

.step-screenshot .phone-frame {
    max-width: clamp(220px, 20vw, 280px);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
    transition: transform var(--transition-base);
}

/* ===== Step Info ===== */
.step-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

/* Step Badge */
.step-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--orange-subtle);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--orange);
}

.step-title {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
}

.step-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* Step Meta Tags */
.step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .flow-step-new {
        gap: var(--space-xl);
        padding: var(--space-xl);
    }

    .step-screenshot .phone-frame {
        max-width: 240px;
    }
}

@media (max-width: 768px) {
    .daily-loop {
        padding: var(--space-2xl) var(--space-md);
    }

    .loop-header {
        margin-bottom: var(--space-2xl);
    }

    /* Horizontal scroll on mobile */
    .daily-flow {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .daily-flow::-webkit-scrollbar {
        display: none;
    }

    .flow-step-new,
    .flow-step-new.reverse {
        min-width: 100vw;
        max-width: 100vw;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-xl) var(--space-lg);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .flow-step-new.reverse .step-info,
    .flow-step-new.reverse .step-screenshot {
        order: unset;
    }

    .step-screenshot {
        order: -1;
        margin-top: var(--space-sm);
    }

    .step-screenshot .phone-frame {
        max-width: 230px;
    }

    .step-info {
        padding: 0;
        text-align: center;
        align-items: center;
    }

    .step-title {
        font-size: 1.35rem;
    }

    .step-description {
        font-size: var(--text-sm);
    }

    .step-meta {
        justify-content: center;
    }

    .meta-item {
        font-size: 0.65rem;
    }
}

/* Animation for scroll-triggered appearance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flow-step-new[data-animate] {
    opacity: 0;
    transform: translateY(30px);
}

.flow-step-new[data-animate].visible {
    animation: fadeInUp 0.6s ease forwards;
}
/* ===== Scoring Section - "The Friendly Game" ===== */

.scoring {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--bg-secondary);
    overflow: hidden;
}

/* Decorative background shapes */
.scoring::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.scoring::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -150px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

/* ===== Scoring Container ===== */
.scoring-container {
    width: 100%;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: clamp(280px, 32vw, 360px) 1fr;
    gap: var(--space-2xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ===== Phone Stage ===== */
.scoring-visuals {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.phone-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-stage::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 0;
}

.phone-stage .phone-frame {
    width: clamp(280px, 30vw, 340px);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.12));
    transition: transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .phone-stage .phone-frame:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

/* ===== Scoring Content ===== */
.scoring-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
}

.scoring-copy {
    max-width: 32rem;
}

.scoring-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-md);
}

/* ===== Critic Badge ===== */
.critic-today-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--space-lg);
}

.critic-avatar-small {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-orange);
    font-size: 1.25rem;
    color: var(--white);
}

.critic-info-small {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.critic-name-small {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.critic-bonus {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
}

/* ===== Scoring Breakdown ===== */
.scoring-breakdown {
    width: 100%;
}

/* ===== Scoring Formula Card ===== */
.scoring-formula {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.scoring-formula h4 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.formula {
    margin: var(--space-xs) 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.formula-example {
    margin: var(--space-sm) 0 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.formula-example strong {
    color: var(--orange);
    font-weight: var(--font-bold);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .scoring-container {
        grid-template-columns: clamp(260px, 28vw, 320px) 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .scoring {
        padding: var(--space-2xl) var(--space-md);
        min-height: auto;
    }

    .scoring-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .scoring-visuals {
        order: -1;
    }

    .scoring-content {
        text-align: center;
        align-items: center;
    }

    .scoring-content h2 {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .scoring-copy {
        max-width: 100%;
    }

    .scoring-description {
        font-size: var(--text-base);
    }

    .phone-stage .phone-frame {
        width: 280px;
    }

    .scoring-formula {
        margin-top: var(--space-lg);
        padding: var(--space-md);
    }

    .formula,
    .formula-example {
        font-size: var(--text-sm);
    }
}
/* ===== Scoring Grid - "The Friendly Game" ===== */

.scoring-grid-new {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.5rem, 1vw, 0.75rem);
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: initial;
    overflow: visible;
    height: 100%;
    align-content: start;
    max-width: 600px;
}

.scoring-grid-new::before {
    content: none;
}

.scoring-grid-new::after {
    content: none;
}

/* Score Item Styles in Grid */
.scoring-grid-new .score-item {
    margin: 0;
}

.scoring-grid-new .score-item:not(.summary-card) {
    min-height: clamp(110px, 12vw, 140px);
}

.scoring-grid-new .summary-card {
    grid-column: span 2;
    min-height: clamp(75px, 8vw, 95px);
}

.scoring-grid-new .score-item > * {
    position: relative;
    z-index: 1;
}

/* Theme-specific colors for grid items */
.scoring-grid-new .exposure .score-icon {
    color: var(--orange);
}

.scoring-grid-new .focus .score-icon {
    color: var(--blue);
}

.scoring-grid-new .comp .score-icon {
    color: var(--green);
}

.scoring-grid-new .theme .score-icon {
    color: var(--purple);
}

@media (hover: hover) and (pointer: fine) {
    .scoring-grid-new .score-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

.score-item.is-updating {
    box-shadow: var(--card-shadow-hover);
}

/* Theme-specific score numbers */
.scoring-grid-new .exposure .score-num {
    color: var(--orange);
}

.scoring-grid-new .focus .score-num {
    color: var(--blue);
}

.scoring-grid-new .comp .score-num {
    color: var(--green);
}

.scoring-grid-new .theme .score-num {
    color: var(--purple);
}
/* ===== Critic Panel - "The Friendly Game" ===== */

.critic-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

.critic-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.critic-header h3 {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.critic-overview {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 44ch;
}

.critic-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.critic-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.critic-bio {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.critic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.critic-tag {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.critic-quote {
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border-left: 3px solid var(--orange);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.6;
    font-style: italic;
}

.critic-focus {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.critic-heading {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.critic-chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.critic-chip-list li {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--space-md);
}

.critic-chip-list li::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

/* New critic panel elements */
.critic-traits {
    display: flex;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    flex-wrap: wrap;
}

.trait-badge {
    background: var(--gradient-orange);
    color: var(--white);
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.bonus-targets-display {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}

.target-list {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.target-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.target-icon {
    font-size: var(--text-lg);
}

.target-name {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.scoring-formula-display {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
}

.formula-text {
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.critic-rotation {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.critic-roster-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.critic-roster-pills span {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

/* Bonus and Total Score Styles */
.bonus-icon {
    color: var(--yellow);
}

.total-score .score-icon {
    color: var(--orange);
}

.scoring-grid-new .bonus-value {
    font-size: 2rem;
    color: var(--yellow);
    font-weight: var(--font-extrabold);
    letter-spacing: 0.04em;
}

.bonus-num {
    font-size: 2rem;
    display: inline-block;
    font-weight: var(--font-extrabold);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: right;
    color: var(--yellow);
}

.total-num {
    font-size: 2.25rem;
    color: var(--orange);
    min-width: 3.6ch;
    display: inline-block;
    font-weight: var(--font-extrabold);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: right;
}

.total-value {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1.75rem;
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
}

.total-max {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
}

.total-score .score-meter-fill {
    background: var(--gradient-orange);
}

/* Summary card variations */
.summary-card.bonus-display {
    border-color: rgba(255, 204, 0, 0.3);
    background: linear-gradient(135deg, var(--yellow-light) 0%, var(--orange-subtle) 100%);
}

.summary-card.total-score {
    border-color: rgba(255, 149, 0, 0.3);
    background: linear-gradient(135deg, var(--orange-subtle) 0%, var(--blue-light) 100%);
}

.summary-card .bonus-num {
    color: var(--yellow);
}

.summary-card.total-score .total-num {
    color: var(--orange);
}

/* All numeric values use tabular nums */
.bonus-value,
.bonus-num,
.total-value,
.total-num,
.total-max {
    font-variant-numeric: tabular-nums;
}
/* ===== Features Section - "The Friendly Game" ===== */

.features {
    position: relative;
    padding: var(--space-3xl) clamp(var(--space-md), 6vw, var(--space-lg));
    background: var(--bg-secondary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.features::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    left: -150px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.features::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.features-container {
    max-width: var(--content-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.features-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.features-subtitle {
    max-width: min(var(--content-readable), 680px);
    margin: var(--space-md) auto 0;
    color: var(--text-secondary);
}

.features-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
    align-items: stretch;
}

.feature-card-new {
    position: relative;
    display: grid;
    grid-template-columns: clamp(240px, 28vw, 320px) minmax(0, 1fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-xl));
    align-items: center;
    padding: clamp(var(--space-md), 4vw, var(--space-lg));
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Colored top accent */
.feature-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-orange);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.feature-card-new > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .feature-card-new:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }

    .feature-card-new:hover .phone-frame {
        transform: translateY(-4px) scale(1.01);
    }
}

.feature-screenshot {
    display: flex;
    justify-content: center;
    position: relative;
    isolation: isolate;
}

/* Subtle glow behind phone */
.feature-screenshot::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.feature-screenshot .phone-frame {
    max-width: clamp(220px, 26vw, 290px);
    transform: translateY(0);
    transition: transform 0.4s ease;
    position: relative;
    z-index: 1;
}

.feature-content {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-md), 2.4vw, var(--space-lg));
    align-items: flex-start;
}

.feature-content::before {
    display: none;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    background: var(--orange-subtle);
    border: 1px solid rgba(255, 149, 0, 0.2);
    color: var(--orange);
    justify-self: flex-start;
}

.feature-summary-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-xs), 1.6vw, var(--space-sm));
    padding: clamp(var(--space-sm), 2.2vw, var(--space-md));
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    width: 100%;
}

.feature-summary-panel > * {
    position: relative;
    z-index: 1;
}

.feature-content h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.feature-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: clamp(var(--text-sm), 1.5vw, var(--text-base));
    line-height: 1.75;
    max-width: 50ch;
}

.feature-summary {
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.45vw, 1.08rem);
    line-height: 1.7;
    max-width: 52ch;
}

.feature-points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature-callouts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.feature-callouts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: clamp(0.82rem, 1.2vw, 0.92rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .features-grid {
        gap: var(--space-xl);
    }

    .feature-card-new {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .feature-screenshot {
        justify-self: center;
        order: -1;
    }

    .feature-content {
        align-items: center;
        text-align: center;
    }

    .feature-callouts {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .features {
        padding: var(--space-xl) var(--space-md);
    }

    .features-header {
        margin-bottom: var(--space-xl);
    }

    .features-grid {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .features-grid::-webkit-scrollbar {
        display: none;
    }

    .feature-card-new {
        min-width: 100vw;
        max-width: 100vw;
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding: var(--space-lg) var(--space-md);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .feature-screenshot {
        order: -1;
    }

    .feature-screenshot .phone-frame {
        max-width: 220px;
    }

    .feature-content {
        align-items: flex-start;
        text-align: left;
        gap: var(--space-md);
    }

    .feature-callouts {
        justify-content: flex-start;
    }
}
/* ===== Team Section - "The Friendly Game" ===== */

.team {
    padding: var(--space-3xl) var(--space-xl);
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
}

/* Decorative background shapes */
.team::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    left: -150px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.team::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.team-container {
    position: relative;
    z-index: 1;
    max-width: var(--content-medium);
    margin: 0 auto;
    text-align: center;
}

/* ===== Team Intro ===== */
.team-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.team-intro .section-title {
    margin-bottom: 0;
}

.team-subtitle {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    margin: 0;
    max-width: 32rem;
    line-height: var(--leading-relaxed);
}

/* ===== Company Row ===== */
.company-row {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    margin: var(--space-xl) auto;
    padding: var(--space-2xl) var(--space-lg);
    max-width: var(--content-max);
}

.team-logos-intro {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    position: relative;
    z-index: 1;
}

.company-cards-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-lg);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.company-logo {
    height: 60px;
    max-width: 140px;
    object-fit: contain;
    filter: brightness(0) opacity(0.5);
    transition: all var(--transition-base);
}

.company-card:hover .company-logo {
    filter: brightness(0) opacity(0.8);
}

/* DeNA logo inherits from .company-logo - no override needed */

/* ===== Team Stats ===== */
.team-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.team-stat {
    text-align: center;
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .team-stat:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

.stat-number {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--orange);
    margin-bottom: var(--space-xs);
    line-height: 1;
}

.stat-text {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .team {
        padding: var(--space-2xl) var(--space-md);
    }

    .team-intro {
        gap: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .team-subtitle {
        font-size: var(--text-lg);
    }

    .team-logos-intro {
        font-size: 0.65rem;
    }

    .company-row {
        gap: var(--space-lg);
        margin: var(--space-xl) auto var(--space-lg);
        padding: var(--space-xl) var(--space-md);
    }

    .company-cards-wrapper {
        gap: var(--space-md);
    }

    .dena-logo {
        height: 48px;
        max-width: 120px;
    }

    .team-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .stat-number {
        font-size: var(--text-2xl);
    }

    .stat-text {
        font-size: 0.65rem;
    }
}
/* ===== FAQ Section - "The Friendly Game" ===== */

.faq {
    position: relative;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--bg-secondary);
    overflow: hidden;
}

/* Decorative background shapes */
.faq::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}

.faq::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -150px;
    left: -100px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

/* ===== FAQ Container ===== */
.faq-container {
    position: relative;
    z-index: 1;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* ===== FAQ Header ===== */
.faq-header {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ===== FAQ Grid ===== */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

/* ===== FAQ Item Card ===== */
.faq-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-base);
    overflow: hidden;
}

/* Colored top accent */
.faq-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-orange);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* Color variations */
.faq-item:nth-child(2)::before {
    background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
}

.faq-item:nth-child(3)::before {
    background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
}

.faq-item:nth-child(4)::before {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
}

.faq-item h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.faq-item p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: 0;
}

@media (hover: hover) and (pointer: fine) {
    .faq-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .faq-grid {
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .faq {
        padding: var(--space-2xl) var(--space-md);
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .faq-item {
        padding: var(--space-lg);
    }

    .faq-item h3 {
        font-size: var(--text-base);
    }

    .faq-item p {
        font-size: var(--text-sm);
    }
}
/* Waitlist/Contact Section - "The Friendly Game" */

.waitlist {
    position: relative;
    padding: var(--spacing-5xl) clamp(var(--spacing-md), 6vw, var(--spacing-lg));
    background: var(--bg-secondary);
    overflow: hidden;
    isolation: isolate;
}

/* Decorative background shapes */
.waitlist::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    left: -150px;
    background: radial-gradient(circle, var(--orange-subtle) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.6;
}

.waitlist::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, var(--blue-light) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

.waitlist-container {
    max-width: var(--content-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.waitlist-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.waitlist-subtitle {
    max-width: min(var(--content-readable), 720px);
    margin: var(--spacing-lg) auto 0;
    color: var(--text-secondary);
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-3xl);
}

.contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
    border-radius: var(--radius-2xl);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
}

/* Colored top accent */
.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-orange);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

@media (hover: hover) and (pointer: fine) {
    .contact-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
    }
}

.contact-card.featured {
    border-color: rgba(255, 149, 0, 0.3);
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.card-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: var(--text-3xl);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
}

.card-header h3 {
    margin: 0;
    font-size: clamp(var(--text-2xl), 3vw, 2rem);
    color: var(--text-primary);
}

.card-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
}

.card-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.card-benefits li {
    position: relative;
    padding-left: calc(var(--spacing-lg) - 6px);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.card-benefits li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: auto;
}

.beta-actions {
    margin-top: auto;
    width: 100%;
}

.beta-actions .btn-primary {
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.email-input,
.name-input,
.company-input,
.message-input {
    width: 100%;
    padding: calc(var(--spacing-md) - 4px) calc(var(--spacing-md) + 4px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.email-input::placeholder,
.name-input::placeholder,
.company-input::placeholder,
.message-input::placeholder {
    color: var(--text-tertiary);
}

.message-input {
    min-height: 90px;
    resize: vertical;
    font-family: inherit;
}

.email-input:focus,
.name-input:focus,
.company-input:focus,
.message-input:focus {
    outline: none;
    border-color: var(--orange);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

.contact-form .btn-primary {
    align-self: flex-start;
}

.contact-card.featured .contact-form .btn-primary {
    align-self: stretch;
}

.team-note {
    margin-top: var(--spacing-2xl);
    text-align: center;
}

.team-note p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-style: italic;
}

/* Availability note for country list */
.availability-note {
    margin: var(--spacing-md) 0 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 768px) {
    .waitlist {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .waitlist-header {
        margin-bottom: var(--spacing-2xl);
    }

    .contact-options {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .contact-card {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .card-description {
        font-size: var(--text-sm);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-benefits {
        display: none;
    }

    .contact-form {
        gap: var(--spacing-sm);
    }

    .email-input,
    .name-input,
    .company-input,
    .message-input {
        padding: calc(var(--spacing-sm) + 2px) var(--spacing-md);
        font-size: var(--text-sm);
    }

    .message-input {
        min-height: 60px;
    }

    .contact-form .btn-primary {
        width: 100%;
        align-self: stretch;
    }
}
/* ===== Thank You Page ===== */

.thank-you-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 138, 0, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 88% 20%, rgba(79, 195, 247, 0.1) 0%, transparent 50%),
        var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

.thank-you-main {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(var(--spacing-3xl), 8vw, var(--spacing-5xl)) clamp(var(--spacing-md), 6vw, var(--spacing-2xl));
    overflow: hidden;
}

.thank-you-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, var(--orange-subtle), transparent 60%),
        radial-gradient(circle at 70% 80%, var(--blue-light), transparent 60%);
    opacity: 0.8;
    z-index: 0;
    animation: thank-you-gradient 24s ease-in-out infinite alternate;
}

@keyframes thank-you-gradient {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05) translateY(-10px);
        opacity: 1;
    }
    100% {
        transform: scale(1.02) translateY(12px);
        opacity: 0.95;
    }
}

.thank-you-content {
    position: relative;
    z-index: 1;
    max-width: min(var(--content-medium), 560px);
    padding: clamp(var(--spacing-2xl), 6vw, var(--spacing-3xl));
    border-radius: var(--radius-2xl);
    text-align: center;
    display: grid;
    gap: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
}

.thank-you-logo img {
    width: clamp(160px, 22vw, 200px);
    height: auto;
    filter: drop-shadow(0 14px 32px rgba(255, 138, 0, 0.35));
}

.thank-you-content .section-overline {
    margin: 0 auto;
    letter-spacing: 0.26em;
}

.thank-you-title {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.thank-you-copy {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    line-height: 1.7;
    color: var(--text-secondary);
}

.thank-you-note {
    color: var(--text-tertiary);
}

.thank-you-content .btn {
    justify-self: center;
    min-width: 220px;
}

@media (max-width: 768px) {
    .thank-you-body {
        background: var(--bg-primary);
    }

    .thank-you-main {
        padding: var(--spacing-3xl) var(--spacing-md);
    }

    .thank-you-content {
        padding: clamp(var(--spacing-xl), 8vw, var(--spacing-2xl));
        gap: var(--spacing-md);
    }

    .thank-you-logo img {
        width: 150px;
    }

    .thank-you-content .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thank-you-glow {
        animation: none;
    }
}
/* ===== Utility Classes - "The Friendly Game" ===== */

/* Section Title - used across multiple sections */
.section-title {
    font-size: clamp(2rem, 5vw, var(--text-5xl));
    font-weight: var(--font-extrabold);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-title.align-left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* Section Overline */
.section-overline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: var(--space-md);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-overline::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--orange) 100%);
    border-radius: var(--radius-full);
}

.section-overline.align-left {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
    text-align: left;
}

/* Center utility */
.center {
    text-align: center;
}

/* Hidden states */
[hidden] {
    display: none !important;
}

/* Fade/transition utilities */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Spacing utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Grid utilities */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Max width utilities */
.max-w-readable { max-width: var(--content-readable); }
.max-w-medium { max-width: var(--content-medium); }
.max-w-wide { max-width: var(--content-wide); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

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

/* Responsive hide/show */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .show-mobile-only { display: none !important; }
}
.lang-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-right: 1.5rem;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--orange) 0%, var(--purple) 100%);
    border-color: transparent;
    color: white;
}

.lang-btn:focus {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

body.lang-ja {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.lang-ja .hero-title,
body.lang-ja .section-title,
body.lang-ja .manifesto-title,
body.lang-ja h1,
body.lang-ja h2,
body.lang-ja h3 {
    font-family: 'Noto Sans JP', 'DM Sans', -apple-system, sans-serif;
    letter-spacing: -0.01em;
}

body.lang-ja .hero-subtitle,
body.lang-ja .section-subtitle,
body.lang-ja p {
    line-height: 1.75;
    letter-spacing: 0.01em;
}

body.lang-ja .nav-badge,
body.lang-ja .pill,
body.lang-ja .btn {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    letter-spacing: 0;
}

body.lang-ja .manifesto-line {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.8;
}

body.lang-ja .hero-stat-label,
body.lang-ja .meta-item,
body.lang-ja .feature-points li {
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .lang-switcher {
        margin-right: 0;
        order: -1;
    }

    .nav-actions {
        gap: 0.75rem;
    }

    body.lang-ja .hero-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    body.lang-ja .hero-subtitle {
        font-size: 1rem;
    }
}

[data-i18n]:empty::after {
    content: attr(data-i18n);
    opacity: 0.3;
    font-style: italic;
}

html[lang="ja"] {
    word-break: normal;
    overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
    .lang-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}
/* ===== Tablet Responsive (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .nav-container {
        padding: 0.85rem 1.5rem;
    }

    .nav-items {
        gap: var(--space-md);
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .feature-card {
        padding: var(--space-lg);
    }

    .feature-text {
        text-align: center;
        align-items: center;
    }

    .hero-content,
    .progression-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .scoring-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        justify-items: center;
        min-block-size: auto;
    }

    .scoring-visuals {
        order: -1;
        min-height: clamp(420px, 52vw, 520px);
    }

    .scoring-toggle {
        width: min(420px, 85vw);
    }

    .phone-stage .phone-frame {
        width: min(420px, 82vw);
    }

    .scoring-content {
        text-align: center;
        align-items: center;
        max-width: 100%;
    }

    .scoring-copy {
        max-width: 36rem;
    }

    .hero-text {
        order: 2;
    }

    .hero-phone {
        order: 1;
        margin-bottom: var(--space-2xl);
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: center;
        justify-items: center;
    }

    .hero-insights {
        grid-template-columns: 1fr;
    }

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

    .phone-frame {
        max-width: 400px;
        margin: 0 auto;
    }

    .progression-card {
        justify-content: center;
    }

    .progression-insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phone-trio {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .phone-frame.small {
        width: 350px;
        margin: 0 auto;
    }

    .beta-grid {
        grid-template-columns: 1fr;
    }

    .beta-copy,
    .beta-form-card {
        align-items: center;
        text-align: center;
    }

    .beta-title,
    .beta-subtitle {
        text-align: center;
        margin: 0 auto;
    }

    .beta-points {
        align-items: center;
    }

    /* Learning Cycle adjustments */
    .cycle-card,
    .cycle-hub {
        width: min(220px, 80vw);
    }

    .cycle-card.streak {
        top: 22%;
        right: -4%;
    }

    .cycle-card.division {
        right: -2%;
    }

    .cycle-card.critique {
        left: -2%;
    }
}
/* ===== Mobile Responsive (max-width: 768px) ===== */
@media (max-width: 768px) {
    .floating-scores {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .nav-actions {
        gap: 0.35rem;
    }

    .nav-container {
        padding: 0.75rem 1.25rem;
    }

    .nav-logo {
        height: 32px;
    }

    .nav-cta {
        padding: 0.5rem 1.25rem;
        font-size: 0.72rem;
    }

    .nav-badge {
        display: none;
    }

    h1 {
        font-size: 2.75rem;
        line-height: 1.05;
    }

    h2 {
        font-size: 2rem;
    }

    .hero {
        padding: calc(var(--spacing-3xl) + 56px) var(--spacing-md) var(--spacing-3xl);
        min-height: auto;
        height: auto;
        align-items: flex-start;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
        justify-items: center;
    }

    .hero-text {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        text-align: center;
        width: 100%;
        max-width: 28rem;
    }

    .hero-phone {
        margin-top: var(--spacing-lg);
    }

    .hero-text .hero-phone {
        order: 3;
        width: 100%;
        max-width: clamp(280px, 80vw, 360px);
        display: flex;
        justify-content: center;
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .hero-text .hero-tabs {
        order: 4;
        margin-top: var(--spacing-md);
    }

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

    .hero-subtitle {
        font-size: 1.15rem;
        margin: 0 auto var(--spacing-xl);
        max-width: 28rem;
    }

    .hero-actions {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        width: 100%;
    }

    .hero-stat-value {
        font-size: 1.85rem;
    }

    .hero-insights {
        grid-template-columns: 1fr;
        width: 100%;
        gap: var(--spacing-md);
    }

    .hero-insight {
        text-align: center;
        justify-content: center;
        padding: var(--spacing-md);
    }

    .hero-insight-copy {
        gap: 0.25rem;
    }

    .hero-phone .phone-frame {
        width: 100%;
        max-width: 340px;
    }

    .phone-frame.large {
        width: 100%;
        max-width: 380px;
    }

    .scoring {
        min-height: auto;
        padding: var(--spacing-3xl) var(--spacing-sm);
    }

    .scoring-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        justify-items: center;
        text-align: center;
    }

    .scoring-visuals {
        width: min(320px, 90%);
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding-bottom: 0;
        order: -1;
        margin-bottom: var(--spacing-lg);
    }

    .phone-stage .phone-frame {
        width: min(82vw, 300px);
        margin: 0 auto;
    }

    .scoring-panels {
        min-height: auto;
        max-width: 100%;
    }

    .scores-panel {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .scoring-content {
        align-items: center;
        gap: var(--spacing-lg);
    }

    .scoring-copy {
        max-width: 28rem;
    }

    .scoring-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
        padding: 0;
    }

    .scoring-grid-new .score-item {
        min-height: unset;
        padding: clamp(0.75rem, 3vw, 0.95rem);
        gap: 0.6rem;
    }

    .scoring-grid-new .score-card-top {
        display: contents;
    }

    .scoring-grid-new .score-title {
        order: 1;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    .scoring-grid-new .score-meter {
        order: 2;
    }

    .scoring-grid-new .score-item:not(.summary-card) {
        min-height: 110px;
    }

    .scoring-grid-new .summary-card {
        min-height: 95px;
        grid-column: span 2;
    }

    .scoring-grid-new .score-value {
        font-size: 1.25rem;
    }

    .scoring-grid-new .score-item:not(.summary-card) .score-title::after {
        width: 28px;
    }

    .score-icon,
    .bonus-icon {
        font-size: 1.3rem;
    }

    .scoring-grid-new .score-meta {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.35rem;
        width: 100%;
        order: 3;
        margin-top: 0.2rem;
    }

    .scoring-grid-new .score-value {
        font-size: 1.1rem;
        gap: 0.1rem;
    }

    .scoring-grid-new .score-divider,
    .scoring-grid-new .score-max {
        font-size: 0.72rem;
        color: var(--text-tertiary);
    }

    .scoring-grid-new .score-breakdown {
        order: 4;
    }

    .critic-panel {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }

    .critic-body {
        gap: 0.75rem;
    }

    .critic-sample {
        display: none;
    }

    .team-stats {
        grid-template-columns: 1fr;
    }

    .company-row {
        flex-wrap: wrap;
    }

    .daily-loop .flow-step-new {
        padding: var(--spacing-lg);
        padding-top: calc(var(--spacing-lg) + 24px);
        gap: var(--spacing-md);
    }

    .daily-loop .step-info {
        gap: var(--spacing-md);
        text-align: center;
    }

    .daily-loop .step-meta {
        display: none;
    }

    .daily-loop .step-title {
        font-size: 1.4rem;
    }

    .daily-loop .step-description {
        font-size: var(--text-sm);
    }

    .scoring-grid-new .score-breakdown,
    .scoring-grid-new .score-note,
    .scoring-grid-new .bonus-multiplier,
    .scoring-grid-new .score-info-row {
        display: none;
    }

    .features-grid {
        gap: var(--spacing-lg);
    }

    .feature-card-new {
        padding: var(--spacing-lg);
    }

    .feature-points li:nth-child(n+3) {
        display: none;
    }

    .feature-points li:not(:last-child)::after {
        display: none;
    }

    /* ===== Mobile Navigation ===== */
    .nav-container {
        justify-content: space-between;
        padding-right: 1.25rem;
    }

    .nav-brand {
        flex: 1;
    }

    .nav-items {
        display: flex;
        margin-right: 1rem;
    }

    .nav-actions {
        margin: 0;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 102;
        flex-shrink: 0;
    }

    .hamburger-line {
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(250, 250, 248, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 101;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .mobile-menu.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .mobile-menu-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }

    .mobile-menu.is-active .mobile-menu-container {
        transform: translateY(0);
    }

    .mobile-nav-link {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        text-decoration: none;
        transition: color 0.2s;
    }

    .mobile-nav-link:hover {
        color: var(--orange);
    }

    /* Hamburger Animation */
    .nav-toggle.is-active .hamburger-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}
/* ===== Learning Cycle - Responsive Styles ===== */

/* Tablet (1024px and below) */
@media screen and (max-width: 1024px) {
    .learning-cycle {
        padding: var(--space-2xl) var(--space-md);
    }

    .cycle-flow {
        width: min(700px, 85vw);
        height: min(700px, 85vw);
    }

    .cycle-node {
        width: 160px;
        padding: 1rem;
    }

    .node-title {
        font-size: 0.9rem;
    }

    .node-description {
        font-size: 0.7rem;
    }

    .cycle-center {
        width: 180px;
        height: 180px;
    }

    .cycle-center-title {
        font-size: 1.25rem;
    }

    .cycle-details {
        width: min(500px, 85vw);
        padding: 1.25rem;
    }
}

/* Mobile (768px and below) */
@media screen and (max-width: 768px) {
    .learning-cycle {
        padding: var(--space-xl) var(--space-sm);
        min-height: auto;
    }

    .learning-header {
        gap: var(--space-sm);
    }

    .learning-subtitle {
        font-size: 0.95rem;
        padding: 0 var(--space-sm);
    }

    /* Switch to vertical stack layout on mobile */
    .cycle-flow {
        width: 100%;
        height: auto;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Hide SVG connections on mobile */
    .cycle-connections {
        display: none;
    }

    /* Hide progress ring on mobile */
    .cycle-progress {
        display: none;
    }

    /* Center hub becomes top element */
    .cycle-center {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        padding: 2rem 1.5rem;
        border-radius: 20px;
        margin-bottom: 1.5rem;
        background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 107, 53, 0.1) 100%);
    }

    .cycle-center::before {
        display: none;
    }

    .cycle-center-icon {
        font-size: 2.5rem;
    }

    .cycle-center-title {
        font-size: 1.75rem;
    }

    /* Stack nodes vertically */
    .cycle-node {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        margin-bottom: 1rem;
        opacity: 1 !important;
        animation: none !important;
        display: grid;
        grid-template-columns: 60px 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
    }

    .node-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0;
        grid-column: 1;
    }

    .node-content {
        grid-column: 2;
    }

    .node-title {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .node-description {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 0;
    }

    .node-badge {
        grid-column: 3;
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    /* Add connecting lines between mobile cards */
    .cycle-node::after {
        content: "";
        position: absolute;
        left: 29px;
        bottom: -1rem;
        width: 2px;
        height: 1rem;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0) 100%);
    }

    .cycle-node:last-child::after {
        display: none;
    }

    /* Details panel as modal on mobile */
    .cycle-details {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: translateY(100%);
        width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 1.5rem;
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    .cycle-details.visible {
        transform: translateY(0);
    }

    .details-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .details-content {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .details-stats {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    /* Reduce particles on mobile for performance */
    .particles-container {
        display: none;
    }

    /* Simplify background gradients */
    .learning-cycle::before {
        background: radial-gradient(circle at 50% 30%,
            rgba(255, 107, 53, 0.1) 0%,
            transparent 60%);
        animation: none;
    }
}

/* Small mobile (480px and below) */
@media screen and (max-width: 480px) {
    .cycle-node {
        grid-template-columns: 50px 1fr;
        padding: 1rem;
    }

    .node-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .node-badge {
        display: none;
    }

    .node-content {
        grid-column: 2;
    }

    .cycle-center {
        padding: 1.5rem 1rem;
    }

    .cycle-center-icon {
        font-size: 2rem;
    }

    .cycle-center-title {
        font-size: 1.5rem;
    }

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

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .learning-cycle::before,
    .particle,
    .flow-path,
    .cycle-node,
    .cycle-center,
    .progress-ring-fill {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }

    .cycle-details {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .cycle-node {
        border: 2px solid white;
    }

    .node-badge {
        border: 1px solid white;
        background: rgba(0, 0, 0, 0.9);
    }

    .cycle-center {
        border: 2px solid white;
    }

    .flow-path {
        stroke: white;
        stroke-width: 3;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .cycle-node {
        /* Larger tap targets for mobile */
        min-height: 80px;
    }

    .node-icon {
        /* Prevent icon from being too small to tap */
        min-width: 44px;
        min-height: 44px;
    }

    /* Remove hover states on touch devices */
    .cycle-node:hover {
        transform: none;
        box-shadow: none;
    }

    .cycle-node:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Landscape orientation adjustments */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .learning-cycle {
        min-height: auto;
        padding: var(--space-lg) var(--space-md);
    }

    .cycle-flow {
        margin-top: var(--space-lg);
    }

    .cycle-details {
        max-height: 80vh;
    }
}/* Carousel styles applied via inline JS for maximum reliability *//* Accordion styles removed - using carousel pattern instead *//* ===== Mobile Enhancements - "The Friendly Game" ===== */

@media (max-width: 768px) {
    .hero-tabs {
        position: relative;
        width: 100%;
        padding: clamp(20px, 5vw, 28px);
        display: block;
        border-radius: 28px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        overflow: hidden;
    }

    .tab-nav {
        display: flex;
        gap: 6px;
        margin-bottom: clamp(18px, 4vw, 24px);
        padding: 4px;
        border-radius: 999px;
        background: var(--bg-secondary);
        border: 1px solid var(--card-border);
    }

    .tab-btn {
        flex: 1;
        padding: 12px 10px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 999px;
        position: relative;
        font-family: inherit;
    }

    .tab-btn:active {
        transform: scale(0.98);
    }

    .tab-btn.active {
        color: var(--white);
        background: var(--gradient-orange);
        box-shadow: var(--btn-shadow);
    }

    .tab-panel {
        display: none;
        animation: fadeSlideIn 0.35s ease;
        padding: clamp(18px, 5vw, 26px);
        border-radius: 24px;
        background: var(--bg-secondary);
        border: 1px solid var(--card-border);
        box-shadow: var(--card-shadow);
    }

    .tab-panel.active {
        display: block;
    }

    @keyframes fadeSlideIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .tab-panel .hero-stats {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 4vw, 18px);
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }

    .hero-tabs .hero-stat {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "icon value"
            "icon label";
        align-items: center;
        gap: clamp(8px, 3.5vw, 14px) clamp(16px, 5vw, 22px);
        padding: clamp(16px, 4.5vw, 20px) clamp(18px, 5.5vw, 24px);
        border-radius: 18px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        position: relative;
        overflow: hidden;
        text-align: left;
    }

    .hero-tabs .hero-stat-icon {
        grid-area: icon;
        font-size: 1.75rem;
        filter: drop-shadow(0 4px 8px rgba(255, 149, 0, 0.2));
        z-index: 1;
    }

    .hero-tabs .hero-stat-value {
        grid-area: value;
        font-size: 1.8rem;
        justify-self: end;
        z-index: 1;
        color: var(--orange);
    }

    .hero-tabs .hero-stat-label {
        grid-area: label;
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        color: var(--text-secondary);
        text-transform: uppercase;
        justify-self: end;
        z-index: 1;
    }

    .tab-panel .hero-insights {
        display: flex;
        flex-direction: column;
        gap: clamp(14px, 4.5vw, 22px);
    }

    .hero-tabs .hero-insight {
        justify-content: flex-start;
        text-align: left;
        padding: clamp(16px, 4.8vw, 22px) clamp(18px, 5.2vw, 26px);
        border-radius: 18px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        gap: clamp(14px, 4vw, 18px);
        position: relative;
        overflow: hidden;
    }

    .hero-tabs .hero-insight-icon {
        font-size: 1.5rem;
        filter: drop-shadow(0 4px 8px rgba(255, 149, 0, 0.2));
        z-index: 1;
    }

    .hero-tabs .hero-insight-copy {
        align-items: flex-start;
        gap: 6px;
        z-index: 1;
    }

    .clipped-content {
        position: relative;
        margin-top: clamp(20px, 6vw, 28px);
        padding: clamp(22px, 6.5vw, 32px) clamp(20px, 7vw, 34px) clamp(58px, 10vw, 72px);
        border-radius: 32px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .clipped-content.collapsed[data-clip-mode="manifesto"] .manifesto-body p:not(:first-child) {
        display: none;
    }

    .clipped-content.collapsed[data-clip-mode="team"] .team-subtitle:not(:first-of-type),
    .clipped-content.collapsed[data-clip-mode="team"] .team-logos-intro {
        display: none;
    }

    .clipped-content.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(68px, 12vw, 90px);
        height: clamp(110px, 20vw, 140px);
        background: linear-gradient(to bottom, transparent, var(--card-bg) 65%, var(--card-bg));
        pointer-events: none;
        z-index: 1;
    }

    .show-more-btn {
        position: relative;
        z-index: 2;
        margin: clamp(28px, 7vw, 36px) auto 0;
        padding: clamp(14px, 4.5vw, 18px) clamp(32px, 10vw, 42px);
        background: var(--gradient-orange);
        border: none;
        border-radius: 999px;
        color: var(--white);
        font-weight: 800;
        font-size: 0.8rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, background 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: inherit;
        box-shadow: var(--btn-shadow);
        min-height: 46px;
        text-align: center;
    }

    .show-more-btn:focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: 4px;
    }

    .show-more-btn:active {
        transform: scale(0.97) translateY(1px);
        box-shadow: 0 6px 16px rgba(255, 149, 0, 0.25);
    }

    .show-more-btn .arrow {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-block;
        font-size: 1.1em;
    }

    .clipped-content:not(.collapsed) {
        box-shadow: var(--card-shadow-hover);
    }

    .clipped-content:not(.collapsed)::after {
        display: none;
    }

    .clipped-content:not(.collapsed) .show-more-btn {
        background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
        box-shadow: 0 8px 24px rgba(90, 200, 250, 0.25);
    }

    .clipped-content:not(.collapsed) .show-more-btn .arrow {
        transform: rotate(180deg);
    }

    .clipped-content[data-clip-mode="team"] {
        margin-bottom: var(--spacing-md);
    }

    .sticky-section-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        padding: 8px 12px;
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--card-border);
        z-index: 100;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .section-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: var(--text-tertiary);
        font-size: 0.65rem;
        font-weight: 600;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 6px 12px;
        border-radius: 12px;
        position: relative;
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    .section-nav-btn.active {
        color: var(--orange);
        background: var(--orange-subtle);
        transform: translateY(-2px);
    }

    .section-nav-btn .nav-icon {
        font-size: 20px;
        transition: transform 0.3s;
    }

    .section-nav-btn.active .nav-icon {
        transform: scale(1.1);
    }

    .section-nav-btn .nav-label {
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    body.has-sticky-nav {
        padding-bottom: 70px;
    }
}