/* ================================================================
   Camelot Flows — Tailwind color tokens (--cft-* prefix)
   Space-separated R G B triplets for Tailwind's rgb() syntax.
   Default = NIGHT (canonical Neon Knight, matches code_v2.html).
   Cozy theme overrides these in [data-theme="cozy"].
   Note: --cf-* (hex) variables for direct cozy paint-layer use
   remain in the separate :root block below (line ~420).
   ================================================================ */
:root,
[data-theme="night"] {
    --cft-primary:          79  70 229;   /* #4f46e5 indigo-600 */
    --cft-primary-glow:     99 102 241;   /* #6366f1 indigo-500 */
    --cft-accent:          139  92 246;   /* #8b5cf6 violet-500 */
    --cft-cobalt:           30  58 138;   /* #1e3a8a blue-900 */
    --cft-obsidian:          5   5   8;   /* #050508 */
    --cft-obsidian-light:   10  10  18;   /* #0a0a12 */
    --cft-parchment:        10  10  18;   /* dark fallback */
    --cft-candle:            0 242 255;   /* #00f2ff neon cyan */
    --cft-sage:            139  92 246;   /* violet in night */
    --cft-terracotta:       99 102 241;   /* indigo in night */
    --cft-charcoal:         15  23  42;   /* #0f172a slate-900 */
}

[data-theme="cozy"] {
    --cft-primary:         196 120  92;   /* #C4785C terracotta */
    --cft-primary-glow:    212 135  90;   /* #D4875A */
    --cft-accent:          123 145 113;   /* #7B9171 sage */
    --cft-cobalt:           63  93 141;   /* #3F5D8D */
    --cft-obsidian:        245 244 240;   /* #F5F4F0 cream */
    --cft-obsidian-light:  237 235 230;   /* #EDEBE6 */
    --cft-parchment:       241 236 223;   /* #F1ECDF */
    --cft-candle:          232 185 107;   /* #E8B96B */
    --cft-sage:            123 145 113;   /* #7B9171 */
    --cft-terracotta:      196 120  92;   /* #C4785C */
    --cft-charcoal:         26  26  24;   /* #1A1A18 */
}

/* ================================================================
   Camelot Flows — Extracted Component Styles (camelot.css)
   Source: code_v2.html inline <style> blocks.
   Edit this file; do not restore inline copies.
   ================================================================ */

body {
            background-color: #050508;
            color: #e2e8f0;
        }

        html,
        body {
            max-width: 100%;
            overflow-x: clip;
        }

        .font-body {
            font-family: 'Inter', sans-serif;
        }

        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;
        }

        .grain-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        .glass-panel {
            background: rgba(10, 10, 18, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(99, 102, 241, 0.2);
            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
        }

        .glass-card {
            background: linear-gradient(145deg, rgba(15, 15, 25, 0.6) 0%, rgba(5, 5, 8, 0.8) 100%);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(99, 102, 241, 0.15);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            border-color: rgba(99, 102, 241, 0.5);
            box-shadow: 0 0 30px -10px rgba(79, 70, 229, 0.3);
            background: linear-gradient(145deg, rgba(20, 20, 35, 0.7) 0%, rgba(10, 10, 15, 0.9) 100%);
        }

        .text-glow {
            text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
        }

        .grid-bg {
            background-size: 50px 50px;
            background-image:
                linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
            mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
        }

        .status-dot {
            box-shadow: 0 0 10px currentColor;
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        /* ИЗМЕНЕНИЕ: Стили для бегущей строки Zentry */
        .marquee-container {
            width: max-content;
        }

        /* Custom Cursor */
        @media (pointer: fine) {
            body {
                cursor: none;
            }

            #custom-cursor {
                position: fixed;
                top: 0;
                left: 0;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: #8b5cf6;
                box-shadow: 0 0 20px 6px rgba(139, 92, 246, 0.6);
                pointer-events: none;
                z-index: 99999;
                mix-blend-mode: screen;
                opacity: 0;
                transform: translate(-50%, -50%);
            }
        }

        @media (pointer: coarse) {
            #custom-cursor {
                display: none;
            }
        }

        /* Star Wars Pricing Styles */
        #starwars-pricing {
            perspective: 1500px;
            overflow: hidden;
            background-color: #050508;
            position: relative;
        }

        #starwars-pricing::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(191, 0, 255, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        #starwars-pricing::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 40%, rgba(5, 5, 8, 1) 100%);
            pointer-events: none;
        }

        .starfield-anim {
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(1px 1px at 20px 30px, #fff, rgba(0, 0, 0, 0)),
                radial-gradient(1.5px 1.5px at 100px 150px, #bf00ff, rgba(0, 0, 0, 0)),
                radial-gradient(1px 1px at 200px 100px, #00f2ff, rgba(0, 0, 0, 0)),
                radial-gradient(1.2px 1.2px at 300px 250px, #fff, rgba(0, 0, 0, 0));
            background-size: 400px 400px;
            opacity: 0.3;
            pointer-events: none;
        }

        .pricing-blueprint-system {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00f2ff;
            opacity: 0.38;
            mix-blend-mode: screen;
        }

        .pricing-blueprint-lines {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .pricing-blueprint-route,
        .pricing-blueprint-ring {
            fill: none;
            stroke: url(#pricingBlueprintStroke);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 10 18;
        }

        .pricing-blueprint-ring {
            stroke-dasharray: 4 14;
            opacity: 0.7;
        }

        .pricing-blueprint-ring--inner {
            stroke-dasharray: 2 9;
            opacity: 0.95;
        }

        .pricing-blueprint-core,
        .pricing-route-card {
            position: absolute;
            border: 1px solid currentColor;
            background: rgba(5, 5, 8, 0.42);
            backdrop-filter: blur(14px);
            box-shadow: 0 0 44px -26px currentColor;
            text-transform: uppercase;
            letter-spacing: 0.18em;
        }

        .pricing-blueprint-core {
            width: min(34vw, 360px);
            aspect-ratio: 1;
            border-radius: 999px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.7rem;
            text-align: center;
        }

        .pricing-blueprint-core::before,
        .pricing-blueprint-core::after {
            content: "";
            position: absolute;
            inset: 22px;
            border: 1px dashed currentColor;
            border-radius: inherit;
            opacity: 0.35;
        }

        .pricing-blueprint-core::after {
            inset: 54px;
            border-style: solid;
            opacity: 0.2;
        }

        .pricing-blueprint-core strong {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(1.7rem, 3.2vw, 3.8rem);
            line-height: 0.9;
            color: currentColor;
            letter-spacing: 0.02em;
        }

        .pricing-blueprint-core span {
            max-width: 16rem;
            font-family: "JetBrains Mono", monospace;
            font-size: 0.65rem;
            opacity: 0.72;
        }

        .pricing-core-kicker {
            font-weight: 700;
        }

        .pricing-route-card {
            min-width: 160px;
            padding: 1rem 1.1rem;
            border-radius: 14px;
            display: grid;
            gap: 0.25rem;
            transform: rotate(var(--route-tilt, 0deg));
        }

        .pricing-route-card span {
            font-family: "JetBrains Mono", monospace;
            font-size: 0.66rem;
            opacity: 0.58;
        }

        .pricing-route-card strong {
            font-family: "Space Grotesk", sans-serif;
            font-size: 1rem;
            letter-spacing: 0.12em;
            color: currentColor;
        }

        .pricing-route-card em {
            font-family: "JetBrains Mono", monospace;
            font-style: normal;
            font-size: 0.58rem;
            opacity: 0.65;
        }

        .route-project { left: 9vw; top: 56%; --route-tilt: -4deg; }
        .route-retainer { right: 8vw; top: 22%; --route-tilt: 3deg; }
        .route-agency { right: 13vw; bottom: 15%; --route-tilt: -2deg; }
        .route-intake { left: 14vw; top: 20%; --route-tilt: 3deg; }
        .route-handoff { right: 31vw; bottom: 8%; --route-tilt: 2deg; }

        .crawl-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 60vh;
            transform-style: preserve-3d;
        }

        .crawl-content {
            width: 90%;
            max-width: 900px;
            transform-origin: 50% 100%;
        }

        .pricing-card-sw {
            background: linear-gradient(135deg, rgba(15, 10, 25, 0.8) 0%, rgba(5, 5, 8, 0.95) 100%);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            padding: 2.5rem;
            margin-bottom: 3.5rem;
            transition: all 0.4s ease;
        }

        .pricing-card-sw:hover {
            transform: translateY(-8px) scale(1.02);
            background: linear-gradient(135deg, rgba(25, 15, 45, 0.8) 0%, rgba(10, 10, 15, 0.95) 100%);
        }

        @media (max-width: 767px) {
            #starwars-pricing {
                height: auto !important;
                min-height: 0 !important;
                overflow: hidden;
                padding: 5rem 0 4.5rem;
            }

            #starwars-pricing::after {
                background: linear-gradient(to bottom, transparent 10%, rgba(5, 5, 8, 0.72) 72%, rgba(5, 5, 8, 1) 100%);
            }

            .pricing-blueprint-system {
                opacity: 0.2;
                align-items: flex-start;
                padding-top: 2rem;
            }

            .pricing-blueprint-core {
                width: min(72vw, 260px);
                opacity: 0.36;
            }

            .pricing-route-card {
                display: none;
            }

            .crawl-container {
                height: auto;
                min-height: 0;
                display: flex;
                justify-content: center;
                align-items: stretch;
                padding-top: 0;
                transform-style: flat;
            }

            .crawl-content {
                width: min(100%, 520px);
                max-width: none;
                margin-left: auto;
                margin-right: auto;
                gap: 1.75rem !important;
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }

            #starwars-pricing:not(.is-mobile-crawl) .crawl-content {
                transform: none !important;
                opacity: 1 !important;
            }

            #starwars-pricing.is-mobile-crawl {
                height: 100svh !important;
                min-height: 100svh !important;
                padding: 0 !important;
                overflow: hidden;
                perspective: 1400px;
            }

            #starwars-pricing.is-mobile-crawl .crawl-container {
                height: 100svh;
                min-height: 100svh;
                overflow: hidden;
                align-items: flex-start;
                padding-top: 0;
                transform-style: preserve-3d;
                perspective: 1400px;
            }

            #starwars-pricing.is-mobile-crawl .crawl-content {
                gap: 2.25rem !important;
                padding-top: 10vh;
                padding-bottom: 54vh;
                transform-origin: 50% 100%;
                will-change: transform, opacity;
            }

            #starwars-pricing.is-mobile-crawl .pricing-card-sw,
            #starwars-pricing.is-mobile-crawl .pricing-card-sw.scale-105 {
                transform: none !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-shadow: 0 24px 70px -42px rgba(0, 242, 255, 0.68);
            }

            #starwars-pricing.is-mobile-crawl .crawl-content > .py-24 {
                padding-bottom: 22vh !important;
            }

            .crawl-content > .max-w-3xl {
                margin-bottom: 1.5rem !important;
            }

            .crawl-content h1 {
                font-size: 0.72rem !important;
                letter-spacing: 0.34em !important;
                margin-bottom: 1rem !important;
            }

            .crawl-content h2 {
                font-size: clamp(2.5rem, 11.5vw, 3.45rem) !important;
                line-height: 0.96 !important;
                margin-bottom: 1rem !important;
            }

            .crawl-content p {
                font-size: 1rem !important;
                line-height: 1.65 !important;
            }

            .pricing-card-sw,
            .pricing-card-sw.scale-105 {
                width: 100% !important;
                transform: none !important;
                padding: 1.35rem !important;
                margin-bottom: 0 !important;
                gap: 1.25rem !important;
                border-radius: 18px;
            }

            .pricing-card-sw:hover {
                transform: none !important;
            }

            .pricing-card-sw h3 {
                font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
                line-height: 1 !important;
            }

            .pricing-card-sw .flex.items-center.gap-4 {
                align-items: flex-start !important;
                flex-direction: column;
                gap: 0.75rem !important;
            }

            .pricing-card-sw > .flex.flex-col.items-end {
                align-items: stretch !important;
                width: 100%;
                min-width: 0 !important;
                border-left: 0 !important;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                padding-left: 0 !important;
                padding-top: 1.15rem;
                margin-left: 0 !important;
            }

            .pricing-card-sw button {
                width: 100%;
            }

            .crawl-content > .py-24 {
                padding-top: 1.5rem !important;
                padding-bottom: 0 !important;
            }
        }

        /* Color updates matching stitch */
        .border-cyan {
            border: 1px solid rgba(0, 242, 255, 0.2);
        }

        .border-purple {
            border: 1px solid rgba(191, 0, 255, 0.2);
            box-shadow: 0 0 40px rgba(191, 0, 255, 0.15);
        }

        .border-blue {
            border: 1px solid rgba(0, 102, 255, 0.2);
        }

        .glow-cyan:hover {
            border-color: rgba(0, 242, 255, 0.6);
            box-shadow: 0 0 30px rgba(0, 242, 255, 0.3);
        }

        .glow-purple:hover {
            border-color: rgba(191, 0, 255, 0.6);
            box-shadow: 0 0 40px rgba(191, 0, 255, 0.4);
        }

        .glow-blue:hover {
            border-color: rgba(0, 102, 255, 0.6);
            box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
        }

        .text-neon-cyan {
            color: #00f2ff;
            text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
        }

        .bg-neon-cyan {
            background-color: #00f2ff;
        }

        .text-neon-purple {
            color: #bf00ff;
            text-shadow: 0 0 8px rgba(191, 0, 255, 0.6);
        }

        .bg-neon-purple {
            background-color: #bf00ff;
        }

        .text-neon-blue {
            color: #0066ff;
            text-shadow: 0 0 8px rgba(0, 102, 255, 0.6);
        }

        .bg-neon-blue {
            background-color: #0066ff;
        }

        .text-glow-cyan {
            text-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
        }

        .text-glow-purple {
            text-shadow: 0 0 20px rgba(191, 0, 255, 0.5);
        }

/* ================================================================
   CAMELOT FLOWS — COZY AVALON OVERRIDE LAYER
   Remaps neon-cyberpunk palette to warm parchment tones.
   Applied via [data-theme="cozy"] body.theme-cozy compound selectors.
   ================================================================ */

/* ================================================================
   Impact Record section — circuit SVG animation + particle floats
   ================================================================ */
@keyframes cf-circuit-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes cf-node-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}
@keyframes cf-particle-rise {
    0%   { transform: translateY(0)    scale(1);   opacity: 0; }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.6; }
    100% { transform: translateY(-32px) scale(0.7); opacity: 0; }
}
.circuit-line {
    animation: cf-circuit-draw 3.2s cubic-bezier(.4,0,.2,1) forwards;
}
.circuit-line-2 {
    animation: cf-circuit-draw 4s cubic-bezier(.4,0,.2,1) 0.4s forwards;
}
.circuit-line-3 {
    animation: cf-circuit-draw 2.4s cubic-bezier(.4,0,.2,1) 0.8s forwards;
}
.circuit-node         { animation: cf-node-pulse 2.2s ease-in-out infinite; }
.circuit-node.d1      { animation-delay: 0s; }
.circuit-node.d2      { animation-delay: 0.4s; }
.circuit-node.d3      { animation-delay: 0.8s; }
.circuit-node.d4      { animation-delay: 1.2s; }
.circuit-node.d5      { animation-delay: 1.6s; }
.circuit-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.5);
    animation: cf-particle-rise 5s ease-in-out infinite;
}
[data-theme="cozy"] .circuit-particle { background: rgba(196, 120, 92, 0.5); }

/* stat accent colours in cozy */
[data-theme="cozy"] .impact-accent-1 { color: var(--cf-terracotta) !important; }
[data-theme="cozy"] .impact-accent-2 { color: var(--cf-sage) !important; }
[data-theme="cozy"] .impact-accent-3 { color: var(--cf-candle) !important; }
[data-theme="cozy"] .impact-divider   { background: rgba(196,120,92,0.08) !important; }
[data-theme="cozy"] .impact-bg-top    { background: rgba(245,244,240,0.85) !important; }

        /* ── Palette tokens ─────────────────────────────────── */
        :root {
            --cf-alabaster: #F5F4F0;
            --cf-cream: #EDEBE6;
            --cf-sand: #E0DDD6;
            --cf-parchment: #F1ECDF;
            --cf-charcoal: #1A1A18;
            --cf-charcoal-soft: #302F2B;
            --cf-muted: #6D6A64;
            --cf-line: rgba(26, 26, 24, 0.1);
            --cf-line-strong: rgba(26, 26, 24, 0.2);
            --cf-sage: #7B9171;
            --cf-sage-soft: rgba(123, 145, 113, 0.15);
            --cf-terracotta: #C4785C;
            --cf-terracotta-soft: rgba(196, 120, 92, 0.15);
            --cf-cobalt: #3F5D8D;
            --cf-candle: #E8B96B;
            --cf-candle-glow: rgba(232, 185, 107, 0.18);
        }

        /* ── Base body ──────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy {
            background:
                radial-gradient(circle at 0% 0%,    rgb(var(--cft-sage) / 0.16),       transparent 35%),
                radial-gradient(circle at 100% 10%, rgb(var(--cft-terracotta) / 0.12), transparent 35%),
                rgb(var(--cft-obsidian));
            color: var(--cf-charcoal);
        }

        /* Candle-glow vignette at top */
        [data-theme="cozy"] body.theme-cozy::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            background: radial-gradient(ellipse at 50% 0%, var(--cf-candle-glow), transparent 55%);
        }

        /* ── Typography ─────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy h1,
        [data-theme="cozy"] body.theme-cozy h2,
        [data-theme="cozy"] body.theme-cozy h3,
        [data-theme="cozy"] body.theme-cozy h4 {
            font-family: "Fraunces", Georgia, serif;
            letter-spacing: -0.03em;
        }

        /* ── Text colour overrides ──────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .text-white,
        [data-theme="cozy"] body.theme-cozy .text-slate-100,
        [data-theme="cozy"] body.theme-cozy .text-slate-200 { color: var(--cf-charcoal); }
        [data-theme="cozy"] body.theme-cozy .text-white\/90,
        [data-theme="cozy"] body.theme-cozy .text-white\/70 { color: var(--cf-charcoal-soft); }
        [data-theme="cozy"] body.theme-cozy .text-white\/50 { color: var(--cf-muted); }
        [data-theme="cozy"] body.theme-cozy .text-white\/40,
        [data-theme="cozy"] body.theme-cozy .text-white\/30,
        [data-theme="cozy"] body.theme-cozy .text-white\/20 { color: rgba(109, 106, 100, 0.72); }
        [data-theme="cozy"] body.theme-cozy .text-slate-300 { color: var(--cf-charcoal-soft); }
        [data-theme="cozy"] body.theme-cozy .text-slate-400 { color: var(--cf-muted); }
        [data-theme="cozy"] body.theme-cozy .text-slate-500,
        [data-theme="cozy"] body.theme-cozy .text-slate-600 { color: rgba(109, 106, 100, 0.7); }

        /* Neon glow → warm text-shadow remaps (multi-property: keep) */
        [data-theme="cozy"] body.theme-cozy .text-glow { text-shadow: 0 0 16px rgba(196,120,92,0.2); }
        [data-theme="cozy"] body.theme-cozy .text-glow-cyan { color: var(--cf-terracotta); text-shadow: 0 0 12px rgba(196,120,92,0.25); }
        [data-theme="cozy"] body.theme-cozy .text-glow-purple { color: var(--cf-sage); text-shadow: 0 0 12px rgba(123,145,113,0.25); }

        /* impact-record section — cozy mode text visibility (text-white on cream = invisible fix) */
        [data-theme="cozy"] #impact-record .text-white,
        [data-theme="cozy"] #impact-record h2 { color: var(--cf-charcoal) !important; }
        [data-theme="cozy"] #impact-record .text-slate-500 { color: rgba(50, 48, 44, 0.60) !important; }
        [data-theme="cozy"] #impact-record .border-white\/5,
        [data-theme="cozy"] #impact-record .divide-white\/5 > * + * { border-color: rgba(26, 26, 24, 0.10) !important; }
        [data-theme="cozy"] #impact-record { border-top-color: rgba(196,120,92,0.30) !important; border-bottom-color: rgba(196,120,92,0.15) !important; }
        /* circuit SVG lines — muted warm tones in cozy */
        [data-theme="cozy"] #impact-record .circuit-line   { stroke: rgba(196,120,92,0.40) !important; }
        [data-theme="cozy"] #impact-record .circuit-line-2 { stroke: rgba(123,145,113,0.30) !important; }
        [data-theme="cozy"] #impact-record .circuit-line-3 { stroke: rgba(232,185,107,0.35) !important; }
        [data-theme="cozy"] #impact-record .circuit-node   { fill:   rgba(196,120,92,0.60) !important; }

        /* Nav CTA (SUMMON_AGENT) button — cozy palette */
        [data-theme="cozy"] .nav-cta {
            background:   rgba(196, 120, 92, 0.12) !important;
            border-color: rgba(196, 120, 92, 0.45) !important;
            color:        rgb(196, 120, 92)         !important;
            box-shadow:   none                      !important;
        }
        [data-theme="cozy"] .nav-cta:hover {
            background:   rgba(196, 120, 92, 0.22) !important;
            border-color: rgba(196, 120, 92, 0.70) !important;
            color:        rgb(175,  95,  65)        !important;
        }

        /* Neon text/bg/border → warm cozy palette remaps */
        [data-theme="cozy"] body.theme-cozy .text-neon-cyan  { color: var(--cf-terracotta) !important; text-shadow: 0 0 10px rgba(196,120,92,0.25); }
        [data-theme="cozy"] body.theme-cozy .text-neon-purple { color: var(--cf-sage) !important; text-shadow: 0 0 10px rgba(123,145,113,0.25); }
        [data-theme="cozy"] body.theme-cozy .text-neon-blue  { color: var(--cf-cobalt) !important; text-shadow: none; }
        [data-theme="cozy"] body.theme-cozy .bg-neon-cyan\/10  { background-color: rgba(196,120,92,0.10) !important; }
        [data-theme="cozy"] body.theme-cozy .bg-neon-purple\/10 { background-color: rgba(123,145,113,0.10) !important; }
        [data-theme="cozy"] body.theme-cozy .border-neon-cyan\/20 { border-color: rgba(196,120,92,0.20) !important; }
        [data-theme="cozy"] body.theme-cozy .border-neon-cyan\/50 { border-color: rgba(196,120,92,0.50) !important; }
        [data-theme="cozy"] body.theme-cozy .border-neon-purple\/30 { border-color: rgba(123,145,113,0.30) !important; }
        [data-theme="cozy"] body.theme-cozy .border-neon-purple\/50 { border-color: rgba(123,145,113,0.50) !important; }
        [data-theme="cozy"] body.theme-cozy .hover\:bg-neon-cyan:hover  { background-color: var(--cf-terracotta) !important; color: var(--cf-alabaster) !important; }
        [data-theme="cozy"] body.theme-cozy .hover\:text-obsidian:hover { color: var(--cf-charcoal) !important; }

        /* ── Background overrides ───────────────────────────── */

        /* Dark fill removal */
        [data-theme="cozy"] body.theme-cozy .bg-black { background-color: var(--cf-sand) !important; }
        [data-theme="cozy"] body.theme-cozy .bg-black\/40 { background-color: rgba(240,236,228,0.6) !important; }
        [data-theme="cozy"] body.theme-cozy .bg-black\/50 { background-color: rgba(240,236,228,0.7) !important; }
        [data-theme="cozy"] body.theme-cozy .bg-black\/60 { background-color: rgba(240,236,228,0.75) !important; }
        [data-theme="cozy"] body.theme-cozy .bg-black\/80 { background-color: rgba(240,236,228,0.85) !important; }
        [data-theme="cozy"] body.theme-cozy section.bg-black,
        [data-theme="cozy"] body.theme-cozy section.bg-black\/40 { background-color: var(--cf-cream); }

        /* Section backgrounds */
        [data-theme="cozy"] body.theme-cozy #terminal-section { background-color: var(--cf-cream); }
        [data-theme="cozy"] body.theme-cozy #grand-armory,
        [data-theme="cozy"] body.theme-cozy #alchemy-sanctum,
        [data-theme="cozy"] body.theme-cozy #obsidian-vault,
        [data-theme="cozy"] body.theme-cozy #cybernetic-augmentations { background-color: var(--cf-alabaster); }
        [data-theme="cozy"] body.theme-cozy #round-table { background-color: var(--cf-alabaster); }
        [data-theme="cozy"] body.theme-cozy #portal-trigger { background-color: var(--cf-alabaster); }
        [data-theme="cozy"] body.theme-cozy #starwars-pricing { background-color: var(--cf-cream); }
        [data-theme="cozy"] body.theme-cozy #starwars-pricing::before { background: radial-gradient(circle at 50% 50%, rgba(196,120,92,0.05), transparent 70%); }
        [data-theme="cozy"] body.theme-cozy #starwars-pricing::after { background: linear-gradient(to bottom, transparent 40%, var(--cf-cream) 100%); }
        [data-theme="cozy"] body.theme-cozy .starfield-anim { background-image:
            radial-gradient(1px 1px at 20px 30px, rgba(26,26,24,0.2), transparent),
            radial-gradient(1.5px 1.5px at 100px 150px, rgba(123,145,113,0.4), transparent),
            radial-gradient(1px 1px at 200px 100px, rgba(196,120,92,0.3), transparent),
            radial-gradient(1.2px 1.2px at 300px 250px, rgba(26,26,24,0.15), transparent); }
        [data-theme="cozy"] body.theme-cozy .pricing-blueprint-system {
            color: var(--cf-cobalt);
            opacity: 0.42;
            mix-blend-mode: multiply;
        }
        [data-theme="cozy"] body.theme-cozy .pricing-blueprint-route,
        [data-theme="cozy"] body.theme-cozy .pricing-blueprint-ring {
            stroke: rgba(63,93,141,0.28);
        }
        [data-theme="cozy"] body.theme-cozy .pricing-blueprint-core,
        [data-theme="cozy"] body.theme-cozy .pricing-route-card {
            background: rgba(245,244,240,0.48);
            border-color: rgba(63,93,141,0.18);
            color: var(--cf-cobalt);
            box-shadow: 0 30px 80px -54px rgba(63,93,141,0.65);
        }
        [data-theme="cozy"] body.theme-cozy .pricing-route-card:nth-of-type(3n) {
            color: var(--cf-sage);
            border-color: rgba(123,145,113,0.2);
        }
        [data-theme="cozy"] body.theme-cozy .pricing-route-card:nth-of-type(3n + 1) {
            color: var(--cf-terracotta);
            border-color: rgba(196,120,92,0.2);
        }

        /* ── Card & panel overrides ─────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .glass-card {
            background: linear-gradient(145deg, rgba(255,255,255,0.76) 0%, rgba(245,244,240,0.9) 100%);
            border-color: var(--cf-line-strong);
            box-shadow: 0 8px 32px -12px rgba(26,26,24,0.12);
        }
        [data-theme="cozy"] body.theme-cozy .glass-card:hover {
            border-color: rgba(196,120,92,0.3);
            box-shadow: 0 12px 40px -16px rgba(196,120,92,0.22);
            background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(241,236,223,0.95) 100%);
        }
        [data-theme="cozy"] body.theme-cozy .glass-panel {
            background: rgba(255,255,255,0.72);
            border-color: var(--cf-line);
            backdrop-filter: blur(18px);
            box-shadow: 0 4px 24px -8px rgba(26,26,24,0.1);
        }
        [data-theme="cozy"] body.theme-cozy .pricing-card-sw {
            background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(241,236,223,0.95));
            border: 1px solid var(--cf-line-strong);
        }
        [data-theme="cozy"] body.theme-cozy .pricing-card-sw:hover {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,244,240,1));
        }
        @media (max-width: 767px) {
            [data-theme="cozy"] body.theme-cozy .pricing-card-sw > .flex.flex-col.items-end {
                border-top-color: rgba(26, 26, 24, 0.1);
            }
        }

        /* ── Editorial artifact frames ─────────────────────── */
        [data-theme="cozy"] body.theme-cozy .cf-artifact-frame {
            --artifact-accent: var(--cf-terracotta);
            --artifact-soft: rgba(196, 120, 92, 0.14);
            overflow: visible !important;
            border-radius: 30px 12px 36px 18px;
            isolation: isolate;
            transform: translateZ(0);
            background:
                linear-gradient(145deg, rgba(255,255,255,0.86), rgba(241,236,223,0.74)),
                radial-gradient(circle at 18% 12%, var(--artifact-soft), transparent 42%);
            box-shadow: 0 38px 90px -55px rgba(26,26,24,0.5);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-frame--sage {
            --artifact-accent: var(--cf-sage);
            --artifact-soft: rgba(123, 145, 113, 0.16);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-frame--cobalt {
            --artifact-accent: var(--cf-cobalt);
            --artifact-soft: rgba(63, 93, 141, 0.14);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-frame::before {
            content: "";
            position: absolute;
            inset: 20px -18px -22px 18px;
            z-index: -1;
            background:
                linear-gradient(135deg, var(--artifact-soft), rgba(255,255,255,0.34)),
                repeating-linear-gradient(90deg, rgba(26,26,24,0.08) 0 1px, transparent 1px 18px);
            border: 1px solid rgba(26,26,24,0.09);
            clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 88%);
            transform: rotate(-2.5deg);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-frame::after {
            content: "";
            position: absolute;
            inset: 18px;
            z-index: 3;
            pointer-events: none;
            clip-path: polygon(5% 0%, 100% 0%, 94% 100%, 0% 91%);
            background:
                linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,0.32) 49%, transparent 55%),
                radial-gradient(circle at 82% 18%, rgba(255,255,255,0.3), transparent 24%),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 22px);
            mix-blend-mode: screen;
            opacity: 0.45;
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-core {
            z-index: 2;
            clip-path: polygon(5% 0%, 100% 0%, 94% 100%, 0% 91%);
            border-radius: 28px 10px 34px 16px;
            backface-visibility: hidden;
            transform: translateZ(0);
            will-change: clip-path;
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.55),
                inset 0 -80px 90px -80px rgba(26,26,24,0.5);
            -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 84%, rgba(0,0,0,0.72) 100%);
            mask-image: linear-gradient(135deg, #000 0%, #000 84%, rgba(0,0,0,0.72) 100%);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-img {
            border-radius: 0;
            transform-origin: 50% 50%;
            backface-visibility: hidden;
            transform: translateZ(0);
            will-change: transform;
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-label {
            z-index: 5;
            color: var(--artifact-accent);
            border-color: color-mix(in srgb, var(--artifact-accent) 46%, transparent);
            background: rgba(245,244,240,0.82) !important;
            box-shadow: 0 20px 50px -32px var(--artifact-accent);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-node {
            position: absolute;
            z-index: 6;
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: var(--artifact-accent);
            box-shadow: 0 0 0 9px var(--artifact-soft), 0 0 28px var(--artifact-accent);
            opacity: 0.86;
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-node::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 86px;
            height: 1px;
            background: linear-gradient(to right, var(--artifact-accent), transparent);
            transform-origin: left center;
            transform: rotate(24deg);
        }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-node.node-a { top: 13%; right: 10%; }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-node.node-b { left: 11%; bottom: 16%; }
        [data-theme="cozy"] body.theme-cozy .cf-artifact-node.node-c { right: 20%; bottom: 10%; width: 8px; height: 8px; opacity: 0.62; }

        /* ── Borders ────────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .border-white\/5,
        [data-theme="cozy"] body.theme-cozy .border-white\/10,
        [data-theme="cozy"] body.theme-cozy .border-white\/20 { border-color: var(--cf-line); }
        [data-theme="cozy"] body.theme-cozy .border-cyan { border-color: rgba(196,120,92,0.22); }
        [data-theme="cozy"] body.theme-cozy .border-purple { border-color: rgba(123,145,113,0.22); box-shadow: 0 0 20px rgba(123,145,113,0.06); }
        [data-theme="cozy"] body.theme-cozy .border-blue { border-color: rgba(63,93,141,0.22); }
        [data-theme="cozy"] body.theme-cozy .glow-cyan:hover { border-color: rgba(196,120,92,0.45); box-shadow: 0 0 20px rgba(196,120,92,0.18); }
        [data-theme="cozy"] body.theme-cozy .glow-purple:hover { border-color: rgba(123,145,113,0.45); box-shadow: 0 0 20px rgba(123,145,113,0.18); }
        [data-theme="cozy"] body.theme-cozy .glow-blue:hover { border-color: rgba(63,93,141,0.45); box-shadow: 0 0 20px rgba(63,93,141,0.18); }

        /* ── Grid / noise ───────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .grid-bg {
            background-size: 50px 50px;
            background-image:
                linear-gradient(to right, rgba(123,145,113,0.06) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(123,145,113,0.06) 1px, transparent 1px);
        }
        [data-theme="cozy"] body.theme-cozy .grain-overlay { opacity: 0.025; }

        /* ── Orbs warm ──────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy #bg-orbs .bg-orb:nth-child(1) { background: rgba(123,145,113,0.22); }
        [data-theme="cozy"] body.theme-cozy #bg-orbs .bg-orb:nth-child(2) { background: rgba(196,120,92,0.16); }
        [data-theme="cozy"] body.theme-cozy #bg-orbs .bg-orb:nth-child(3) { background: rgba(232,185,107,0.12); }

        /* ── Preloader ──────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy #preloader { background-color: var(--cf-alabaster); }
        [data-theme="cozy"] body.theme-cozy #preloader .grid-bg { opacity: 0.08; }
        [data-theme="cozy"] body.theme-cozy #preloader span.material-symbols-outlined { color: var(--cf-terracotta); }
        [data-theme="cozy"] body.theme-cozy #preloader #loader-text { color: var(--cf-terracotta); }
        [data-theme="cozy"] body.theme-cozy #preloader #loader-bar { background: linear-gradient(to right, var(--cf-terracotta), var(--cf-candle)); }
        [data-theme="cozy"] body.theme-cozy #preloader .border-t-2 { border-color: var(--cf-terracotta); }
        [data-theme="cozy"] body.theme-cozy #preloader .border-b-2 { border-color: var(--cf-sage); }

        /* ── Nav warm ───────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy nav .glass-panel {
            background: rgba(255,255,255,0.85);
            border-color: var(--cf-line);
            box-shadow: 0 4px 24px -8px rgba(26,26,24,0.1);
        }
        [data-theme="cozy"] body.theme-cozy nav a.text-slate-400 { color: var(--cf-muted); }
        [data-theme="cozy"] body.theme-cozy nav a:hover { color: var(--cf-charcoal); background-color: var(--cf-sand); }
        [data-theme="cozy"] body.theme-cozy nav a.text-cyan-400 { color: var(--cf-terracotta); }
        [data-theme="cozy"] body.theme-cozy nav .bg-indigo-600\/20 { background-color: rgba(196,120,92,0.12); }
        [data-theme="cozy"] body.theme-cozy nav button { border-color: rgba(196,120,92,0.5); color: var(--cf-terracotta); }

        /* ── Custom cursor ──────────────────────────────────── */
        @media (pointer: fine) {
            [data-theme="cozy"] body.theme-cozy #custom-cursor {
                background: var(--cf-terracotta);
                box-shadow: 0 0 20px 6px rgba(196,120,92,0.35);
                mix-blend-mode: multiply;
            }
        }

        /* ── Data streams warm ──────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .data-stream {
            background: linear-gradient(to right, transparent, rgba(196,120,92,0.25), transparent);
            box-shadow: none;
        }

        /* ── Marquee strip ──────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .marquee-container { color: var(--cf-alabaster); }

        /* ── Hero elements ──────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy #hero-badge {
            border-color: var(--cf-terracotta);
            background: linear-gradient(to right, rgba(196,120,92,0.1), transparent);
        }
        [data-theme="cozy"] body.theme-cozy #hero-word-2 {
            background-image: linear-gradient(to right, var(--cf-terracotta), var(--cf-candle), var(--cf-terracotta));
            color: transparent;
        }

        /* ── Portal ─────────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy #zentry-portal {
            background-color: var(--cf-cream);
            border-color: rgba(196,120,92,0.2);
            box-shadow: 0 6px 30px -6px rgba(196,120,92,0.15);
        }

        /* ── Rotating badge ─────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy .fixed.bottom-8.right-8 { mix-blend-mode: multiply; opacity: 0.5; }

        /* ── Footer ─────────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy footer {
            background-color: var(--cf-sand);
            border-top: 1px solid var(--cf-line-strong);
        }
        [data-theme="cozy"] body.theme-cozy footer .text-slate-500,
        [data-theme="cozy"] body.theme-cozy footer .text-slate-600 { color: var(--cf-muted); }
        [data-theme="cozy"] body.theme-cozy footer input { background: rgba(255,255,255,0.7); border-color: var(--cf-line-strong); color: var(--cf-charcoal); }
        [data-theme="cozy"] body.theme-cozy footer input::placeholder { color: var(--cf-muted); }

        /* ── Arsenal showcase (cozy skin) ───────────────────── */
        [data-theme="cozy"] body.theme-cozy #arsenal-main { background-color: var(--cf-alabaster); color: var(--cf-charcoal); }
        [data-theme="cozy"] body.theme-cozy #cap-web { border-color: var(--cf-line); }
        [data-theme="cozy"] body.theme-cozy #cap-web .absolute.inset-0[class*="bg-\\[radial-gradient"] { opacity: 0.04; }
        [data-theme="cozy"] body.theme-cozy #cap-ai .absolute.inset-0[class*="bg-\\[radial-gradient"] { opacity: 0.04; }
        [data-theme="cozy"] body.theme-cozy #roi-matrix { background: var(--cf-cream); border-color: var(--cf-line); }
        [data-theme="cozy"] body.theme-cozy #roi-matrix .bg-gradient-to-b { background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); }
        [data-theme="cozy"] body.theme-cozy #final-cta .glass-card { background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(241,236,223,0.95)); }

        /* Arsenal image overlays: dark-to-transparent → parchment-to-transparent */
        [data-theme="cozy"] body.theme-cozy .absolute.inset-0.bg-gradient-to-t.from-black\/80 {
            background: linear-gradient(to top, rgba(245,244,240,0.92), transparent) !important;
        }
        [data-theme="cozy"] body.theme-cozy .absolute.inset-0.bg-gradient-to-b.from-black\/80 {
            background: linear-gradient(to bottom, rgba(245,244,240,0.92), transparent) !important;
        }

        /* ── Inputs warm ────────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy input,
        [data-theme="cozy"] body.theme-cozy select,
        [data-theme="cozy"] body.theme-cozy textarea {
            background: rgba(255,255,255,0.8);
            border-color: var(--cf-line-strong);
            color: var(--cf-charcoal);
        }
        [data-theme="cozy"] body.theme-cozy input::placeholder,
        [data-theme="cozy"] body.theme-cozy textarea::placeholder { color: var(--cf-muted); }
        [data-theme="cozy"] body.theme-cozy select option { background: var(--cf-alabaster); color: var(--cf-charcoal); }

        /* ── Shadow remaps ──────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy [class*="shadow-\\[0_0_30px_rgba\\(79"] { box-shadow: 0 4px 20px -4px rgba(196,120,92,0.2); }
        [data-theme="cozy"] body.theme-cozy [class*="shadow-\\[0_0_40px_rgba\\(79"] { box-shadow: 0 6px 28px -6px rgba(196,120,92,0.25); }
        [data-theme="cozy"] body.theme-cozy [class*="drop-shadow-\\[0_0_15px_rgba\\(99"] { filter: drop-shadow(0 0 8px rgba(196,120,92,0.3)); }
        [data-theme="cozy"] body.theme-cozy [class*="drop-shadow-\\[0_0_10px_rgba\\(79"] { filter: drop-shadow(0 0 8px rgba(196,120,92,0.3)); }

        /* ── Scrollbar warm ─────────────────────────────────── */
        [data-theme="cozy"] body.theme-cozy ::-webkit-scrollbar { width: 6px; }
        [data-theme="cozy"] body.theme-cozy ::-webkit-scrollbar-track { background: var(--cf-cream); }
        [data-theme="cozy"] body.theme-cozy ::-webkit-scrollbar-thumb { background: rgba(196,120,92,0.35); border-radius: 3px; }

        /* ── Accent underline helper ────────────────────────── */
        .accent-underline {
            position: relative;
            display: inline-block;
        }
        .accent-underline::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 100%;
            height: 2px;
            background: var(--cf-terracotta);
            border-radius: 2px;
            opacity: 0.55;
        }
    


        /* ============================================================
           PREMIUM POLISH — cursor, scroll-progress, view transitions
           Theme-agnostic; theme-night.css overrides where needed.
           ============================================================ */

        /* Custom cursor blob */
        .cf-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            background: currentColor;
            color: var(--cf-terracotta, #c4785c);
            transform: translate3d(-50%, -50%, 0);
            pointer-events: none;
            /* sit above .grain-overlay (z-index 9999) and all other overlays */
            z-index: 10001;
            mix-blend-mode: difference;
            transition: width .25s ease, height .25s ease, background .25s ease, opacity .25s ease;
            opacity: 0.85;
        }
        .cf-cursor.is-hover {
            width: 44px;
            height: 44px;
            opacity: 0.55;
        }
        /* Night mode: difference blend (not screen) so cursor stays visible
           on bright text/buttons. Neon glow via box-shadow only. */
        [data-theme="night"] .cf-cursor {
            color: #6366f1;
            mix-blend-mode: difference;
            box-shadow: 0 0 18px 2px rgba(99, 102, 241, 0.55);
        }
        @media (hover: none), (prefers-reduced-motion: reduce) {
            .cf-cursor { display: none !important; }
        }
        /* Suppress native cursor everywhere so the custom blob is the only cursor */
        @media (pointer: fine) {
            html, html * { cursor: none !important; }
        }

        /* Scroll progress bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--cf-terracotta, #c4785c), var(--cf-sage, #7b9171));
            transform-origin: left center;
            transform: scaleX(0);
            z-index: 60;
            pointer-events: none;
        }
        [data-theme="night"] .scroll-progress {
            background: linear-gradient(90deg, #4f46e5, #00f2ff);
            box-shadow: 0 0 12px rgba(0, 242, 255, 0.4);
        }

        /* Cross-page view transitions (Chromium) */
        @view-transition { navigation: auto; }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 0.35s;
            animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }


        /* ============================================================
           UX / a11y polish (Phase 5d)
           ============================================================ */

        /* Skip-to-content link (keyboard users) */
        .skip-link {
            position: absolute;
            top: -50px;
            left: 16px;
            z-index: 999999;
            padding: 10px 18px;
            background: var(--cf-charcoal, #1a1a18);
            color: var(--cf-cream, #edebe6);
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            transition: top .2s ease;
        }
        .skip-link:focus {
            top: 16px;
            outline: 2px solid var(--cf-terracotta, #c4785c);
            outline-offset: 2px;
        }
        [data-theme="night"] .skip-link {
            background: #0a0a12;
            color: #e8eaf2;
        }
        [data-theme="night"] .skip-link:focus {
            outline-color: #00f2ff;
        }

        /* Visible focus indicators (only when keyboard-focused) */
        .js *:focus { outline: none; }
        .js *:focus-visible {
            outline: 2px solid var(--cf-terracotta, #c4785c);
            outline-offset: 3px;
            border-radius: 4px;
        }
        [data-theme="night"] .js *:focus-visible {
            outline-color: #00f2ff;
        }

        /* Aspect-ratio helpers (no layout shift while images load) */
        .ar-4-3   { aspect-ratio: 4 / 3; object-fit: cover; }
        .ar-16-9  { aspect-ratio: 16 / 9; object-fit: cover; }
        .ar-1-1   { aspect-ratio: 1 / 1; object-fit: cover; }
        .ar-3-2   { aspect-ratio: 3 / 2; object-fit: cover; }

        /* Footer breathing room on small screens */
        @media (max-width: 640px) {
            footer .grid {
                gap: 36px !important;
            }
            footer h5 {
                margin-bottom: 12px !important;
            }
        }

        /* Custom warm scrollbar (cozy) */
        html {
            scrollbar-width: thin;
            scrollbar-color: rgba(196, 120, 92, 0.4) transparent;
        }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb {
            background: rgba(196, 120, 92, 0.35);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(196, 120, 92, 0.6);
        }
        [data-theme="night"] html {
            scrollbar-color: rgba(99, 102, 241, 0.5) transparent;
        }
        [data-theme="night"] ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.4);
        }
        [data-theme="night"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.7);
        }

        /* Reduced-motion: silence all the long-running visual loops. */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .marquee-container,
            .scroll-progress,
            .cf-cursor {
                display: none !important;
            }
            #preloader {
                /* Skip preloader entirely for users who want less motion. */
                display: none !important;
            }
        }

        /* When skip-preloader is active, also start hero unhidden so the
           pre-set autoAlpha:0 from camelot-gsap.js is overridden. The JS
           explicitly calls playHeroAnimation in the skip path, so the
           tweens still run — but for users who land on a non-hero page
           via internal nav, this prevents any stuck-hidden state. */
        html.cf-skip-preloader [data-theme] body { opacity: 1; }

/* ── Arsenal horizontal scroll — mobile native swipe (≤ 1023px) ─ */
/* The sticky div has Tailwind's overflow-hidden which clips the track.
   Override it here so the sticky div becomes the horizontal scroll
   container and the track can overflow naturally inside it. */
@media (max-width: 1023px) {
    #cap-web .sticky {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding-left: 24px;
    }
    #cap-web .sticky::-webkit-scrollbar { display: none; }
    #cap-web-scroll {
        overflow-x: visible !important;
        width: max-content !important;
    }
}

/* ── Launch-readiness fixes: responsive hero, portal, and compact nav ── */
[data-theme="cozy"] body.theme-cozy .text-slate-400 {
    color: rgba(50, 48, 44, 0.82) !important;
}
[data-theme="cozy"] body.theme-cozy .text-slate-500,
[data-theme="cozy"] body.theme-cozy .text-slate-600 {
    color: rgba(50, 48, 44, 0.72) !important;
}

#hero h1 {
    max-width: 100%;
}

#hero-word-1,
#hero-word-2 {
    max-width: 100%;
}

#portal-text {
    font-size: clamp(4rem, 8.1vw, 7rem) !important;
    line-height: 0.94 !important;
}

@media (max-width: 640px) {
    nav.fixed {
        padding: 1rem !important;
    }
    nav.fixed > .glass-panel {
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }
    nav.fixed .nav-cta {
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: 999px !important;
        justify-content: center;
        flex: 0 0 44px;
        overflow: hidden;
        color: transparent !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }
    nav.fixed .nav-cta::before {
        content: "//";
        color: rgb(var(--cft-terracotta));
        font: 700 12px/1 "JetBrains Mono", monospace;
        letter-spacing: 0.06em;
    }
    [data-theme="night"] nav.fixed .nav-cta::before {
        color: #a5b4fc;
    }
    nav.fixed .theme-toggle {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }
    nav.fixed .flex.items-center.gap-4:last-child {
        gap: 0.55rem !important;
    }
    nav.fixed .flex.flex-col span:first-child {
        font-size: 1rem !important;
        max-width: 8.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #hero {
        min-height: auto;
        padding-top: 7.5rem !important;
        padding-bottom: 3rem !important;
    }
    #hero h1 {
        font-size: clamp(3rem, 13vw, 4rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.045em !important;
    }
    #hero-word-1 {
        white-space: nowrap !important;
        font-size: clamp(2.25rem, 9.4vw, 2.55rem) !important;
        letter-spacing: -0.055em !important;
    }
    #hero-word-2 {
        font-size: clamp(3.15rem, 15vw, 4.25rem) !important;
    }
    #hero-p {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
    }
    #hero-stats {
        gap: 1.25rem !important;
    }
    #portal-trigger .h-screen {
        min-height: 760px;
    }
    #portal-text {
        font-size: clamp(3.4rem, 16vw, 4.6rem) !important;
        letter-spacing: -0.055em !important;
    }
}

@media (max-width: 1180px) {
    nav.fixed {
        padding: 1rem !important;
    }
    nav.fixed > .glass-panel {
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }
    nav.fixed > .glass-panel > div:last-child > div.hidden {
        display: none !important;
    }
    nav.fixed .nav-cta {
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: 999px !important;
        justify-content: center;
        flex: 0 0 44px;
        overflow: hidden;
        color: transparent !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }
    nav.fixed .nav-cta::before {
        content: "//";
        color: rgb(var(--cft-terracotta));
        font: 700 12px/1 "JetBrains Mono", monospace;
        letter-spacing: 0.06em;
    }
    [data-theme="night"] nav.fixed .nav-cta::before {
        color: #a5b4fc;
    }
}

/* Hide nav links container only on true mobile — §12 JS manages 768–1379 px */
@media (max-width: 767px) {
    nav.fixed > .glass-panel > div:nth-child(2) {
        display: none !important;
    }
}