/* =========================================
   DATARIOT — Dark Futuristic Landing Page
   Inspired by Geist / AURAS brand identity
   ========================================= */

/* === RESET & BASE === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --- Light Theme (Default) --- */
    --bg: #F1F5FC;
    --bg-elevated: #FFFFFF;
    --surface: rgba(241, 245, 249, 0.7);
    --surface-2: rgba(226, 232, 240, 0.8);
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.16);

    --text-primary: #191A1E;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-accent: #07080C;

    --accent: #07080C;
    --accent-glow: rgba(7, 8, 12, 0.15);
    --accent-2: #07080C;
    --accent-bright: #07080C;

    --cyan: #07080C;
    --cyan-glow: rgba(7, 8, 12, 0.1);

    --blue-1: #07080C;
    --blue-1-glow: rgba(7, 8, 12, 0.15);
    --blue-2: #07080C;
    --blue-2-glow: rgba(7, 8, 12, 0.15);
    --blue-3: #07080C;
    --blue-3-glow: rgba(7, 8, 12, 0.1);

    /* --- Brand scale ---
       The logo is two colours: ice #DAE6F7 on black #07080C. The ramp runs
       between them; the LOGO COLOURS ONLY block at the end of this file flips
       it for dark surfaces, where the accent is the ice.                   */
    --brand-ice: #DAE6F7;
    --brand-300: #9AA7BD;
    --brand-400: #3A4252;
    --brand-500: #07080C;
    --brand-600: #000000;
    --brand-700: #000000;
    --brand-ink: #07080C;
    /* companion, a step lighter than the black */
    --brand-alt: #3A4252;

    /* --- Typography ---
       display: Orbitron       — squared techno caps for the wordmark, titles, HUD
       lcd    : Doto           — dot-matrix, for counters and timecodes only
       sans   : Manrope        — UI + body copy
       tech   : JetBrains Mono — bracket labels                                */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Orbitron', 'Manrope', -apple-system, sans-serif;
    --font-lcd: 'Doto', 'JetBrains Mono', ui-monospace, monospace;
    --font-tech: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --font-editorial: 'Manrope', sans-serif;

    --sidebar-width: 72px;
    --sidebar-width-expanded: 240px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-smooth: 0.4s var(--ease-out-expo);
}

[data-theme="dark"] {
    --bg: #08090D;
    --bg-elevated: #0C0D12;
    --surface: #0E1017;
    --surface-2: #13151D;
    --border: rgba(216, 231, 250, 0.05);
    --border-hover: rgba(216, 231, 250, 0.10);

    --text-primary: #EEEEF0;
    --text-secondary: #8E90A0;
    --text-tertiary: #55576A;
    --text-accent: #D8E7FA;

    --accent: #D8E7FA;
    --accent-glow: rgba(216, 231, 250, 0.25);
    --accent-2: #EEEEF0;
    --accent-bright: #ffffff;

    --cyan: #D8E7FA;
    --cyan-glow: rgba(216, 231, 250, 0.25);

    --blue-1-glow: rgba(216, 231, 250, 0.15);
    --blue-2-glow: rgba(216, 231, 250, 0.1);
    --blue-3-glow: rgba(216, 231, 250, 0.08);
}

[data-theme="light"] {
    --bg: #F1F5FC;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);

    --text-primary: #191A1E;
    --text-secondary: rgba(25, 26, 30, 0.65);
    --text-tertiary: rgba(25, 26, 30, 0.4);
    --text-accent: #64748b;

    --accent: #64748b;
    --accent-glow: rgba(100, 116, 139, 0.15);
    --accent-2: #475569;
    --accent-bright: #334155;
}

/* === PARTICLE CANVAS === */
.particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
    /* Reduced for light mode */
}

[data-theme="dark"] .particle-canvas {
    opacity: 0.6;
}

/* === FLOATING GRADIENT ORBS === */
.floating-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    animation: orb-drift 20s ease-in-out infinite;
    will-change: transform;
}

.floating-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--blue-1-glow), transparent 70%);
    top: 10%;
    left: -5%;
    animation-duration: 25s;
    animation-delay: 0s;
}

.floating-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--blue-2-glow), transparent 70%);
    top: 50%;
    right: -5%;
    animation-duration: 30s;
    animation-delay: -5s;
}

.floating-orb--3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--blue-3-glow), transparent 70%);
    bottom: 20%;
    left: 30%;
    animation-duration: 22s;
    animation-delay: -10s;
}

.floating-orb--4 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    top: 30%;
    left: 50%;
    animation-duration: 28s;
    animation-delay: -15s;
}

@keyframes orb-drift {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(80px, -60px, 0);
    }

    50% {
        transform: translate3d(-40px, 80px, 0);
    }

    75% {
        transform: translate3d(60px, 40px, 0);
    }
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* clip, not hidden, on body: a hidden body is a scroll container of its own
   that never scrolls, and every position: sticky inside it sticks to that
   instead of the viewport (slide 05's pixel field is sticky). Browsers
   without clip keep the hidden above. */
body {
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-2) transparent;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--accent);
    color: var(--brand-on);
}

a {
    color: inherit;
    text-decoration: none;
}

/* === AMBIENT GLOW EFFECTS === */
.ambient-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    transition: transform 0.6s var(--ease-out-expo);
}

.ambient-glow--1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    top: -300px;
    right: -200px;
    animation: float-slow 25s ease-in-out infinite;
}

.ambient-glow--2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
    bottom: 10%;
    left: -200px;
    animation: float-slow 30s ease-in-out infinite reverse;
}

.ambient-glow--3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--blue-1-glow), transparent 70%);
    top: 40%;
    right: 15%;
    animation: float-slow 35s ease-in-out infinite;
}

/* Mouse Spotlight Effect */
.mouse-spotlight {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(218, 230, 247, 0.26), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    filter: blur(80px);
    opacity: 0;
    transition: opacity 1s var(--ease-out-expo);
}

.mouse-spotlight.active {
    opacity: 1;
}

@keyframes float-slow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(40px, -30px);
    }

    66% {
        transform: translate(-30px, 40px);
    }
}

/* === REVEAL ANIMATIONS === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

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

.reveal--stagger {
    transition-delay: calc(var(--i, 0) * 0.1s);
}


/* === GRID OVERLAY === */
.grid-overlay {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* === LEFT SIDEBAR NAVIGATION === */
.sidebar {
    position: fixed;
    top: 24px;
    left: 24px;
    bottom: 24px;
    width: var(--sidebar-width);
    background: var(--surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    z-index: 2000;
    transition: width 0.5s var(--ease-out-expo), box-shadow 0.5s;
    overflow: hidden;
}

.sidebar:hover {
    width: var(--sidebar-width-expanded);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.sidebar__logo {
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--border-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 64px;
    flex-shrink: 0;
    transition: all 0.3s;
}

.sidebar:hover .sidebar__logo {
    border-color: var(--accent);
    transform: scale(1.05);
}


.sidebar__logo-icon {
    font-size: 16px;
    line-height: 1;
}

.sidebar__nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    width: 100%;
    padding: 0 12px;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    transition: all 0.3s var(--ease-out-expo);
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__link:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.sidebar__link.active {
    color: var(--text-primary);
}

.sidebar__link-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
    transition: all 0.3s;
}

.sidebar__link.active .sidebar__link-dot {
    background: var(--accent-2);
    box-shadow: 0 0 8px var(--accent-glow);
}

.sidebar__link-text {
    opacity: 0;
    transition: opacity 0.3s;
}

.sidebar:hover .sidebar__link-text {
    opacity: 1;
}

.sidebar__footer {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: calc(100% - 24px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sidebar__close {
    display: none;
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    z-index: 100;
}

@media (max-width: 768px) {
    .sidebar.mobile-open .sidebar__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #09090b;
    }
}

.sidebar__theme-icon {
    position: absolute;
    transition: all 0.4s var(--ease-out-expo);
}

[data-theme="dark"] .sidebar__theme-icon--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .sidebar__theme-icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .sidebar__theme-icon--sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .sidebar__theme-icon--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.sidebar__version {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* === MOBILE NAV TOGGLE === */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 30000;
    width: 44px;
    height: 44px;
    background: #ffffff !important;
    border: 1.5px solid var(--brand-500);
    border-radius: 50%;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    box-shadow: none;
    transition: all 0.3s var(--ease-out-expo);
}

.mobile-nav-toggle:active {
    transform: scale(0.92);
}

.mobile-nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #191A1E;
    border-radius: 2px;
    transition: all 0.3s;
}

[data-theme="dark"] .mobile-nav-toggle {
    background: #191A1E !important;
    /* Dark surface for dark mode */
    border-color: var(--brand-ice);
}

[data-theme="dark"] .mobile-nav-toggle span {
    background: var(--text-primary);
}

/* === MAIN CONTENT === */
.main {
    margin-left: 0;
    position: relative;
    z-index: 1;
}

/* === TOP BRANDING === */
.top-branding {
    position: fixed;
    top: 28px;
    left: 48px;
    display: flex;
    align-items: center;
    gap: 32px;
    z-index: 2500;
    transition: all 0.5s var(--ease-out-expo);
    animation: fadeInDown 1s var(--ease-out-expo) both;
}

@media (max-width: 1024px) {
    .top-branding {
        left: 24px;
        pointer-events: none;
        /* Prevent blocking elements behind it */
    }

    .top-branding__logo-wrap,
    .top-branding__text {
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    .top-branding {
        position: relative;
        top: 0;
        left: 0;
        padding: 24px;
        flex-direction: column;
        gap: 16px;
        text-align: center;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        width: 100%;
    }

    [data-theme="light"] .top-branding {
        background: rgba(255, 255, 255, 0.85);
    }

    .header__links {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header__link {
        font-size: 12px;
    }
}

.header__links {
    display: flex;
    align-items: center;
    gap: 24px;
    pointer-events: auto;
}



.header__link {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    transition: color var(--transition-smooth);
    letter-spacing: 0.5px;
}

.header__link:hover {
    color: var(--text-primary);
}

.header__link--cta {
    background: rgb(var(--brand-rgb) / 0.05);
    color: var(--brand-500);
    padding: 10px 22px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgb(var(--brand-rgb) / 0.05);
    border: 1px solid rgb(var(--brand-rgb) / 0.2);
    letter-spacing: 0.5px;
    transition: all 0.4s var(--ease-out-expo);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header__link--cta:hover {
    background: var(--brand-500);
    color: var(--brand-on);
    transform: translateY(-2px);
    border-color: var(--brand-500);
    box-shadow: 0 10px 25px rgb(var(--brand-rgb) / 0.25);
}

[data-theme="dark"] .header__link--cta {
    background: rgba(218, 230, 247, 0.1);
    color: var(--brand-ice);
    border-color: rgba(218, 230, 247, 0.2);
}

[data-theme="dark"] .header__link--cta:hover {
    background: var(--brand-ice);
    color: #020408;
    border-color: var(--brand-ice);
    box-shadow: 0 10px 25px rgba(218, 230, 247, 0.3);
}

.top-branding__logo-wrap {
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.top-branding__text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--brand-500);
    text-transform: uppercase;
}

[data-theme="light"] .top-branding__text {
    color: var(--brand-500);
}


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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === SECTIONS === */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 80px;
    position: relative;
    scroll-snap-align: start;
}

@media (max-width: 1024px) {
    .section {
        padding: 120px 32px;
    }

    .section--features {
        min-height: auto;
    }
}

.section__container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section__header {
    margin-bottom: 100px;
}

.section__label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
    background: linear-gradient(90deg, var(--accent-2), var(--blue-1), var(--blue-2), var(--accent-2));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 6s ease-in-out infinite;
}

@keyframes gradient-shift {

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

    50% {
        background-position: 100% 50%;
    }
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.section--manifesto .section__title {
    font-family: var(--font-tech);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
}

.section--manifesto .section__label {
    font-family: var(--font-tech);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.manifesto__letter p {
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    line-height: 1.7;
    font-size: 16px;
}

/* === HERO === */
.section--hero {
    padding: 0 60px;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.hero__content {
    max-width: 580px;
    flex-shrink: 0;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 40px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s var(--ease-out-expo) 0.2s both;
}


.hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.hero__visual-caption {
    position: absolute;
    bottom: -40px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    animation: fadeInUp 0.8s var(--ease-out-expo) 1.2s both;
}

.hero__caption-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.hero__caption-text {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(64px, 12vw, 160px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.85;
    margin-bottom: 32px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.4s both;
    position: relative;
    perspective: 1000px;
}

.hero__title-line {
    display: flex;
    justify-content: flex-start;
    position: relative;
}

/* Per-letter styles */
.hero__letter {
    display: inline-block;
    position: relative;
    color: var(--text-primary);
    background: linear-gradient(180deg, #fff 0%, var(--accent-bright) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        letter-entrance 0.8s var(--ease-out-expo) calc(0.5s + var(--i) * 0.06s) both;
    transition: transform 0.4s var(--ease-out-expo), filter 0.4s;
}

@keyframes letter-entrance {
    from {
        opacity: 0;
        transform: translateY(60px) rotateX(-90deg) scale(0.8);
        filter: blur(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
        filter: blur(0);
    }
}


.hero__letter:hover {
    transform: translateY(-8px) scale(1.05);
    filter: drop-shadow(0 0 20px var(--accent-glow));
    animation-play-state: paused, paused;
}

/* Glitch pseudo-elements */
.hero__letter::before,
.hero__letter::after {
    content: attr(data-letter);
    position: absolute;
    inset: 0;
    -webkit-text-fill-color: initial;
    opacity: 0;
    pointer-events: none;
}

.hero__letter::before {
    color: var(--cyan);
    animation: glitch-1 4s linear calc(var(--i) * 0.5s) infinite;
}

.hero__letter::after {
    color: #f43f5e;
    animation: glitch-2 4s linear calc(var(--i) * 0.5s + 0.1s) infinite;
}

/* Underline glow */
.hero__title-line::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--accent-2),
            #D8E7FA,
            var(--accent-2),
            transparent);

    background-size: 200% 100%;
    animation: underline-glow 3s ease-in-out infinite;
    border-radius: 2px;
    opacity: 0.6;
}

@keyframes letter-reveal {
    from {
        opacity: 0;
        transform: translateY(40px) rotateX(90deg);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
        filter: blur(0);
    }
}

@keyframes letter-gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@keyframes glitch-1 {

    0%,
    92%,
    100% {
        opacity: 0;
        transform: translate(0);
    }

    93% {
        opacity: 0.7;
        transform: translate(-2px, -1px);
    }

    94% {
        opacity: 0;
        transform: translate(0);
    }

    96% {
        opacity: 0.4;
        transform: translate(2px, 1px);
    }

    97% {
        opacity: 0;
    }
}

@keyframes glitch-2 {

    0%,
    94%,
    100% {
        opacity: 0;
        transform: translate(0);
    }

    95% {
        opacity: 0.5;
        transform: translate(2px, -2px);
    }

    96% {
        opacity: 0;
    }

    98% {
        opacity: 0.3;
        transform: translate(-1px, 2px);
    }

    99% {
        opacity: 0;
    }
}

@keyframes underline-glow {

    0%,
    100% {
        background-position: -200% 0;
        opacity: 0.4;
    }

    50% {
        background-position: 200% 0;
        opacity: 0.8;
    }
}

.hero__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 40px;
    animation: fadeInUp 0.8s var(--ease-out-expo) 0.6s both;
}

.hero__subtitle em {
    color: var(--text-accent);
    font-style: normal;
}

.hero__actions {
    display: flex;
    gap: 12px;
    animation: fadeInUp 0.8s var(--ease-out-expo) 0.8s both;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.btn--primary {
    background: var(--accent);
    color: var(--brand-on);
    font-weight: 700;
    box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn--primary:hover {
    background: var(--accent-2);
    transform: translateY(-2px);
    box-shadow: 0 0 40px var(--accent-glow), 0 8px 30px rgba(0, 0, 0, 0.3);
}

.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.btn--full {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
}

/* === HERO VISUAL — BRANDED ORB === */
.hero__visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 1s var(--ease-out-expo) 0.6s both;
}

.hero__branded-visual {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__logo-orb {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--surface-2), var(--bg));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    box-shadow:
        0 0 60px rgb(var(--brand-rgb) / 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
    z-index: 5;
    animation: orb-float 8s ease-in-out infinite;
    position: relative;
    overflow: visible;
}

.hero__logo-orb::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--accent), var(--cyan), transparent, var(--accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-cw 10s linear infinite;
}


.hero__logo-main {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgb(var(--brand-rgb) / 0.5));
}

.hero__logo-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(218, 230, 247, 0.64) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    z-index: 1;
    animation: glow-pulse 4s ease-in-out infinite;
}

.hero__tech-ring {
    position: absolute;
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
    border-radius: 50%;
    z-index: 2;
}

.hero__tech-ring--1 {
    width: 280px;
    height: 280px;
    border-width: 1px;
    border-style: dashed;
    animation: rotate-cw 20s linear infinite;
}

.hero__tech-ring--2 {
    width: 360px;
    height: 360px;
    border-width: 1px;
    border-color: rgb(var(--brand-rgb) / 0.1);
    animation: rotate-ccw 30s linear infinite;
}

.hero__tech-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    z-index: 3;
}

.hero__tech-node--1 {
    top: 20%;
    right: 15%;
    animation: node-float 4s ease-in-out infinite;
}

.hero__tech-node--2 {
    bottom: 25%;
    left: 10%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    animation: node-float 5s ease-in-out infinite -2s;
}

@keyframes orb-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

@keyframes glow-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes rotate-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-ccw {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* === HERO VISUAL OPTION 3 — DNA CORE === */
.hero__dna-visual {
    position: relative;
    width: 400px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.hero__dna-strand {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform-style: preserve-3d;
}

.hero__dna-strand--1 {
    animation: dna-rotate 10s linear infinite;
}

.hero__dna-strand--2 {
    animation: dna-rotate 10s linear infinite -5s;
}

.dna-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 15px var(--accent);
}

.hero__dna-strand--2 .dna-dot {
    background: var(--cyan);
    box-shadow: 0 0 15px var(--cyan);
}

.hero__logo-core {
    position: absolute;
    width: 140px;
    height: 140px;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__logo-core:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px var(--accent));
}

@keyframes dna-rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes node-float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, -10px);
    }
}


.phone-ui {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.phone-ui__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 16px;
}

.phone-ui__time {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.phone-ui__logo {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-bright);
}

.phone-ui__icons {
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--text-tertiary);
}

.phone-ui__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-ui__card {
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    transition: all 0.5s;
    animation: card-slide 0.8s var(--ease-out-expo) both;
}

.phone-ui__card--1 {
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.12), rgb(var(--brand-rgb) / 0.03));
    animation-delay: 1s;
}

.phone-ui__card--2 {
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.1), rgb(var(--brand-rgb) / 0.02));
    animation-delay: 1.2s;
}

.phone-ui__card--3 {
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.1), rgb(var(--brand-rgb) / 0.02));
    animation-delay: 1.4s;
}

@keyframes card-slide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.phone-ui__card-icon {
    font-size: 22px;
}

.phone-ui__card span {
    font-size: 13px;
    font-weight: 500;
    flex: 1;
}

.phone-ui__card small {
    font-size: 10px;
    color: var(--text-tertiary);
}

.phone-ui__bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 14px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.phone-ui__bar-item {
    font-size: 14px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.3s;
}

.phone-ui__bar-item.active {
    color: var(--accent-bright);
}

.phone-ui__bar-item--create {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-on);
    font-size: 18px;
    font-weight: 300;
}

/* === SCROLL INDICATOR === */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 1s var(--ease-out-expo) 1.2s both;
}

.scroll-indicator__line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent-2), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-indicator__line::after {
    content: '';
    position: absolute;
    top: -100%;
    width: 100%;
    height: 40%;
    background: var(--text-primary);
    opacity: 0.5;
    animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
    0% {
        top: -40%;
    }

    100% {
        top: 120%;
    }
}

/* === MANIFESTO SECTION === */
.section--manifesto {
    padding: 40px 60px 20px;
}

/* Gradient mesh dividers removed for seamless layout */

.manifesto__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.manifesto__letter {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.manifesto__opening {
    font-size: 22px;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

.manifesto__letter p {
    margin-bottom: 24px;
}

.manifesto__letter strong {
    color: var(--accent-bright);
    font-weight: 600;
}

.manifesto__signature {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manifesto__sig-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500), transparent);
    border-radius: 2px;
}

.manifesto__signature span {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-500);
}

.manifesto__values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    perspective: 1500px;
}

.value-card {
    padding: 30px 32px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.8) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transform-style: preserve-3d;
    will-change: transform;
}

[data-theme="dark"] .value-card {
    background: linear-gradient(135deg, rgba(15, 16, 20, 0.45) 0%, rgba(5, 8, 15, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Hiding outdated technical brackets that float awkwardly on rounded cards */
.value-card::before,
.value-card::after {
    display: none !important;
}

.value-card__icon-svg {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 2px;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    transform: translateZ(30px);
}

.card-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    transition: opacity 0.3s ease;
}

.value-card__text {
    transition: transform 0.2s ease-out;
    pointer-events: none;
    width: 100%;
}

/* Multi-colored glowing icons in default states */
.value-card:nth-child(1) .value-card__icon-svg {
    color: var(--brand-500);
    background: rgb(var(--brand-rgb) / 0.05);
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
}

[data-theme="dark"] .value-card:nth-child(1) .value-card__icon-svg {
    color: var(--brand-ice);
    background: rgba(218, 230, 247, 0.08);
    border-color: rgba(218, 230, 247, 0.15);
}

.value-card:nth-child(2) .value-card__icon-svg {
    color: #0d9488;
    background: rgba(20, 184, 166, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.1);
}

[data-theme="dark"] .value-card:nth-child(2) .value-card__icon-svg {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.15);
}

.value-card:nth-child(3) .value-card__icon-svg {
    color: var(--brand-500);
    background: rgb(var(--brand-rgb) / 0.05);
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
}

[data-theme="dark"] .value-card:nth-child(3) .value-card__icon-svg {
    color: var(--brand-ice);
    background: rgba(218, 230, 247, 0.08);
    border-color: rgba(218, 230, 247, 0.15);
}

/* Premium multi-color hover dynamics */
.value-card:nth-child(1):hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgb(var(--brand-rgb) / 0.35);
    box-shadow: 0 25px 50px rgb(var(--brand-rgb) / 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .value-card:nth-child(1):hover {
    border-color: rgba(218, 230, 247, 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(218, 230, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.value-card:nth-child(1):hover .value-card__icon-svg {
    background: rgb(var(--brand-rgb) / 0.12);
    border-color: rgb(var(--brand-rgb) / 0.3);
    transform: scale(1.05) translateY(-2px) translateZ(30px);
    box-shadow: 0 4px 15px rgb(var(--brand-rgb) / 0.18);
}

[data-theme="dark"] .value-card:nth-child(1):hover .value-card__icon-svg {
    background: rgba(218, 230, 247, 0.18);
    border-color: rgba(218, 230, 247, 0.4);
    box-shadow: 0 4px 20px rgba(218, 230, 247, 0.3);
}

.value-card:nth-child(2):hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 25px 50px rgba(20, 184, 166, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .value-card:nth-child(2):hover {
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(20, 184, 166, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.value-card:nth-child(2):hover .value-card__icon-svg {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.3);
    transform: scale(1.05) translateY(-2px) translateZ(30px);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.18);
}

[data-theme="dark"] .value-card:nth-child(2):hover .value-card__icon-svg {
    background: rgba(45, 212, 191, 0.18);
    border-color: rgba(45, 212, 191, 0.4);
    box-shadow: 0 4px 20px rgba(45, 212, 191, 0.3);
}

.value-card:nth-child(3):hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgb(var(--brand-rgb) / 0.35);
    box-shadow: 0 25px 50px rgb(var(--brand-rgb) / 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .value-card:nth-child(3):hover {
    border-color: rgba(218, 230, 247, 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(218, 230, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.value-card:nth-child(3):hover .value-card__icon-svg {
    background: rgb(var(--brand-rgb) / 0.12);
    border-color: rgb(var(--brand-rgb) / 0.3);
    transform: scale(1.05) translateY(-2px) translateZ(30px);
    box-shadow: 0 4px 15px rgb(var(--brand-rgb) / 0.18);
}

[data-theme="dark"] .value-card:nth-child(3):hover .value-card__icon-svg {
    background: rgba(218, 230, 247, 0.18);
    border-color: rgba(218, 230, 247, 0.4);
    box-shadow: 0 4px 20px rgba(218, 230, 247, 0.3);
}

.value-card:nth-child(4):hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgb(var(--brand-rgb) / 0.35);
    box-shadow: 0 25px 50px rgb(var(--brand-rgb) / 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .value-card:nth-child(4):hover {
    border-color: rgba(218, 230, 247, 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(218, 230, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.value-card:nth-child(4):hover .value-card__icon-svg {
    background: rgb(var(--brand-rgb) / 0.12);
    border-color: rgb(var(--brand-rgb) / 0.3);
    transform: scale(1.05) translateY(-2px) translateZ(30px);
    box-shadow: 0 4px 15px rgb(var(--brand-rgb) / 0.18);
}

[data-theme="dark"] .value-card:nth-child(4):hover .value-card__icon-svg {
    background: rgba(218, 230, 247, 0.18);
    border-color: rgba(218, 230, 247, 0.4);
    box-shadow: 0 4px 20px rgba(218, 230, 247, 0.3);
}

/* Hover transform handled by JS for 3D tilt */

.card-icon-3d,
.value-card__icon-3d {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(40px);
    pointer-events: none;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Premium Layered 3D Icons */
.icon-3d-layers {
    position: relative;
    width: 48px;
    height: 48px;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-out-expo);
}

.value-card:hover .icon-3d-layers {
    transform: translateZ(20px) rotateX(10deg) rotateY(10deg);
}

.icon-3d-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s var(--ease-out-expo);
}

.icon-3d-svg--main {
    color: var(--brand-500);
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgb(var(--brand-rgb) / 0.3));
}

.icon-3d-svg--shadow {
    color: rgb(var(--brand-rgb) / 0.2);
    transform: translateZ(-10px) translateY(4px) translateX(4px);
    z-index: 1;
    filter: blur(1px);
}

.icon-3d-glass {
    position: absolute;
    width: 72px;
    height: 72px;
    background: rgb(var(--brand-rgb) / 0.05);
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transform: translateZ(-20px);
    z-index: 0;
}

[data-theme="dark"] .icon-3d-glass {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Icon-specific colors */
[data-icon="logic"] .icon-3d-svg--main {
    color: var(--brand-500);
}

[data-icon="logic"] .icon-3d-svg--shadow {
    color: rgb(var(--brand-rgb) / 0.3);
}

[data-icon="debate"] .icon-3d-svg--main {
    color: #20b8a6;
}

[data-icon="debate"] .icon-3d-svg--shadow {
    color: rgba(32, 184, 166, 0.3);
}

[data-icon="debate"] .icon-3d-glass {
    background: rgba(32, 184, 166, 0.05);
    border-color: rgba(32, 184, 166, 0.1);
}

[data-icon="accountability"] .icon-3d-svg--main {
    color: var(--brand-500);
}

[data-icon="accountability"] .icon-3d-svg--shadow {
    color: rgb(var(--brand-rgb) / 0.3);
}



[data-icon="truth"] .cube-3d__face {
    background: rgba(244, 63, 94, 0.2);
    color: var(--rose);
}

@keyframes cube-float {

    0%,
    100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: translateY(-15px) rotateX(180deg) rotateY(180deg);
    }
}

.value-card,
.feature-card,
.advantage-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.15s ease-out, box-shadow 0.4s ease;
}

.value-card__text {
    flex-grow: 1;
    transform-style: preserve-3d;
    transform: translateZ(20px);
}

.value-card:nth-child(4) .value-card__icon {
    color: var(--rose);
    background: rgba(244, 63, 94, 0.1);
}

.value-card__text {
    flex-grow: 1;
}

.value-card h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.value-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 0;
}


/* === ADVANTAGES SECTION — ORBITAL ACCELERATOR === */
.section--advantages {
    padding: 200px 60px;
    background: var(--bg);
    perspective: 2000px;
    overflow: hidden;
    position: relative;
}

/* Enforce dark text for section header elements on white background */
.section--advantages .section__label {
    color: var(--text-secondary);
}

.section--advantages .section__title {
    color: var(--text-primary);
}

.advantages-orbital {
    position: relative;
    max-width: 1200px;
    margin: 80px auto;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

/* === 3D VIBRANT CORE (USER REQUEST) === */
.orbital-core.core-3d {
    position: absolute;
    width: 220px;
    height: 220px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 10;
    transform-style: preserve-3d;
}

.gyroscope {
    position: absolute;
    inset: -30px;
    transform-style: preserve-3d;
    animation: gyro-tumble 15s linear infinite;
    will-change: transform;
}

@media (max-width: 768px) {
    .gyro-ring.rz {
        display: none;
    }
}

.gyro-ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
}

.gyro-ring.rx {
    border-color: rgba(218, 230, 247, 0.6);
    transform: rotateX(60deg);
    animation: spin-ring-x 8s linear infinite;
}

.gyro-ring.ry {
    border-top: 2px solid var(--brand-500);
    border-bottom: 2px solid var(--brand-500);
    transform: rotateY(60deg);
    animation: spin-ring-y 12s linear infinite;
}

.gyro-ring.rz {
    border-left: 2px dashed #14b8a6;
    border-right: 2px dashed #14b8a6;
    transform: rotateZ(45deg);
    animation: spin-ring-z 10s linear infinite;
}

.gyro-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    /* Solid Brand Blue radial gradient */
    background: radial-gradient(circle at 30% 30%, var(--brand-500), var(--brand-500), var(--brand-500));
    box-shadow: 0 0 60px rgb(var(--brand-rgb) / 0.6), inset -10px -10px 30px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
    /* Anchor in center of gyro */
}

@keyframes gyro-tumble {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes spin-ring-x {
    100% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes spin-ring-y {
    100% {
        transform: rotateY(60deg) rotateZ(-360deg);
    }
}

@keyframes spin-ring-z {
    100% {
        transform: rotateZ(45deg) rotateX(360deg);
    }
}

@keyframes gradient-shift {

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

    50% {
        background-position: 100% 50%;
    }
}

.orbital-core h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Readable against gradient sphere */
    z-index: 5;
    position: relative;
    /* Above gyro */
}

.orbital-core__glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(218, 230, 247, 1) 0%, transparent 60%);
    animation: core-pulse 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes core-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

.orbital-ring {
    position: absolute;
    width: 850px;
    height: 850px;
    border: 2px dashed rgb(var(--brand-rgb) / 0.3);
    /* Datariot Blue ring */
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(0deg);
    /* GSAP will animate rotateZ */
}

.orbital-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

/* Distribute nodes around the ring. 
   Counter-rotate them so they face the camera correctly while the ring rotates. */
.on--1 {
    transform: translate(-50%, -50%) rotateZ(0deg) translateX(425px) rotateZ(0deg) rotateX(-60deg);
}

.on--2 {
    transform: translate(-50%, -50%) rotateZ(60deg) translateX(425px) rotateZ(-60deg) rotateX(-60deg);
}

.on--3 {
    transform: translate(-50%, -50%) rotateZ(120deg) translateX(425px) rotateZ(-120deg) rotateX(-60deg);
}

.on--4 {
    transform: translate(-50%, -50%) rotateZ(180deg) translateX(425px) rotateZ(-180deg) rotateX(-60deg);
}

.on--5 {
    transform: translate(-50%, -50%) rotateZ(240deg) translateX(425px) rotateZ(-240deg) rotateX(-60deg);
}

.on--6 {
    transform: translate(-50%, -50%) rotateZ(300deg) translateX(425px) rotateZ(-300deg) rotateX(-60deg);
}

.orbital-node h4 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.orbital-node p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.advantage-card__number {
    position: absolute;
    top: -20px;
    right: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 50px;
    font-weight: 800;
    color: rgb(var(--brand-rgb) / 0.15);
}

@media (max-width: 1024px) {
    .advantages-orbital {
        height: auto;
        flex-direction: column;
        gap: 40px;
        margin: 40px auto;
        transform: none !important;
    }

    .orbital-core {
        position: relative;
        margin-bottom: 30px;
        transform: scale(0.7);
        /* Shrink core on mobile to prevent overflow */
    }

    .orbital-core.core-3d {
        width: 160px;
        height: 160px;
    }

    .gyro-sphere {
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
    }

    .orbital-ring {
        position: relative;
        width: 100%;
        height: auto;
        border: none;
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .orbital-node {
        position: relative;
        top: auto;
        left: auto;
        transform: none !important;
        width: 100%;
    }
}


/* === FEATURES SECTION — TECHNICAL MODULAR === */
.section--features {
    padding: 140px 60px;
    position: relative;
    overflow: hidden;
}






/* === FEATURES SECTION — TECHNICAL MATRIX (BENTO) === */
.section--features {
    padding: 120px 60px;
    background: radial-gradient(circle at 0% 0%, rgba(218, 230, 247, 0.16), transparent 50%);
}

.features__matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    gap: 24px;
    margin-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* === FEATURES SECTION — HOLOGRAPHIC FRAGMENTS (WHITE LIGHT AESTHETIC) === */
.section--features {
    padding: 160px 60px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

/* 3D Technical Grid Background (Adapted for White) */
.section--features::before {
    content: '';
    position: absolute;
    inset: -100%;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(1000px) rotateX(60deg) translateZ(-200px);
    pointer-events: none;
    opacity: 1;
}

.features__fragments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 80px auto 0;
}

.feature-fragment {
    position: relative;
    padding: 24px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.75));
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(25, 26, 30, 0.015), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
}

[data-theme="dark"] .feature-fragment {
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.55), rgba(13, 14, 18, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.fragment-glow {
    position: absolute;
    inset: -50px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(0.9);
}

.feature-fragment:hover .fragment-glow {
    opacity: 0.15;
    transform: scale(1.1);
}

.glow--argue {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.45), transparent 60%);
}

.glow--respond {
    background: radial-gradient(circle at center, rgba(218, 230, 247, 1), transparent 60%);
}

.glow--vote {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.45), transparent 60%);
}

.feature-fragment--argue:hover {
    transform: translateY(-8px);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.feature-fragment--respond:hover {
    transform: translateY(-8px);
    border-color: rgb(var(--brand-rgb) / 0.35);
    box-shadow: 0 20px 40px rgb(var(--brand-rgb) / 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.feature-fragment--vote:hover {
    transform: translateY(-8px);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .feature-fragment--argue:hover {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.15), 0 0 25px rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .feature-fragment--respond:hover {
    border-color: rgba(218, 230, 247, 0.45);
    box-shadow: 0 20px 40px rgba(218, 230, 247, 0.15), 0 0 25px rgba(218, 230, 247, 0.08);
}

[data-theme="dark"] .feature-fragment--vote:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.15), 0 0 25px rgba(16, 185, 129, 0.08);
}

.fragment-visual {
    position: relative;
    z-index: 2;
    height: 135px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.4) 0%, rgba(226, 232, 240, 0.4) 100%);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: inset 0 2px 4px rgba(25, 26, 30, 0.02), 0 4px 12px rgba(25, 26, 30, 0.01);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .fragment-visual {
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.6) 0%, rgba(13, 14, 18, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feature-fragment:hover .fragment-visual {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.15);
}

.feature-fragment--argue:hover .fragment-visual {
    border-color: rgba(239, 68, 68, 0.3);
}

.feature-fragment--respond:hover .fragment-visual {
    border-color: rgb(var(--brand-rgb) / 0.3);
}

.feature-fragment--vote:hover .fragment-visual {
    border-color: rgba(16, 185, 129, 0.3);
}

/* === CARD 1: ARGUE VISUALS (Webcam/Recording) === */
.visual-argue {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(25, 26, 30, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 26, 30, 0.04) 1px, transparent 1px);
    background-size: 15px 15px;
    background-position: center;
    pointer-events: none;
    opacity: 0.7;
}

[data-theme="dark"] .camera-grid {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.rec-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 9px;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .rec-indicator {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.rec-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef4444;
    animation: rec-pulse-glow 1s infinite alternate;
}

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

.telemetry-top-right {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: monospace;
    font-size: 9px;
    color: rgba(25, 26, 30, 0.45);
    font-weight: 600;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .telemetry-top-right {
    color: rgba(255, 255, 255, 0.4);
}

.telemetry-bottom {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: monospace;
    font-size: 8px;
    color: rgba(25, 26, 30, 0.35);
    font-weight: 600;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .telemetry-bottom {
    color: rgba(255, 255, 255, 0.3);
}

.focus-box {
    position: relative;
    width: 100px;
    height: 62px;
    border: 1px dashed rgba(25, 26, 30, 0.12);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

[data-theme="dark"] .focus-box {
    border-color: rgba(255, 255, 255, 0.12);
}

.feature-fragment--argue:hover .focus-box {
    border-color: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}

.bracket {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1.5px solid #ef4444;
    transition: all 0.3s ease;
}

.br--tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.br--tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.br--bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.br--br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.audio-waves {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 30px;
}

.wave-bar {
    width: 2.5px;
    height: 12px;
    background: linear-gradient(180deg, #f59e0b, #ef4444);
    border-radius: 4px;
    animation: wave-bounce-glow 0.7s ease-in-out infinite alternate;
}

.wb--1 { height: 10px; animation-delay: -0.35s; }
.wb--2 { height: 22px; animation-delay: -0.15s; }
.wb--3 { height: 32px; animation-delay: -0.55s; }
.wb--4 { height: 15px; animation-delay: -0.25s; }
.wb--5 { height: 26px; animation-delay: -0.45s; }
.wb--6 { height: 18px; animation-delay: -0.65s; }
.wb--7 { height: 8px; animation-delay: -0.5s; }

@keyframes wave-bounce-glow {
    0% { transform: scaleY(0.45); opacity: 0.7; }
    100% { transform: scaleY(1.15); opacity: 1; filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6)); }
}

/* === CARD 2: RESPOND VISUALS (Face-Off & Bridge) === */
.visual-respond {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.debate-bg-grid {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(218, 230, 247, 0.13) 0%, transparent 80%);
    pointer-events: none;
}

[data-theme="dark"] .debate-bg-grid {
    background: radial-gradient(circle at center, rgba(218, 230, 247, 0.08) 0%, transparent 80%);
}

.debate-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.avatar--pro {
    background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.08) 0%, rgb(var(--brand-rgb) / 0.02) 100%);
    border: 1px solid rgb(var(--brand-rgb) / 0.3);
    box-shadow: 0 4px 12px rgb(var(--brand-rgb) / 0.06);
}

[data-theme="dark"] .avatar--pro {
    background: radial-gradient(circle, rgba(218, 230, 247, 0.2) 0%, rgba(218, 230, 247, 0.05) 100%);
    border: 1px solid rgba(218, 230, 247, 0.4);
    box-shadow: 0 4px 15px rgba(218, 230, 247, 0.15);
}

.avatar--con {
    background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.08) 0%, rgb(var(--brand-rgb) / 0.02) 100%);
    border: 1px solid rgb(var(--brand-rgb) / 0.3);
    box-shadow: 0 4px 12px rgb(var(--brand-rgb) / 0.06);
}

[data-theme="dark"] .avatar--con {
    background: radial-gradient(circle, rgba(218, 230, 247, 0.2) 0%, rgba(218, 230, 247, 0.05) 100%);
    border: 1px solid rgba(218, 230, 247, 0.4);
    box-shadow: 0 4px 15px rgba(218, 230, 247, 0.15);
}

.feature-fragment--respond:hover .avatar--pro {
    transform: scale(1.08) translateX(-4px);
    box-shadow: 0 6px 20px rgb(var(--brand-rgb) / 0.25);
}

.feature-fragment--respond:hover .avatar--con {
    transform: scale(1.08) translateX(4px);
    box-shadow: 0 6px 20px rgb(var(--brand-rgb) / 0.25);
}

.avatar-ring-outer {
    position: absolute;
    inset: -5px;
    border: 1px dashed rgb(var(--brand-rgb) / 0.25);
    border-radius: 50%;
    animation: rotate-clockwise 12s linear infinite;
}

[data-theme="dark"] .avatar-ring-outer {
    border-color: rgba(218, 230, 247, 0.35);
}

.avatar--con .avatar-ring-outer {
    border-color: rgb(var(--brand-rgb) / 0.25);
}

[data-theme="dark"] .avatar--con .avatar-ring-outer {
    border-color: rgba(218, 230, 247, 0.35);
}

.avatar-ring-inner {
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(25, 26, 30, 0.05);
    border-radius: 50%;
}

[data-theme="dark"] .avatar-ring-inner {
    border-color: rgba(255, 255, 255, 0.05);
}

@keyframes rotate-clockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.avatar-initials {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.avatar--pro .avatar-initials {
    color: var(--brand-500);
}

[data-theme="dark"] .avatar--pro .avatar-initials {
    color: var(--brand-ice);
    text-shadow: 0 0 8px rgba(218, 230, 247, 0.5);
}

.avatar--con .avatar-initials {
    color: var(--brand-500);
}

[data-theme="dark"] .avatar--con .avatar-initials {
    color: var(--brand-ice);
    text-shadow: 0 0 8px rgba(218, 230, 247, 0.5);
}

.debate-bridge {
    position: relative;
    width: 50px;
    height: 16px;
    z-index: 1;
}

.bridge-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bridge-path {
    stroke-dasharray: 4, 2;
    animation: flow-dash 1.5s linear infinite;
}

@keyframes flow-dash {
    0% { stroke-dashoffset: 6; }
    100% { stroke-dashoffset: 0; }
}

.bridge-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 6px rgb(var(--brand-rgb) / 0.6);
    transform: translateY(-50%);
    animation: bridge-travel-glow 2s cubic-gradient(0.4, 0, 0.2, 1) infinite;
}

[data-theme="dark"] .bridge-pulse {
    background: #fff;
    box-shadow: 0 0 8px var(--brand-ice), 0 0 16px var(--brand-ice);
}

@keyframes bridge-travel-glow {
    0% { left: 0%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.challenge-alert {
    position: absolute;
    top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    color: var(--brand-500);
    background: rgb(var(--brand-rgb) / 0.06);
    border: 1px solid rgb(var(--brand-rgb) / 0.18);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    animation: pulse-alert 2s ease-in-out infinite;
}

[data-theme="dark"] .challenge-alert {
    color: var(--brand-ice);
    background: rgba(218, 230, 247, 0.12);
    border: 1px solid rgba(218, 230, 247, 0.25);
}

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

/* === CARD 3: VOTE VISUALS (Logic Dial & Verdict) === */
.visual-vote {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vote-bg-grid {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.04) 0%, transparent 80%);
    pointer-events: none;
}

[data-theme="dark"] .vote-bg-grid {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, transparent 80%);
}

.logic-meter {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meter-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.meter-track {
    fill: none;
    stroke: rgba(25, 26, 30, 0.06);
    stroke-width: 7;
}

[data-theme="dark"] .meter-track {
    stroke: rgba(255, 255, 255, 0.05);
}

.meter-fill {
    fill: none;
    stroke-width: 7;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    stroke-linecap: round;
    animation: fill-draw 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fill-draw {
    from { stroke-dashoffset: 251.2; }
    to { stroke-dashoffset: 45; } 
}

.logic-score {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 19px;
    font-weight: 800;
    color: #191A1E;
    line-height: 1;
}

[data-theme="dark"] .score-num {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.score-label {
    font-family: 'Manrope', sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(25, 26, 30, 0.5);
    margin-top: 3px;
}

[data-theme="dark"] .score-label {
    color: rgba(255, 255, 255, 0.4);
}

.vote-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    color: #059669;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.18);
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .vote-badge {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-dot {
    width: 4px;
    height: 4px;
    background: #059669;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(5, 150, 105, 0.5);
    animation: rec-pulse-glow 0.8s infinite alternate;
}

[data-theme="dark"] .badge-dot {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

/* === CARD CONTENT & TYPOGRAPHY === */
.fragment-content {
    position: relative;
    z-index: 3;
    padding: 0 !important;
    width: 100%;
}

.fragment-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: inline-block;
    text-transform: uppercase;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.tag--argue {
    color: #ef4444;
}

.tag--respond {
    color: var(--brand-500);
}

.tag--vote {
    color: #10b981;
}

.feature-fragment h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #191A1E;
    margin-bottom: 8px;
    line-height: 1.3;
}

[data-theme="dark"] .feature-fragment h3 {
    color: #ffffff;
}

.feature-fragment p {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    opacity: 0.9;
}

[data-theme="dark"] .feature-fragment p {
    color: #94a3b8;
}






@media (max-width: 1024px) {
    .features__fragments {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 20px;
        margin-top: 50px;
    }

    .feature-fragment {
        min-height: auto;
        padding: 24px;
    }

    .fragment-visual {
        height: 130px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .features__fragments {
        gap: 16px;
    }

    .feature-fragment {
        padding: 24px 20px;
    }

    .fragment-visual {
        height: 130px;
        transform: none !important;
    }

    .fragment-content {
        transform: none !important;
    }

    .feature-fragment h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .feature-fragment p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .features__fragments {
        max-width: 100%;
        gap: 14px;
        margin-top: 40px;
        padding: 0 12px;
    }

    .feature-fragment {
        padding: 20px 16px;
        border-radius: 20px;
    }

    .fragment-visual {
        height: 120px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    /* Card 1 specific mobile sizing */
    .focus-box {
        width: 86px;
        height: 58px;
    }

    .audio-waves {
        height: 24px;
    }

    .wave-bar {
        width: 2px;
    }

    /* Card 2 specific mobile sizing */
    .visual-respond {
        gap: 24px;
    }

    .debate-avatar {
        width: 38px;
        height: 38px;
    }

    .avatar-initials {
        font-size: 9px;
    }

    .debate-bridge {
        width: 36px;
        height: 12px;
    }

    .bridge-pulse {
        width: 5px;
        height: 5px;
    }

    /* Card 3 specific mobile sizing */
    .logic-meter {
        width: 72px;
        height: 72px;
    }

    .score-num {
        font-size: 18px;
    }
}



/* ═══════════════════════════════════════════════════════
   DESCRIPTIVE 3D ELEMENT WRAPPER
═══════════════════════════════════════════════════════ */
.feat3d {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

/* 1. HOLO-CASCADE (Feed) */
.holo-cascade {
    width: 200px;
    height: 250px;
    position: relative;
    transform-style: preserve-3d;
}

.h-voxel {
    position: absolute;
    width: 40px;
    height: 30px;
    background: rgb(var(--brand-rgb) / 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: voxel-fall 3.5s linear infinite;
}

@keyframes voxel-fall {
    0% {
        transform: translateY(-120px) rotateY(0deg) translateZ(-50px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(220px) rotateY(360deg) translateZ(100px);
        opacity: 0;
    }
}

.hv--1 {
    left: 10%;
    animation-delay: 0s;
}

.hv--2 {
    left: 30%;
    animation-delay: 0.5s;
    width: 30px;
    height: 20px;
}

.hv--3 {
    left: 50%;
    animation-delay: 1.2s;
    width: 50px;
    height: 35px;
}

.hv--4 {
    left: 75%;
    animation-delay: 1.8s;
    width: 35px;
    height: 25px;
}

.hv--5 {
    left: 25%;
    animation-delay: 2.3s;
}

.hv--6 {
    left: 85%;
    animation-delay: 2.8s;
}

[data-theme="dark"] .feed-card {
    background: #09090b;
    backdrop-filter: blur(20px);
}

/* ──────────────────────────────
   ARENA: Two opposing forces colliding
────────────────────────────── */
/* 2. HOLO-SHIELD (Arena) */
.holo-shield {
    width: 160px;
    height: 160px;
    position: relative;
    transform-style: preserve-3d;
}

.shield-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed rgb(var(--brand-rgb) / 0.5);
    border-radius: 50%;
    animation: shield-rotate 8s linear infinite;
}

.sr--2 {
    inset: 35px;
    border-style: dotted;
    animation-duration: 4s;
    animation-direction: reverse;
}

.shield-core {
    position: absolute;
    inset: 55px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    filter: blur(10px);
    animation: crystal-pulse 2s ease-in-out infinite;
}

.shield-scan {
    position: absolute;
    inset: -15px;
    background: conic-gradient(from 0deg, transparent, rgb(var(--brand-rgb) / 0.25), transparent 35%);
    border-radius: 50%;
    animation: shield-rotate 3s linear infinite;
}

/* 3. HOLO-CRYSTAL (Score) */
.holo-crystal {
    width: 100px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    animation: crystal-float 5s ease-in-out infinite;
}

.crystal-facet {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.4), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.3);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    backdrop-filter: blur(5px);
}

.cf--1 {
    transform: rotateY(0deg) translateZ(40px);
}

.cf--2 {
    transform: rotateY(90deg) translateZ(40px);
}

.cf--3 {
    transform: rotateY(180deg) translateZ(40px);
}

.cf--4 {
    transform: rotateY(270deg) translateZ(40px);
}

.crystal-core {
    position: absolute;
    inset: 30px;
    background: var(--accent);
    filter: blur(15px);
    animation: crystal-pulse 2s infinite;
}


/* ──────────────────────────────
   JURY: Orbiting vote particles
────────────────────────────── */
.feat3d--jury {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jury-center {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: calc(35% - 25px);
    left: calc(50% - 25px);
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.3), rgb(var(--brand-rgb) / 0.6));
    box-shadow: 0 0 40px rgb(var(--brand-rgb) / 0.6), 0 0 80px rgb(var(--brand-rgb) / 0.2);
    animation: center-pulse 4s ease-in-out infinite;
}

@keyframes center-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.jury-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.jury-orbit--1 {
    width: 110px;
    height: 110px;
    animation: orbit-cw 4s linear infinite;
}

.jury-orbit--2 {
    width: 170px;
    height: 170px;
    animation: orbit-ccw 7s linear infinite;
}

.jury-orbit--3 {
    width: 230px;
    height: 230px;
    animation: orbit-cw 10s linear infinite;
}

@keyframes orbit-cw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-ccw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.jury-dot {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
}

.jury-dot--teal {
    background: #14b8a6;
}

.jury-dot--purple {
    background: var(--brand-500);
}

/* ──────────────────────────────
   PROFILE: DNA identity helix
────────────────────────────── */
.feat3d--profile {
    perspective: 600px;
    overflow: visible;
}

.dna-strand {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    animation: dna-sway 5s ease-in-out infinite;
}

.dna-strand--a {
    transform: translateX(calc(-50% - 30px)) rotateY(0deg);
}

.dna-strand--b {
    transform: translateX(calc(-50% + 30px)) rotateY(0deg);
    animation-delay: -2.5s;
}


/* 4. HOLO-JURY (Governance) */
.holo-jury {
    width: 180px;
    height: 180px;
    position: relative;
    transform-style: preserve-3d;
}

.j-ring {
    position: absolute;
    inset: 30px;
    border: 1px solid rgb(var(--brand-rgb) / 0.25);
    border-radius: 50%;
    transform: rotateX(80deg);
}

.j-node {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    animation: node-orbit 7s linear infinite;
}

.jn--1 {
    animation-delay: 0s;
}

.jn--2 {
    animation-delay: -2.3s;
}

.jn--3 {
    animation-delay: -4.6s;
}

@keyframes node-orbit {
    0% {
        transform: rotate(0deg) translateX(75px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(75px) rotate(-360deg);
    }
}

/* 5. HOLO-DNA (Identity) */
.holo-dna {
    width: 130px;
    height: 240px;
    position: relative;
    transform-style: preserve-3d;
    animation: shield-rotate 20s linear infinite;
}

.dna-helix {
    position: absolute;
    width: 10px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 5px;
}

.dna-helix--b {
    transform: rotateY(180deg) translateZ(45px);
}

.dna-helix--a {
    transform: translateZ(45px);
}

.dna-bar {
    position: absolute;
    top: calc(var(--i) * 45px);
    left: 50%;
    width: 90px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    margin-left: -45px;
    transform: translateZ(45px);
}

/* Base Utility Animations */
@keyframes shield-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes crystal-float {

    0%,
    100% {
        transform: translateY(0) rotateY(0deg);
    }

    50% {
        transform: translateY(-25px) rotateY(180deg);
    }
}

@keyframes crystal-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.9;
    }
}



/* ── Responsive & Mobile Polishing ── */
@media (max-width: 1024px) {
    .section--3d-features {
        padding: 80px 24px;
    }

    .features__grid--overlap {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .feature-card--3d {
        height: 380px;
        transform: none !important;
    }

    .feature-card__content-3d {
        padding: 0 28px 28px;
    }

    /* Scale down 3D visuals slightly for tablet */
    .feat3d {
        transform: scale(0.85);
        transform-origin: top center;
    }
}

@media (max-width: 640px) {
    .feature-card--3d {
        height: 340px;
    }

    /* Heavily scale and reposition 3D visuals for mobile */
    .feat3d {
        transform: scale(0.65);
        transform-origin: center top;
        top: 10% !important;
    }

    .holo-shield,
    .holo-crystal,
    .holo-jury,
    .holo-dna {
        transform: scale(0.8);
        transform-origin: center top;
    }

    .dna-strand {
        height: 140px;
    }

    .feature-card__text-3d h3 {
        font-size: 20px !important;
    }

    .feature-card__text-3d p {
        font-size: 13px !important;
    }
}

/* Fallback for mobile/touch where hover doesn't exist */
@media (hover: none) {
    .feature-card--3d {
        animation: mobile-float 6s ease-in-out infinite;
    }

    .feature-card--3d:nth-child(even) {
        animation-delay: -3s;
    }
}

@keyframes mobile-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* === APP SCREENS SECTION === */
/* === APP SCREENS SECTION — PREMIUM SHOWCASE === */
.section--screens {
    padding: 120px 60px;
    background: radial-gradient(circle at 50% 100%, rgba(218, 230, 247, 0.16), transparent 70%);
}

.screens__showcase-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.screens__showcase {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

/* Background Glowing Orbs */
.showcase__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.3;
}

.showcase__glow--1 {
    width: 400px;
    height: 400px;
    background: var(--accent);
    top: 10%;
    left: 20%;
    animation: glow-pulse-soft 8s infinite alternate;
}

.showcase__glow--2 {
    width: 300px;
    height: 300px;
    background: var(--cyan);
    bottom: 10%;
    right: 20%;
    animation: glow-pulse-soft 8s infinite alternate-reverse;
}

@keyframes glow-pulse-soft {
    from {
        opacity: 0.2;
        transform: scale(1) translate(0, 0);
    }

    to {
        opacity: 0.4;
        transform: scale(1.2) translate(10%, 10%);
    }
}

/* Base Phone Mockup */
.phone-mockup {
    position: absolute;
    width: 280px;
    height: 580px;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    transform-style: preserve-3d;
    background: #08090D;
    /* Solid base to fill any 3D rotation gaps */
    border-radius: 42px;
    /* Set outer radius */
}

/* 3D Side Rail (The "Thickness" of the phone) */
.phone-mockup::after {
    content: '';
    position: absolute;
    inset: -1px;
    /* Slightly larger to overlap and hide gaps */
    background: linear-gradient(90deg, #1e293b, #334155, #1e293b);
    border-radius: 42px;
    /* Unified radius */
    transform: translateZ(-4px);
    /* Pushes the 'back' of the phone slightly away */
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: -1;
}

.phone-mockup__inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #08090D;
    /* Matches base */
    border-radius: 42px;
    /* Fully unified radius */
    border: 1.5px solid #334155;
    /* Surgical steel frame */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 2px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Phone positioned detail: Front Speaker */
.phone-mockup__inner::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #191A1E;
    border-radius: 2px;
    z-index: 12;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.phone-mockup__glass {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 20%,
            transparent 40%,
            rgba(255, 255, 255, 0.03) 60%,
            rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
}

.phone-mockup__screen {
    position: absolute;
    inset: 4px;
    /* Tiny bezel for realism */
    border-radius: 38px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.phone-mockup__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.phone-mockup__bezel {
    display: none;
    /* Keep physical notch hidden for edge-to-edge feel */
}

/* Side Buttons */
.phone-mockup--center::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 100px;
    width: 3px;
    height: 40px;
    background: #475569;
    border-radius: 2px 0 0 2px;
    z-index: 10;
}

/* Phone Positions */
.phone-mockup--left {
    transform: translateX(-350px) rotateY(25deg) scale(0.9);
    z-index: 4;
    filter: blur(1px) brightness(0.7);
}

.phone-mockup--center {
    z-index: 10;
    transform: translateZ(100px);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9);
}

.phone-mockup--right {
    transform: translateX(350px) rotateY(-25deg) scale(0.9);
    z-index: 4;
    filter: blur(1px) brightness(0.7);
}

/* Showcase Interactions */
.screens__showcase:hover .phone-mockup--left {
    transform: translateX(-400px) rotateY(35deg) scale(0.85);
}

.screens__showcase:hover .phone-mockup--right {
    transform: translateX(400px) rotateY(-35deg) scale(0.85);
}

.phone-mockup--center:hover {
    transform: translateZ(150px) translateY(-20px) scale(1.02);
}

.phone-mockup--center:hover .phone-mockup__screen img {
    transform: scale(1.05);
}

/* Floating Icon Decor */
.phone-mockup__floating-icon {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    background: var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-on);
    box-shadow: 0 10px 30px var(--accent-glow);
    z-index: 15;
    animation: icon-float 3s infinite ease-in-out;
}

@keyframes icon-float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

/* Description Grid */
.screens__description-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    margin-top: 20px;
}

.desc-item {
    text-align: center;
    padding: 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    opacity: 0.6;
}

.desc-item--active,
.desc-item:hover {
    opacity: 1;
    background: #09090b;
    border-color: var(--accent);
    transform: translateY(-5px);
}

.desc-item h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.desc-item p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .screens__showcase {
        height: 500px;
    }

    .phone-mockup {
        width: 200px;
        height: 415px;
    }

    .phone-mockup--left {
        transform: translateX(-180px) rotateY(20deg) scale(0.85);
    }

    .phone-mockup--right {
        transform: translateX(180px) rotateY(-20deg) scale(0.85);
    }

    .screens__description-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .screens__showcase {
        height: 380px;
    }

    .phone-mockup {
        width: 140px;
        /* Smaller base size for mobile */
        height: 290px;
    }

    .phone-mockup--left {
        display: block;
        /* Show again */
        transform: translateX(-100px) rotateY(20deg) scale(0.85);
        filter: blur(1px) brightness(0.8);
    }

    .phone-mockup--right {
        display: block;
        /* Show again */
        transform: translateX(100px) rotateY(-20deg) scale(0.85);
        filter: blur(1px) brightness(0.8);
    }

    .phone-mockup--center {
        z-index: 10;
        transform: translateZ(60px) scale(1.1);
        filter: none;
    }
}




.mock-phone__ui {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--bg);
}

/* The Feed Mock */
.mock-phone__ui--video {
    background: linear-gradient(180deg, rgb(var(--brand-rgb) / 0.1) 0%, #191A1E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mock-video-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.mock-video-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
}

.mock-video-tag {
    font-size: 8px;
    padding: 2px 6px;
    background: var(--accent);
    color: var(--brand-on);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.mock-video-title {
    font-size: 10px;
    font-weight: 600;
    color: white;
}

/* Debates Mock */
.mock-phone__ui--thread {
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mock-thread-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.mock-thread-arg {
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    position: relative;
}

.mock-thread-arg::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 3px;
    border-radius: 2px;
}

.mock-thread-arg--for::before {
    background: var(--brand-500);
}

.mock-thread-arg--against::before {
    background: #f43f5e;
}

/* Profile Mock */
.mock-phone__ui--profile {
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mock-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--cyan));
}

.mock-profile-stats {
    display: flex;
    gap: 8px;
    width: 100%;
}

.mock-stat {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.mock-profile-dna {
    width: 100%;
    height: 80px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.screen-card__text h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.screen-card__text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* === ARENA FORGE (HOW IT WORKS) === */
.arena-forge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.forge-lead {
    max-width: 700px;
    text-align: center;
}

.forge-lead p {
    font-size: 20px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.forge-pipeline {
    position: relative;
    width: 100%;
    max-width: 1000px;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.forge-conduit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--accent), var(--accent), transparent);
    opacity: 0.3;
}

.forge-node {
    position: relative;
    width: 45%;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.forge-node--left {
    align-self: flex-start;
    text-align: right;
}

.forge-node--right {
    align-self: flex-end;
    text-align: left;
}

.node-content {
    position: relative;
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    transition: all 0.4s var(--ease-out-expo);
}

.forge-node:hover .node-content {
    background: #09090b;
    transform: translateZ(20px);
}

.node-num {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 16px;
    opacity: 0.5;
}

.node-content h4 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.node-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.node-pulse {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--accent-glow);
}

.forge-node--left .node-pulse {
    right: -56px;
    transform: translateY(-50%);
}

.forge-node--right .node-pulse {
    left: -56px;
    transform: translateY(-50%);
}

.node-pulse::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    animation: node-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes node-ping {

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.node-connector {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 2px;
    overflow: visible;
}

.forge-node--left .node-connector {
    right: -45px;
    transform: translateY(-50%);
}

.forge-node--right .node-connector {
    left: -45px;
    transform: translateY(-50%);
}

.node-connector path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: connector-flow 3s linear infinite;
}

@keyframes connector-flow {
    100% {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 768px) {
    .forge-conduit {
        left: 20px;
        transform: none;
    }

    .forge-node {
        width: calc(100% - 40px);
        align-self: flex-end;
        text-align: left;
        margin-bottom: 40px;
        /* Add space between stacked nodes */
    }

    .node-content {
        padding: 24px;
        /* Simpler padding for mobile */
    }

    .forge-node--left .node-pulse,
    .forge-node--right .node-pulse {
        left: -30px;
        right: auto;
    }

    .forge-node--left .node-connector,
    .forge-node--right .node-connector {
        display: none;
    }
}


/* Debate card mock */
.debate-card-mock {
    padding: 28px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease-out-expo);
}

.mock-phone__ui--brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 20px;
}

.mock-brand-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.mock-brand-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-primary);
}

.debate-card-mock__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.debate-card-mock__tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(251, 146, 60, 0.12);
    color: #fb923c;
    font-weight: 500;
}

.debate-card-mock__score {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(34, 197, 94, 0.12);
    color: var(--brand-500);
    font-weight: 600;
}

.debate-card-mock__thesis {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 16px;
}

.debate-card-mock__meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.debate-card-mock__args {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.debate-arg {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.debate-arg--for {
    border-left: 2px solid var(--brand-500);
}

.debate-arg--against {
    border-left: 2px solid #f43f5e;
}

.debate-arg__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.debate-arg--for .debate-arg__label {
    background: rgba(34, 197, 94, 0.12);
    color: var(--brand-500);
}

.debate-arg--against .debate-arg__label {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}

.debate-arg p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    flex: 1;
}

.debate-arg__votes {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* === LIVE STATS SECTION === */
.section--live {
    padding: 100px 60px;
}

.live__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
}

.live-card {
    padding: 16px 24px;
    border-radius: 16px;
    background: var(--surface);
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s var(--ease-out-expo);
}

.live-card:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.live-card__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    animation: pulse-dot 2s infinite;
}

.live-card__number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    min-width: 56px;
}

.live-card__label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 450;
    flex: 1;
}


/* Live Feed */
.live__feed {
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}

.live__feed-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.live__feed-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
    animation: pulse-dot 1.5s infinite;
}

.live__feed-items {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.live__feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
    animation: fadeInUp 0.3s var(--ease-out-expo);
}

.live__feed-item:last-child {
    border-bottom: none;
}

.live__feed-item__icon {
    font-size: 16px;
    flex-shrink: 0;
}

.live__feed-item__text {
    flex: 1;
}

.live__feed-item__time {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* === BETA SECTION === */
.section--beta {
    padding: 160px 60px;
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Background Animated Glows */
.beta-bg-glows {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.beta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
}

.beta-glow--1 {
    width: 600px;
    height: 600px;
    background: rgba(218, 230, 247, 1);
    top: -100px;
    right: -100px;
    animation: float-slow 20s infinite alternate;
}

.beta-glow--2 {
    width: 500px;
    height: 500px;
    background: rgba(218, 230, 247, 1);
    bottom: -100px;
    left: -100px;
    animation: float-slow 15s infinite alternate-reverse;
}

.beta__layout {
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.beta__info {
    flex: 1;
}

.beta__perks {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
}

.beta__perk {
    display: flex;
    gap: 24px;
    align-items: center;
}

.beta__perk-tag {
    font-family: var(--font-tech);
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-500);
    letter-spacing: 1.5px;
    flex-shrink: 0;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgb(var(--brand-rgb) / 0.15);
    background: rgb(var(--brand-rgb) / 0.03);
    width: 130px;
    text-align: center;
}

[data-theme="dark"] .beta__perk-tag {
    border-color: rgba(218, 230, 247, 0.25);
    background: rgba(218, 230, 247, 0.05);
}

.beta__perk h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.beta__perk p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.beta__card {
    flex: 1;
    perspective: 1000px;
}

.beta__card-inner {
    padding: 50px 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.7));
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgb(var(--brand-rgb) / 0.18);
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgb(var(--brand-rgb) / 0.04),
        0 10px 30px rgba(0, 0, 0, 0.015);
    z-index: 1;
    transition: all 0.5s var(--ease-out-expo);
}

.beta__card-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 100px rgb(var(--brand-rgb) / 0.08);
}

[data-theme="dark"] .beta__card-inner {
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.75), rgba(13, 14, 18, 0.8));
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.card-tech-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgb(var(--brand-rgb) / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--brand-rgb) / 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

[data-theme="dark"] .card-tech-grid {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
}

.beta__card-meta {
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--brand-500);
    margin-bottom: 24px;
    letter-spacing: 2px;
    font-weight: 700;
    display: block;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.beta__card-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 850;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.beta__card-desc {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    color: var(--text-secondary);
    margin-bottom: 28px;
    line-height: 1.5;
}

.beta__input-wrap {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid rgb(var(--brand-rgb) / 0.2);
    border-radius: 16px;
    padding: 6px 6px 6px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .beta__input-wrap {
    background: rgba(13, 14, 18, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.beta__input-wrap:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.12);
}

.beta__input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 0;
    color: var(--text-primary);
    font-family: var(--font-tech);
    font-size: 14.5px;
    outline: none;
}

.beta__submit-btn {
    height: 48px;
    padding: 0 24px;
    background: transparent;
    color: var(--brand-500);
    border-radius: 12px;
    border: 1px solid rgb(var(--brand-rgb) / 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-tech);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none;
}

[data-theme="dark"] .beta__submit-btn {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

.beta__submit-btn:hover {
    background: #191A1E;
    color: #ffffff;
    border-color: #191A1E;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(25, 26, 30, 0.1);
}

[data-theme="dark"] .beta__submit-btn:hover {
    background: #ffffff;
    color: #191A1E;
    border-color: #ffffff;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

.beta__card-note {
    display: block;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
}

.beta__success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: #ffffff;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .beta__success {
    background: rgba(25, 26, 30, 0.8);
}

.beta__success-icon {
    width: 72px;
    height: 72px;
    background: rgba(34, 197, 94, 0.1);
    color: var(--brand-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px;
    font-weight: 800;
}

.beta__success h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.beta__success p {
    font-size: 16px;
    color: var(--text-secondary);
}


/* === FOOTER — Expanded === */
.footer {
    padding: 120px 60px 48px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.5fr 3fr;
    gap: 80px;
    padding: 100px 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #D8E7FA;
}

[data-theme="light"] .footer__logo {
    color: #15161A;
}

.footer__tagline {
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1.6;
}

.footer__columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer__col h5 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin-bottom: 24px;
}

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

.footer__col a {
    display: block;
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    transition: all 0.3s;
    text-decoration: none;
}

.footer__col a:hover {
    color: var(--accent);
    transform: translateX(4px);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    font-size: 13px;
    color: var(--text-tertiary);
}


.footer__bottom-links {
    display: flex;
    gap: 16px;
}

.footer__bottom-links a {
    font-size: 12px;
    color: var(--text-tertiary);
    transition: color 0.3s;
}

.footer__bottom-links a:hover {
    color: var(--text-primary);
}

/* === FADE-IN ANIMATION === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Intersection Observer animated elements */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--ease-out-expo);
}

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

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .section--hero {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 40px;
        padding: 40px 60px;
    }

    .hero__content {
        max-width: 100%;
    }

    .hero__actions {
        justify-content: center;
    }

    .about__grid,
    .vision__content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .features__grid {
        grid-template-columns: 1fr 1fr;
    }

    .feature-card--large {
        grid-column: span 1;
    }
}

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

    .sidebar.mobile-open {
        display: flex;
        position: fixed !important;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        bottom: 0;
        border-radius: 0;
        z-index: 20000;
        /* Extremely high to cover everything */
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
        visibility: visible;
        opacity: 1;
        background: var(--bg);
    }

    .sidebar.mobile-open .sidebar__link-text {
        opacity: 1;
    }

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

    .main {
        margin-left: 0;
    }

    .section {
        padding: 60px 24px;
    }

    .section--hero {
        padding: 40px 24px;
    }

    .hero__title {
        font-size: clamp(48px, 14vw, 80px);
    }

    .hero__phone {
        width: 200px;
        height: 400px;
    }

    .hero__dna-visual {
        transform: scale(0.8);
    }

    .features__grid {
        grid-template-columns: 1fr;
    }

    .footer {
        padding: 40px 24px;
    }

    .footer__top {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .footer__brand {
        align-items: center;
    }

    .footer__columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px;
        text-align: left;
    }

    .footer__container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: clamp(38px, 12vw, 60px);
    }

    .hero__actions {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

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

    .live__grid {
        grid-template-columns: 1fr !important;
    }

    .footer__columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 20px;
    }

    .section--beta {
        padding: 80px 24px;
    }

    .beta__layout {
        flex-direction: column;
        gap: 60px;
    }

    .beta__card {
        width: 100%;
        max-width: 100%;
    }

    .beta__card-inner {
        padding: 40px 24px;
        border-radius: 32px;
    }

    .beta__card-title {
        font-size: 24px;
        text-align: center;
    }

    .beta__card-desc {
        text-align: center;
    }

    .beta__input-wrap {
        flex-direction: column;
        padding: 8px;
        background: var(--surface-2);
    }

    .beta__input-wrap input {
        width: 100%;
        padding: 12px 16px;
        text-align: center;
    }

    .beta__submit-btn {
        width: 100%;
    }
}

/* === THEME TOGGLE BUTTON === */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.4s var(--ease-out-expo);
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: rotate(20deg) scale(1.1);
    box-shadow: 0 0 20px var(--accent-glow);
}

.theme-toggle__icon {
    transition: all 0.4s var(--ease-out-expo);
    position: absolute;
}

.theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Sun visible in light mode */
[data-theme="light"] .theme-toggle__icon--sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="light"] .theme-toggle__icon--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.7);
}

/* ============================
   LIGHT THEME
   ============================ */
[data-theme="light"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);

    --text-primary: #191A1E;
    --text-secondary: rgba(25, 26, 30, 0.65);
    --text-tertiary: rgba(25, 26, 30, 0.4);
    --text-accent: #64748b;

    --accent: #64748b;
    --accent-glow: rgba(100, 116, 139, 0.15);
    --accent-2: #475569;
    --accent-bright: #334155;

    --cyan: #64748b;
    --cyan-glow: rgba(100, 116, 139, 0.08);
}

[data-theme="light"] body {
    background: var(--bg);
}

[data-theme="light"] .ambient-glow {
    opacity: 0 !important;
    display: none !important;
}

[data-theme="light"] .mouse-spotlight {
    display: none !important;
}

[data-theme="light"] .floating-orb {
    opacity: 0 !important;
    display: none !important;
}

[data-theme="light"] .grid-overlay {
    background-image: none;
    box-shadow: none !important;
}

[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .hero__phone {
    background: linear-gradient(145deg, #ffffff, #eef0f5);
    box-shadow:
        0 0 60px rgba(100, 116, 139, 0.06),
        0 30px 60px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .hero__phone-inner {
    background: #f0f2f7;
}

[data-theme="light"] .hero__letter {
    background: linear-gradient(180deg,
            #191A1E 0%,
            #64748b 50%,
            var(--brand-500) 100%);
    background-size: 100% 300%;
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .hero__letter::before {
    color: var(--brand-500);
}

[data-theme="light"] .hero__letter::after {
    color: #e11d48;
}

[data-theme="light"] .value-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(248, 250, 252, 0.85) 100%);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.015), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .value-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.95) 100%);
}

[data-theme="light"] .beta__input-wrap {
    background: #f1f5f9;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .beta__card-title {
    color: #191A1E;
}

[data-theme="light"] .beta__card-desc {
    color: rgba(25, 26, 30, 0.6);
}

[data-theme="light"] .feature-card__icon {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.12);
}

[data-theme="light"] .phone-ui__card--1 {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(100, 116, 139, 0.02));
}

[data-theme="light"] .phone-ui__card--2 {
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.08), rgb(var(--brand-rgb) / 0.02));
}

[data-theme="light"] .phone-ui__card--3 {
    background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.08), rgb(var(--brand-rgb) / 0.02));
}

[data-theme="light"] .mobile-nav-toggle {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .mobile-nav-toggle span {
    background: var(--text-primary);
}

[data-theme="light"] .btn--primary {
    box-shadow: 0 4px 14px rgba(100, 116, 139, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .btn--primary:hover {
    box-shadow: 0 8px 25px rgba(100, 116, 139, 0.35), 0 4px 15px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .section--hero,
[data-theme="light"] .section--global,
[data-theme="light"] .section--advantages,
[data-theme="light"] .section--manifesto,
[data-theme="light"] .section--features,
[data-theme="light"] .section--screens,
[data-theme="light"] .section--live,
[data-theme="light"] .section--beta,
[data-theme="light"] .footer {
    background: #ffffff !important;
}

[data-theme="light"] .section--manifesto::before,
[data-theme="light"] .section--features::before,
[data-theme="light"] .section--live::before,
[data-theme="light"] .section--beta::before {
    opacity: 0.08;
}

[data-theme="light"] .top-branding {
    background: var(--bg) !important;
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] body {
    box-shadow: none !important;
}

[data-theme="light"] main {
    box-shadow: none !important;
}

[data-theme="light"] .footer__top {
    border-color: var(--border);
}

[data-theme="light"] .btn--ghost:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .beta__input-wrap {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .beta__input-wrap input {
    color: #191A1E !important;
}

[data-theme="light"] .scroll-indicator__line {
    background: linear-gradient(to bottom, var(--accent-2), transparent);
}

[data-theme="light"] .mock-phone__ui--video {
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.1) 0%, #f1f5f9 100%);
}

[data-theme="light"] .mock-thread-arg,
[data-theme="light"] .mock-stat,
[data-theme="light"] .mock-profile-dna {
    background: #f8fafc;
}

[data-theme="light"] .mock-video-title {
    color: #191A1E;
}

/* Smooth theme transition on all elements */
body,
.sidebar,
.value-card,
.feature-card,
.debate-card-mock,
.live-card,
.live__feed,
.beta__card-inner,
.hero__phone,
.hero__phone-inner,
.theme-toggle,
.btn,
.mobile-nav-toggle,
.footer {
    transition: background 0.5s var(--ease-out-expo),
        color 0.5s var(--ease-out-expo),
        border-color 0.5s var(--ease-out-expo),
        box-shadow 0.5s var(--ease-out-expo);
}

/* Responsive for new sections */
@media (max-width: 1024px) {

    .manifesto__content,
    .debates__content,
    .beta__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer__top {
        flex-direction: column;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .footer__columns {
        flex-wrap: wrap;
        gap: 32px;
    }

    .footer {
        padding: 40px 24px 20px;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* === HERO SHIMMER REDESIGN === */
.top-nav {
    position: absolute;
    top: 48px;
    right: 140px;
    display: flex;
    align-items: center;
    z-index: 1000;
    background: transparent !important;
}

@media (max-width: 1024px) {
    .top-nav {
        right: 60px;
    }
}

@media (max-width: 768px) {
    .top-nav {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
        justify-content: flex-end;
    }
}

.hero--shimmer {
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    /* offset for top-nav */
}

.hero__shimmer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(-45deg, #191A1E, #334155, #94a3b8, #e2e8f0, #f8fafc);
    background-size: 400% 400%;
    animation: shimmer-bg 15s ease infinite;
    opacity: 0.35;
    filter: blur(40px);
}

[data-theme="light"] .hero__shimmer-bg {
    background: #ffffff !important;
    animation: none;
    opacity: 1;
}

.hero__shimmer-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at center, transparent 0%, rgba(2, 4, 8, 0.8) 100%);
}

[data-theme="light"] .hero__shimmer-overlay {
    background: none !important;
}

@keyframes shimmer-bg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero__content--centered {
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
    max-width: 800px;
    width: auto;
}

.hero__content--left {
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
    max-width: 800px;
    width: auto;
    flex: 1;
}

.hero__content--left .hero__sub-copy {
    align-items: flex-start;
    text-align: left;
}

.hero__content--left .hero__brand-text {
    text-align: left;
}

.hero__brand-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.3s both;
}

.hero__brand-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.3s both;
}

.hero__brand-logo-wrap {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform-style: preserve-3d;
}

/* Removed empty light theme logo wrap styling */

.hero__brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgb(var(--brand-rgb) / 0.2));
}

.hero__logo-pulse {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(218, 230, 247, 0.64) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulse-slow 3s infinite alternate;
}

@keyframes pulse-slow {
    from {
        transform: scale(0.9);
        opacity: 0.5;
    }

    to {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.hero__brand-text {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-right: -0.25em;
    line-height: 1;
    color: var(--brand-500);
    position: relative;
    transition: all 0.4s ease;
    text-shadow: 0 0 30px rgb(var(--brand-rgb) / 0.3);
}

.hero__tagline {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 32px;
    opacity: 0.9;
}

.hero__sub-copy-wrap {
    margin-bottom: 48px;
}

.hero__sub-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.hero__sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.hero__sub-item svg {
    color: var(--brand-500);
    filter: drop-shadow(0 0 8px rgb(var(--brand-rgb) / 0.4));
}

.hero__sub-item:hover {
    color: var(--brand-500);
    transform: translateX(5px);
}

.hero__tagline {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent-bright);
    margin-top: 8px;
    opacity: 0.85;
    animation: fadeInUp 1s var(--ease-out-expo) 0.6s both;
}

[data-theme="light"] .hero__tagline {
    color: var(--text-primary);
    opacity: 0.7;
}

.hero__sub-copy {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 400;
    color: var(--text-secondary);
    max-width: 560px;
    line-height: 1.6;
    margin-top: 12px;
    animation: fadeInUp 1s var(--ease-out-expo) 0.9s both;
}

.hero__content--centered .hero__actions {
    justify-content: center;
    margin-top: 16px;
}

/* === FLYING BIRDS ANIMATION === */
.birds-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.bird {
    position: absolute;
    width: 20px;
    height: 12px;
    color: rgba(255, 255, 255, 0.9);
    animation: bird-fly linear infinite;
}

.bird svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: bird-wing 0.6s ease-in-out infinite alternate;
}

.bird--1 {
    top: 15%;
    left: -50px;
    animation-duration: 25s;
    animation-delay: 0s;
}

.bird--2 {
    top: 25%;
    left: -50px;
    animation-duration: 30s;
    animation-delay: -5s;
    scale: 0.8;
}

.bird--3 {
    top: 40%;
    left: -50px;
    animation-duration: 22s;
    animation-delay: -10s;
    scale: 0.6;
}

.bird--4 {
    top: 10%;
    right: -50px;
    animation: bird-fly-reverse 28s linear infinite;
    animation-delay: -15s;
    scale: 0.7;
}

.bird--5 {
    top: 60%;
    right: -50px;
    animation: bird-fly-reverse 35s linear infinite;
    animation-delay: -2s;
    scale: 0.5;
}

@keyframes bird-fly {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-50px);
    }
}

@keyframes bird-fly-reverse {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(calc(-100vw - 100px)) translateY(30px);
    }
}

@keyframes bird-wing {
    0% {
        transform: scaleY(0.3);
    }

    100% {
        transform: scaleY(1);
    }
}

/* For Lenis Smooth Scrolling */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* For GSAP Split Text */
.split-line {
    overflow: hidden;
    line-height: inherit;
    /* Ensure no clipping of descenders */
    padding-bottom: 0.1em;
    /* extra space to prevent clipping */
}

/* === GEEX-STYLE SPINNING BACKGROUND === */
.abstract-spin {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    /* Above shimmer bg, below text */
    mix-blend-mode: screen;
}

.abstract-spin--1 {
    top: 50%;
    right: 5%;
    width: 600px;
    height: 600px;
    transform: translateY(-50%);
    animation: spin3d-1 40s linear infinite;
    transform-style: preserve-3d;
    opacity: 0.15;
}

.abstract-spin--2 {
    top: 20%;
    left: 8%;
    width: 250px;
    height: 250px;
    color: var(--text-secondary);
    animation: spin3d-2 20s linear infinite;
}

@keyframes spin3d-1 {
    0% {
        transform: translateY(-50%) rotateX(60deg) rotateZ(0deg);
    }

    100% {
        transform: translateY(-50%) rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes spin3d-2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* === MOBILE ADAPTATION FOR 3D ELEMENTS === */
@media (max-width: 768px) {
    .hero__brand-logo-wrap {
        width: 100px;
        height: 100px;
    }

    .abstract-spin--1 {
        width: 300px;
        height: 300px;
        right: -10%;
        opacity: 0.1;
    }

    .abstract-spin--2 {
        width: 160px;
        height: 160px;
        top: 15%;
        left: 5%;
    }

    .section--hero {
        padding: 0 24px;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
    }

    .hero__brand-text {
        font-family: var(--font-display);
        font-size: min(8vw, 36px) !important;
        letter-spacing: 0.1em !important;
        margin-right: 0 !important;
        color: var(--brand-500);
    }

    /* Manifesto Mobile Optimization */
    .section--manifesto {
        padding: 40px 24px 20px;
    }

    .value-card {
        padding: 16px;
        gap: 16px;
    }

    .value-card__icon {
        padding: 8px;
    }

    .value-card h4 {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .value-card p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .hero__brand-text {
        font-size: min(12vw, 42px);
        letter-spacing: 0.15em;
    }

    .abstract-spin--1 {
        width: 200px;
        height: 200px;
    }
}

/* === 3D FLOATING VIDEO CARDS (SHORT VIDEO THEME) === */
/* Drifting short-video cards. They animate continuously, so backdrop-filter
   here meant the compositor re-sampled the backdrop every frame for eight
   elements — swapped for a flat translucent fill. Also made them visible in
   the light theme, where the old white-on-white play glyph vanished. */
.short-video-float {
    position: absolute;
    width: 140px;
    height: 250px;
    border-radius: 16px;
    background: rgba(25, 26, 30, 0.05);
    border: 1px solid rgba(25, 26, 30, 0.1);
    pointer-events: none;
    z-index: 1;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 14px 38px rgba(25, 26, 30, 0.08);
}

[data-theme="dark"] .short-video-float {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
}

.short-video-float::before {
    content: '';
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(var(--brand-rgb) / 0.16);
    border: 1px solid rgb(var(--brand-rgb) / 0.3);
}

[data-theme="dark"] .short-video-float::before {
    background: rgba(218, 230, 247, 0.16);
    border-color: rgba(218, 230, 247, 0.3);
}

.short-video-float::after {
    content: '\25B6';
    font-size: 12px;
    color: var(--brand-500);
    position: absolute;
    margin-left: 2px;
}

[data-theme="dark"] .short-video-float::after {
    color: var(--brand-ice);
}

.short-video-float .float-gradient {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgb(var(--brand-rgb) / 0.1), transparent 60%);
}

/* a scrubber hairline so the card reads as a clip, not a blank panel */
.short-video-float .float-gradient::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-500) 38%, rgb(var(--brand-rgb) / 0.18) 38%);
}

/* ========================================
   GLOBAL PLATFORM SECTION — Base Chain
   ======================================== */
/* === GLOBAL NETWORK SECTION === */
.section--global {
    background: var(--bg-main);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.global__layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.global__visual {
    position: relative;
    background: radial-gradient(circle at center, rgba(218, 230, 247, 0.16) 0%, transparent 70%);
    border-radius: 40px;
    padding: 20px;
}

.global__map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 600px;
    margin: 0 auto;
}

#canvas-3d-globe {
    width: 100%;
    height: 100%;
}

.globe-overlay-stats {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 2;
}

.stat-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.7));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--brand-rgb) / 0.12);
    padding: 14px 20px;
    border-radius: 12px;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .stat-box {
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.8), rgba(13, 14, 18, 0.85));
    border-color: rgba(255, 255, 255, 0.05);
}

.stat-box__label {
    display: block;
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-box__value {
    font-family: var(--font-tech);
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-500);
}

.global__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cluster-boxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cluster-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.65));
    border: 1px solid rgb(var(--brand-rgb) / 0.1);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .cluster-box {
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.4), rgba(13, 14, 18, 0.5));
    border-color: rgba(255, 255, 255, 0.04);
}

.cluster-box:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--brand-rgb) / 0.25);
    box-shadow: 0 16px 40px rgb(var(--brand-rgb) / 0.04);
}

[data-theme="dark"] .cluster-box:hover {
    border-color: rgba(218, 230, 247, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.cluster-box__tag {
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    color: var(--brand-500);
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 14px;
}

.cluster-box h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.cluster-box p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    .global__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 80px 24px 60px !important;
    }

    .section--global {
        padding-top: 100px !important;
        min-height: auto !important;
    }

    .global__visual {
        border-radius: 24px;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    .global__map-wrap {
        width: 100% !important;
        max-width: 340px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 300px !important;
        /* Ensure visibility */
        margin: 20px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #canvas-3d-globe {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    .globe-overlay-stats {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 20px auto 0 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .stat-box {
        padding: 12px 16px !important;
        min-width: 110px !important;
        flex: 1 !important;
    }
}


/* === TOP RIGHT LOGO === */
.top-right-logo {
    position: fixed;
    top: 32px;
    right: 48px;
    z-index: 2000;
    transition: all 0.3s var(--ease-out-expo);
    background: var(--surface) !important;
    padding: 10px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgb(var(--brand-rgb) / 0.2), 0 0 0 1px rgb(var(--brand-rgb) / 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-right-logo:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 40px rgb(var(--brand-rgb) / 0.3);
}

.top-right-logo img {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgb(var(--brand-rgb) / 0.15));
}

@media (max-width: 768px) {
    .top-right-logo {
        top: 20px;
        right: auto;
        left: 20px;
        /* Move logo to the left on mobile to avoid overlapping the CTA on the right */
    }

    .top-right-logo img {
        height: 32px;
    }
}

[data-theme="dark"] .top-right-logo img {
    filter: drop-shadow(0 0 20px var(--accent-glow));
}

[data-theme="light"] img[src*="logo.png"] {
    filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.5);
}

/* Custom Adjustments for light mode 3D objects */
[data-theme="light"] .feat3d {
    filter: saturate(1.2) contrast(1.1);
}

[data-theme="light"] .arena-sphere {
    opacity: 0.9;
}

[data-theme="light"] .lbar {
    background: linear-gradient(to top, var(--accent), var(--accent-bright));
}

[data-theme="light"] .jury-center {
    background: var(--accent);
}

/* ==============================
   HERO CTA BUTTON
   ============================== */
.hero__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 14px 32px;
    background: var(--brand-500);
    color: var(--brand-on);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s var(--ease-out-expo);
    box-shadow: 0 4px 20px rgb(var(--brand-rgb) / 0.35);
    animation: fadeInUp 0.8s var(--ease-out-expo) 0.9s both;
}

.hero__cta-btn:hover {
    background: var(--brand-500);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgb(var(--brand-rgb) / 0.5);
}

[data-theme="light"] .hero__cta-btn {
    background: var(--brand-500);
    color: var(--brand-on);
}

/* ==============================
   APP INTERFACE SHOWCASE
   ============================== */
.section--interface {
    background: var(--bg-main);
    padding: 120px 0;
}

.interface__main-visual {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
}

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

@media (max-width: 768px) {
    .section--interface {
        padding: 60px 0;
    }

    .interface__main-visual {
        width: 100% !important;
        max-width: 100% !important;
        margin: 40px -20px 0 !important;
        padding: 0 20px !important;
        border-radius: 0 !important;
        overflow-x: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        -webkit-overflow-scrolling: touch;
    }

    .interface__full-img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: contain !important;
        border-radius: 16px;
    }
}

/* ============================================================
   ULTIMATE MOBILE OPTIMIZATIONS (FIXED)
   ============================================================ */
@media (max-width: 768px) {
    .section__header {
        text-align: center !important;
        padding: 0 20px !important;
    }
}

/* APP DOWNLOAD BUTTONS */
.app-downloads {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    z-index: 10;
    justify-content: flex-start;
}

.app-dl-btn {
    position: relative;
    display: flex;
    align-items: center;
    background: #09090b;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 24px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
    overflow: hidden;
    min-width: 180px;
    justify-content: flex-start;
    text-align: left;
}

.app-dl-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--brand-rgb) / 0.2);
}

.app-dl-text {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
}

.app-dl-small {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-dl-large {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;
}

.app-dl-soon {
    position: absolute;
    inset: 0;
    background: var(--brand-500);
    color: var(--brand-on);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.app-dl-btn.show-soon .app-dl-soon {
    opacity: 1;
}

.app-dl-btn.show-soon {
    border-color: var(--accent);
}

/* FORCED LEFT ALIGNMENT */
#hero .hero__content--centered,
#hero .hero__brand-center {
    margin: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 800px !important;
}

#hero .hero__sub-copy {
    align-items: flex-start !important;
    text-align: left !important;
}

#hero .app-downloads {
    justify-content: flex-start !important;
}

/* ==========================================
   HERO 3D PHONE SHOWCASE — CINEMATIC
   ========================================== */
.hero__phone-showcase {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    perspective: 1800px;
    z-index: 10;
    animation: phone-entrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

@keyframes phone-entrance {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.7);
        filter: blur(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Ambient glow behind phone */
.hero__phone-glow {
    position: absolute;
    width: 400px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(218, 230, 247, 0.64) 0%, rgba(218, 230, 247, 0.26) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    animation: phone-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes phone-glow-pulse {
    from {
        opacity: 0.5;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Phone frame — realistic 3D */
.hero__phone-frame {
    position: relative;
    width: 270px;
    height: 560px;
    background: #000;
    border-radius: 36px;
    /* Less oval, more modern square-ish round */
    padding: 5px;
    /* Minimal bezels */
    z-index: 2;
    transform-style: preserve-3d;
    animation: phone-3d-float 6s ease-in-out infinite;
    /* Clean high-fidelity hardware look */
    box-shadow:
        0 0 0 1px #1a1a2e,
        0 0 0 2px rgba(255, 255, 255, 0.1),
        0 30px 80px rgba(0, 0, 0, 0.8),
        inset 0 0 1px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

@keyframes phone-3d-float {

    0%,
    100% {
        transform: rotateY(-12deg) rotateX(5deg) translateY(0px);
    }

    25% {
        transform: rotateY(-6deg) rotateX(2deg) translateY(-15px);
    }

    50% {
        transform: rotateY(8deg) rotateX(-3deg) translateY(-8px);
    }

    75% {
        transform: rotateY(2deg) rotateX(6deg) translateY(-20px);
    }
}

/* Light mode adjustments */
[data-theme="light"] .hero__phone-frame {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 25px 60px rgba(0, 0, 0, 0.15),
        0 0 80px rgb(var(--brand-rgb) / 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .hero__phone-glow {
    background: radial-gradient(ellipse, rgba(218, 230, 247, 0.38) 0%, rgba(218, 230, 247, 0.13) 40%, transparent 70%);
}

/* Notch */
.phone__notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #0a0a14;
    border-radius: 0 0 16px 16px;
    z-index: 20;
}

[data-theme="light"] .phone__notch {
    background: #1e293b;
}

/* Screen */
.phone__screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 32px;
    /* Matching the new stricter frame radius */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .phone__screen {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Status bar */
.phone__status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0;
    /* Adjusted padding */
    height: 34px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    /* Pure white for better visibility */
    position: relative;
    z-index: 30;
    /* Higher than notch */
}

.phone__time {
    font-size: 13px;
    font-weight: 700;
}

.phone__status-icons {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0.6;
}

/* App header */
.phone__app-header {
    padding: 8px 16px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .phone__app-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.phone__app-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-500);
    letter-spacing: 2px;
}

.phone__app-logo-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.phone__app-nav {
    display: flex;
    gap: 10px;
}

.phone__nav-item {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.phone__nav-item--active {
    color: var(--brand-500);
}

[data-theme="light"] .phone__nav-item {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .phone__nav-item--active {
    color: var(--brand-500);
}

/* Video card — the star of the show */
.phone__video-card {
    margin: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: card-cinematic-open 4s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
    transform-origin: center top;
}

@keyframes card-cinematic-open {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(40px) rotateX(15deg);
        filter: blur(10px) brightness(2);
    }

    30% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px) rotateX(-2deg);
        filter: blur(0) brightness(1.2);
    }

    50% {
        transform: scale(0.98) translateY(2px) rotateX(1deg);
        filter: blur(0) brightness(1);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0);
        filter: blur(0) brightness(1);
    }
}

[data-theme="light"] .phone__video-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Video thumbnail */
.phone__video-thumbnail {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.phone__video-thumbnail--small {
    height: 100px;
}

/* Animated gradient poster simulating video */
.phone__video-poster {
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #191A1E, var(--brand-500), #0f766e, var(--brand-500), #191A1E);
    background-size: 400% 400%;
    animation: video-poster-shift 8s ease infinite;
}

.phone__video-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(218, 230, 247, 0.96) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(218, 230, 247, 0.64) 0%, transparent 50%);
    animation: poster-glow-move 6s ease-in-out infinite alternate;
}

@keyframes video-poster-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes poster-glow-move {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.phone__video-poster--alt {
    background: linear-gradient(-45deg, var(--brand-500), var(--brand-500), var(--brand-500), var(--brand-500), var(--brand-500));
    background-size: 400% 400%;
    animation: video-poster-shift 10s ease infinite reverse;
}

.phone__video-poster--alt::after {
    background:
        radial-gradient(circle at 60% 30%, rgba(218, 230, 247, 0.96) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(218, 230, 247, 0.64) 0%, transparent 50%);
}

[data-theme="light"] .phone__video-poster {
    background: linear-gradient(-45deg, #e2e8f0, var(--brand-ice), #99f6e4, var(--brand-ice), #e2e8f0);
    background-size: 400% 400%;
}

[data-theme="light"] .phone__video-poster--alt {
    background: linear-gradient(-45deg, #ede9fe, var(--brand-ice), var(--brand-ice), var(--brand-ice), #ede9fe);
    background-size: 400% 400%;
}

/* Play button */
.phone__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: play-btn-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s both;
    box-shadow: 0 0 30px rgb(var(--brand-rgb) / 0.3);
}

.phone__play-btn svg {
    margin-left: 3px;
}

@keyframes play-btn-pop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }
}

/* Pulsing ring on play button */
.phone__play-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgb(var(--brand-rgb) / 0.4);
    animation: play-ring-pulse 2s ease-in-out infinite 3s;
}

@keyframes play-ring-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Duration badge */
.phone__video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-tech);
    letter-spacing: 0.5px;
}

/* LIVE badge */
.phone__video-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #ef4444;
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1.5px;
    animation: live-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

@keyframes live-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Video info */
.phone__video-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 6px;
}

.phone__video-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-500));
    flex-shrink: 0;
    animation: avatar-ring-glow 3s ease-in-out infinite alternate;
}

.phone__video-avatar--alt {
    background: linear-gradient(135deg, var(--brand-500), #EC4899);
}

@keyframes avatar-ring-glow {
    0% {
        box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.3);
    }

    100% {
        box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5);
    }
}

.phone__video-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.phone__video-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="light"] .phone__video-title {
    color: #191A1E;
}

.phone__video-author {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

[data-theme="light"] .phone__video-author {
    color: #64748b;
}

/* Stats bar */
.phone__video-stats {
    display: flex;
    gap: 14px;
    padding: 4px 12px 10px;
    align-items: center;
}

.phone__stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.phone__stat svg {
    opacity: 0.5;
}

.phone__stat--score {
    color: #fbbf24;
    font-weight: 700;
}

.phone__stat--score svg {
    opacity: 1;
    stroke: #fbbf24;
}

[data-theme="light"] .phone__stat {
    color: #94a3b8;
}

[data-theme="light"] .phone__stat--score {
    color: #d97706;
}

/* Secondary card */
.phone__video-card--secondary {
    opacity: 0.5;
    animation: card-cinematic-open 4s cubic-bezier(0.16, 1, 0.3, 1) 2.2s both;
    transform-origin: center top;
}

/* Bottom nav */
.phone__bottom-nav {
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .phone__bottom-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.phone__bottom-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.3s;
}

.phone__bottom-item--active {
    color: var(--brand-500);
}

.phone__bottom-item--create {
    color: var(--brand-500);
    animation: create-btn-glow 2s ease-in-out infinite alternate;
}

@keyframes create-btn-glow {
    0% {
        filter: drop-shadow(0 0 4px rgb(var(--brand-rgb) / 0.3));
    }

    100% {
        filter: drop-shadow(0 0 12px rgb(var(--brand-rgb) / 0.6));
    }
}

[data-theme="light"] .phone__bottom-item {
    color: #94a3b8;
}

[data-theme="light"] .phone__bottom-item--active {
    color: var(--brand-500);
}

[data-theme="light"] .phone__bottom-item--create {
    color: var(--brand-500);
}

/* Floating reaction bubbles */
.hero__phone-reactions {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.phone__reaction {
    position: absolute;
    font-size: 22px;
    opacity: 0;
    animation: reaction-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.phone__reaction--1 {
    right: -20px;
    top: 30%;
    animation-delay: 3s;
}

.phone__reaction--2 {
    left: -25px;
    top: 45%;
    animation-delay: 4.5s;
}

.phone__reaction--3 {
    right: -15px;
    bottom: 35%;
    animation-delay: 5.5s;
}

.phone__reaction--4 {
    left: -20px;
    bottom: 25%;
    animation-delay: 7s;
}

@keyframes reaction-float {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.5);
    }

    15% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }

    30% {
        transform: translateY(-10px) scale(1);
    }

    60% {
        opacity: 0.8;
        transform: translateY(-30px) scale(0.9);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.5);
    }
}

/* Reflection line on phone */
.hero__phone-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
    border-radius: 40px 40px 0 0;
    z-index: 3;
    pointer-events: none;
}

/* Scanning light effect over phone */
.hero__phone-frame::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgb(var(--brand-rgb) / 0.1), transparent);
    transform: rotate(-5deg);
    animation: phone-scan-line 5s linear infinite;
    z-index: 4;
    pointer-events: none;
}

@keyframes phone-scan-line {
    0% {
        top: -20%;
    }

    100% {
        top: 120%;
    }
}

/* === RESPONSIVE — Phone Showcase === */
@media (max-width: 1024px) {
    .section--hero {
        flex-direction: column;
        padding: 120px 32px 60px;
        gap: 40px;
    }

    .hero__phone-showcase {
        min-height: 480px;
        order: -1;
    }

    .hero__phone-frame {
        width: 240px;
        height: 480px;
        animation: phone-3d-float-mobile 6s ease-in-out infinite;
    }

    @keyframes phone-3d-float-mobile {

        0%,
        100% {
            transform: rotateY(-5deg) rotateX(3deg) translateY(0);
        }

        50% {
            transform: rotateY(5deg) rotateX(-3deg) translateY(-12px);
        }
    }
}

@media (max-width: 768px) {
    .hero__phone-showcase {
        min-height: 420px;
    }

    .hero__phone-frame {
        width: 220px;
        height: 440px;
        border-radius: 32px;
    }

    .phone__screen {
        border-radius: 24px;
    }

    .phone__notch {
        width: 80px;
        height: 24px;
        border-radius: 0 0 12px 12px;
    }

    .phone__reaction {
        font-size: 18px;
    }
}

/* =============================================================
   MANIFESTO V2 — Premium Redesign
   ============================================================= */

/* --- Section Base --- */
.manifesto-v2 {
    position: relative;
    padding: 120px 0 100px !important;
    overflow: hidden;
    background: #08090D !important;
    color: #EEEEF0 !important;
}

[data-theme="light"] .manifesto-v2 {
    background: #08090D !important;
    color: #EEEEF0 !important;
}

/* --- Decorative Layer --- */
.manifesto-v2__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.manifesto-v2__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    will-change: transform;
}

.manifesto-v2__orb--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(218, 230, 247, 1), transparent 70%);
    top: -15%;
    right: -5%;
    animation: manifesto-orb-float-1 18s ease-in-out infinite;
}

.manifesto-v2__orb--2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(218, 230, 247, 0.96), transparent 70%);
    bottom: -10%;
    left: -8%;
    animation: manifesto-orb-float-2 22s ease-in-out infinite;
}

.manifesto-v2__orb--3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(218, 230, 247, 0.8), transparent 70%);
    top: 40%;
    left: 50%;
    animation: manifesto-orb-float-3 15s ease-in-out infinite;
}

@keyframes manifesto-orb-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.95); }
}

@keyframes manifesto-orb-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -40px) scale(1.15); }
}

@keyframes manifesto-orb-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-30px, 20px) scale(1.05); }
    80% { transform: translate(25px, -15px) scale(0.9); }
}

.manifesto-v2__grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(var(--brand-rgb) / 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--brand-rgb) / 0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
}

.manifesto-v2__radial-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(218, 230, 247, 0.13) 0%, transparent 60%);
    pointer-events: none;
}

/* --- Inner content container --- */
.manifesto-v2__inner {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

/* --- Label row --- */
.manifesto-v2__label-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 48px;
}

.manifesto-v2__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-500);
    white-space: nowrap;
}

.manifesto-v2__label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.25), transparent);
}

/* --- Headline --- */
.manifesto-v2__headline {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    font-size: clamp(24px, 3.8vw, 44px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: #EEEEF0 !important;
    margin-bottom: 24px;
    max-width: 900px;
}

[data-theme="light"] .manifesto-v2__headline {
    color: #191A1E !important;
}

.manifesto-v2__highlight {
    background: linear-gradient(135deg, #D8E7FA 0%, var(--brand-ice) 40%, var(--brand-500) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    position: relative;
    display: inline-block;
}

.manifesto-v2__highlight::after {
    display: none !important;
}

.manifesto-v2__subheadline {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 400;
    color: #8E90A0 !important;
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 50px;
}

[data-theme="light"] .manifesto-v2__subheadline {
    color: #8E90A0 !important;
}

/* --- Quote block --- */
.manifesto-v2__quote-block {
    position: relative;
    padding: 20px 0 40px;
    margin-bottom: 60px;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: 820px;
    box-shadow: none;
}

.manifesto-v2__quote-mark {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 160px;
    color: rgb(var(--brand-rgb) / 0.07);
    position: absolute;
    left: -28px;
    top: -50px;
    line-height: 1;
    pointer-events: none;
}

[data-theme="dark"] .manifesto-v2__quote-mark {
    color: rgba(218, 230, 247, 0.07);
}

.manifesto-v2__quote {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.65;
    color: #1e293b;
    margin: 0;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .manifesto-v2__quote {
    color: #1e293b !important;
}

[data-theme="dark"] .manifesto-v2__quote {
    color: #f1f5f9 !important;
}

.manifesto-v2__quote em {
    font-style: normal;
    color: var(--brand-500);
    font-weight: 600;
    border-bottom: 2px solid rgb(var(--brand-rgb) / 0.15);
}

[data-theme="dark"] .manifesto-v2__quote em {
    color: var(--brand-ice);
    border-color: rgba(218, 230, 247, 0.25);
}

/* --- Signature --- */
.manifesto-v2__signature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
}

[data-theme="dark"] .manifesto-v2__signature {
    border-color: rgba(255, 255, 255, 0.05);
}

.manifesto-v2__sig-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(25, 26, 30, 0.04);
    border: 1px solid rgba(25, 26, 30, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .manifesto-v2__sig-avatar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.manifesto-v2__sig-meta {
    display: flex;
    flex-direction: column;
}

.manifesto-v2__sig-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: #191A1E;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

[data-theme="dark"] .manifesto-v2__sig-name {
    color: #f8fafc;
}

.manifesto-v2__sig-title {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

[data-theme="dark"] .manifesto-v2__sig-title {
    color: rgba(248, 250, 252, 0.6);
}

/* --- Cards Row --- */
.manifesto-v2__cards {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.manifesto-v2__card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.95));
    border: 1px solid rgba(0, 0, 0, 0.045);
    box-shadow: 0 4px 20px rgba(25, 26, 30, 0.01);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

[data-theme="dark"] .manifesto-v2__card {
    background: linear-gradient(180deg, rgba(16, 17, 21, 0.55), rgba(5, 8, 16, 0.65));
    border-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.manifesto-v2__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(25, 26, 30, 0.04);
}

.manifesto-v2__card--1:hover { border-color: rgb(var(--brand-rgb) / 0.3); }
.manifesto-v2__card--2:hover,
.manifesto-v2__card--full:hover { border-color: rgb(var(--brand-rgb) / 0.3); }
.manifesto-v2__card--3:hover { border-color: rgba(16, 185, 129, 0.3); }

[data-theme="dark"] .manifesto-v2__card--1:hover { border-color: rgba(218, 230, 247, 0.4); }
[data-theme="dark"] .manifesto-v2__card--2:hover,
[data-theme="dark"] .manifesto-v2__card--full:hover { border-color: rgba(218, 230, 247, 0.4); }
[data-theme="dark"] .manifesto-v2__card--3:hover { border-color: rgba(16, 185, 129, 0.4); }

.manifesto-v2__card-inner {
    padding: 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.manifesto-v2__card--full {
    background: rgba(12, 13, 18, 0.45) !important;
    border: none !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 40px rgba(216, 231, 250, 0.02) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transform-style: preserve-3d;
    perspective: 2000px;
    border-radius: 24px !important;
    overflow: visible;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.manifesto-v2__card--full:hover {
    transform: translateY(-4px) scale(1.005) !important;
    border: none !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 50px rgba(216, 231, 250, 0.05) !important;
}

[data-theme="dark"] .manifesto-v2__card--full {
    background: rgba(12, 13, 18, 0.45) !important;
    border: none !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 40px rgba(216, 231, 250, 0.02) !important;
}

/* Micro-grid background disabled for premium clean layout */
.manifesto-v2__card--full::before {
    display: none;
}

/* Card Header Status Bar - disabled */
.manifesto-v2__card-status-bar {
    display: none;
}

.manifesto-v2__card-inner--full {
    display: flex;
    flex-direction: row;
    padding: 64px 72px;
    gap: 64px;
    align-items: center;
    transform-style: preserve-3d;
}

.manifesto-v2__card-content {
    flex: 1.0;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

.manifesto-v2__card-visual-wrapper {
    flex: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

.manifesto-v2__card-graphic-box.manifesto-v2__card-graphic-box--full {
    width: 100%;
    height: 520px;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    padding: 0;
    transform: translateZ(50px);
    transform-style: preserve-3d;
}

/* Disabled overlays */
.manifesto-v2__card-graphic-box--full::after {
    display: none;
}

/* --- Premium Large Borderless Screenshot --- */
.manifesto-v2__screenshot {
    width: 380px;
    height: auto;
    border-radius: 16px;
    border: none !important; /* Absolutely no outlines */
    outline: none !important;
    box-shadow: 
        0 30px 80px rgba(25, 26, 30, 0.18),
        0 10px 25px rgba(25, 26, 30, 0.12);
    transform: perspective(1200px) rotateX(10deg) rotateY(-18deg) rotateZ(5deg);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease;
    display: block;
}

.manifesto-v2__card--full:hover .manifesto-v2__screenshot {
    transform: perspective(1200px) rotateX(6deg) rotateY(-10deg) rotateZ(3deg) scale(1.05);
    box-shadow: 
        0 40px 100px rgba(25, 26, 30, 0.25),
        0 15px 35px rgba(25, 26, 30, 0.18);
}

.manifesto-v2__card-stats-row {
    display: flex;
    gap: 40px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.manifesto-v2__card-stats-row .manifesto-v2__card-stat {
    border-top: none;
    padding-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.manifesto-v2__card--full .manifesto-v2__card-stat-num,
[data-theme="dark"] .manifesto-v2__card--full .manifesto-v2__card-stat-num {
    color: #D8E7FA !important;
    text-shadow: 0 0 10px rgba(216, 231, 250, 0.4);
}

.manifesto-v2__card-tag,
[data-theme="dark"] .manifesto-v2__card-tag {
    font-family: var(--font-display) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #D8E7FA !important;
    text-shadow: 0 0 10px rgba(216, 231, 250, 0.3);
    margin-bottom: 20px;
    display: inline-block;
}

.manifesto-v2__card-graphic-box {
    height: 64px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 26, 30, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.015);
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .manifesto-v2__card-graphic-box {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.02);
}

.manifesto-graphic {
    width: 100%;
    height: 100%;
    display: block;
}

.manifesto-v2__card-graphic-box--full .manifesto-graphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Custom Vector Animations */
@keyframes wave-jitter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px) scaleY(1.05); }
}
.wave-noise {
    animation: wave-jitter 0.8s ease-in-out infinite alternate;
}

@keyframes sine-pulse {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 70; }
}
.wave-clean {
    stroke-dasharray: 60, 10;
    animation: sine-pulse 3s linear infinite;
}

@keyframes tree-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.debate-tree {
    animation: tree-pulse 2s ease-in-out infinite;
}

@keyframes node-flash {
    0% { r: 2px; opacity: 0.5; }
    100% { r: 3.5px; opacity: 1; filter: drop-shadow(0 0 3px var(--brand-500)); }
}
.pulse-node {
    animation: node-flash 1.5s infinite alternate;
}

@keyframes pulse-green {
    0% { r: 1.5px; opacity: 0.4; }
    100% { r: 3px; opacity: 1; filter: drop-shadow(0 0 4px #10b981); }
}
.pulse-node-green {
    animation: pulse-green 1.2s infinite alternate;
}

@keyframes pulse-red {
    0% { r: 1.5px; opacity: 0.4; }
    100% { r: 3px; opacity: 1; filter: drop-shadow(0 0 4px #ef4444); }
}
.pulse-node-red {
    animation: pulse-red 1.2s infinite alternate;
}

@keyframes branch-flow {
    0% { stroke-dashoffset: 10; }
    100% { stroke-dashoffset: 0; }
}
.debate-tree-branch-for-sub1,
.debate-tree-branch-for-sub2,
.debate-tree-branch-against-sub1,
.debate-tree-branch-against-sub2 {
    stroke-dasharray: 4, 3;
    animation: branch-flow 1.5s linear infinite;
}

@keyframes scan-up-down {
    0%, 100% { transform: translateY(-12px); }
    50% { transform: translateY(12px); }
}
.camera-scan {
    animation: scan-up-down 3s ease-in-out infinite;
}

/* Card Text */
.manifesto-v2__card-title {
    font-family: var(--font-display) !important;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    line-height: 1.25;
    color: #ffffff;
    background: linear-gradient(to right, #ffffff 60%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.manifesto-v2__card-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #94a3b8;
    flex: 1;
    margin-bottom: 28px;
}

/* Card stat counter */
.manifesto-v2__card-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.manifesto-v2__card-stat-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    color: #8E90A0 !important;
}

.manifesto-v2__card-stat-num {
    font-family: var(--font-display) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #D8E7FA !important;
    text-shadow: 0 0 10px rgba(216, 231, 250, 0.4);
    text-transform: uppercase !important;
}

[data-theme="dark"] .manifesto-v2__card-stat-num {
    color: #D8E7FA !important;
    text-shadow: 0 0 10px rgba(216, 231, 250, 0.4);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .manifesto-v2__inner {
        padding: 0 40px;
    }

    .manifesto-v2__cards {
        max-width: 100%;
        gap: 20px;
    }

    .manifesto-v2__headline {
        font-size: clamp(30px, 5vw, 44px);
    }
}

@media (max-width: 768px) {
    .manifesto-v2 {
        padding: 80px 0 60px !important;
    }

    .manifesto-v2__inner {
        padding: 0 24px;
    }

    .manifesto-v2__headline {
        font-size: 26px;
    }

    .manifesto-v2__quote-block {
        padding: 16px 0 32px;
        margin-bottom: 40px;
    }

    .manifesto-v2__quote {
        font-size: 19px;
    }

    .manifesto-v2__cards {
        gap: 16px;
        max-width: 100%;
    }

    .manifesto-v2__card-inner--full {
        flex-direction: column; /* Text on top, image on bottom */
        padding: 40px 24px;
        gap: 40px;
        align-items: center;
    }

    .manifesto-v2__card-content {
        flex: auto;
        align-items: center;
        text-align: center;
    }

    .manifesto-v2__card-stats-row {
        width: 100%;
        justify-content: center;
        gap: 24px;
        border-top: 1px solid rgba(25, 26, 30, 0.08);
        padding-top: 20px;
    }
    
    [data-theme="dark"] .manifesto-v2__card-stats-row {
        border-color: rgba(25, 26, 30, 0.08);
    }

    .manifesto-v2__card-stat {
        align-items: center;
    }

    .manifesto-v2__card-graphic-box.manifesto-v2__card-graphic-box--full {
        height: auto;
        min-height: 280px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .manifesto-v2__screenshot {
        width: 260px;
        max-width: 100%;
        transform: perspective(1000px) rotateX(8deg) rotateY(-12deg) rotateZ(3deg);
    }

    .manifesto-v2__card--full:hover .manifesto-v2__screenshot {
        transform: perspective(1000px) rotateX(5deg) rotateY(-8deg) rotateZ(2deg) scale(1.02);
    }
}

/* =============================================================
   APP INTERFACE SHOWCASE RESPONSIVE & COMPACT SIZING
   ============================================================= */
.interface__triple-screens {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 60px auto 0 !important;
    max-width: 960px !important; /* Limit maximum width on PC so cards stay phone-sized */
    width: 100% !important;
}

.interface__screen-card {
    flex: 1 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.4s ease !important;
}

.interface__screen-card:nth-child(1) {
    transform: perspective(1000px) rotateY(5deg) !important;
}

.interface__screen-card:nth-child(2) {
    flex: 1.1 !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 10 !important;
    transform: scale(1.05) !important;
}

.interface__screen-card:nth-child(3) {
    transform: perspective(1000px) rotateY(-5deg) !important;
}

/* Light Theme tweaks for shadows & borders */
[data-theme="light"] .interface__screen-card {
    box-shadow: 0 15px 40px rgba(25, 26, 30, 0.12) !important;
    border: 1px solid rgba(25, 26, 30, 0.05) !important;
}

[data-theme="light"] .interface__screen-card:nth-child(2) {
    box-shadow: 0 30px 70px rgba(25, 26, 30, 0.22) !important;
    border: 1px solid rgba(25, 26, 30, 0.08) !important;
}

/* Responsive details for mobile/tablet */
@media (max-width: 768px) {
    .interface__triple-screens {
        gap: 12px !important;
        margin-top: 40px !important;
        max-width: 100% !important;
        padding: 0 16px !important;
    }
}

/* ==========================================================================
   CYBERPUNK моноширинные шрифты для надписей, кнопок и тегов
   ========================================================================== */
.fragment-tag,
.cluster-box__tag,
.beta__perk-tag,
.terminal-line,
.rec-indicator,
.telemetry-top-right,
.telemetry-bottom,
.logic-score,
.vote-badge,
.header__link--cta,
.app-dl-btn,
.sidebar__link,
.sidebar__version,
.top-branding__text,
.header__link {
    font-family: var(--font-tech) !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   DEBATE COMPETITION ILLUSTRATION & LIGHT THEME OVERRIDES (Manifesto Section)
   ========================================================================== */

/* Force clean white background in light mode */
[data-theme="light"] .manifesto-v2 {
    background: #FFFFFF !important;
    color: #191A1E !important;
}

[data-theme="light"] .manifesto-v2__headline {
    color: #191A1E !important;
}

[data-theme="light"] .manifesto-v2__subheadline {
    color: #4B5563 !important;
}

[data-theme="light"] .manifesto-v2__highlight {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-500) 40%, var(--brand-500) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .manifesto-v2__highlight::after {
    display: none !important;
}

[data-theme="light"] .manifesto-v2__orb--1 {
    background: radial-gradient(circle, rgba(218, 230, 247, 0.16), transparent 70%);
}
[data-theme="light"] .manifesto-v2__orb--2 {
    background: radial-gradient(circle, rgba(218, 230, 247, 0.13), transparent 70%);
}
[data-theme="light"] .manifesto-v2__orb--3 {
    background: radial-gradient(circle, rgba(218, 230, 247, 0.1), transparent 70%);
}

/* Premium Light Theme Glass Card for Manifesto (Borderless & Seamless) */
[data-theme="light"] .manifesto-v2__card--full {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

[data-theme="light"] .manifesto-v2__card--full:hover {
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dark theme card overrides (Borderless) */
[data-theme="dark"] .manifesto-v2__card--full {
    border: none !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .manifesto-v2__card--full:hover {
    border: none !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55) !important;
}

/* Tag & Stats overrides for Light Theme */
[data-theme="light"] .manifesto-v2__card-tag {
    color: var(--brand-500) !important;
    background: rgb(var(--brand-rgb) / 0.05) !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-block !important;
    font-family: var(--font-tech) !important;
}

[data-theme="light"] .manifesto-v2__card-stat-num {
    color: var(--brand-500) !important;
    text-shadow: none !important;
    font-family: var(--font-tech) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .manifesto-v2__card-stat-label {
    color: #4B5563 !important;
    font-family: var(--font-tech) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
}

[data-theme="light"] .manifesto-v2__card-stats-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.manifesto-v2__label {
    font-family: var(--font-tech) !important;
    font-weight: 700 !important;
}

/* --- Debate Arena Vector Graphic Styling --- */
.debate-arena-graphic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.debate-svg {
    width: 100%;
    height: 100%;
    max-height: 520px;
    display: block;
    overflow: visible;
}

/* Spotlight animations */
@keyframes spotlightLeftGlow {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.22; }
}
@keyframes spotlightRightGlow {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.22; }
}
.spotlight-beam--left {
    animation: spotlightLeftGlow 8s ease-in-out infinite;
    transform-origin: 180px 30px;
    transition: all 0.5s ease;
}
.spotlight-beam--right {
    animation: spotlightRightGlow 8s ease-in-out infinite;
    transform-origin: 620px 30px;
    transition: all 0.5s ease;
}

/* Debater interactivity */
.speaker-group {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.speaker-group:hover {
    transform: scale(1.03) translateY(-4px);
}

.speaker-group--left:hover ~ .spotlight-beam--left {
    animation: none;
    opacity: 0.35;
    fill: #FDE047;
}

.speaker-group--right:hover ~ .spotlight-beam--right {
    animation: none;
    opacity: 0.35;
    fill: #FDE047;
}

/* Speech Wave Animations */
@keyframes pulseWaveLeft {
    0% { stroke-dashoffset: 0; opacity: 0.15; }
    50% { opacity: 0.6; }
    100% { stroke-dashoffset: -20; opacity: 0.15; }
}
@keyframes pulseWaveRight {
    0% { stroke-dashoffset: 0; opacity: 0.15; }
    50% { opacity: 0.6; }
    100% { stroke-dashoffset: 20; opacity: 0.15; }
}

.speech-wave--left-1 {
    animation: pulseWaveLeft 4s linear infinite;
}
.speech-wave--left-2 {
    animation: pulseWaveLeft 3s linear infinite reverse;
}
.speech-wave--right-1 {
    animation: pulseWaveRight 4s linear infinite;
}
.speech-wave--right-2 {
    animation: pulseWaveRight 3s linear infinite reverse;
}

/* VS central core animations */
@keyframes vsPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.18); opacity: 0.8; }
}
.vs-glow-pulse {
    animation: vsPulse 4s ease-in-out infinite;
    transform-origin: 400px 240px;
}
.vs-circle {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vs-node-group:hover .vs-circle {
    transform: scale(1.12);
    stroke: #D97706;
}
.vs-node-group {
    cursor: pointer;
}

/* Dark mode adjustments for SVG elements */
[data-theme="dark"] .debate-grid-lines line {
    stroke: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .vs-circle {
    fill: #191A1E;
}
[data-theme="dark"] .vs-text {
    fill: #FBBF24;
}

/* ==========================================================================
   HOW IT WORKS SECTION REDESIGN (Borderless, Platform Style & Premium Title)
   ========================================================================== */

/* Monospace bracketed tech label */
.section--features .section__label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    color: #8E90A0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
    animation: none !important;
}

[data-theme="light"] .section--features .section__label {
    color: #4B5563 !important;
}

/* Premium Syncopate brand title */






/* Borderless and seamless feature cards */
.feature-fragment {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.feature-fragment:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Borderless visual containers */
.fragment-visual {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-bottom: 24px !important;
}

.feature-fragment:hover .fragment-visual {
    box-shadow: none !important;
}

/* Remove hover border colors */
.feature-fragment--argue:hover,
.feature-fragment--respond:hover,
.feature-fragment--vote:hover,
[data-theme="dark"] .feature-fragment--argue:hover,
[data-theme="dark"] .feature-fragment--respond:hover,
[data-theme="dark"] .feature-fragment--vote:hover {
    border: none !important;
    box-shadow: none !important;
}

/* --- High-fidelity SVG Animations for How It Works --- */
.rec-dot-blink {
    animation: recBlink 1.2s infinite alternate;
}
@keyframes recBlink {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}

.focus-reticle {
    transform-origin: 0px 0px;
    animation: reticleSpin 20s linear infinite;
}
@keyframes reticleSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.radar-hand-group {
    transform-origin: 0px 0px;
    animation: radarHandSweep 5s linear infinite;
}
@keyframes radarHandSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ping-ring {
    transform-origin: 0px 0px;
    animation: ringPing 2.5s ease-out infinite;
}
@keyframes ringPing {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.ping-ring-slow {
    transform-origin: 0px 0px;
    animation: ringPingSlow 3.5s ease-out infinite;
}
@keyframes ringPingSlow {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Audio wave bar height animations (varying delay for organic speech look) */
.wave-bar-anim {
    transform-origin: 50% 100%;
}
.wba-1 { animation: wbaBounce 1s ease-in-out infinite alternate; }
.wba-2 { animation: wbaBounce 0.8s ease-in-out infinite alternate; animation-delay: -0.2s; }
.wba-3 { animation: wbaBounce 1.2s ease-in-out infinite alternate; animation-delay: -0.4s; }
.wba-4 { animation: wbaBounce 0.7s ease-in-out infinite alternate; animation-delay: -0.1s; }
.wba-5 { animation: wbaBounce 1.1s ease-in-out infinite alternate; animation-delay: -0.6s; }
.wba-6 { animation: wbaBounce 0.9s ease-in-out infinite alternate; animation-delay: -0.3s; }
.wba-7 { animation: wbaBounce 1.3s ease-in-out infinite alternate; animation-delay: -0.7s; }
.wba-8 { animation: wbaBounce 0.8s ease-in-out infinite alternate; animation-delay: -0.5s; }
.wba-9 { animation: wbaBounce 0.8s ease-in-out infinite alternate; animation-delay: -0.5s; }
.wba-10 { animation: wbaBounce 1.3s ease-in-out infinite alternate; animation-delay: -0.7s; }
.wba-11 { animation: wbaBounce 0.9s ease-in-out infinite alternate; animation-delay: -0.3s; }
.wba-12 { animation: wbaBounce 1.1s ease-in-out infinite alternate; animation-delay: -0.6s; }
.wba-13 { animation: wbaBounce 0.7s ease-in-out infinite alternate; animation-delay: -0.1s; }
.wba-14 { animation: wbaBounce 1.2s ease-in-out infinite alternate; animation-delay: -0.4s; }
.wba-15 { animation: wbaBounce 0.8s ease-in-out infinite alternate; animation-delay: -0.2s; }
.wba-16 { animation: wbaBounce 1s ease-in-out infinite alternate; }

@keyframes wbaBounce {
    0% { transform: scaleY(0.25); }
    100% { transform: scaleY(1.3); }
}

/* Holographic Debate Arena Animations */
.flow-path-left {
    stroke-dashoffset: 200;
    animation: flowPacketsLeft 3s linear infinite;
}
.flow-path-right {
    stroke-dashoffset: -200;
    animation: flowPacketsRight 3s linear infinite;
}
@keyframes flowPacketsLeft {
    to { stroke-dashoffset: 0; }
}
@keyframes flowPacketsRight {
    to { stroke-dashoffset: 0; }
}

/* ==============================
   ORVELIS CANVAS CONTAINER
   Slide 05 is styled in the SLIDE 05 block further down; its old glass
   card rules went with its markup. The class stays for the globe on
   slide 06, which still wears it.
   ============================== */
.orvelis-canvas-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}

/* ==========================================================
   COMPREHENSIVE MOBILE RESPONSIVE OPTIMIZATION
   ========================================================== */

/* --- Tablet: 1024px --- */
@media (max-width: 1024px) {
    .main {
        margin-left: 0 !important;
    }

    .sidebar {
        display: none;
    }
    .sidebar.mobile-open {
        display: flex;
    }

    .mobile-nav-toggle {
        display: flex !important;
    }

    .section {
        padding: 100px 32px !important;
        min-height: auto !important;
    }

    .manifesto-v2__card-inner--full {
        flex-direction: column !important;
    }
    .manifesto-v2__card-content {
        max-width: 100% !important;
    }
    .manifesto-v2__card-visual-wrapper {
        width: 100% !important;
    }

    .interface__triple-screens {
        flex-direction: row !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 40px auto 0 !important;
        padding: 0 16px !important;
        display: flex !important;
    }
    .interface__screen-card,
    .interface__screen-card:nth-child(1),
    .interface__screen-card:nth-child(2),
    .interface__screen-card:nth-child(3) {
        max-width: none !important;
        width: 100% !important;
        transform: none !important;
        flex: 1 !important;
        margin: 0 !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
        border-radius: 12px !important;
    }
    .interface__screen-card img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .beta__layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .footer__columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Mobile: 768px --- */
@media (max-width: 768px) {
    .section {
        padding: 80px 20px 60px !important;
        min-height: auto !important;
    }

    .section__title {
        font-size: clamp(24px, 6vw, 36px) !important;
        line-height: 1.15 !important;
    }

    .manifesto-v2__headline {
        font-size: clamp(22px, 5.5vw, 32px) !important;
    }
    .manifesto-v2__card-stats-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .features__fragments {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    .feature-fragment {
        width: 100% !important;
        max-width: 100% !important;
    }

    .beta__layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }
    .beta__inline-form .beta__input-wrap {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .footer__top {
        flex-direction: column !important;
        gap: 32px !important;
    }
    .footer__bottom {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* --- Small phone: 480px --- */
@media (max-width: 480px) {
    .section {
        padding: 60px 14px 50px !important;
    }
    .section__title {
        font-size: 22px !important;
    }
    .hero__brand-text {
        font-size: 40px !important;
    }
    .app-downloads {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .app-dl-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .footer__columns {
        grid-template-columns: 1fr !important;
    }
}

/* --- Touch device hover fix --- */
@media (hover: none) {
    .feature-fragment:hover {
        transform: none !important;
    }
}
/* ==========================================================================
   HERO — short-video signals
   The hero used to be a wordmark, a tagline and an empty phone. These pieces
   say what the product actually is before anyone scrolls.
   ========================================================================== */

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* cut-corner HUD tag, not a pill */
.hero__eyebrow-pill {
    --hud-cut: 8px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 12px;
    background: var(--brand-500);
    clip-path: polygon(
        var(--hud-cut) 0, 100% 0,
        100% calc(100% - var(--hud-cut)), calc(100% - var(--hud-cut)) 100%,
        0 100%, 0 var(--hud-cut));
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: var(--brand-700);
    isolation: isolate;
}

.hero__eyebrow-pill::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background: #EAF2FE;
    clip-path: polygon(
        7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

[data-theme="dark"] .hero__eyebrow-pill {
    background: var(--brand-400);
    color: var(--brand-ice);
}

[data-theme="dark"] .hero__eyebrow-pill::before {
    background: #121317;
}

.hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: hero-pulse 2s ease-in-out infinite;
}

@keyframes hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.75); }
}

.hero__eyebrow-text {
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.17em;
    color: var(--text-tertiary);
}

.hero__lede {
    font-family: var(--font-sans);
    font-size: clamp(14.5px, 1.1vw, 16.5px);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 46ch;
    margin: -18px 0 26px;
}

.hero__marks {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0;
    margin: 0 0 6px;
}

.hero__mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-tech);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hero__mark svg {
    width: 16px;
    height: 16px;
    color: var(--brand-500);
    flex: none;
}

[data-theme="dark"] .hero__mark svg {
    color: var(--brand-ice);
}

/* ---------- the phone is one clip in a vertical feed ---------- */
.hero__clip-stack {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: -1;
}

.hero__clip-stack-card {
    position: absolute;
    border-radius: 38px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

[data-theme="dark"] .hero__clip-stack-card {
    background: #11141C;
    border-color: rgba(216, 231, 250, 0.07);
}

.hero__clip-stack-card--1 {
    width: 236px;
    height: 500px;
    transform: translateX(-74px) rotate(-9deg);
    opacity: .55;
}

.hero__clip-stack-card--2 {
    width: 258px;
    height: 540px;
    transform: translateX(-40px) rotate(-4.5deg);
    opacity: .8;
}

.hero__swipe {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-500);
    pointer-events: none;
}

[data-theme="dark"] .hero__swipe {
    color: var(--brand-ice);
}

.hero__swipe svg {
    width: 18px;
    height: 28px;
    opacity: .6;
    animation: hero-swipe 2.6s ease-in-out infinite;
    animation-play-state: paused;
}

.hero__swipe span {
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    white-space: nowrap;
}

@keyframes hero-swipe {
    0%, 100% { transform: translateY(5px); opacity: .2; }
    50% { transform: translateY(-5px); opacity: .75; }
}

/* ---------- floating app-UI cards ---------- */
.hero__float {
    position: absolute;
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 34px rgba(25, 26, 30, 0.12), inset 0 0 0 1px rgb(var(--brand-rgb) / 0.28);
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-primary);
    white-space: nowrap;
    animation: hero-bob 7s ease-in-out infinite;
    animation-play-state: paused;
}

[data-theme="dark"] .hero__float {
    background: rgba(16, 17, 21, 0.97);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(216, 231, 250, 0.2);
}

.hero__float--live {
    top: 44px;
    right: -14px;
}

.hero__float--live b {
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
}

.hero__float-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F43F5E;
    animation: hero-pulse 1.6s ease-in-out infinite;
}

.hero__float--reply {
    left: -48px;
    top: 44%;
    animation-delay: -2.4s;
}

.hero__float--verdict {
    right: -56px;
    bottom: 70px;
    animation-delay: -4.8s;
}

.hero__float-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-500));
    opacity: .85;
}

.hero__float-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero__float-body b {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.hero__float-body i {
    font-style: normal;
    font-family: var(--font-tech);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
}

.hero__float-meter {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
    flex: none;
}

.hero__float-meter span {
    display: block;
    height: 100%;
    width: 92%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-500));
}

@keyframes hero-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero__phone-showcase.is-inview .hero__float,
.hero__phone-showcase.is-inview .hero__swipe svg {
    animation-play-state: running;
}

/* ---------- ticker strip ---------- */
.hero__ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 11px 0;
}

.hero__ticker::before,
.hero__ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.hero__ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
}

.hero__ticker::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), transparent);
}

.hero__ticker-track {
    display: flex;
    width: max-content;
    animation: hero-ticker 42s linear infinite;
    animation-play-state: paused;
    will-change: transform;
}

.hero__ticker.is-inview .hero__ticker-track {
    animation-play-state: running;
}

.hero__ticker-run {
    display: flex;
    align-items: center;
    flex: none;
}

.hero__ticker-run span {
    font-family: var(--font-tech);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    padding: 0 22px;
}

.hero__ticker-run em {
    font-style: normal;
    font-size: 7px;
    color: var(--brand-500);
    opacity: .7;
}

[data-theme="dark"] .hero__ticker-run em {
    color: var(--brand-ice);
}

@keyframes hero-ticker {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 1024px) {
    .hero__eyebrow,
    .hero__marks {
        justify-content: center;
    }

    .hero__lede {
        margin: -10px auto 24px;
        text-align: center;
    }

    .hero__float--reply,
    .hero__float--verdict,
    .hero__swipe,
    .hero__clip-stack {
        display: none;
    }

    .hero__float--live {
        top: 10px;
        right: 4px;
    }
}

@media (max-width: 640px) {
    .hero__ticker {
        padding: 9px 0;
    }

    .hero__ticker-run span {
        font-size: 9.5px;
        padding: 0 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow-dot,
    .hero__float,
    .hero__float-dot,
    .hero__swipe svg,
    .hero__ticker-track {
        animation: none !important;
    }
}

/* ==========================================================================
   TYPOGRAPHY TUNING — Orbitron
   Orbitron is a squared techno face built for caps: its lowercase is weak and
   the glyphs run wide, so display text is uppercased, tracked in, and sized
   down from what the previous humanist face could carry.
   ========================================================================== */
.section__title,
.hero__brand-text {
    text-wrap: balance;
    text-transform: uppercase;
}

.section__title {
    font-size: clamp(23px, 3.2vw, 40px);
    letter-spacing: 0;
    line-height: 1.18;
    font-weight: 800;
}

/* Bracketed HUD labels stay monospace — Orbitron has no mono rhythm. */
.section__label,
.sidebar__version {
    font-family: var(--font-tech);
    letter-spacing: 0.15em;
}

/* ==========================================================================
   HUD FRAMES — the outline system
   Rounded-rectangle borders and pill ovals read as stock Bootstrap. Everything
   that used to be a plain outline now uses one of three cut-corner treatments,
   built from clip-path + a gradient backing edge so the notch is real geometry
   rather than a border image.
   ========================================================================== */

/* --- corner-cut tag: replaces the oval pill --- */
.hud-tag {
    --hud-cut: 9px;
    --hud-edge: var(--brand-500);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px 7px 13px;
    background: var(--hud-edge);
    clip-path: polygon(
        var(--hud-cut) 0, 100% 0,
        100% calc(100% - var(--hud-cut)), calc(100% - var(--hud-cut)) 100%,
        0 100%, 0 var(--hud-cut));
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-ink);
    isolation: isolate;
}

/* the fill sits one pixel inside, so the clip edge reads as a drawn bevel */
.hud-tag::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background: #EAF2FE;
    clip-path: polygon(
        calc(var(--hud-cut) - 1px) 0, 100% 0,
        100% calc(100% - var(--hud-cut) + 1px), calc(100% - var(--hud-cut) + 1px) 100%,
        0 100%, 0 calc(var(--hud-cut) - 1px));
}

[data-theme="dark"] .hud-tag {
    color: var(--brand-ice);
}

[data-theme="dark"] .hud-tag::before {
    background: #121317;
}

/* --- bracket frame: four L-corners, no continuous border --- */
.hud-bracket {
    position: relative;
}

.hud-bracket::before,
.hud-bracket::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    border-color: var(--brand-500);
    opacity: .75;
}

.hud-bracket::before {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}

.hud-bracket::after {
    right: 0;
    bottom: 0;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

/* --- notched panel: chamfered top-right / bottom-left, hairline edge --- */
.hud-panel {
    --hud-cut: 16px;
    position: relative;
    background: var(--hud-panel-edge, rgb(var(--brand-rgb) / 0.16));
    clip-path: polygon(
        0 0, calc(100% - var(--hud-cut)) 0, 100% var(--hud-cut),
        100% 100%, var(--hud-cut) 100%, 0 calc(100% - var(--hud-cut)));
    isolation: isolate;
}

.hud-panel::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--hud-panel-fill, #FFFFFF);
    clip-path: polygon(
        0 0, calc(100% - var(--hud-cut) + 1px) 0, 100% calc(var(--hud-cut) - 1px),
        100% 100%, calc(var(--hud-cut) - 1px) 100%, 0 calc(100% - var(--hud-cut) + 1px));
}

[data-theme="dark"] .hud-panel {
    --hud-panel-edge: rgba(216, 231, 250, 0.16);
    --hud-panel-fill: #101115;
}

/* --- tick rail: a measured edge instead of a 1px line --- */
.hud-rail {
    position: relative;
    padding-left: 16px;
}

.hud-rail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        var(--brand-500) 0 6px,
        transparent 6px 11px);
}

@media (prefers-reduced-motion: reduce) {
    .hud-tag,
    .hud-panel {
        clip-path: none;
    }
}



/* body paints an opaque page colour, so give it its own stacking context —
   otherwise the z-index:-1 backdrop layers fall behind it and never show. */
body {
    isolation: isolate;
}

/* ticker separators use the page's own "//" HUD language */
.hero__ticker-run em {
    font-size: 10px;
    letter-spacing: 0.06em;
}

.beta__success-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* ==========================================================================
   SLIDE 05 — COGNITIVE LAYER, THE PIXEL SCREEN
   The glowing WebGL sphere is gone. The slide is a dark screen in both
   themes now: a dithered wave field (pixel-field.js) behind flat black
   panels with stepped pixel corners, Pixelify Sans for headings and
   numbers, the logo's ice for type and accent. Pixelify Sans
   is drawn on a 0.1em grid, so its sizes here are multiples of 10px (a
   whole number of screen pixels per font pixel) wherever it is big enough
   to matter.
   ========================================================================== */
#ai-core {
    /* the logo's two colours: its black for the screen, its ice for the type */
    --px-void: #07080C;       /* darkest tone of the field */
    --px-panel: #0B0C12;      /* panels sit on the field, a step up */
    --px-raise: #18191D;      /* rows raised inside a panel */
    --px-line: #2A2F3B;       /* dotted rules */
    --px-ink: #DAE6F7;        /* type */
    --px-ink-2: #A9B4C8;      /* body copy */
    --px-ink-3: #6B778C;      /* captions */
    --px-accent: var(--brand-500);
    --px-warn: #F09AAE;
    --px-rule: linear-gradient(90deg, var(--px-line) 50%, transparent 0) 0 0 / 6px 2px repeat-x;
    position: relative;
    isolation: isolate;
    padding: 144px 48px !important;
    color: var(--px-ink);
}

/* ---------- the field ---------- */
#ai-core .px-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    background: var(--px-void);
    /* the screen dissolves into the page through a dithered band at the top
       and bottom; a mask, so it rides the compositor with the scroll */
    -webkit-mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 190px) no-repeat,
        var(--px-dissolve-bottom) bottom left / 96px 96px repeat-x;
    mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 190px) no-repeat,
        var(--px-dissolve-bottom) bottom left / 96px 96px repeat-x;
}

#ai-core .px-field__canvas {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#ai-core .px-field.is-live .px-field__canvas { visibility: visible; }

#ai-core .section__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* ---------- layout ---------- */
#ai-core .ai-core-layout {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}

#ai-core .ai-showcase__visual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    min-height: 0;
    padding: 0;
}

/* ---------- the Orvelis panel ---------- */
#ai-core .aic-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--px-panel);
    clip-path: var(--px-notch);
    color: var(--px-ink);
}

#ai-core .aic-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px 14px;
    background: var(--px-rule);
    background-position: 0 100%;
}

#ai-core .aic-strip-ticks {
    flex: 1;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--px-line) 0 2px, transparent 2px 6px);
}

#ai-core .aic-strip-id,
#ai-core .aic-head-text i,
#ai-core .aic-online,
#ai-core .aic-now-body b,
#ai-core .aic-tag,
#ai-core .aic-block-id,
#ai-core .aic-state,
#ai-core .aic-row-tag,
#ai-core .aic-foot-item i,
#ai-core .aic-mod-tag,
#ai-core .aic-mod-meta em {
    font-family: var(--px-font);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#ai-core .aic-strip-id { color: var(--px-ink-3); white-space: nowrap; }

#ai-core .aic-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 18px;
}

#ai-core .aic-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--px-accent);
    background: var(--px-raise);
    clip-path: var(--px-notch-sm);
}

#ai-core .aic-avatar svg { width: 24px; height: 24px; display: block; }

#ai-core .aic-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

#ai-core .aic-head-text b {
    font: 500 20px/1 var(--px-font);
    letter-spacing: 0.06em;
    color: var(--px-ink);
}

#ai-core .aic-head-text i { color: var(--px-ink-3); }
#ai-core .aic-head-text i em { font-style: normal; color: var(--px-accent); }

#ai-core .aic-online {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    color: var(--px-accent);
    background: var(--px-raise);
    clip-path: var(--px-notch-sm);
}

#ai-core .aic-online i {
    width: 6px;
    height: 6px;
    background: currentColor;
    animation: aic-px-blink 1.4s steps(1, end) infinite;
    animation-play-state: paused;
}

@keyframes aic-px-blink {
    50% { opacity: .15; }
}

#ai-core .aic-now {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 22px 22px;
    padding: 12px 14px;
    background: var(--px-raise);
    clip-path: var(--px-notch);
}

#ai-core .aic-now-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--px-panel);
    background: var(--px-accent);
    clip-path: var(--px-notch-sm);
}

#ai-core .aic-now-thumb svg { width: 10px; height: 14px; margin-left: 2px; display: block; }

#ai-core .aic-now-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ai-core .aic-now-body b { color: var(--px-accent); }

#ai-core .aic-now-body i {
    font: 400 12.5px/1.3 var(--font-sans);
    font-style: normal;
    color: var(--px-ink-2);
}

#ai-core .aic-now-wave {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 21px;
}

#ai-core .aic-now-wave i {
    width: 3px;
    height: 33%;
    background: var(--px-accent);
    transform-origin: bottom;
    animation: aic-px-bar 1.2s steps(3, end) infinite;
    animation-play-state: paused;
}

#ai-core .aic-now-wave i:nth-child(2n) { height: 67%; animation-delay: -.3s; }
#ai-core .aic-now-wave i:nth-child(3n) { height: 100%; animation-delay: -.7s; }
#ai-core .aic-now-wave i:nth-child(5n) { height: 67%; animation-delay: -.5s; }

@keyframes aic-px-bar {
    0%, 100% { transform: scaleY(.34); }
    50% { transform: scaleY(1); }
}

#ai-core.is-inview .aic-online i,
#ai-core.is-inview .aic-now-wave i {
    animation-play-state: running;
}

/* readout blocks, split by dotted pixel rules */
#ai-core .aic-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    background: var(--px-rule);
}

#ai-core .aic-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#ai-core .aic-tag { color: var(--px-accent); }
#ai-core .aic-block-id { color: var(--px-ink-3); }

#ai-core .aic-score { display: flex; align-items: baseline; gap: 10px; }

#ai-core .aic-score-num {
    font: 400 60px/.8 var(--px-font);
    color: var(--px-ink);
}

#ai-core .aic-score-unit {
    font: 400 20px/1 var(--px-font);
    color: var(--px-accent);
}

/* Pixelify draws 5 as S and 0 as O, so "15%" read as "1S%". Figures that
   have to be read exactly take the page's mono instead. */
#ai-core .aic-score-delta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 12px/1 var(--font-tech);
    letter-spacing: 0.06em;
    color: var(--px-accent);
}

#ai-core .aic-score-delta svg { width: 10px; height: 6px; display: block; }

#ai-core .aic-meter { display: flex; gap: 3px; height: 9px; }
#ai-core .aic-meter i { flex: 1; background: var(--px-raise); }
#ai-core .aic-meter i:nth-child(-n+22) { background: var(--px-accent); }

#ai-core .aic-state { color: var(--px-ink); }

#ai-core .aic-copy {
    margin: 0;
    font: 400 13px/1.55 var(--font-sans);
    color: var(--px-ink-2);
}

#ai-core .aic-row { position: relative; padding-left: 15px; }

#ai-core .aic-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 3px;
    width: 3px;
    background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 6px);
}

#ai-core .aic-row--ok { color: var(--px-accent); }
#ai-core .aic-row--warn { color: var(--px-warn); }
#ai-core .aic-row-tag { display: block; margin-bottom: 7px; color: currentColor; }

#ai-core .aic-foot { display: flex; background: var(--px-rule); }

#ai-core .aic-foot-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 22px 20px;
}

#ai-core .aic-foot-item + .aic-foot-item {
    background: linear-gradient(var(--px-line) 50%, transparent 0) 0 0 / 2px 6px repeat-y;
}

#ai-core .aic-foot-item b {
    font: 400 30px/.8 var(--px-font);
    color: var(--px-ink);
}

#ai-core .aic-foot-item i { color: var(--px-ink-3); }

/* ---------- headline ---------- */
#ai-core .ai-showcase__content { position: relative; min-width: 0; }

/* same reason as the delta: in Pixelify "05" is "OS" */
#ai-core .section__label {
    display: inline-block;
    margin: 0 0 26px;
    font: 600 12px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: var(--px-accent);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

#ai-core .section__title {
    margin: 0 0 26px;
    font: 400 50px/1.05 var(--px-font);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--px-ink);
}

#ai-core .aic-title-accent { color: var(--px-accent); }

#ai-core .aic-lede {
    max-width: 540px;
    margin: 0;
    font: 400 16px/1.7 var(--font-sans);
    color: var(--px-ink-2);
}

#ai-core .aic-lede strong { font-weight: 600; color: var(--px-ink); }

/* ---------- the reference, quoted: one line on a dark panel ---------- */
#ai-core .aic-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 34px 20px;
    background: var(--px-panel);
    clip-path: var(--px-notch);
    font: 400 30px/1 var(--px-font);
    color: var(--px-ink);
    white-space: nowrap;
}

#ai-core .aic-formula svg {
    flex: none;
    width: 27px;
    height: 18px;
    display: block;
    color: var(--px-accent);
}

/* ---------- the three engines ---------- */
#ai-core .aic-stack {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    background: var(--px-panel);
    clip-path: var(--px-notch);
}

#ai-core .aic-mod {
    position: relative;
    padding: 20px 24px 20px 68px;
}

#ai-core .aic-mod + .aic-mod { background: var(--px-rule); }

#ai-core .aic-mod-index {
    position: absolute;
    left: 24px;
    top: 20px;
    font: 400 20px/1 var(--px-font);
    color: var(--px-accent);
}

#ai-core .aic-mod-tag { display: block; margin-bottom: 10px; color: var(--px-ink-3); }

#ai-core .aic-mod h4 {
    margin: 0 0 9px;
    font: 400 20px/1.1 var(--px-font);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--px-ink);
}

#ai-core .aic-mod p {
    margin: 0 0 14px;
    font: 400 13.5px/1.6 var(--font-sans);
    color: var(--px-ink-2);
}

#ai-core .aic-mod-meta { display: flex; flex-wrap: wrap; gap: 8px; }

#ai-core .aic-mod-meta em {
    padding: 6px 9px;
    color: var(--px-accent);
    background: var(--px-raise);
    clip-path: var(--px-notch-sm);
}

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
    #ai-core .ai-core-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 48px !important;
        max-width: 620px;
        margin: 0 auto;
    }

    #ai-core .ai-showcase__visual {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    #ai-core .aic-card { max-width: none; }
}

@media (max-width: 760px) {
    #ai-core {
        padding: 136px 16px 128px !important;
    }

    #ai-core .ai-core-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    #ai-core .ai-showcase__visual { max-width: none; gap: 16px; }

    #ai-core .section__label {
        margin-bottom: 20px;
        font-size: 11px !important;
        letter-spacing: 0.14em !important;
    }

    #ai-core .section__title {
        margin-bottom: 20px;
        font-size: 40px !important;
        line-height: 1 !important;
    }

    #ai-core .aic-lede { font-size: 15px; }

    #ai-core .aic-formula {
        gap: 14px;
        padding: 26px 16px;
        font-size: 20px;
    }

    #ai-core .aic-stack { margin-top: 28px; }

    #ai-core .aic-formula svg { width: 18px; height: 12px; }

    #ai-core .aic-strip { padding: 14px 16px 12px; }
    #ai-core .aic-head { padding: 18px 16px 16px; gap: 12px; }
    #ai-core .aic-now { margin: 0 16px 18px; }
    #ai-core .aic-block { padding: 18px 16px; }
    #ai-core .aic-score-num { font-size: 50px; }
    #ai-core .aic-foot-item { padding: 16px 12px 18px 16px; }
    #ai-core .aic-foot-item b { font-size: 20px; }
    #ai-core .aic-foot-item i { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; }
    #ai-core .aic-mod { padding: 20px 16px 20px 54px; }
    #ai-core .aic-mod-index { left: 16px; top: 20px; }
}

@media (max-width: 380px) {
    #ai-core .aic-now-wave { display: none; }
    #ai-core .section__title { font-size: 30px !important; }
    #ai-core .aic-formula { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    #ai-core .aic-online i,
    #ai-core .aic-now-wave i { animation: none; }
}


/* ==========================================================================
   SLIDE 02 — HOW IT WORKS, IN THE LOGO'S COLOURS
   Three equal panels, each a real illustration of the step with a numbered
   plate and spec chips. Since the logo became the reference the slide is its
   two colours only: the logo's black and its pale ice line. The panels are
   drawn like the logo too, a heavy ice outline with rounded corners; the
   blues, the red REC and the green checks inside the art are all ice now.
   ========================================================================== */
#features {
    --st-dim: #9AA7BD;        /* secondary type on black */
    --st-faint: #5F6B82;      /* captions */
    position: relative;
    isolation: isolate;
    background: transparent !important;
    padding: 148px 48px !important;
    color: var(--px-ice);
}

#features::before { display: none !important; }

#features .section__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

#features .section__label {
    margin-bottom: 22px;
    font: 600 12px/1 var(--font-tech) !important;
    letter-spacing: 0.18em !important;
    color: var(--st-dim) !important;
}

#features .section__title {
    margin: 0;
    font: 400 50px/1.1 var(--px-font);
    letter-spacing: 0.01em;
    color: var(--px-ice);
}

/* the cards span the same measure as the headline, not a narrower column */
#features .step-grid {
    max-width: none;
    margin: 60px 0 0;
}

/* the stakes, inverted: black type on an ice bar, like the logo's screen */
#features .st-title-accent {
    padding: 0 0.14em;
    color: var(--px-black);
    background: var(--px-ice);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.step-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    margin-top: clamp(40px, 5vw, 68px);
    align-items: stretch;
}

.step-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.step-card__frame {
    position: relative;
    background: var(--px-black);
    border-radius: 14px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    transition: box-shadow .4s var(--ease-out-expo);
}

/* the outline sits over the art: the SVG fills the frame edge to edge and
   would bury an inset shadow */
.step-card__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 2px solid var(--px-ice);
    border-radius: inherit;
}

.step-card:hover .step-card__frame {
    box-shadow: 0 0 0 4px rgba(218, 230, 247, 0.14);
}

.step-art {
    display: block;
    width: 100%;
    height: 100%;
}

/* Doto's square dots, the logo's screen again; Pixelify would draw 0 as O */
.step-card__index {
    font-family: var(--font-lcd);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--px-ice);
}

/* --- shared art primitives -------------------------------------------------
   The three panels are app screens, not icons: a viewfinder, a reply thread
   and a tally board. Everything below is the interface inside them.
   ------------------------------------------------------------------------- */
.step-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* the person that appears in every panel */
.st-por-body { fill: url(#stBody); }
.st-por-neck { fill: #8E9AB0; }
.st-por-head { fill: var(--px-ice); }
.st-por-lit { fill: #FFFFFF; }
.st-por-hair { fill: #2B3140; }

.st-ava-bg { fill: #0E1016; stroke: rgba(7, 8, 12, 0.9); stroke-width: 1.2; }
.st-ava-head { fill: var(--px-ice); }
.st-ava-body { fill: #A9B6CC; }

.st-thirds {
    fill: none;
    stroke: rgba(218, 230, 247, 0.13);
    stroke-width: 1;
}

.st-note text {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    fill: rgba(218, 230, 247, 0.5);
}

@keyframes st-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* --- 01 the viewfinder --- */
.st-subject { opacity: .95; }

.st-lock path {
    fill: none;
    stroke: var(--px-ice);
    stroke-width: 1.6;
    stroke-linecap: square;
}

.st-lock text {
    font-family: var(--font-tech);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    fill: var(--px-ice);
}

/* the picture stops at this line; everything under it is instrumentation */
.st-band { fill: rgba(7, 8, 12, 0.92); }

.st-band-rule {
    fill: none;
    stroke: rgba(218, 230, 247, 0.28);
    stroke-width: 1;
}

.st-rec-pill {
    fill: var(--px-black);
    stroke: rgba(218, 230, 247, 0.55);
    stroke-width: 1;
}

.st-rec-text {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    fill: var(--px-ice);
}

.st-rec-dot {
    fill: var(--px-ice);
    animation: st-blink 1.4s ease-in-out infinite;
    animation-play-state: paused;
}

.st-take {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    fill: rgba(218, 230, 247, 0.6);
}

.st-time {
    font-family: var(--font-lcd);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    fill: var(--px-ice);
}

.st-levels rect { fill: rgba(218, 230, 247, 0.18); }

.st-levels rect:nth-child(n + 4) { fill: var(--px-ice); opacity: .9; }

.st-levels rect:nth-child(-n + 2) {
    fill: var(--px-ice);
    opacity: .85;
    animation: st-peak 1.7s ease-in-out infinite;
    animation-play-state: paused;
}

@keyframes st-peak { 0%, 100% { opacity: .15; } 55% { opacity: .9; } }

.st-levels text {
    font-family: var(--font-tech);
    font-size: 6px;
    letter-spacing: 0.1em;
    fill: rgba(218, 230, 247, 0.5);
}

.st-scale path {
    fill: none;
    stroke: rgba(218, 230, 247, 0.35);
    stroke-width: 1;
}

.st-scale-dot { fill: var(--px-ice); }

.st-scale text {
    font-family: var(--font-tech);
    font-size: 6px;
    letter-spacing: 0.1em;
    fill: rgba(218, 230, 247, 0.5);
}

.st-wave rect {
    fill: var(--px-ice);
    opacity: .75;
    transform-box: fill-box;
    transform-origin: center;
    animation: st-bar 1.25s ease-in-out infinite;
    animation-play-state: paused;
}

.st-wave rect:nth-child(2n) { animation-delay: .14s; }
.st-wave rect:nth-child(3n) { animation-delay: .3s; }
.st-wave rect:nth-child(5n) { animation-delay: .46s; }
.st-wave rect:nth-child(7n) { animation-delay: .62s; }

@keyframes st-bar { 0%, 100% { transform: scaleY(.38); } 50% { transform: scaleY(1.1); } }

.st-runbar rect { fill: rgba(218, 230, 247, 0.18); }

.st-runbar-fill {
    fill: var(--px-ice) !important;
    animation: st-run 6s ease-in-out infinite;
    animation-play-state: paused;
}

@keyframes st-run { 0%, 100% { width: 40px; } 50% { width: 220px; } }

/* --- 02 the thread --- */
.st-clip-plate {
    fill: #0E1016;
    stroke: rgba(218, 230, 247, 0.28);
    stroke-width: 1.2;
}

.st-clip--root .st-clip-plate { stroke: var(--px-ice); stroke-width: 1.6; }
.st-clip--live .st-clip-plate { stroke: rgba(218, 230, 247, 0.5); }

.st-clip-inner {
    fill: none;
    stroke: rgba(218, 230, 247, 0.22);
    stroke-width: 1;
}

.st-play-ring {
    fill: rgba(7, 8, 12, 0.55);
    stroke: rgba(218, 230, 247, 0.85);
    stroke-width: 1.2;
}

.st-play-tri { fill: var(--px-ice); }
.st-play--sm .st-play-ring { stroke-width: 1.6; }

.st-badge--op { fill: var(--px-ice); }

.st-badge-text {
    font-family: var(--font-tech);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    fill: var(--px-black);
}

.st-clip-handle {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    fill: var(--px-ice);
}

.st-clip-meta {
    font-family: var(--font-tech);
    font-size: 6.8px;
    font-weight: 500;
    letter-spacing: 0.1em;
    fill: rgba(218, 230, 247, 0.6);
}

.st-clip-meta--live { fill: var(--px-ice); }

.st-branch {
    fill: none;
    stroke: var(--px-ice);
    stroke-width: 1.4;
    stroke-dasharray: 4 5;
    opacity: .8;
    animation: st-flow 2.4s linear infinite;
    animation-play-state: paused;
}

@keyframes st-flow { to { stroke-dashoffset: -18; } }

.st-branch-dot { fill: var(--px-ice); }

.st-minibar { fill: rgba(218, 230, 247, 0.22); }
.st-minibar--fill { fill: var(--px-ice); }

.st-live-dot {
    fill: var(--px-ice);
    animation: st-blink 1.2s ease-in-out infinite;
    animation-play-state: paused;
}

.st-mini-wave rect {
    fill: var(--px-ice);
    opacity: .8;
    transform-box: fill-box;
    transform-origin: center;
    animation: st-bar 1s ease-in-out infinite;
    animation-play-state: paused;
}

.st-mini-wave rect:nth-child(2n) { animation-delay: .12s; }
.st-mini-wave rect:nth-child(3n) { animation-delay: .26s; }

.st-queue rect {
    fill: rgba(218, 230, 247, 0.1);
    stroke: rgba(218, 230, 247, 0.2);
    stroke-width: 1;
}

.st-queue text {
    font-family: var(--font-lcd);
    font-size: 11px;
    font-weight: 700;
    fill: rgba(218, 230, 247, 0.75);
}

/* --- 03 the tally --- */
.st-head text {
    font-family: var(--font-tech);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    fill: var(--px-ice);
}

.st-head-meta {
    font-size: 7px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    fill: rgba(218, 230, 247, 0.55) !important;
}

.st-rule {
    fill: none;
    stroke: rgba(218, 230, 247, 0.25);
    stroke-width: 1;
}

.st-vote text {
    font-family: var(--font-tech);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    fill: rgba(218, 230, 247, 0.72);
}

.st-vote-pct {
    font-family: var(--font-lcd) !important;
    font-size: 13px !important;
    fill: var(--px-ice) !important;
    letter-spacing: 0.02em !important;
}

.st-vote-track {
    fill: rgba(218, 230, 247, 0.14);
    stroke: rgba(218, 230, 247, 0.18);
    stroke-width: 1;
}

.st-vote-fill {
    animation: st-vote 3.4s var(--ease-out-expo) forwards;
    animation-play-state: paused;
    width: 0;
}

.st-vote-fill--pro { fill: url(#stProBar); --st-w: 187px; }
.st-vote-fill--con { fill: url(#stConBar); --st-w: 73px; animation-delay: .2s; }

@keyframes st-vote { from { width: 0; } to { width: var(--st-w); } }

.st-vote-ticks {
    fill: none;
    stroke: rgba(7, 8, 12, 0.6);
    stroke-width: 1;
}

.st-voters text {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    fill: rgba(218, 230, 247, 0.6);
}

.st-check {
    fill: none;
    stroke: var(--px-ice);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-voters use { opacity: .95; }

.st-verdict rect {
    fill: rgba(218, 230, 247, 0.06);
    stroke: rgba(218, 230, 247, 0.3);
    stroke-width: 1;
}

.st-verdict-label {
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    fill: var(--px-ice);
}

.st-verdict-stamp {
    font-family: var(--font-tech);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    fill: var(--px-ice);
}

.st-score-key {
    font-family: var(--font-tech);
    font-size: 6.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    fill: rgba(218, 230, 247, 0.6);
}

.st-score-track { fill: rgba(218, 230, 247, 0.16) !important; stroke: none !important; }
.st-score-fill { fill: var(--px-ice) !important; stroke: none !important; }

.st-score-val {
    font-family: var(--font-lcd);
    font-size: 9px;
    font-weight: 700;
    fill: var(--px-ice);
}

.st-score-val--good {
    font-family: var(--font-tech);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.14em;
    fill: var(--px-ice);
}

.step-card.is-inview .st-rec-dot,
.step-card.is-inview .st-runbar-fill,
.step-card.is-inview .st-wave rect,
.step-card.is-inview .st-levels rect,
.step-card.is-inview .st-reticle circle,
.step-card.is-inview .st-branch,
.step-card.is-inview .st-live-dot,
.step-card.is-inview .st-mini-wave rect,
.step-card.is-inview .st-vote-fill {
    animation-play-state: running;
}

/* --- copy under each panel --- */
.step-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 2px 0;
}

/* the step index sits on the tag line, clear of the panel chamfer */
.step-card__index + .step-card__tag { margin-top: -2px; }

.step-card__tag {
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--st-dim);
}

.step-card__body h3 {
    font-family: var(--px-font);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--px-ice);
    margin: 0;
}

.step-card__body p {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--st-dim);
    margin: 0;
}

.step-card__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }

.step-card__chips em {
    font-style: normal;
    padding: 5px 9px;
    clip-path: var(--px-notch-sm);
    background: rgba(218, 230, 247, 0.1);
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--px-ice);
}

@media (max-width: 900px) {
    .step-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 760px) {
    #features { padding: 132px 16px 124px !important; }
    #features .section__title { font-size: 40px !important; line-height: 1.1 !important; }
    #features .section__label { font-size: 11px !important; letter-spacing: 0.14em !important; }
}

@media (prefers-reduced-motion: reduce) {
    .step-art * { animation: none !important; }
    .st-vote-fill--pro { width: 187px; }
    .st-vote-fill--con { width: 73px; }
}

/* ==========================================================================
   MOBILE PASS — 390px and below
   The desktop rhythm (100vh sections, 120px padding, 440px panels) left huge
   empty bands and pushed panels past the viewport on a phone.
   ========================================================================== */
@media (max-width: 760px) {

    /* --- rhythm: sections size to their content, not the viewport --- */
    .section {
        min-height: 0 !important;
        padding: 72px 20px !important;
        display: block !important;
    }

    #hero {
        min-height: 100svh !important;
        padding-top: 88px !important;
    }

    .section__container {
        padding: 0 !important;
    }

    .section__header {
        text-align: left !important;
        align-items: flex-start !important;
        margin-bottom: 28px !important;
    }

    .section__header--center,
    .section__header--stack {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .section__title {
        font-size: clamp(20px, 6.6vw, 27px);
        line-height: 1.22;
    }

    /* --- HUD labels need a floor size on a phone --- */
    .section__label,
    .step-card__tag,
    .clip-card__meta-item {
        font-size: 10px !important;
        letter-spacing: 0.13em !important;
    }

    .hero__eyebrow-pill,
    .hero__mark,
    .hero__eyebrow-text {
        font-size: 11px !important;
    }

    /* --- steps (02) --- */
    .step-grid { margin-top: 28px; gap: 28px; }
    .step-card__body { padding-top: 14px; gap: 8px; }
    .step-card__index { font-size: 22px; }

    /* --- hero --- */
    .hero__lede { font-size: 14.5px; }
    .app-downloads { gap: 10px; }
    .app-dl-btn { min-width: 0; flex: 1 1 46%; padding: 11px 14px !important; }
}

@media (max-width: 420px) {
    .section { padding: 60px 16px !important; }
    .app-downloads { flex-direction: column; }
    .app-dl-btn { flex: 1 1 auto; width: 100%; }
}

/* ==========================================================================
   SLIDE 03 — THE INTERFACE
   Was three bare screenshots floating with heavy drop shadows and no framing,
   labels or relation to the rest of the page. The real screens stay — they
   are the product proof — but each now sits in a chamfered device plate with
   bracket corners, an index, a caption and spec chips, and the lead device
   carries HUD callouts.
   ========================================================================== */
.iface {
    background: transparent !important;
    padding: 120px 0 !important;
}

.iface__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(26px, 3vw, 40px);
}

.iface__eyebrow-tag,
.iface__eyebrow-meta {
    font-family: var(--font-tech);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.iface__eyebrow-tag { color: var(--brand-600); }
[data-theme="dark"] .iface__eyebrow-tag { color: var(--brand-300); }
.iface__eyebrow-meta { color: var(--text-tertiary); }

.iface__eyebrow-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent 85%);
}

.iface__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(44px, 5vw, 72px);
}

.iface .section__title {
    text-align: left !important;
    margin: 0 !important;
}

.iface__lede {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 48ch;
}

/* --- the rack --- */
.iface__rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

.dev {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* the plate: chamfered instrument housing behind the phone */
.dev__plate {
    position: relative;
    padding: 18px;
    background: rgb(var(--brand-rgb) / 0.05);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.22);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

[data-theme="dark"] .dev__plate {
    background: rgba(216, 231, 250, 0.04);
    box-shadow: inset 0 0 0 1px rgba(216, 231, 250, 0.14);
}

.dev--lead .dev__plate {
    background: rgb(var(--brand-rgb) / 0.09);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.35);
}

[data-theme="dark"] .dev--lead .dev__plate {
    background: rgba(218, 230, 247, 0.09);
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.3);
}

.dev__corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--brand-500);
    opacity: .8;
    pointer-events: none;
}

.dev__corner--tl { top: 7px; left: 7px; border-top: 2px solid; border-left: 2px solid; }
.dev__corner--br { bottom: 7px; right: 7px; border-bottom: 2px solid; border-right: 2px solid; }

.dev__index {
    position: absolute;
    top: 10px;
    right: 26px;
    font-family: var(--font-lcd);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-500);
    opacity: .55;
}

/* the handset */
.dev__phone {
    position: relative;
    aspect-ratio: 1080 / 2316;
    border-radius: 22px;
    overflow: hidden;
    background: #05070C;
    box-shadow:
        0 0 0 6px #121317,
        0 0 0 7px rgb(var(--brand-rgb) / 0.28),
        0 22px 48px rgba(18, 19, 23, 0.22);
}

[data-theme="dark"] .dev__phone {
    box-shadow:
        0 0 0 6px #15161A,
        0 0 0 7px rgba(218, 230, 247, 0.22),
        0 22px 48px rgba(0, 0, 0, 0.6);
}

.dev--lead .dev__phone { border-radius: 24px; }

.dev__shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.dev__notch {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 12px;
    border-radius: 0 0 8px 8px;
    background: #05070C;
    z-index: 2;
}

/* a single diagonal sheen so the glass reads as glass */
.dev__sheen {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 34%);
}

/* --- HUD callouts on the lead device --- */
.dev__call {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    background: var(--bg-elevated);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.4), 0 8px 20px rgba(18, 19, 23, 0.16);
    font-family: var(--font-tech);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brand-600);
    white-space: nowrap;
}

[data-theme="dark"] .dev__call {
    background: #131418;
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.34), 0 8px 20px rgba(0, 0, 0, 0.5);
    color: var(--brand-300);
}

.dev__call i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
    flex: none;
}

/* leader line back to the screen */
.dev__call::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 26px;
    height: 1px;
    background: var(--brand-500);
    opacity: .5;
}

.dev__call--a { top: 16%; left: -30px; }
.dev__call--a::after { right: -26px; }

.dev__call--b { bottom: 20%; right: -30px; }
.dev__call--b::after { left: -26px; }

/* --- caption --- */
.dev__cap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 2px 0;
}

.dev__tag {
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--brand-600);
}

[data-theme="dark"] .dev__tag { color: var(--brand-300); }

.dev__cap h3 {
    font-family: var(--font-display);
    font-size: clamp(12.5px, 1.1vw, 15px);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.dev__cap p {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.dev__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }

.dev__chips em {
    font-style: normal;
    padding: 4px 9px 4px 7px;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    background: rgb(var(--brand-rgb) / 0.1);
    font-family: var(--font-tech);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brand-600);
}

[data-theme="dark"] .dev__chips em {
    background: rgba(216, 231, 250, 0.08);
    color: var(--brand-300);
}

@media (max-width: 1080px) {
    .iface__head { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
    .dev__call { display: none; }
}

@media (max-width: 860px) {
    .iface__rack { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 420px; }
    .iface__eyebrow-meta { display: none; }
}

@media (max-width: 760px) {
    .iface { padding: 72px 0 !important; }
    .iface__eyebrow-tag { font-size: 10px !important; }
}

/* slide 03 corrections: size the handsets down, and let the callouts escape
   the plate (clip-path on the plate was cropping them) */
.dev { position: relative; }

.dev__plate {
    width: fit-content;
    margin: 0 auto;
    padding: 15px !important;
}

.dev__phone {
    width: 208px;
    max-width: 100%;
}

.dev--lead .dev__phone { width: 234px; }

.dev__index { right: 22px; top: 8px; }

.dev__call--a { top: 20%; left: -8px; }
.dev__call--b { bottom: 26%; right: -8px; }

.dev__cap { max-width: 300px; margin: 0 auto; }

@media (max-width: 1180px) {
    .dev__phone { width: 178px; }
    .dev--lead .dev__phone { width: 200px; }
}

@media (max-width: 860px) {
    .dev__phone,
    .dev--lead .dev__phone { width: 224px; }
    .dev__cap { max-width: none; }
}

/* the lead handset is taller, which pushed its caption out of line — subgrid
   puts every plate on one row and every caption on the next */
.iface__rack {
    grid-template-rows: auto auto;
}

.dev {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

.dev__plate { align-self: end; }

.dev__index {
    position: static;
    font-family: var(--font-lcd);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-500);
    opacity: .45;
}

[data-theme="dark"] .dev__index { color: var(--brand-300); }

@media (max-width: 860px) {
    .dev { display: flex; flex-direction: column; grid-row: auto; }
}

/* Draw the plate's chamfer on a pseudo-element instead of clipping the plate
   itself, so the callouts can sit inside it and still hang over the edge. */
.dev__plate {
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
}

.dev__plate::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(var(--brand-rgb) / 0.05);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.22);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

[data-theme="dark"] .dev__plate::before {
    background: rgba(216, 231, 250, 0.04);
    box-shadow: inset 0 0 0 1px rgba(216, 231, 250, 0.14);
}

.dev--lead .dev__plate::before {
    background: rgb(var(--brand-rgb) / 0.09);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.35);
}

[data-theme="dark"] .dev--lead .dev__plate::before {
    background: rgba(218, 230, 247, 0.09);
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.3);
}

.dev__phone { position: relative; z-index: 1; }
.dev__corner { z-index: 2; }

.dev__call--a { top: 28%; left: -34px; bottom: auto; }
.dev__call--b { top: 74%; right: -34px; bottom: auto; }

/* .iface sets its own padding, which overrode the mobile section gutter and
   left the copy running edge to edge */
@media (max-width: 760px) {
    .iface { padding: 72px 20px !important; }
}

@media (max-width: 420px) {
    .iface { padding: 60px 16px !important; }
}

@media (max-width: 760px) {
    /* clear the fixed nav button, as the other sections do */
    .iface { padding-top: 96px !important; }
}

/* ==========================================================================
   PAGE BACKDROP
   The page used to be one flat white sheet end to end. This is a single stack
   behind everything: brand light down the length of the page, two aurora
   ribbons along the edges of the viewport, and a grain tile. No lines and no
   cells anywhere — every layer is a soft gradient, so nothing reads as a
   pattern. The ribbons are the only thing that moves, and only by transform,
   which the compositor handles without repainting.
   ========================================================================== */
/* Absolute, not fixed: the backdrop is as tall as the document, so its light
   drifts as you scroll instead of sitting still behind everything. That is
   where the page gets its variety — the surface itself never changes tone, so
   there is no band, no seam, no light-to-dark step anywhere. */
.page-fx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.page-fx > span {
    position: absolute;
    inset: 0;
    display: block;
}

/* --- light --- */
.page-fx__glow {
    background:
        radial-gradient(1100px 620px at 88% 2%, rgba(218, 230, 247, 0.7), transparent 58%),
        radial-gradient(900px 560px at -6% 15%, rgba(218, 230, 247, 0.42), transparent 60%),
        radial-gradient(1000px 600px at 78% 30%, rgba(218, 230, 247, 0.51), transparent 60%),
        radial-gradient(950px 580px at 6% 45%, rgba(218, 230, 247, 0.48), transparent 60%),
        radial-gradient(1100px 620px at 82% 58%, rgba(218, 230, 247, 0.64), transparent 58%),
        radial-gradient(900px 560px at 10% 72%, rgba(218, 230, 247, 0.42), transparent 60%),
        radial-gradient(1050px 600px at 74% 86%, rgba(218, 230, 247, 0.58), transparent 58%),
        radial-gradient(900px 540px at 20% 99%, rgba(218, 230, 247, 0.38), transparent 60%),
        linear-gradient(180deg, #FAFCFF 0%, #EAF1FB 30%, #F4F8FD 55%, #E9F0FB 80%, #F6F9FE 100%);
}

[data-theme="dark"] .page-fx__glow {
    background:
        radial-gradient(1100px 620px at 88% 2%, rgba(218, 230, 247, 0.17), transparent 58%),
        radial-gradient(900px 560px at -6% 15%, rgba(218, 230, 247, 0.12), transparent 60%),
        radial-gradient(1000px 600px at 78% 30%, rgba(218, 230, 247, 0.13), transparent 60%),
        radial-gradient(950px 580px at 6% 45%, rgba(218, 230, 247, 0.13), transparent 60%),
        radial-gradient(1100px 620px at 82% 58%, rgba(218, 230, 247, 0.16), transparent 58%),
        radial-gradient(900px 560px at 10% 72%, rgba(218, 230, 247, 0.11), transparent 60%),
        radial-gradient(1050px 600px at 74% 86%, rgba(218, 230, 247, 0.14), transparent 58%),
        radial-gradient(900px 540px at 20% 99%, rgba(218, 230, 247, 0.1), transparent 60%),
        linear-gradient(180deg, #0A0C12 0%, #080B12 30%, #0B0E16 55%, #080A11 80%, #0A0D14 100%);
}

/* --- aurora: soft light along both edges of the viewport ---
   Fixed, so the edges stay lit while the page scrolls past. It frames the
   content the way the old measure rails did, with light instead of ticks. */
.page-fx > .page-fx__aurora {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.page-fx__ribbon {
    position: absolute;
    top: -16vh;
    width: 46vw;
    height: 132vh;
    border-radius: 50%;
    will-change: transform;
}

.page-fx__ribbon--l {
    left: -20vw;
    background: radial-gradient(closest-side, rgba(218, 230, 247, 0.77), rgba(218, 230, 247, 0.32) 52%, transparent);
    animation: page-fx-sway-l 28s ease-in-out infinite alternate;
}

.page-fx__ribbon--r {
    right: -20vw;
    top: -8vh;
    background: radial-gradient(closest-side, rgba(218, 230, 247, 0.7), rgba(218, 230, 247, 0.29) 52%, transparent);
    animation: page-fx-sway-r 36s ease-in-out infinite alternate;
}

[data-theme="dark"] .page-fx__ribbon--l {
    background: radial-gradient(closest-side, rgba(218, 230, 247, 0.16), rgba(218, 230, 247, 0.06) 52%, transparent);
}

[data-theme="dark"] .page-fx__ribbon--r {
    background: radial-gradient(closest-side, rgba(218, 230, 247, 0.18), rgba(218, 230, 247, 0.06) 52%, transparent);
}

@keyframes page-fx-sway-l {
    from { transform: translate3d(0, 0, 0) rotate(-8deg); }
    to   { transform: translate3d(4vw, 6vh, 0) rotate(5deg); }
}

@keyframes page-fx-sway-r {
    from { transform: translate3d(0, 0, 0) rotate(9deg); }
    to   { transform: translate3d(-4vw, -5vh, 0) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .page-fx__ribbon { animation: none; }
}

/* --- grain: a 160px noise tile, kills the plastic flatness --- */
.page-fx__grain {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: .05;
    mix-blend-mode: multiply;
}

[data-theme="dark"] .page-fx__grain {
    opacity: .1;
    mix-blend-mode: screen;
}

@media (max-width: 760px) {
    /* a phone is mostly edge; keep the light but let it recede */
    .page-fx__ribbon { opacity: .7; }
}

/* The blanket `margin: 0` in the page's inline reset wiped .main's left
   offset, so below ~1400px the content ran under the fixed sidebar. The dark
   band made it obvious. Restore the offset on desktop widths. */
@media (min-width: 1025px) {
    .main {
        margin-left: 0 !important;
    }
}

/* these two painted flat --bg-main over the page backdrop, flattening the
   grid and glow behind them */
.section--global,
.section--interface {
    background: transparent;
}

/* ==========================================================================
   NO SECTION PAINTS ITS OWN BACKGROUND
   Sections used to fill themselves with a flat --bg, so the page glow and grid
   stopped dead at each section edge. The page is one continuous surface: only
   the backdrop paints it.
   ========================================================================== */
.section,
.section--features,
.section--advantages,
.section--screens,
.section--live {
    background: transparent !important;
}

/* a rotated 60px grid; the page carries no cells anywhere */
.section--features::before {
    display: none !important;
}

/* The waitlist section clips its own two glow blobs (overflow: hidden), which
   cut them off in a straight line at its top and bottom edges — a visible
   seam above the footer. The page backdrop already lights this stretch. */
.beta-bg-glows {
    display: none;
}

/* the waitlist card's 20px grid, the last cells on the page */
.card-tech-grid {
    display: none;
}




/* ==========================================================================
   ONE CONTINUOUS SURFACE
   [data-theme="light"] .section--manifesto, .section--features, … had
   `background: #ffffff !important` — specificity (0,2,0), which outranked the
   plain .section reset. Half the page was painted flat white over the
   backdrop no matter what the backdrop did. That is what read as boring, and
   it is why the seams appeared where a painted section met an unpainted one.
   Nothing but the backdrop paints the page surface now.
   ========================================================================== */
[data-theme="light"] .section,
[data-theme="light"] .footer,
[data-theme="dark"] .section,
[data-theme="dark"] .footer {
    background: transparent !important;
}

/* ==========================================================================
   PIXEL SCREENS — the dark slides (02, 04, 05)
   Each dark slide is a screen laid over the page. Its backdrop dissolves into
   the page through dithered bands at the top and bottom edge: masks, 32 rows
   of 3px cells, generated rather than drawn, so they ride the compositor with
   the scroll. Slides 02 and 04 are the logo's black; 05 draws its own field.
   ========================================================================== */
:root {
    --px-font: 'Pixelify Sans', 'JetBrains Mono', ui-monospace, monospace;
    --px-black: #07080C;      /* the logo's black */
    --px-ice: #DAE6F7;        /* the logo's line colour */
    --px-dissolve-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v3h-3zM12 0h3v3h-3zM18 0h3v3h-3zM24 0h3v3h-3zM60 0h3v3h-3zM6 6h3v3h-3zM18 6h3v3h-3zM54 6h3v3h-3zM60 6h3v3h-3zM66 6h3v3h-3zM0 12h3v3h-3zM6 12h3v3h-3zM12 12h3v3h-3zM18 12h3v3h-3zM24 12h3v3h-3zM48 12h3v3h-3zM54 12h3v3h-3zM60 12h3v3h-3zM66 12h3v3h-3zM72 12h3v3h-3zM3 15h3v3h-3zM15 15h3v3h-3zM63 15h3v3h-3zM0 18h3v3h-3zM6 18h3v3h-3zM12 18h3v3h-3zM18 18h3v3h-3zM24 18h3v3h-3zM42 18h3v3h-3zM54 18h3v3h-3zM60 18h3v3h-3zM66 18h3v3h-3zM78 18h3v3h-3zM21 21h3v3h-3zM57 21h3v3h-3zM0 24h3v3h-3zM6 24h3v3h-3zM12 24h3v3h-3zM18 24h3v3h-3zM24 24h3v3h-3zM36 24h3v3h-3zM42 24h3v3h-3zM48 24h3v3h-3zM54 24h3v3h-3zM60 24h3v3h-3zM66 24h3v3h-3zM72 24h3v3h-3zM78 24h3v3h-3zM84 24h3v3h-3zM3 27h3v3h-3zM15 27h3v3h-3zM21 27h3v3h-3zM51 27h3v3h-3zM57 27h3v3h-3zM63 27h3v3h-3zM75 27h3v3h-3zM0 30h3v3h-3zM6 30h3v3h-3zM12 30h3v3h-3zM18 30h3v3h-3zM24 30h3v3h-3zM30 30h3v3h-3zM42 30h3v3h-3zM48 30h3v3h-3zM54 30h3v3h-3zM60 30h3v3h-3zM66 30h3v3h-3zM72 30h3v3h-3zM78 30h3v3h-3zM90 30h3v3h-3zM3 33h3v3h-3zM9 33h3v3h-3zM15 33h3v3h-3zM21 33h3v3h-3zM57 33h3v3h-3zM63 33h3v3h-3zM69 33h3v3h-3zM0 36h3v3h-3zM6 36h3v3h-3zM12 36h9v3h-9zM24 36h3v3h-3zM30 36h3v3h-3zM36 36h3v3h-3zM42 36h3v3h-3zM48 36h3v3h-3zM54 36h3v3h-3zM60 36h9v3h-9zM72 36h3v3h-3zM78 36h3v3h-3zM84 36h3v3h-3zM90 36h3v3h-3zM3 39h3v3h-3zM9 39h3v3h-3zM15 39h3v3h-3zM21 39h3v3h-3zM27 39h3v3h-3zM39 39h3v3h-3zM51 39h3v3h-3zM57 39h3v3h-3zM63 39h3v3h-3zM69 39h3v3h-3zM75 39h3v3h-3zM0 42h3v3h-3zM6 42h3v3h-3zM12 42h3v3h-3zM18 42h3v3h-3zM24 42h3v3h-3zM30 42h3v3h-3zM36 42h3v3h-3zM42 42h3v3h-3zM48 42h3v3h-3zM54 42h9v3h-9zM66 42h3v3h-3zM72 42h3v3h-3zM78 42h3v3h-3zM84 42h3v3h-3zM90 42h3v3h-3zM3 45h3v3h-3zM9 45h3v3h-3zM15 45h3v3h-3zM21 45h3v3h-3zM45 45h3v3h-3zM51 45h3v3h-3zM57 45h3v3h-3zM63 45h3v3h-3zM69 45h3v3h-3zM75 45h3v3h-3zM81 45h3v3h-3zM93 45h3v3h-3zM0 48h9v3h-9zM12 48h9v3h-9zM24 48h3v3h-3zM30 48h3v3h-3zM36 48h3v3h-3zM42 48h3v3h-3zM48 48h3v3h-3zM54 48h15v3h-15zM72 48h3v3h-3zM78 48h3v3h-3zM84 48h3v3h-3zM90 48h3v3h-3zM3 51h3v3h-3zM9 51h3v3h-3zM15 51h3v3h-3zM21 51h3v3h-3zM27 51h3v3h-3zM39 51h3v3h-3zM45 51h3v3h-3zM51 51h3v3h-3zM57 51h3v3h-3zM63 51h3v3h-3zM69 51h3v3h-3zM75 51h3v3h-3zM81 51h3v3h-3zM87 51h3v3h-3zM93 51h3v3h-3zM0 54h3v3h-3zM6 54h21v3h-21zM30 54h3v3h-3zM36 54h3v3h-3zM42 54h3v3h-3zM48 54h3v3h-3zM54 54h15v3h-15zM72 54h3v3h-3zM78 54h3v3h-3zM84 54h3v3h-3zM90 54h3v3h-3zM3 57h3v3h-3zM9 57h3v3h-3zM15 57h3v3h-3zM21 57h3v3h-3zM27 57h3v3h-3zM33 57h3v3h-3zM39 57h3v3h-3zM45 57h3v3h-3zM51 57h3v3h-3zM57 57h3v3h-3zM63 57h3v3h-3zM69 57h3v3h-3zM75 57h3v3h-3zM81 57h3v3h-3zM93 57h3v3h-3zM0 60h33v3h-33zM36 60h9v3h-9zM48 60h21v3h-21zM72 60h9v3h-9zM84 60h3v3h-3zM90 60h3v3h-3zM3 63h3v3h-3zM9 63h3v3h-3zM15 63h3v3h-3zM21 63h3v3h-3zM27 63h3v3h-3zM33 63h3v3h-3zM39 63h3v3h-3zM45 63h3v3h-3zM51 63h3v3h-3zM57 63h9v3h-9zM69 63h3v3h-3zM75 63h3v3h-3zM81 63h3v3h-3zM87 63h3v3h-3zM93 63h3v3h-3zM0 66h27v3h-27zM30 66h3v3h-3zM36 66h3v3h-3zM42 66h9v3h-9zM54 66h21v3h-21zM78 66h3v3h-3zM84 66h3v3h-3zM90 66h6v3h-6zM3 69h3v3h-3zM9 69h3v3h-3zM15 69h9v3h-9zM27 69h3v3h-3zM33 69h3v3h-3zM39 69h3v3h-3zM45 69h3v3h-3zM51 69h9v3h-9zM63 69h3v3h-3zM69 69h3v3h-3zM75 69h3v3h-3zM81 69h3v3h-3zM87 69h3v3h-3zM93 69h3v3h-3zM0 72h33v3h-33zM36 72h45v3h-45zM84 72h12v3h-12zM0 75h6v3h-6zM9 75h21v3h-21zM33 75h3v3h-3zM39 75h3v3h-3zM45 75h3v3h-3zM51 75h15v3h-15zM69 75h3v3h-3zM75 75h3v3h-3zM81 75h3v3h-3zM87 75h3v3h-3zM93 75h3v3h-3zM0 78h87v3h-87zM90 78h6v3h-6zM3 81h9v3h-9zM15 81h9v3h-9zM27 81h3v3h-3zM33 81h3v3h-3zM39 81h3v3h-3zM45 81h3v3h-3zM51 81h21v3h-21zM75 81h3v3h-3zM81 81h3v3h-3zM87 81h3v3h-3zM93 81h3v3h-3zM0 84h96v3h-96zM0 87h30v3h-30zM33 87h9v3h-9zM45 87h33v3h-33zM81 87h3v3h-3zM87 87h3v3h-3zM93 87h3v3h-3zM0 90h96v3h-96zM0 93h30v3h-30zM33 93h3v3h-3zM39 93h9v3h-9zM51 93h21v3h-21zM75 93h9v3h-9zM87 93h3v3h-3zM93 93h3v3h-3z'/%3E%3C/svg%3E");
    --px-dissolve-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h96v3h-96zM0 3h30v3h-30zM33 3h9v3h-9zM45 3h39v3h-39zM87 3h3v3h-3zM93 3h3v3h-3zM0 6h87v3h-87zM90 6h6v3h-6zM3 9h21v3h-21zM27 9h3v3h-3zM33 9h3v3h-3zM39 9h3v3h-3zM45 9h3v3h-3zM51 9h21v3h-21zM75 9h9v3h-9zM87 9h3v3h-3zM93 9h3v3h-3zM0 12h96v3h-96zM0 15h30v3h-30zM33 15h3v3h-3zM39 15h3v3h-3zM45 15h3v3h-3zM51 15h15v3h-15zM69 15h9v3h-9zM81 15h3v3h-3zM87 15h3v3h-3zM93 15h3v3h-3zM0 18h27v3h-27zM30 18h57v3h-57zM90 18h6v3h-6zM3 21h9v3h-9zM15 21h9v3h-9zM27 21h3v3h-3zM33 21h3v3h-3zM39 21h3v3h-3zM45 21h3v3h-3zM51 21h15v3h-15zM69 21h3v3h-3zM75 21h3v3h-3zM81 21h3v3h-3zM87 21h3v3h-3zM93 21h3v3h-3zM0 24h33v3h-33zM36 24h9v3h-9zM48 24h33v3h-33zM84 24h3v3h-3zM90 24h6v3h-6zM3 27h3v3h-3zM9 27h9v3h-9zM21 27h3v3h-3zM27 27h3v3h-3zM33 27h3v3h-3zM39 27h3v3h-3zM45 27h3v3h-3zM51 27h3v3h-3zM57 27h9v3h-9zM69 27h3v3h-3zM75 27h3v3h-3zM81 27h3v3h-3zM87 27h3v3h-3zM93 27h3v3h-3zM0 30h27v3h-27zM30 30h3v3h-3zM36 30h3v3h-3zM42 30h3v3h-3zM48 30h3v3h-3zM54 30h21v3h-21zM78 30h3v3h-3zM84 30h3v3h-3zM90 30h6v3h-6zM3 33h3v3h-3zM9 33h3v3h-3zM15 33h3v3h-3zM21 33h3v3h-3zM27 33h3v3h-3zM33 33h3v3h-3zM39 33h3v3h-3zM45 33h3v3h-3zM51 33h3v3h-3zM57 33h3v3h-3zM63 33h3v3h-3zM69 33h3v3h-3zM75 33h3v3h-3zM81 33h3v3h-3zM93 33h3v3h-3zM0 36h27v3h-27zM30 36h3v3h-3zM36 36h9v3h-9zM48 36h21v3h-21zM72 36h9v3h-9zM84 36h3v3h-3zM90 36h3v3h-3zM3 39h3v3h-3zM9 39h3v3h-3zM15 39h3v3h-3zM21 39h3v3h-3zM27 39h3v3h-3zM39 39h3v3h-3zM45 39h3v3h-3zM51 39h3v3h-3zM57 39h9v3h-9zM69 39h3v3h-3zM75 39h3v3h-3zM81 39h3v3h-3zM87 39h3v3h-3zM93 39h3v3h-3zM0 42h3v3h-3zM6 42h9v3h-9zM18 42h9v3h-9zM30 42h3v3h-3zM36 42h3v3h-3zM42 42h3v3h-3zM48 42h3v3h-3zM54 42h9v3h-9zM66 42h3v3h-3zM72 42h3v3h-3zM78 42h3v3h-3zM84 42h3v3h-3zM90 42h3v3h-3zM3 45h3v3h-3zM9 45h3v3h-3zM15 45h3v3h-3zM21 45h3v3h-3zM45 45h3v3h-3zM51 45h3v3h-3zM57 45h3v3h-3zM63 45h3v3h-3zM69 45h3v3h-3zM75 45h3v3h-3zM81 45h3v3h-3zM93 45h3v3h-3zM0 48h9v3h-9zM12 48h9v3h-9zM24 48h3v3h-3zM30 48h3v3h-3zM36 48h3v3h-3zM42 48h3v3h-3zM48 48h3v3h-3zM54 48h15v3h-15zM72 48h3v3h-3zM78 48h3v3h-3zM84 48h3v3h-3zM90 48h3v3h-3zM3 51h3v3h-3zM9 51h3v3h-3zM15 51h3v3h-3zM21 51h3v3h-3zM27 51h3v3h-3zM39 51h3v3h-3zM51 51h3v3h-3zM57 51h3v3h-3zM63 51h3v3h-3zM69 51h3v3h-3zM75 51h3v3h-3zM93 51h3v3h-3zM0 54h3v3h-3zM6 54h3v3h-3zM12 54h3v3h-3zM18 54h3v3h-3zM24 54h3v3h-3zM30 54h3v3h-3zM36 54h3v3h-3zM42 54h3v3h-3zM48 54h3v3h-3zM54 54h9v3h-9zM66 54h3v3h-3zM72 54h3v3h-3zM78 54h3v3h-3zM84 54h3v3h-3zM90 54h3v3h-3zM3 57h3v3h-3zM9 57h3v3h-3zM15 57h3v3h-3zM21 57h3v3h-3zM57 57h3v3h-3zM63 57h3v3h-3zM69 57h3v3h-3zM93 57h3v3h-3zM0 60h3v3h-3zM6 60h3v3h-3zM12 60h3v3h-3zM18 60h3v3h-3zM24 60h3v3h-3zM30 60h3v3h-3zM36 60h3v3h-3zM42 60h3v3h-3zM48 60h3v3h-3zM54 60h3v3h-3zM60 60h3v3h-3zM66 60h3v3h-3zM72 60h3v3h-3zM78 60h3v3h-3zM84 60h3v3h-3zM90 60h3v3h-3zM3 63h3v3h-3zM9 63h3v3h-3zM15 63h3v3h-3zM21 63h3v3h-3zM51 63h3v3h-3zM57 63h3v3h-3zM63 63h3v3h-3zM75 63h3v3h-3zM0 66h3v3h-3zM6 66h3v3h-3zM12 66h3v3h-3zM18 66h3v3h-3zM24 66h3v3h-3zM30 66h3v3h-3zM42 66h3v3h-3zM48 66h3v3h-3zM54 66h3v3h-3zM60 66h3v3h-3zM66 66h3v3h-3zM72 66h3v3h-3zM78 66h3v3h-3zM90 66h3v3h-3zM9 69h3v3h-3zM21 69h3v3h-3zM57 69h3v3h-3zM0 72h3v3h-3zM6 72h3v3h-3zM12 72h3v3h-3zM18 72h3v3h-3zM24 72h3v3h-3zM36 72h3v3h-3zM42 72h3v3h-3zM48 72h3v3h-3zM54 72h3v3h-3zM60 72h3v3h-3zM66 72h3v3h-3zM72 72h3v3h-3zM78 72h3v3h-3zM84 72h3v3h-3zM3 75h3v3h-3zM15 75h3v3h-3zM57 75h3v3h-3zM63 75h3v3h-3zM0 78h3v3h-3zM6 78h3v3h-3zM12 78h3v3h-3zM18 78h3v3h-3zM42 78h3v3h-3zM54 78h3v3h-3zM60 78h3v3h-3zM66 78h3v3h-3zM78 78h3v3h-3zM57 81h3v3h-3zM0 84h3v3h-3zM6 84h3v3h-3zM12 84h3v3h-3zM18 84h3v3h-3zM24 84h3v3h-3zM48 84h3v3h-3zM54 84h3v3h-3zM60 84h3v3h-3zM66 84h3v3h-3zM72 84h3v3h-3zM6 90h3v3h-3zM18 90h3v3h-3zM54 90h3v3h-3zM60 90h3v3h-3zM66 90h3v3h-3z'/%3E%3C/svg%3E");
    --px-notch: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
    --px-notch-sm: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
}

.px-screen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--px-black);
    -webkit-mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 190px) no-repeat,
        var(--px-dissolve-bottom) bottom left / 96px 96px repeat-x;
    mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 190px) no-repeat,
        var(--px-dissolve-bottom) bottom left / 96px 96px repeat-x;
}

/* runs on under the next slide's dithered top edge, so two dark slides meet
   black-to-colour instead of through a strip of page */
.px-screen--into-next {
    bottom: -96px;
    -webkit-mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) left 94px / 100% 100% no-repeat;
    mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) left 94px / 100% 100% no-repeat;
}

/* ==========================================================================
   SLIDE 04 — THE ARENA: ONE QUESTION, TWO CAMERAS, YOUR VOTE
   The versus screen had a fighting-game HUD, two health bars, a clock, view
   counts and a lightning bolt, all saying the same thing at once. Now it is
   one question, the logo's camera on each side with its take, and a vote
   that works: pick a side and the split moves, while the room keeps voting.
   Logo colours only: the side you are for is solid ice, the other side is
   the same ice in dither, the way the logo's screen draws.
   ========================================================================== */
#debates {
    --ar-dim: #9AA7BD;
    --ar-faint: #5F6B82;
    --ar-dither: repeating-conic-gradient(var(--px-ice) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    background: transparent !important;
    padding: 148px 48px !important;
    color: var(--px-ice);
}

#debates .section__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#debates .section__header {
    margin-bottom: 0 !important;
    text-align: center;
}

#debates .section__label {
    margin-bottom: 22px;
    font: 600 12px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: var(--ar-dim);
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

#debates .section__title {
    margin: 0;
    font: 400 50px/1.05 var(--px-font);
    letter-spacing: 0.01em;
    color: var(--px-ice);
}

#debates .ar-lede {
    max-width: 46ch;
    margin: 18px auto 0;
    font: 500 17px/1.6 var(--font-sans);
    color: var(--ar-dim);
}

#debates .ar {
    margin-top: 56px;
}

/* the question */
#debates .ar-q {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
    font: 400 34px/1.2 var(--px-font);
    color: var(--px-ice);
}

#debates .ar-q span {
    display: block;
    margin-bottom: 14px;
    font: 600 11px/1 var(--font-tech);
    letter-spacing: 0.2em;
    color: var(--ar-faint);
}

/* the two sides */
#debates .ar-sides {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 24px;
    margin-top: 46px;
}

#debates .ar-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

#debates .ar-say {
    position: relative;
    max-width: 300px;
    margin: 0 0 22px;
    padding: 14px 16px 16px;
    font: 400 19px/1.25 var(--px-font);
    color: var(--px-black);
    background: var(--px-ice);
    clip-path: var(--px-notch);
}

#debates .ar-say span {
    display: block;
    margin-bottom: 8px;
    font: 700 10px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: #3A4252;
}

/* the dithered twin: same ice, drawn in pixels */
#debates .ar-side--against .ar-say {
    color: var(--px-ice);
    background: #0E1017;
    box-shadow: inset 0 0 0 2px var(--px-ice);
}

#debates .ar-side--against .ar-say span {
    color: var(--ar-dim);
}

#debates .ar-cam {
    width: 230px;
    height: 230px;
    object-fit: contain;
    display: block;
    /* the light theme inverts logo.png for light backgrounds; this stage is black */
    filter: none;
    transition: filter .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
    animation: ar-bob 3.2s steps(2, end) infinite;
    animation-play-state: paused;
}

#debates .ar-side--for .ar-cam {
    /* the logo looks left; this one faces its opponent */
    transform: scaleX(-1);
}

#debates.is-inview .ar-cam {
    animation-play-state: running;
}

#debates .ar-side--against .ar-cam {
    animation-delay: -1.6s;
}

@keyframes ar-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

#debates .ar-vs {
    align-self: center;
    margin-bottom: 70px;
    font: 400 64px/1 var(--px-font);
    color: var(--px-ice);
}

#debates .ar-vote {
    margin-top: 22px;
    min-width: 200px;
    padding: 14px 22px 13px;
    font: 400 19px/1 var(--px-font);
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 0;
    clip-path: var(--px-notch);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

#debates .ar-side--for .ar-vote {
    color: var(--px-black);
    background: var(--px-ice);
}

#debates .ar-side--against .ar-vote {
    color: var(--px-ice);
    background: #0E1017;
    box-shadow: inset 0 0 0 2px var(--px-ice);
}

#debates .ar-vote:hover,
#debates .ar-vote:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

#debates .ar-vote:focus-visible {
    box-shadow: 0 0 0 3px var(--px-black), 0 0 0 5px var(--px-ice);
}

/* after a vote: your side lifts and glows, the other steps back */
#debates .ar.is-voted .ar-side {
    opacity: .55;
}

#debates .ar.is-voted .ar-side.is-picked {
    opacity: 1;
    transform: translateY(-6px);
}

#debates .ar-side.is-picked .ar-cam {
    filter: drop-shadow(0 0 22px rgba(218, 230, 247, .45));
}

#debates .ar-side.is-picked .ar-vote::before {
    content: '✓ ';
}

/* the split */
#debates .ar-result {
    max-width: 820px;
    margin: 44px auto 0;
}

#debates .ar-bar {
    display: flex;
    gap: 4px;
    height: 20px;
}

#debates .ar-bar i {
    display: block;
    height: 100%;
    transition: flex-grow .9s cubic-bezier(.2, .8, .2, 1);
}

#debates .ar-bar__for {
    flex: 57 1 0;
    background: var(--px-ice);
}

#debates .ar-bar__against {
    flex: 43 1 0;
    background: var(--ar-dither);
    box-shadow: inset 0 0 0 2px var(--px-ice);
}

#debates .ar-nums {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

#debates .ar-nums b {
    font: 900 30px/1 var(--font-lcd);
    color: var(--px-ice);
    font-variant-numeric: tabular-nums;
}

#debates .ar-nums span {
    font: 600 11px/1.5 var(--font-tech);
    letter-spacing: 0.14em;
    text-align: center;
    color: var(--ar-dim);
}

@media (prefers-reduced-motion: reduce) {
    #debates .ar-cam { animation: none; }
    #debates .ar-bar i,
    #debates .ar-side,
    #debates .ar-cam { transition: none; }
}

@media (max-width: 760px) {
    #debates { padding: 132px 16px 124px !important; }

    #debates .section__title { font-size: 40px !important; line-height: 1 !important; }
    #debates .section__label { font-size: 11px !important; letter-spacing: 0.14em !important; }
    #debates .ar-lede { font-size: 15px; }

    #debates .ar { margin-top: 40px; }
    #debates .ar-q { font-size: 24px; }

    #debates .ar-sides {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 30px;
    }

    #debates .ar-vs { display: none; }
    #debates .ar-say { font-size: 15px; padding: 12px 12px 14px; }
    #debates .ar-cam { width: 120px; height: 120px; }
    #debates .ar-vote { min-width: 0; width: 100%; font-size: 16px; padding: 13px 10px 12px; }
    #debates .ar-nums b { font-size: 24px; }
}


/* ==========================================================================
   SLIDE 06 — GLOBAL NETWORK
   Was a canvas globe with two stat pills and two generic prose boxes. Now an
   operations board: the globe framed as an instrument with called-out
   clusters, a live readout strip, a ranked region chart and a cross-border
   reply feed.
   ========================================================================== */
.gnet__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(24px, 3vw, 38px);
}

.gnet__eyebrow-tag,
.gnet__eyebrow-meta {
    font-family: var(--font-tech);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.gnet__eyebrow-tag { color: var(--brand-600); }
[data-theme="dark"] .gnet__eyebrow-tag { color: var(--brand-300); }

.gnet__eyebrow-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-tertiary);
}

.gnet__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    animation: gnet-pulse 2s ease-in-out infinite;
    animation-play-state: paused;
}

.gnet.is-inview .gnet__pulse,
.gnet.is-inview .gnet__pin i,
.gnet.is-inview .gnet__region-bar i { animation-play-state: running; }

@keyframes gnet-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(.7); }
}

.gnet__eyebrow-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent 85%);
}

.gnet__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.gnet .section__title { margin: 0 !important; text-align: left !important; }

.gnet__lede {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 46ch;
}

/* ---------- layout ---------- */
.gnet__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 46px);
    align-items: start;
}

/* ---------- the map ---------- */
.gnet__map-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 460px;
    background:
        radial-gradient(circle at 50% 45%, rgba(218, 230, 247, 0.38), transparent 62%),
        rgba(218, 230, 247, 0.13);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.22);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    overflow: hidden;
}

[data-theme="dark"] .gnet__map-frame {
    background:
        radial-gradient(circle at 50% 45%, rgba(218, 230, 247, 0.14), transparent 62%),
        rgba(216, 231, 250, 0.03);
    box-shadow: inset 0 0 0 1px rgba(216, 231, 250, 0.14);
}

/* the existing globe canvas, re-seated inside the frame */
.gnet__canvas {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 96% !important;
    height: 96% !important;
    opacity: 1 !important;
    z-index: 0 !important;
}

.gnet__corner {
    position: absolute;
    width: 13px;
    height: 13px;
    z-index: 3;
    border-color: var(--brand-500);
    opacity: .8;
    pointer-events: none;
}

.gnet__corner--tl { top: 9px; left: 9px; border-top: 2px solid; border-left: 2px solid; }
.gnet__corner--br { bottom: 9px; right: 9px; border-bottom: 2px solid; border-right: 2px solid; }

.gnet__map-hud {
    position: absolute;
    top: 14px;
    left: 30px;
    right: 30px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    pointer-events: none;
}

.gnet__map-tag { color: var(--brand-600); }
[data-theme="dark"] .gnet__map-tag { color: var(--brand-300); }
.gnet__map-coord { color: var(--text-tertiary); }

/* cluster pins */
.gnet__pin {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px 4px 7px;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    background: var(--bg-elevated);
    box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.35);
    font-family: var(--font-tech);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--brand-600);
    white-space: nowrap;
    pointer-events: none;
}

[data-theme="dark"] .gnet__pin {
    background: #131418;
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.32);
    color: var(--brand-300);
}

.gnet__pin i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-500);
    animation: gnet-pulse 2.4s ease-in-out infinite;
    animation-play-state: paused;
}

.gnet__pin--2 i { animation-delay: .5s; }
.gnet__pin--3 i { animation-delay: 1s; }

.gnet__pin--1 { top: 26%; left: 12%; }
.gnet__pin--2 { bottom: 28%; left: 20%; }
.gnet__pin--3 { top: 40%; right: 10%; }

/* readout strip under the map */
.gnet__readout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
    border-top: 1px solid var(--border);
}

.gnet__readout-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 12px;
}

.gnet__readout-item + .gnet__readout-item { border-left: 1px solid var(--border); }

.gnet__readout-item b {
    font-family: var(--font-lcd);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.gnet__readout-item i {
    font-style: normal;
    font-family: var(--font-tech);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: var(--text-tertiary);
}

/* ---------- the board ---------- */
.gnet__board {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.gnet__board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.gnet__board-title,
.gnet__board-now {
    font-family: var(--font-tech);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.19em;
}

.gnet__board-title { color: var(--text-secondary); }
.gnet__board-now { color: var(--brand-600); }
[data-theme="dark"] .gnet__board-now { color: var(--brand-300); }

.gnet__regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.gnet__region {
    display: grid;
    grid-template-columns: 26px 78px 1fr 40px;
    align-items: center;
    gap: 12px;
}

.gnet__region-rank {
    font-family: var(--font-lcd);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-500);
    opacity: .5;
}

.gnet__region-name,
.gnet__region-val {
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}

.gnet__region-val { text-align: right; color: var(--text-primary); }

.gnet__region-bar {
    display: block;
    height: 7px;
    background: var(--border);
    overflow: hidden;
}

.gnet__region-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-alt));
    transform-origin: left;
    animation: gnet-grow 1.6s var(--ease-out-expo) both;
    animation-play-state: paused;
}

.gnet__region:nth-child(2) .gnet__region-bar i { animation-delay: .08s; }
.gnet__region:nth-child(3) .gnet__region-bar i { animation-delay: .16s; }
.gnet__region:nth-child(4) .gnet__region-bar i { animation-delay: .24s; }
.gnet__region:nth-child(5) .gnet__region-bar i { animation-delay: .32s; }

@keyframes gnet-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cross-border feed */
.gnet__feed {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.gnet__feed-title {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-tech);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--brand-600);
}

[data-theme="dark"] .gnet__feed-title { color: var(--brand-300); }

.gnet__feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.gnet__feed-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

.gnet__feed-list em { font-style: normal; }
.gnet__feed-list i { font-style: normal; margin-left: auto; color: var(--text-tertiary); }

.gnet__arrow {
    flex: none;
    width: 26px;
    height: 1px;
    position: relative;
    background: var(--brand-500);
    opacity: .6;
}

.gnet__arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2.5px;
    border-left: 5px solid var(--brand-500);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.gnet__note {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-tertiary);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 1080px) {
    .gnet__head,
    .gnet__grid { grid-template-columns: minmax(0, 1fr); }
    .gnet__head { align-items: start; gap: 18px; }
    .gnet__map-frame { max-height: 400px; margin: 0 auto; width: 100%; }
}

@media (max-width: 760px) {
    .gnet__eyebrow-meta { display: none; }
    .gnet__readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gnet__readout-item:nth-child(3) { border-left: 0; }
    .gnet__readout-item:nth-child(n+3) { border-top: 1px solid var(--border); }
    .gnet__pin--1, .gnet__pin--2, .gnet__pin--3 { display: none; }
    .gnet__region { grid-template-columns: 22px 66px 1fr 34px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .gnet__pulse, .gnet__pin i, .gnet__region-bar i { animation: none !important; }
}

/* ==========================================================================
   NO BACKDROP FILTERS
   Five were live. All five sit on elements whose own background is opaque or
   near-opaque, so the blur was invisible — but two of them (the sidebar and
   the header CTA) are position:fixed, which makes the compositor re-snapshot
   what is behind them on every scrolled frame. That is paid on every wheel
   tick for no pixels. (The fifth was slide 05's old glass card, since removed.)
   ========================================================================== */
.sidebar,
.header__link--cta,
.app-dl-btn,
.beta__card-inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* the waitlist card relied on the blur for legibility; make it solid instead */
.beta__card-inner {
    background: var(--bg-elevated) !important;
    box-shadow: inset 0 0 0 1px var(--border), 0 24px 60px rgba(18, 19, 23, 0.10) !important;
}

[data-theme="dark"] .beta__card-inner {
    background: #131418 !important;
    box-shadow: inset 0 0 0 1px rgba(216, 231, 250, 0.10), 0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   OVERLAY NAVIGATION  (.navx)
   One menu for every viewport: the trigger sits top-right at all
   widths, the panel wipes in over the page.
   ============================================================ */

.navx-trigger {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 30000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 14px;
    border: 1px solid rgb(var(--brand-rgb) / 0.45);
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--brand-ink);
    cursor: pointer;
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    line-height: 1;
    transition: border-color .3s ease, background .3s ease, color .3s ease, transform .2s ease;
}

.navx-trigger::after {
    /* corner tick, picks up the HUD language used across the page */
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, transparent 50%, var(--brand-500) 50%);
    pointer-events: none;
}

.navx-trigger:hover {
    border-color: var(--brand-500);
    background: #fff;
}

.navx-trigger:active {
    transform: scale(0.96);
}

.navx-trigger__bars {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
    flex: none;
}

.navx-trigger__bars i {
    position: absolute;
    left: 0;
    display: block;
    height: 1.5px;
    width: 100%;
    background: currentColor;
    transition: transform .35s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)), opacity .2s ease, width .35s ease;
}

.navx-trigger__bars i:nth-child(1) { top: 0; }
.navx-trigger__bars i:nth-child(2) { top: 5px; width: 12px; }
.navx-trigger__bars i:nth-child(3) { top: 10px; }

.navx-trigger.is-active .navx-trigger__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navx-trigger.is-active .navx-trigger__bars i:nth-child(2) { opacity: 0; width: 0; }
.navx-trigger.is-active .navx-trigger__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.navx-trigger__label {
    font-weight: 600;
}

[data-theme="dark"] .navx-trigger {
    background: rgba(7, 8, 12, 0.82);
    color: #E8F0FB;
    border-color: rgba(218, 230, 247, 0.45);
}

[data-theme="dark"] .navx-trigger:hover {
    background: rgba(7, 8, 12, 0.96);
    border-color: var(--brand-400);
}

/* --- overlay shell --- */

.navx {
    position: fixed;
    inset: 0;
    z-index: 29000;
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .5s;
}

.navx.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.navx__scrim {
    position: absolute;
    inset: 0;
    background: rgba(11, 12, 16, 0.55);
    opacity: 0;
    transition: opacity .35s ease;
}

.navx.is-open .navx__scrim {
    opacity: 1;
}

.navx__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F4F8FE;
    color: var(--brand-ink);
    transform: translate3d(0, -100%, 0);
    will-change: transform;
    transition: transform .5s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
}

.navx.is-open .navx__panel {
    transform: translate3d(0, 0, 0);
}

[data-theme="dark"] .navx__panel {
    background: #0D0E12;
    color: #EAF2FD;
}

/* the menu keeps the page's light, falling from the same corner */
.navx__light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(62% 58% at 14% 0%, rgba(218, 230, 247, 0.58), transparent 72%),
        radial-gradient(48% 52% at 94% 100%, rgba(218, 230, 247, 0.42), transparent 72%);
}

[data-theme="dark"] .navx__light {
    background:
        radial-gradient(62% 58% at 14% 0%, rgba(218, 230, 247, 0.18), transparent 72%),
        radial-gradient(48% 52% at 94% 100%, rgba(218, 230, 247, 0.15), transparent 72%);
}

.navx__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(20px, 4vw, 56px);
    border-bottom: 1px solid rgb(var(--brand-rgb) / 0.18);
}

[data-theme="dark"] .navx__bar {
    border-bottom-color: rgba(218, 230, 247, 0.2);
}

.navx__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-tech), monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.navx__brand-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--brand-500);
    color: var(--brand-on);
    font-family: var(--font-display), sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.navx__brand em {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--brand-500);
    opacity: .85;
}

.navx__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* keeps clear of the fixed trigger that overlaps this row */
    margin-right: clamp(96px, 12vw, 128px);
    font-family: var(--font-tech), monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    opacity: .55;
}

.navx__status i {
    width: 6px;
    height: 6px;
    background: var(--brand-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.16);
}

.navx__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgb(var(--brand-rgb) / 0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.navx__close svg {
    width: 15px;
    height: 15px;
}

.navx__close:hover {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: var(--brand-on);
}

.navx__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(24px, 5vw, 72px);
    padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- links --- */

.navx__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.navx__item {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    padding: clamp(8px, 1.4vh, 16px) 14px;
    border-top: 1px solid rgb(var(--brand-rgb) / 0.14);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transform: translateY(18px);
    transition: color .25s ease, background .35s ease;
}

.navx__item:last-child {
    border-bottom: 1px solid rgb(var(--brand-rgb) / 0.14);
}

[data-theme="dark"] .navx__item {
    border-top-color: rgba(218, 230, 247, 0.16);
}

[data-theme="dark"] .navx__item:last-child {
    border-bottom-color: rgba(218, 230, 247, 0.16);
}

.navx.is-open .navx__item {
    animation: navxItemIn .55s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) forwards;
}

.navx.is-open .navx__item:nth-child(1) { animation-delay: .18s; }
.navx.is-open .navx__item:nth-child(2) { animation-delay: .23s; }
.navx.is-open .navx__item:nth-child(3) { animation-delay: .28s; }
.navx.is-open .navx__item:nth-child(4) { animation-delay: .33s; }
.navx.is-open .navx__item:nth-child(5) { animation-delay: .38s; }
.navx.is-open .navx__item:nth-child(6) { animation-delay: .43s; }
.navx.is-open .navx__item:nth-child(7) { animation-delay: .48s; }
.navx.is-open .navx__item:nth-child(8) { animation-delay: .53s; }

@keyframes navxItemIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navx__item::before {
    /* the blue wash that fills from the left on hover */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.14), rgba(47, 128, 232, 0));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
    pointer-events: none;
}

.navx__item:hover::before,
.navx__item:focus-visible::before {
    transform: scaleX(1);
}

.navx__item-num {
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--brand-500);
}

.navx__item-text {
    font-family: var(--font-display), sans-serif;
    font-size: clamp(26px, 4.4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.02;
    text-transform: uppercase;
    transition: transform .35s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
}

.navx__item:hover .navx__item-text,
.navx__item:focus-visible .navx__item-text {
    transform: translateX(10px);
    color: var(--brand-600);
}

[data-theme="dark"] .navx__item:hover .navx__item-text,
[data-theme="dark"] .navx__item:focus-visible .navx__item-text {
    color: var(--brand-300);
}

.navx__item-arrow {
    position: relative;
    justify-self: end;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .3s ease, transform .35s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
}

.navx__item-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.navx__item:hover .navx__item-arrow,
.navx__item:focus-visible .navx__item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand-500);
}

.navx__item.is-current .navx__item-num {
    color: var(--brand-on);
    background: var(--brand-500);
    padding: 3px 6px;
    justify-self: start;
}

/* --- side column --- */

.navx__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-left: clamp(0px, 2vw, 28px);
    border-left: 1px solid rgb(var(--brand-rgb) / 0.14);
}

[data-theme="dark"] .navx__side {
    border-left-color: rgba(218, 230, 247, 0.16);
}

.navx__side-tag {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-tech), monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--brand-500);
}

.navx__side-block p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    opacity: .78;
}

.navx__theme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid rgb(var(--brand-rgb) / 0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: background .25s ease, border-color .25s ease;
}

.navx__theme:hover {
    border-color: var(--brand-500);
    background: rgb(var(--brand-rgb) / 0.1);
}

.navx__theme-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--brand-500);
}

.navx__theme-icon svg {
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
}

[data-theme="dark"] .navx__theme-sun { display: none; }
[data-theme="light"] .navx__theme-moon { display: none; }

.navx__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--brand-500);
    color: var(--brand-on);
    text-decoration: none;
    font-family: var(--font-tech), monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background .25s ease, transform .25s ease;
}

.navx__cta span {
    width: 20px;
    height: 1.5px;
    background: currentColor;
    position: relative;
}

.navx__cta span::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.navx__cta:hover {
    background: var(--brand-600);
    transform: translateY(-2px);
}

.navx__side-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 6px;
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
}

.navx__side-foot a {
    color: inherit;
    opacity: .6;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
}

.navx__side-foot a:hover {
    opacity: 1;
    color: var(--brand-500);
}

/* --- narrow screens --- */

@media (max-width: 900px) {
    .navx__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        align-content: start;
    }

    .navx__nav {
        justify-content: flex-start;
    }

    .navx__side {
        justify-content: flex-start;
        padding-left: 0;
        padding-top: 22px;
        border-left: none;
        border-top: 1px solid rgb(var(--brand-rgb) / 0.14);
    }

    [data-theme="dark"] .navx__side {
        border-top-color: rgba(218, 230, 247, 0.16);
    }
}

@media (max-width: 600px) {
    .navx-trigger {
        top: 16px;
        right: 16px;
        height: 42px;
        padding: 0 13px 0 12px;
    }

    .navx-trigger__label {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .navx__item {
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        padding: 12px 6px;
    }

    .navx__item-text {
        font-size: 24px;
    }

    /* no hover on touch, so keep the arrow quietly visible */
    .navx__item-arrow {
        opacity: .35;
        transform: translateX(0);
    }

    .navx__side-block p {
        font-size: 13px;
    }
}

@media (max-height: 700px) and (min-width: 901px) {
    .navx__item-text {
        font-size: clamp(22px, 3vw, 34px);
    }
}

html.navx-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .navx,
    .navx__scrim,
    .navx__panel,
    .navx__item,
    .navx__item-text,
    .navx__item-arrow {
        transition-duration: .01ms !important;
    }

    .navx.is-open .navx__item {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
    }
}

/* trigger blends into the panel once the menu is open */
.navx-trigger.is-active {
    background: transparent;
    border-color: rgb(var(--brand-rgb) / 0.35);
    color: var(--brand-ink);
}

[data-theme="dark"] .navx-trigger.is-active {
    background: transparent;
    border-color: rgba(218, 230, 247, 0.35);
    color: #EAF2FD;
}

.navx__brand em {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .navx__status {
        display: none;
    }
}

@media (max-width: 420px) {
    .navx__brand {
        font-size: 11px;
        letter-spacing: 0.16em;
    }
}

/* the fixed MENU trigger owns the top-right corner on phones, so the
   floating waitlist CTA stacks underneath it instead of colliding */
@media (max-width: 768px) {
    .top-nav {
        top: 72px !important;
        right: 16px !important;
    }
}

/* === FIXED BRAND MARK === */
.brandmark {
    position: fixed;
    top: 22px;
    left: 24px;
    z-index: 30000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 10px;
    border: 1px solid rgb(var(--brand-rgb) / 0.28);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: rgba(255, 255, 255, 0.82);
    color: var(--brand-ink);
    text-decoration: none;
    font-family: var(--font-tech), monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    transition: border-color .3s ease, background .3s ease, opacity .25s ease;
}

.brandmark:hover {
    border-color: var(--brand-500);
    background: #fff;
}

.brandmark__mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--brand-500);
    color: var(--brand-on);
    font-family: var(--font-display), sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

[data-theme="dark"] .brandmark {
    background: rgba(7, 8, 12, 0.82);
    color: #E8F0FB;
    border-color: rgba(218, 230, 247, 0.3);
}

[data-theme="dark"] .brandmark:hover {
    background: rgba(7, 8, 12, 0.96);
    border-color: var(--brand-400);
}

/* the overlay carries its own brand row, so the fixed one steps aside */
html.navx-open .brandmark {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 600px) {
    .brandmark {
        top: 16px;
        left: 16px;
        height: 42px;
        padding: 0 12px 0 8px;
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .brandmark__word {
        display: none;
    }
}

/* ==========================================================================
   SHORT VIDEOS WITH A POINT
   The page used to open on a wordmark, a slogan and a screen recording, and
   carried on in robots and HUD read-outs; nothing on it looked like a video
   anyone would watch. The hero phone now plays a feed of short clips, each
   one a person explaining one useful thing and ending on its point, and
   section 01 lays those clips out as a reel.

   The reel is built from real frames in the app and from explainers filmed
   the way they really are, as screen recordings; clips.js builds it.
   ========================================================================== */

/* ==========================================================================
   HERO — the headline says what this is; the phone shows it
   ========================================================================== */
#hero .hx-brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 22px;
}

#hero .hx-brand b {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 22px/1 var(--px-font);
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

#hero .hx-brand b i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font: 700 16px/1 var(--px-font);
    font-style: normal;
    color: var(--brand-on);
    background: var(--brand-500);
    clip-path: var(--px-notch-sm);
}

#hero .hx-brand span {
    font: 600 10px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
}

#hero .hx-title {
    margin: 0 0 24px;
    font: 400 clamp(46px, 5.6vw, 92px)/0.98 var(--px-font);
    letter-spacing: 0.005em;
    color: var(--text-primary);
    text-transform: none;
    text-wrap: balance;
}

.hx-mark {
    display: inline-block;
    padding: 0.02em 0.16em 0.06em;
    margin-left: -0.04em;
    color: var(--brand-on);
    background: var(--brand-500);
    clip-path: var(--px-notch);
}

#hero .hero__lede {
    margin: 0 0 24px;
    max-width: 44ch;
    font-size: clamp(15px, 1.15vw, 17.5px);
    line-height: 1.6;
}

#hero .hero__lede strong {
    color: var(--text-primary);
    font-weight: 700;
}

#hero .hero__marks {
    margin-bottom: 30px;
}

#hero .hx-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

#hero .hx-join {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 24px;
    font: 400 19px/1 var(--px-font);
    letter-spacing: 0.02em;
    color: var(--brand-on);
    text-decoration: none;
    background: var(--brand-500);
    clip-path: var(--px-notch);
    transition: background .2s ease, transform .2s ease;
}

#hero .hx-join:hover,
#hero .hx-join:focus-visible {
    background: var(--brand-600);
    transform: translateY(-2px);
    outline: none;
}

#hero .hx-join svg {
    width: 18px;
    height: 12px;
}

#hero .app-downloads {
    margin-top: 0 !important;
    gap: 10px;
}

#hero .app-dl-btn {
    min-width: 0;
    height: 54px;
    padding: 0 16px !important;
}

/* ---------- the phone: a real clip from the app, alive ----------
   The clip is cut out of the original screen recording (no status bar, no
   letterbox, no Android buttons) and set in the app's own layout, drawn
   crisp: blurred light from the clip fills the screen around it, the
   counters move, the room reacts, somebody types a comment. The phone
   leans toward the cursor; real app screens fan out behind it. */
#hero .hero__phone-showcase {
    --tx: 0;
    --ty: 0;
}

#hero .hero__phone-glow {
    width: 440px;
    height: 560px;
    background: radial-gradient(ellipse, rgba(218, 230, 247, 1) 0%, rgba(218, 230, 247, 0.51) 42%, transparent 70%);
    filter: blur(50px);
    translate: calc(var(--tx) * 18px) calc(var(--ty) * 14px);
    transition: translate .8s cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] #hero .hero__phone-glow {
    background: radial-gradient(ellipse, rgba(218, 230, 247, 0.42) 0%, rgba(218, 230, 247, 0.2) 42%, transparent 70%);
}

#hero .hero__phone-frame {
    animation: hx-idle 7s ease-in-out infinite;
    transform: rotateY(calc(var(--tx) * 14deg)) rotateX(calc(var(--ty) * -10deg));
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    animation-play-state: paused;
}

#hero .hero__phone-showcase.is-inview .hero__phone-frame {
    animation-play-state: running;
}

@keyframes hx-idle {
    0%, 100% { translate: 0 0; rotate: y -4deg; }
    50% { translate: 0 -12px; rotate: y 4deg; }
}

/* a glossy sweep instead of the old scan line */
#hero .hero__phone-frame::after {
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    z-index: 6;
    border-radius: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-14deg);
    animation: hx-sheen 7.5s ease-in-out infinite;
}

@keyframes hx-sheen {
    0%, 72% { left: -80%; }
    100% { left: 140%; }
}

@media (min-width: 1025px) {
    #hero .hero__phone-frame {
        width: 300px;
        height: 624px;
    }
}

/* real app screens, fanned out behind the phone */
#hero .hero__clip-stack {
    translate: calc(var(--tx) * -14px) calc(var(--ty) * -10px);
    transition: translate .8s cubic-bezier(.2, .8, .2, 1);
}

#hero .hero__clip-stack-card {
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 36px;
    background: #121317;
    box-shadow: 0 24px 50px rgba(25, 26, 30, 0.18);
    opacity: 1;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] #hero .hero__clip-stack-card {
    border-color: #1A1B1F;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}

#hero .hero__clip-stack-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

#hero .hero__clip-stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(241, 245, 252, 0.28), rgba(241, 245, 252, 0.5));
}

[data-theme="dark"] #hero .hero__clip-stack-card::after {
    background: linear-gradient(180deg, rgba(8, 9, 13, 0.3), rgba(8, 9, 13, 0.55));
}

#hero .hero__clip-stack-card--1 {
    width: 232px;
    height: 494px;
    transform: translateX(-104px) rotate(-11deg);
}

#hero .hero__clip-stack-card--2 {
    width: 246px;
    height: 524px;
    transform: translateX(-58px) rotate(-5.5deg);
}

#hero .hero__clip-stack-card--3 {
    width: 240px;
    height: 510px;
    transform: translateX(78px) rotate(7deg);
}

#hero .hero__phone-showcase:hover .hero__clip-stack-card--1 { transform: translateX(-150px) rotate(-15deg); }
#hero .hero__phone-showcase:hover .hero__clip-stack-card--2 { transform: translateX(-92px) rotate(-8deg); }
#hero .hero__phone-showcase:hover .hero__clip-stack-card--3 { transform: translateX(118px) rotate(10deg); }

/* the floats lean with the phone, a little further out */
#hero .hero__float {
    translate: calc(var(--tx) * 26px) calc(var(--ty) * 18px);
    transition: translate .7s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}

#hero .hero__float--live {
    top: 52px;
    right: -74px;
}

#hero .hero__float--live b {
    min-width: 5ch;
}

#hero .hero__float--reply {
    top: 30%;
    left: -92px;
}

#hero .hero__float--verdict {
    right: -96px;
    bottom: 176px;
}

/* the reply and the scan come and go with the clip */
#hero .hero__float--reply,
#hero .hero__float--verdict {
    opacity: 0;
}

#hero .hero__float.is-on {
    opacity: 1;
}

#hero .hero__float--reply .hero__float-avatar {
    position: relative;
    opacity: 1;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-500));
}

#hero .hero__float--reply .hero__float-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #F43F5E;
    animation: hx-rec 1.4s ease-in-out infinite;
}

@keyframes hx-rec {
    0%, 100% { opacity: .9; transform: scale(1); }
    50% { opacity: .25; transform: scale(1.12); }
}

#hero .hero__float-meter span {
    width: calc(var(--scan, 0) * 1%);
    transition: width 1.6s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- the app screen ---------- */
#hero .phone__screen {
    background: #05070D;
}

.hx-app {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-sans);
    background: #05070D;
    -webkit-user-select: none;
    user-select: none;
}

/* light from the clip spills into the screen around it; the poster stands
   in until the video is drawing */
.hx-app__amb,
.hx-app__amb-img {
    position: absolute;
    inset: -30px;
    width: calc(100% + 60px);
    height: calc(100% + 60px);
    filter: blur(22px) saturate(1.5) brightness(.6);
}

.hx-app__amb-img {
    background-size: cover;
    background-position: center;
}

.hx-app__amb {
    opacity: 0;
    transition: opacity .6s ease;
}

.hx-app.is-live .hx-app__amb {
    opacity: 1;
}

.hx-app__top {
    position: relative;
    z-index: 2;
    padding: 13px 24px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.hx-app__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 700 11px/1 var(--font-sans);
}

.hx-app__status i {
    position: relative;
    width: 20px;
    height: 9px;
    border: 1.5px solid #fff;
    border-radius: 3px;
    opacity: .9;
}

.hx-app__status i::after {
    content: '';
    position: absolute;
    inset: 1px 5px 1px 1px;
    border-radius: 1px;
    background: #fff;
}

.hx-app__tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    font: 700 10px/1 var(--font-tech);
    letter-spacing: 0.14em;
}

.hx-app__tabs span {
    padding-bottom: 5px;
    opacity: .6;
}

.hx-app__tabs .is-on {
    opacity: 1;
    box-shadow: inset 0 -2px 0 #fff;
}

.hx-app__clip {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 596 / 638;
    margin: auto 0;
    overflow: hidden;
    background: #0F1014;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.hx-app__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hx-app__who {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 12.5px/1 var(--font-sans);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.hx-app__who i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #DCEBFF;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.hx-app__who i::before {
    content: '';
    margin-left: 2px;
    border-left: 8px solid var(--brand-500);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* the room reacts: a sparkle over the clip, the like button pops */
.hx-app__pop {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
    opacity: 0;
    pointer-events: none;
}

.hx-app__pop svg {
    width: 100%;
    height: 100%;
    fill: #fff;
    filter: drop-shadow(0 0 12px rgba(218, 230, 247, 0.95)) drop-shadow(0 0 2px var(--brand-ice));
}

.hx-app__pop.is-pop {
    animation: hx-pop .95s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes hx-pop {
    0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
    30% { opacity: 1; transform: scale(1.15) rotate(6deg); }
    55% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(1.05) translateY(-26px); }
}

.hx-app__under {
    position: relative;
    z-index: 2;
    padding: 12px 12px 12px;
    background: linear-gradient(180deg, rgba(3, 5, 10, 0), rgba(3, 5, 10, .72) 26%, rgba(3, 5, 10, .9));
}

.hx-app__cap {
    margin: 0 0 11px;
    font: 600 11.5px/1.35 var(--font-sans);
    color: rgba(255, 255, 255, .95);
}

.hx-app__cap b {
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
}

.hx-app__row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hx-app__act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 30px;
}

.hx-app__act svg {
    width: 19px;
    height: 19px;
    fill: #fff;
}

.hx-app__act i {
    font: 600 8px/1 var(--font-sans);
    font-style: normal;
    opacity: .8;
}

.hx-app__act b {
    font: 700 8.5px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
}

.hx-app__act--like {
    position: relative;
}

.hx-app__act--like.is-pop svg {
    fill: var(--brand-ice);
    animation: hx-like .6s cubic-bezier(.3, 1.8, .5, 1);
}

@keyframes hx-like {
    0% { transform: scale(.5); }
    100% { transform: scale(1); }
}

/* six sparks fly off the like button */
.hx-app__act--like::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 9px;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    opacity: 0;
    color: var(--brand-ice);
    box-shadow: 0 -14px, 12px -7px, 12px 7px, 0 14px, -12px 7px, -12px -7px;
}

.hx-app__act--like.is-pop::after {
    animation: hx-sparks .6s ease-out;
}

@keyframes hx-sparks {
    0% { opacity: 1; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.5); }
}

.hx-app__input {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 0 11px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.hx-app__input em {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font: 500 10.5px/1 var(--font-sans);
    font-style: normal;
    color: rgba(255, 255, 255, .55);
}

.hx-app__input.is-typing em {
    color: #fff;
}

.hx-app__input.is-typing em::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-left: 1px;
    vertical-align: -1px;
    background: #fff;
    animation: hx-caret .8s steps(1, end) infinite;
}

@keyframes hx-caret {
    50% { opacity: 0; }
}

.hx-app__input.is-sent em {
    animation: hx-sent .5s ease-in forwards;
}

@keyframes hx-sent {
    to { opacity: 0; transform: translateY(-16px); }
}

.hx-app__send {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: #fff;
}

.hx-app__send svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--brand-500);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hx-app__time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.hx-app__bar {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .22);
}

.hx-app__bar i {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.hx-app__bar i::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
}

.hx-app__time b {
    font: 700 9.5px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    opacity: .9;
}

@media (max-width: 1024px) {
    #hero .hero__clip-stack {
        display: flex;
    }

    #hero .hero__clip-stack-card--1 { width: 196px; height: 418px; transform: translateX(-70px) rotate(-10deg); }
    #hero .hero__clip-stack-card--2 { display: none; }
    #hero .hero__clip-stack-card--3 { width: 200px; height: 426px; transform: translateX(72px) rotate(9deg); }

    #hero .hero__float--live {
        top: -16px;
        right: 4px;
    }

    /* the phone is narrower here: icons and counts only, so the comment box keeps its words */
    .hx-app__act i {
        display: none;
    }

    .hx-app__act {
        min-width: 24px;
    }
}

/* the light slides speak in the hero's pixel voice, in sentence case */
.iface__head .section__title,
.gnet__head .section__title,
#beta .beta__info .section__title {
    font: 400 clamp(32px, 3.4vw, 50px)/1.04 var(--px-font);
    letter-spacing: 0.005em;
    text-transform: none;
}

.dev__cap h3 {
    font: 400 clamp(17px, 1.4vw, 21px)/1.15 var(--px-font);
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ==========================================================================
   01 — THE FEED: a reel of clips, each with its point underneath
   ========================================================================== */
.feedsec {
    display: block !important;
    min-height: 0 !important;
    --fs-ink: #121317;
    --fs-soft: #3C465C;
    --fs-muted: #6B7488;
    --fs-line: rgba(18, 19, 23, 0.12);
    --fs-card: #FFFFFF;
    position: relative;
    padding: 130px 0 120px !important;
    overflow: hidden;
}

[data-theme="dark"] .feedsec {
    --fs-ink: #EEF2FA;
    --fs-soft: #B7C2D6;
    --fs-muted: #8793AA;
    --fs-line: rgba(216, 231, 250, 0.12);
    --fs-card: #15161A;
}

.feedsec__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

.feedsec__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 44px;
    font: 600 11px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: var(--fs-muted);
}

.feedsec__eyebrow span:first-child {
    color: var(--brand-500);
}

.feedsec__rule {
    flex: 1;
    height: 1px;
    background: var(--fs-line);
}

.feedsec__head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
}

.feedsec__title {
    margin: 0;
    font: 400 clamp(40px, 4.6vw, 70px)/1 var(--px-font);
    letter-spacing: 0.005em;
    color: var(--fs-ink);
    text-transform: none;
}

.feedsec__lede {
    margin: 0;
    max-width: 46ch;
    font: 500 clamp(16px, 1.25vw, 19px)/1.6 var(--font-sans);
    color: var(--fs-soft);
}

.feedsec__lede strong {
    color: var(--fs-ink);
}

/* the reel runs the full width of the page */
.reel {
    position: relative;
    margin: 64px 0 72px;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.reel__track {
    display: flex;
    width: max-content;
    animation: reel-run 70s linear infinite;
    animation-play-state: paused;
}

.reel.is-inview .reel__track {
    animation-play-state: running;
}

.reel:hover .reel__track,
.reel:focus-within .reel__track {
    animation-play-state: paused;
}

@keyframes reel-run {
    to { transform: translateX(-50%); }
}

.reel__set {
    display: flex;
    gap: 22px;
    padding-right: 22px;
}

.reel-card {
    width: 214px;
    margin: 0;
    flex: none;
}

.reel-card:nth-child(even) {
    margin-top: 34px;
}

.reel-card__clip {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background: var(--px-black);
    box-shadow: 0 22px 44px rgba(7, 8, 12, 0.18), 0 0 0 1px rgba(7, 8, 12, 0.06);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] .reel-card__clip {
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(218, 230, 247, 0.1);
}

.reel-card:hover .reel-card__clip {
    transform: translateY(-6px);
}

.reel-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.reel-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* a slow push-in, the way a still is filmed */
.reel-card__img--drift {
    transform-origin: 50% 30%;
    animation: reel-drift 14s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.reel.is-inview .reel-card__img--drift {
    animation-play-state: running;
}

@keyframes reel-drift {
    from { transform: scale(1.02); }
    to { transform: scale(1.14) translateY(-2%); }
}

/* a landscape clip set in a vertical frame, its own light blurred behind */
.reel-card__amb {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.2) brightness(.5);
}

.reel-card__inset {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.reel-card__clip::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 8, 12, .45) 0, rgba(7, 8, 12, 0) 18%, rgba(7, 8, 12, 0) 56%, rgba(7, 8, 12, .8) 100%);
}

.reel-card__top {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    top: 10px;
    display: flex;
    justify-content: space-between;
    font: 700 8.5px/1 var(--font-tech);
    letter-spacing: 0.14em;
}

.reel-card__top em {
    font-style: normal;
    padding: 4px 6px 3px;
    color: var(--px-black);
    background: var(--px-ice);
}

.reel-card__top b {
    padding: 4px 0 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.reel-card__reply {
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px 4px;
    font: 700 8.5px/1 var(--font-sans);
    color: var(--px-black);
    background: #fff;
    clip-path: var(--px-notch-sm);
}

.reel-card__reply svg {
    width: 12px;
    height: 12px;
    fill: var(--px-black);
}

/* auto captions, the way every short has them */
.reel-card__cap {
    position: absolute;
    z-index: 2;
    left: 8px;
    right: 8px;
    top: 60%;
    margin: 0;
    text-align: center;
    font: 800 15px/1.25 var(--font-sans);
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .9);
}

.reel-card__cap mark {
    padding: 0 4px;
    color: var(--px-black);
    text-shadow: none;
    background: var(--px-ice);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.reel-card--inset .reel-card__cap {
    top: auto;
    bottom: 32%;
}

.reel-card__meta {
    position: absolute;
    z-index: 2;
    left: 11px;
    right: 11px;
    bottom: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.reel-card__who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 800 11.5px/1 var(--font-sans);
}

/* the app's default avatar: a round badge with the play mark */
.reel-card__who i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--px-ice);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8);
}

.reel-card__who i::before {
    content: '';
    margin-left: 2px;
    border-left: 6px solid var(--px-black);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.reel-card__meta p {
    margin: 6px 0 0;
    font: 600 11px/1.3 var(--font-sans);
}

.reel-card__prog {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}

.reel-card__prog i {
    display: block;
    height: 100%;
    width: 30%;
    background: #fff;
}

.reel.is-inview .reel-card__prog i {
    animation: reel-prog 9s linear infinite;
    animation-delay: calc(var(--n) * -1.3s);
}

@keyframes reel-prog {
    from { width: 0; }
    to { width: 100%; }
}

/* ---------- explainers, filmed as screen recordings ---------- */
.rx {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 14px 0;
    color: var(--px-ice);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(218, 230, 247, .1), transparent 70%),
        var(--px-black);
}

.rx__app {
    font: 700 8.5px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: rgba(218, 230, 247, .55);
}

/* the chat: a prompt and the model's guesses for the next word */
.rx__prompt {
    margin: 10px 0 16px;
    padding: 11px 12px;
    border-radius: 12px 12px 12px 4px;
    font: 700 14px/1.3 var(--font-sans);
    color: var(--px-black);
    background: var(--px-ice);
}

.rx__prompt i {
    display: inline-block;
    width: 2px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--px-black);
    animation: hx-caret .9s steps(1, end) infinite;
}

.rx__label {
    font: 700 8px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: rgba(218, 230, 247, .55);
}

.rx__bars {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.rx__bars li {
    display: grid;
    grid-template-columns: 34px 1fr 28px;
    align-items: center;
    gap: 7px;
    font: 700 11px/1 var(--font-sans);
}

.rx__bars span {
    height: 8px;
    border-radius: 4px;
    background: rgba(218, 230, 247, .12);
    overflow: hidden;
}

.rx__bars span i {
    display: block;
    height: 100%;
    width: calc(var(--v) * 100%);
    border-radius: inherit;
    background: var(--px-ice);
    transform-origin: 0 50%;
}

.rx__bars li + li span i {
    background: rgba(218, 230, 247, .5);
}

.reel.is-inview .rx__bars span i {
    animation: rx-grow 5s cubic-bezier(.2, .8, .2, 1) infinite;
}

.rx__bars em {
    font: 700 9.5px/1 var(--font-tech);
    font-style: normal;
    text-align: right;
    color: rgba(218, 230, 247, .75);
}

@keyframes rx-grow {
    0% { transform: scaleX(0); }
    30%, 100% { transform: scaleX(1); }
}

/* the chart: $100 at 7% for thirty years */
.rx__big {
    margin-top: 10px;
    font: 800 32px/1 var(--font-sans);
    letter-spacing: -0.02em;
    color: #fff;
}

.rx__sub {
    margin-top: 4px;
    font: 600 10.5px/1 var(--font-sans);
    color: rgba(218, 230, 247, .6);
}

.rx__plot {
    width: 100%;
    height: auto;
    margin-top: 14px;
    overflow: visible;
}

.rx__grid {
    fill: none;
    stroke: rgba(218, 230, 247, .12);
    stroke-width: 1;
}

.rx__area {
    fill: rgba(218, 230, 247, .12);
}

.rx__line {
    fill: none;
    stroke: var(--px-ice);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.reel.is-inview .rx__line {
    animation: rx-draw 6s ease-in-out infinite;
}

@keyframes rx-draw {
    0% { stroke-dashoffset: 1; }
    45%, 100% { stroke-dashoffset: 0; }
}

.rx__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font: 700 7.5px/1 var(--font-tech);
    letter-spacing: 0.12em;
    color: rgba(218, 230, 247, .45);
}

.rx__axis i {
    font-style: normal;
}

/* the timer: a break every twenty minutes */
.rx--timer {
    align-items: center;
}

.rx--timer .rx__app {
    align-self: flex-start;
}

.rx__ring {
    position: relative;
    width: 132px;
    height: 132px;
    margin-top: 18px;
}

.rx__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.rx__track,
.rx__arc {
    fill: none;
    stroke-width: 7;
}

.rx__track {
    stroke: rgba(218, 230, 247, .12);
}

.rx__arc {
    stroke: var(--px-ice);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: .25;
}

.reel.is-inview .rx__arc {
    animation: rx-ring 8s linear infinite;
}

@keyframes rx-ring {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 1; }
}

.rx__ring b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 30px/1 var(--font-sans);
    letter-spacing: -0.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.rx__chips {
    display: flex;
    gap: 5px;
    margin-top: 16px;
}

.rx__chips i {
    padding: 5px 6px 4px;
    font: 700 8px/1 var(--font-tech);
    font-style: normal;
    letter-spacing: 0.12em;
    color: var(--px-black);
    background: var(--px-ice);
}

/* the point sits under the clip, where a caption would */
.reel-card__point {
    margin-top: 14px;
    padding: 12px 14px 13px;
    background: var(--fs-card);
    box-shadow: inset 0 0 0 1px var(--fs-line);
    clip-path: var(--px-notch);
}

.reel-card__point span {
    font: 800 9px/1 var(--font-tech);
    letter-spacing: 0.2em;
    color: var(--fs-muted);
}

.reel-card__point p {
    margin: 7px 0 0;
    font: 700 14px/1.32 var(--font-sans);
    letter-spacing: -0.005em;
    color: var(--fs-ink);
}

/* why it works, from the viewer's side */
.feedsec__why {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
}

.feedsec__why li {
    padding: 26px 26px 28px;
    background: var(--fs-card);
    box-shadow: inset 0 0 0 1px var(--fs-line);
    clip-path: var(--px-notch);
}

.feedsec__icon {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    color: var(--brand-500);
}

.feedsec__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.feedsec__why h3 {
    margin: 0 0 10px;
    font: 400 24px/1.1 var(--px-font);
    letter-spacing: 0.01em;
    color: var(--fs-ink);
}

.feedsec__why p {
    margin: 0;
    font: 500 15px/1.6 var(--font-sans);
    color: var(--fs-soft);
}

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

@media (max-width: 1024px) {
    .feedsec {
        padding: 96px 0 90px !important;
    }

    .feedsec__inner {
        padding: 0 24px;
    }

    .feedsec__head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feedsec__why {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #hero .hx-brand,
    #hero .hx-cta {
        justify-content: center;
    }

    #hero .hero__lede {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .feedsec__eyebrow {
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-bottom: 28px;
    }

    .feedsec__rule {
        display: none;
    }

    .reel {
        margin: 40px 0 44px;
    }

    .reel-card {
        width: 172px;
    }

    .reel-card:nth-child(even) {
        margin-top: 22px;
    }

    .reel-card__point p {
        font-size: 13px;
    }

    #hero .hx-title {
        font-size: clamp(40px, 12vw, 56px);
    }

    #hero .hx-join,
    #hero .app-dl-btn {
        height: 50px;
    }
}

@media (max-width: 600px) {
    /* the old phone rules pin every section title at 22px; these three are the pixel headlines */
    .iface__head .section__title,
    .gnet__head .section__title,
    #beta .beta__info .section__title {
        font-size: 32px !important;
        line-height: 1.06 !important;
    }

    /* the stores sit side by side under the main button instead of stacking full width */
    #hero .app-downloads {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100%;
        max-width: 360px;
    }

    #hero .app-dl-btn {
        flex: 1 1 0;
        justify-content: center;
        gap: 8px;
        padding: 0 10px !important;
    }

    #hero .app-dl-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    #hero .app-dl-text {
        white-space: nowrap;
    }

    #hero .app-dl-small {
        font-size: 7.5px !important;
    }

    #hero .app-dl-large {
        font-size: 12.5px !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .reel {
        overflow-x: auto;
        -webkit-mask: none;
        mask: none;
    }

    .reel__track {
        animation: none;
    }

    .reel__set[aria-hidden="true"] {
        display: none;
    }

    .reel-card__img--drift,
    .rx__bars span i,
    .rx__line,
    .rx__arc,
    .rx__prompt i,
    .reel-card__prog i {
        animation: none !important;
    }

    #hero .hero__phone-frame,
    #hero .hero__phone-frame::after,
    #hero .hero__float--reply .hero__float-avatar::after,
    .hx-app__pop,
    .hx-app__act--like svg,
    .hx-app__act--like::after {
        animation: none !important;
    }

    #hero .hero__phone-frame,
    #hero .hero__float,
    #hero .hero__clip-stack,
    #hero .hero__clip-stack-card,
    #hero .hero__phone-glow {
        transition: none !important;
    }
}

/* ==========================================================================
   08 — FAQ
   Plain questions, plain answers, from what the site and the app actually
   do. <details> does the opening and closing, so it works without script and
   with a keyboard; the pixel plus turns into a cross.
   ========================================================================== */
.faq {
    --fq-ink: #07080C;
    --fq-soft: #3C465C;
    --fq-line: rgba(7, 8, 12, 0.12);
    --fq-card: #FFFFFF;
    display: block !important;
    min-height: 0 !important;
    padding: 120px 0 170px !important;
}

[data-theme="dark"] .faq {
    --fq-ink: #EEF2FA;
    --fq-soft: #B7C2D6;
    --fq-line: rgba(218, 230, 247, 0.14);
    --fq-card: #0F1118;
}

.faq__inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 64px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

.faq__head {
    align-self: start;
    position: sticky;
    top: 110px;
}

.faq__tag {
    font: 600 11px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: var(--fq-soft);
}

.faq__title {
    margin: 22px 0 20px;
    font: 400 clamp(40px, 4.4vw, 64px)/1 var(--px-font);
    letter-spacing: 0.005em;
    color: var(--fq-ink);
    text-transform: none;
}

.faq__lede {
    margin: 0;
    max-width: 38ch;
    font: 500 16px/1.6 var(--font-sans);
    color: var(--fq-soft);
}

.faq__lede a,
.faq__a a {
    color: var(--fq-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.faq__list {
    display: grid;
    gap: 10px;
}

.faq__item {
    background: var(--fq-card);
    box-shadow: inset 0 0 0 1px var(--fq-line);
    clip-path: var(--px-notch);
    transition: box-shadow .25s ease;
}

.faq__item[open] {
    box-shadow: inset 0 0 0 2px var(--fq-ink);
}

.faq__item summary {
    display: grid;
    grid-template-columns: 34px 1fr 22px;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary:focus-visible {
    outline: 2px solid var(--fq-ink);
    outline-offset: -6px;
}

.faq__n {
    font: 900 15px/1 var(--font-lcd);
    color: var(--fq-soft);
}

.faq__q {
    font: 400 21px/1.2 var(--px-font);
    letter-spacing: 0.01em;
    color: var(--fq-ink);
}

/* a pixel plus that becomes a cross */
.faq__sign {
    position: relative;
    width: 14px;
    height: 14px;
    justify-self: end;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.faq__sign::before,
.faq__sign::after {
    content: '';
    position: absolute;
    background: var(--fq-ink);
}

.faq__sign::before {
    left: 0;
    right: 0;
    top: 6px;
    height: 2px;
}

.faq__sign::after {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
}

.faq__item[open] .faq__sign {
    transform: rotate(45deg);
}

.faq__a {
    padding: 0 22px 22px 68px;
}

.faq__a p {
    margin: 0;
    max-width: 60ch;
    font: 500 16px/1.65 var(--font-sans);
    color: var(--fq-soft);
}

.faq__item[open] .faq__a {
    animation: faq-in .35s ease;
}

@keyframes faq-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .faq {
        padding: 90px 0 140px !important;
    }

    .faq__inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .faq__head {
        position: static;
    }

    .faq__item summary {
        grid-template-columns: 28px 1fr 18px;
        gap: 10px;
        padding: 17px 16px;
    }

    .faq__q {
        font-size: 18px;
    }

    .faq__a {
        padding: 0 16px 18px 54px;
    }

    .faq__a p {
        font-size: 15px;
    }
}

/* ==========================================================================
   FOOTER — THE LOGO'S SCREEN
   The footer was a light sheet of grey links. It is now the logo itself:
   black, ice, the camera, the pixel name, dissolving in from the page the
   way the dark slides do.
   ========================================================================== */
.foot {
    position: relative;
    isolation: isolate;
    padding: 190px 0 36px;
    color: var(--px-ice);
    font-family: var(--font-sans);
}

.foot .px-screen {
    -webkit-mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) left 94px / 100% 100% no-repeat;
    mask:
        var(--px-dissolve-top) top left / 96px 96px repeat-x,
        linear-gradient(#000 0 0) left 94px / 100% 100% no-repeat;
}

.foot__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

.foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 56px;
}

.foot__brand {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px 20px;
    align-content: start;
}

/* the light theme inverts logo.png for light backgrounds; this is black */
.foot .foot__brand img.foot__logo {
    width: 96px;
    height: 96px;
    filter: none;
}

.foot__word {
    display: block;
    font: 400 40px/1 var(--px-font);
    letter-spacing: 0.04em;
    color: var(--px-ice);
}

.foot__tag {
    margin: 10px 0 0;
    font: 500 15px/1.4 var(--font-sans);
    color: #9AA7BD;
}

.foot__cta {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 15px 22px 14px;
    font: 400 19px/1 var(--px-font);
    letter-spacing: 0.02em;
    color: var(--px-black);
    text-decoration: none;
    background: var(--px-ice);
    clip-path: var(--px-notch);
    transition: transform .2s ease;
}

.foot__cta svg {
    width: 18px;
    height: 12px;
}

.foot__cta:hover,
.foot__cta:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.foot__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.foot__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.foot__col h5 {
    margin: 0 0 12px;
    font: 600 11px/1 var(--font-tech);
    letter-spacing: 0.18em;
    color: #5F6B82;
}

.foot__col a {
    padding: 5px 6px 4px;
    margin-left: -6px;
    font: 600 14px/1.2 var(--font-sans);
    color: var(--px-ice);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.foot__col a:hover,
.foot__col a:focus-visible {
    color: var(--px-black);
    background: var(--px-ice);
    outline: none;
}

/* the name, once more, across the whole width, drawn as the logo's screen */
.foot__big {
    margin: 84px 0 34px;
    font: 700 clamp(64px, 16.2vw, 236px)/.82 var(--px-font);
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    background: repeating-conic-gradient(var(--px-ice) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .9;
    user-select: none;
}

.foot__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(218, 230, 247, .14);
    font: 600 11px/1 var(--font-tech);
    letter-spacing: 0.12em;
    color: #5F6B82;
}

.foot__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.foot__status i {
    width: 7px;
    height: 7px;
    background: var(--px-ice);
    animation: hero-pulse 2s ease-in-out infinite;
}

.foot__legal {
    display: flex;
    gap: 18px;
}

.foot__legal a {
    color: #9AA7BD;
    text-decoration: none;
}

.foot__legal a:hover,
.foot__legal a:focus-visible {
    color: var(--px-ice);
}

@media (max-width: 900px) {
    .foot {
        padding: 160px 0 30px;
    }

    .foot__inner {
        padding: 0 20px;
    }

    .foot__top {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .foot__cols {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .foot__big {
        margin: 60px 0 26px;
    }

    .foot__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foot__status i,
    .faq__item[open] .faq__a {
        animation: none;
    }
}

/* ==========================================================================
   LOGO COLOURS ONLY
   The logo is two colours: ice #DAE6F7 on black #07080C. Every blue on the
   page used to be its own blue (cobalt, sky, violet); now each one is the
   logo's. On light surfaces the accent is the logo's black, on dark ones its
   ice, and the always-dark screens (slides 02, 04, 05, the phone, the reel,
   the footer) keep ice whatever the theme.
   ========================================================================== */
:root,
[data-theme="light"] {
    --brand-ice: #DAE6F7;
    --brand-rgb: 7 8 12;
    --brand-on: #FFFFFF;      /* type on a --brand-500 fill */
    --brand-300: #9AA7BD;
    --brand-400: #3A4252;
    --brand-500: #07080C;
    --brand-600: #000000;
    --brand-700: #000000;
    --brand-ink: #07080C;
    --brand-alt: #3A4252;
    --accent: #07080C;
    --accent-2: #3A4252;
    --accent-bright: #07080C;
    --accent-glow: rgba(7, 8, 12, 0.12);
    --text-accent: #07080C;
    --blue-1: #07080C;
    --blue-2: #07080C;
    --blue-3: #07080C;
    --blue-1-glow: rgba(7, 8, 12, 0.1);
    --blue-2-glow: rgba(7, 8, 12, 0.1);
    --blue-3-glow: rgba(7, 8, 12, 0.08);
    --cyan: #07080C;
    --cyan-glow: rgba(7, 8, 12, 0.1);
}

[data-theme="dark"],
#features,
#catch,
#debates,
#ai-core,
.foot,
.hx-app,
.reel-card__clip {
    --brand-rgb: 218 230 247;
    --brand-on: #07080C;
    --brand-300: #B7C2D6;
    --brand-400: #DAE6F7;
    --brand-500: #DAE6F7;
    --brand-600: #FFFFFF;
    --brand-700: #FFFFFF;
    --brand-ink: #07080C;
    --brand-alt: #9AA7BD;
    --accent: #DAE6F7;
    --accent-2: #EEF2FA;
    --accent-bright: #FFFFFF;
    --accent-glow: rgba(218, 230, 247, 0.22);
    --text-accent: #DAE6F7;
    --blue-1: #DAE6F7;
    --blue-2: #DAE6F7;
    --blue-3: #DAE6F7;
    --blue-1-glow: rgba(218, 230, 247, 0.15);
    --blue-2-glow: rgba(218, 230, 247, 0.1);
    --blue-3-glow: rgba(218, 230, 247, 0.08);
    --cyan: #DAE6F7;
    --cyan-glow: rgba(218, 230, 247, 0.2);
}

/* tablets: the waitlist pill slid under the fixed MENU trigger at right:60px;
   keep the desktop offset so it sits clear, left of the trigger */
@media (min-width: 769px) and (max-width: 1024px) {
    .top-nav {
        right: 140px;
    }
}

/* ==========================================================================
   THE CATCH — A SCROLL SCENE BETWEEN THE APP AND THE ARENA
   The page pins for a few screens while the feed rushes past. Orvelis, drawn
   as the logo's camera on eight pixel legs, lowers itself on a thread, takes
   hold of the one clip with a point and reels it up into its web. The spider
   and the web are pixel canvases (clips.js); the clip is a real video. With
   no script, or with reduced motion, the scene is its last frame, held.
   ========================================================================== */
#catch {
    --ct-dim: #9AA7BD;
    --ct-cw: 250px;
    position: relative;
    isolation: isolate;
    height: 330vh;
    color: var(--px-ice);
}

.catch__pin {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.catch__feed {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* the noise: clips with nothing in them, a dithered blank and a tag */
.catch__noise {
    position: absolute;
    left: 0;
    top: 0;
    width: 118px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    background: repeating-conic-gradient(#191C24 0 25%, #0C0D12 0 50%) 0 0 / 4px 4px;
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.14);
    will-change: transform, opacity;
}

.catch__noise::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    margin: -9px 0 0 -6px;
    border-left: 14px solid rgba(218, 230, 247, 0.22);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.catch__noise span {
    position: absolute;
    left: 8px;
    bottom: 10px;
    padding: 4px 6px 3px;
    font: 700 8.5px/1 var(--font-tech);
    letter-spacing: 0.14em;
    color: var(--ct-dim);
    box-shadow: inset 0 0 0 1px rgba(218, 230, 247, 0.22);
    white-space: nowrap;
}

.catch__web,
.catch__spider {
    position: absolute;
    left: 0;
    top: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.catch__web { z-index: 2; }
.catch__spider { z-index: 4; }

/* the clip: a short video in the app's frame */
.catch__clip {
    position: absolute;
    z-index: 3;
    left: calc(62% - var(--ct-cw) / 2);
    top: 26%;
    width: var(--ct-cw);
    aspect-ratio: 9 / 16;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--px-black);
    box-shadow: 0 0 0 1.5px rgba(218, 230, 247, 0.4), 0 30px 70px rgba(0, 0, 0, 0.6);
    transform-origin: 50% 0;
    will-change: transform;
}

.catch__media,
.catch__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catch__clip::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 8, 12, .5) 0, rgba(7, 8, 12, 0) 20%, rgba(7, 8, 12, 0) 55%, rgba(7, 8, 12, .85) 100%);
}

.catch__chip {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    top: 12px;
    display: flex;
    justify-content: space-between;
    font: 700 10px/1 var(--font-tech);
    letter-spacing: 0.14em;
    color: #fff;
}

.catch__chip em {
    font-style: normal;
    padding: 4px 6px 3px;
    color: var(--px-black);
    background: var(--px-ice);
}

.catch__chip b {
    padding-top: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.catch__cap {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    bottom: 64px;
    margin: 0;
    text-align: center;
    font: 800 19px/1.25 var(--font-sans);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}

.catch__cap mark {
    padding: 0 4px;
    color: var(--px-black);
    text-shadow: none;
    background: var(--px-ice);
}

.catch__who {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 13px/1 var(--font-sans);
    color: #fff;
}

.catch__who i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--px-ice);
}

.catch__who i::before {
    content: '';
    margin-left: 2px;
    border-left: 7px solid var(--px-black);
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}

.catch__prog {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}

.catch__prog i {
    display: block;
    height: 100%;
    width: 40%;
    background: #fff;
}

/* stamped once it is caught */
.catch__stamp {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 40%;
    padding: 9px 12px 8px;
    font: 400 22px/1 var(--px-font);
    letter-spacing: 0.04em;
    color: var(--px-black);
    background: var(--px-ice);
    clip-path: var(--px-notch);
    transform: translate(-50%, 0) rotate(-6deg);
    box-shadow: 0 0 0 3px var(--px-black);
}

#catch.is-live .catch__stamp {
    visibility: hidden;
}

#catch.is-live.is-caught .catch__stamp {
    visibility: visible;
    animation: catch-stamp .32s steps(4, end);
}

@keyframes catch-stamp {
    from { transform: translate(-50%, 0) rotate(-6deg) scale(1.8); opacity: 0; }
    to { transform: translate(-50%, 0) rotate(-6deg) scale(1); opacity: 1; }
}

.catch__readout {
    position: absolute;
    z-index: 5;
    left: calc(62% + var(--ct-cw) / 2 + 24px);
    top: calc(26% + 24px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 8px;
    font: 700 11px/1 var(--font-tech);
    letter-spacing: 0.16em;
    color: var(--px-black);
    background: var(--px-ice);
    clip-path: var(--px-notch);
    white-space: nowrap;
}

.catch__readout i {
    width: 8px;
    height: 8px;
    background: var(--px-black);
    animation: hero-pulse 1.2s steps(2, end) infinite;
}

/* the words, one line at a time; without script the last one stands */
.catch__copy {
    position: absolute;
    z-index: 5;
    left: max(48px, 7vw);
    bottom: 13vh;
    width: min(500px, 34vw);
}

.catch__label {
    display: block;
    font: 600 12px/1 var(--font-tech);
    letter-spacing: 0.2em;
    color: var(--ct-dim);
}

.catch__title {
    display: grid;
    margin: 22px 0 0;
    font: 400 clamp(38px, 3.9vw, 58px)/1.08 var(--px-font);
    letter-spacing: 0.005em;
    color: var(--px-ice);
    text-transform: none;
}

.catch__line {
    grid-area: 1 / 1;
    visibility: hidden;
}

.catch__line[data-step="2"],
#catch.is-live .catch__line.is-on {
    visibility: visible;
}

#catch.is-live .catch__line[data-step="2"]:not(.is-on) {
    visibility: hidden;
}

#catch.is-live .catch__line.is-on {
    animation: catch-line .3s steps(3, end);
}

@keyframes catch-line {
    0% { transform: translateX(-10px); clip-path: inset(0 60% 0 0); }
    50% { transform: translateX(6px); clip-path: inset(0 20% 0 0); }
    100% { transform: none; clip-path: inset(0 0 0 0); }
}

.catch__lede {
    margin: 22px 0 0;
    max-width: 40ch;
    font: 500 17px/1.6 var(--font-sans);
    color: var(--ct-dim);
}

@media (max-width: 760px) {
    #catch {
        --ct-cw: min(44vw, 200px);
        height: 300vh;
    }

    .catch__clip {
        left: calc(50% - var(--ct-cw) / 2);
        top: 18%;
    }

    .catch__noise {
        width: 84px;
        border-radius: 9px;
    }

    .catch__readout {
        display: none;
    }

    .catch__copy {
        left: 20px;
        right: 20px;
        bottom: 5vh;
        width: auto;
        padding: 18px 18px 20px;
        background: rgba(7, 8, 12, .82);
        clip-path: var(--px-notch);
    }

    .catch__title {
        margin-top: 14px;
        font-size: 30px !important;
        line-height: 1.1 !important;
    }

    .catch__lede {
        margin-top: 12px;
        font-size: 14px;
    }

    .catch__cap {
        font-size: 15px;
        bottom: 52px;
    }

    .catch__stamp {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #catch {
        height: auto;
    }

    .catch__pin {
        position: relative;
    }

    .catch__readout i,
    #catch.is-live.is-caught .catch__stamp,
    #catch.is-live .catch__line.is-on {
        animation: none;
    }
}

/* ==========================================================================
   PERFORMANCE — WHAT THE PAGE NO LONGER ASKS FOR ON EVERY FRAME
   On machines that composite in software (Firefox on Linux, most laptops
   without a blessed GPU driver) the page stuttered. Each rule below removes
   a per-frame cost; none of them changes what a still frame looks like.
   ========================================================================== */

/* a leftover layer of four drifting orbs, fixed over the dark theme */
.floating-orbs {
    display: none !important;
}

/* The grain was a tile as tall as the document, blended into everything
   under it with multiply / screen: every frame of every scroll re-blended
   the page. It is a plain, faint tile now. */
.page-fx > .page-fx__grain,
[data-theme="dark"] .page-fx > .page-fx__grain {
    mix-blend-mode: normal;
    opacity: .028;
}

/* the edge light holds still: two drifting layers the size of the screen
   kept the compositor busy even with nothing scrolling */
.page-fx__ribbon {
    animation: none !important;
    will-change: auto;
}

/* the phone's halo: a soft gradient is already soft; the 50px blur on top
   of it was recomputed whenever the halo pulsed */
#hero .hero__phone-glow {
    filter: none;
    animation: none;
    opacity: .85;
}

/* the entrance used to end on filter: blur(0) and hold it forever, which
   pushed the whole phone, video and all, through a filter every frame */
@keyframes phone-entrance {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.7);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* the sheen and the scroll cue moved by left / top, which is layout on
   every frame; they move by transform now, along the same path */
#hero .hero__phone-frame::after {
    left: -80%;
    animation-name: hx-sheen-t;
}

@keyframes hx-sheen-t {
    0%, 72% { transform: translateX(0) skewX(-14deg); }
    100% { transform: translateX(400%) skewX(-14deg); }
}

.scroll-indicator__line::after {
    top: -40%;
    animation-name: scroll-line-t;
}

@keyframes scroll-line-t {
    from { transform: translateY(0); }
    to { transform: translateY(400%); }
}

/* the reel's progress bars grew by width (layout, fourteen of them); they
   scale now */
.reel-card__prog i {
    width: 100%;
    transform: scaleX(.3);
    transform-origin: 0 50%;
}

@keyframes reel-prog {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* the blurred light behind the landscape clips is baked into its own small
   image (clips.js), so the moving reel carries no live filters */
.reel-card__amb {
    filter: none;
}

/* nothing animates in a section that is off screen: every section reports
   whether it is in view (script.js), and its loops wait until it is */
[data-inview]:not(.is-inview) *,
[data-inview]:not(.is-inview) *::before,
[data-inview]:not(.is-inview) *::after {
    animation-play-state: paused !important;
}

/* where the slide 05 field runs in software (pixel-field.js) it no longer
   redraws to follow the headline; a shade behind the words does that job */
#ai-core.is-field-lite .aic-intro {
    position: relative;
    isolation: isolate;
}

#ai-core.is-field-lite .aic-intro::before {
    content: '';
    position: absolute;
    inset: -56px -72px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(7, 8, 12, 0.92), rgba(7, 8, 12, 0.7) 55%, rgba(7, 8, 12, 0));
}

/* 06's globe: a pixel canvas (clips.js), scaled up without smoothing */
.gnet__globe {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* where the page is composited in software (clips.js sets html.gfx-lite),
   the extras that cost a repaint on every frame go: the edge fade over the
   moving reel, the loops inside its cards (each card holds its last frame),
   and the fixed edge light */
html.gfx-lite .reel {
    -webkit-mask: none;
    mask: none;
}

html.gfx-lite .reel-card *,
html.gfx-lite .reel-card *::before,
html.gfx-lite .reel-card *::after {
    animation: none !important;
}

html.gfx-lite .page-fx > .page-fx__aurora {
    display: none;
}