:root {
            color-scheme: light;
            --ink: #0e1c30;
            --muted: #566a84;
            --muted-dark: #aab6c8;
            --navy: #101d31;
            --navy-soft: #1d2b42;
            --surface: #ffffff;
            --canvas: #f2f6fb;
            --line: #dde5ef;
            --violet: #5952f3;
            --brand-accent: #4C46DF;
            --brand-accent-rgb: 76, 70, 223;
            --radius-lg: 34px;
            --radius-md: 24px;
            --radius-chapter: 42px;
            --section-gap: clamp(48px, 5vw, 72px);
        }

        * { box-sizing: border-box; }

        html {
            min-width: 320px;
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            position: relative;
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(circle at 88% 7%, rgba(var(--brand-accent-rgb), 0.12), transparent 25%),
                linear-gradient(135deg, #f0f3ff 0%, var(--canvas) 48%, #f6fbfc 100%);
            font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        body::before {
            position: fixed;
            z-index: -1;
            width: min(42vw, 680px);
            aspect-ratio: 1;
            top: -18vw;
            right: -10vw;
            content: "";
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.2), rgba(var(--brand-accent-rgb), 0));
            filter: blur(8px);
            pointer-events: none;
            animation: canvas-drift 16s ease-in-out infinite alternate;
        }

        button,
        input,
        select { font: inherit; }

        a { color: inherit; }

        section[id] { scroll-margin-top: 132px; }

        .shell {
            width: min(100% - 48px, 1560px);
            margin-inline: auto;
            padding-block: 22px 48px;
        }

        .topbar {
            position: sticky;
            z-index: 80;
            top: max(12px, env(safe-area-inset-top));
            display: flex;
            align-items: center;
            min-height: 100px;
            padding: 16px 24px;
            color: #f7f9fd;
            background: #172334;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 40px;
            box-shadow: 0 22px 55px rgba(16, 29, 49, 0.16);
            animation: enter 620ms ease-out both;
            transition: min-height 180ms ease, padding 180ms ease, border-radius 180ms ease, box-shadow 180ms ease, background 180ms ease;
        }

        .topbar.is-scrolled {
            min-height: 82px;
            padding-block: 11px;
            background: rgba(23, 35, 52, 0.96);
            border-radius: 30px;
            box-shadow: 0 18px 44px rgba(16, 29, 49, 0.24);
            backdrop-filter: blur(16px);
        }

        .identity {
            display: block;
            width: clamp(195px, 21vw, 276px);
            min-width: 0;
            line-height: 0;
            text-decoration: none;
        }

        .identity img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
        }


        .nav {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }

        .nav a {
            padding: 13px 18px;
            color: #b8c1ce;
            border-radius: 999px;
            font-size: var(--fp-site-support);
            text-decoration: none;
            white-space: nowrap;
            transition: color 180ms ease, background 180ms ease, transform 180ms ease;
        }

        .nav a:hover,
        .nav a:focus-visible,
        .nav a[aria-current="page"] {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-1px);
            outline: none;
        }

        .launch-status {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-left: 18px;
            padding: 10px 14px;
            color: #dce5f2;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            font-size: var(--fp-site-caption);
            font-weight: 760;
            white-space: nowrap;
        }

        .launch-status::before {
            width: 8px;
            height: 8px;
            content: "";
            background: var(--brand-accent);
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.12);
            animation: status-pulse 2.2s ease-in-out infinite;
        }

        .menu-toggle {
            display: none;
            width: 46px;
            height: 46px;
            padding: 0;
            color: #fff;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            cursor: pointer;
        }

        .menu-toggle-lines {
            position: relative;
            display: block;
            width: 19px;
            height: 14px;
            margin: auto;
        }

        .menu-toggle-lines::before,
        .menu-toggle-lines::after,
        .menu-toggle-lines span {
            position: absolute;
            left: 0;
            width: 19px;
            height: 2px;
            content: "";
            background: currentColor;
            border-radius: 99px;
            transition: top 180ms ease, transform 180ms ease, opacity 140ms ease;
        }

        .menu-toggle-lines::before { top: 0; }
        .menu-toggle-lines span { top: 6px; }
        .menu-toggle-lines::after { top: 12px; }


        footer {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            min-height: 118px;
            gap: 18px 28px;
            padding-block: 22px 10px;
            color: #566a84;
            font-size: var(--fp-site-support);
        }

        footer strong { color: var(--ink); }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            justify-self: center;
        }

        .footer-logo img {
            display: block;
            width: 104px;
            height: auto;
            filter: brightness(0) saturate(100%);
            opacity: 0.9;
        }

        .footer-meta {
            justify-self: start;
            max-width: 420px;
            line-height: 1.45;
        }

        .footer-tagline {
            justify-self: end;
        }

        .footer-credit {
            color: inherit;
            font: inherit;
            font-weight: 500;
            text-decoration: none;
            transition: color 180ms ease;
        }

        .footer-credit:hover,
        .footer-credit:focus-visible {
            color: #4B46DE;
        }

        .footer-credit:focus-visible {
            border-radius: 3px;
            outline: 2px solid rgba(75, 70, 222, 0.4);
            outline-offset: 4px;
        }

        .footer-legal {
            display: flex;
            flex-wrap: wrap;
            grid-column: 1 / -1;
            gap: 8px 22px;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding-top: 17px;
            border-top: 1px solid rgba(86, 106, 132, 0.18);
            font-size: var(--fp-site-caption);
        }

        .footer-legal a,
        .footer-legal button {
            padding: 4px 0;
            color: #526781;
            background: none;
            border: 0;
            cursor: pointer;
            font: inherit;
            text-decoration: none;
            text-underline-offset: 4px;
            transition: color 180ms ease;
        }

        .footer-legal a:hover,
        .footer-legal button:hover,
        .footer-legal a:focus-visible,
        .footer-legal button:focus-visible {
            color: var(--brand-accent);
            text-decoration: underline;
        }

        .footer-legal a:focus-visible,
        .footer-legal button:focus-visible {
            border-radius: 3px;
            outline: 2px solid rgba(var(--brand-accent-rgb), 0.4);
            outline-offset: 4px;
        }

        .privacy-notice {
            position: fixed;
            z-index: 100;
            right: max(18px, env(safe-area-inset-right));
            left: max(18px, env(safe-area-inset-left));
            bottom: max(18px, env(safe-area-inset-bottom));
            margin-inline: auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 18px;
            align-items: center;
            width: min(620px, calc(100% - 36px));
            padding: 14px 16px 14px 18px;
            color: #f7f9fd;
            background:
                radial-gradient(circle at 100% 0, rgba(var(--brand-accent-rgb), 0.22), transparent 36%),
                #172334;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 18px;
            box-shadow: 0 24px 70px rgba(7, 16, 30, 0.28);
            animation: privacy-rise 360ms ease-out both;
        }

        .privacy-notice[hidden] { display: none; }

        .privacy-notice-label {
            display: block;
            margin-bottom: 4px;
            color: #9eafc5;
            font-size: var(--fp-site-label);
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .privacy-notice strong {
            display: block;
            font-size: var(--fp-site-body);
            letter-spacing: -0.025em;
        }

        .privacy-notice p {
            max-width: 470px;
            margin: 3px 0 0;
            color: #bbc7d8;
            font-size: var(--fp-site-caption);
            line-height: 1.4;
        }

        .privacy-notice a {
            color: #f7f9fd;
            font-weight: 720;
            text-underline-offset: 4px;
        }

        .privacy-notice .primary-action {
            min-width: 104px;
            min-height: 42px;
            padding: 0.7rem 1rem;
            margin: 0;
            cursor: pointer;
            white-space: nowrap;
        }


        @keyframes enter {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes hero-rise {
            from { opacity: 0; transform: translateY(26px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes canvas-drift {
            from { transform: translate3d(-2%, -1%, 0) scale(0.94); }
            to { transform: translate3d(5%, 7%, 0) scale(1.08); }
        }

        @keyframes privacy-rise {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes orbit {
            from { transform: translate3d(-18px, 12px, 0) rotate(-8deg); }
            to { transform: translate3d(24px, -18px, 0) rotate(8deg); }
        }

        @keyframes status-pulse {
            0%, 100% {
                opacity: 0.72;
                box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.1), 0 0 10px rgba(var(--brand-accent-rgb), 0.2);
                transform: scale(0.9);
            }
            50% {
                opacity: 1;
                box-shadow: 0 0 0 7px rgba(var(--brand-accent-rgb), 0.16), 0 0 18px rgba(var(--brand-accent-rgb), 0.7);
                transform: scale(1.08);
            }
        }


@media (max-width: 1280px) {
            .topbar {
                flex-wrap: wrap;
                padding: 14px 18px 12px;
                border-radius: 28px;
            }
            .nav {
                order: 3;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 4px;
                margin: 8px 0 0;
                padding-top: 10px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }
            .nav a {
                flex: 0 0 auto;
                padding: 10px 12px;
                font-size: var(--fp-site-caption);
            }
        }

        
@media (max-width: 700px) {
            :root { --section-gap: 44px; }
            .shell {
                width: min(100% - 24px, 1560px);
                padding-block: 12px 30px;
            }

            .topbar {
                min-height: 78px;
                padding: 12px 14px 10px;
                border-radius: 24px;
            }

            .topbar.is-scrolled {
                min-height: 68px;
                padding-block: 9px;
                border-radius: 20px;
            }

            .identity { width: min(45vw, 176px); }
            .launch-status { display: none; }
            .menu-toggle {
                display: inline-grid;
                place-items: center;
                margin-left: auto;
            }
            .menu-toggle:focus-visible {
                outline: 3px solid rgba(159, 179, 220, 0.45);
                outline-offset: 3px;
            }
            .nav {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2px;
                max-height: 0;
                margin-top: 0;
                padding: 0 4px;
                overflow: hidden;
                opacity: 0;
                border-top-color: transparent;
                pointer-events: none;
                transform: translateY(-6px);
                transition: max-height 240ms ease, margin 180ms ease, padding 180ms ease, opacity 160ms ease, transform 180ms ease;
            }
            .nav a {
                min-width: 0;
                padding: 12px 10px;
                border-radius: 12px;
                text-align: left;
            }
            .topbar.is-menu-open .nav {
                max-height: min(420px, calc(100svh - 120px));
                margin-top: 12px;
                padding: 12px 4px 4px;
                overflow-y: auto;
                opacity: 1;
                border-top-color: rgba(255, 255, 255, 0.1);
                pointer-events: auto;
                transform: translateY(0);
            }
            .topbar.is-menu-open .menu-toggle-lines::before {
                top: 6px;
                transform: rotate(45deg);
            }
            .topbar.is-menu-open .menu-toggle-lines span { opacity: 0; }
            .topbar.is-menu-open .menu-toggle-lines::after {
                top: 6px;
                transform: rotate(-45deg);
            }

            footer {
                grid-template-areas:
                    "logo logo"
                    "meta tagline"
                    "legal legal";
                grid-template-columns: 1fr auto;
                min-height: 150px;
                gap: 12px 18px;
                padding-block: 16px;
                font-size: var(--fp-site-caption);
            }
            .footer-logo { grid-area: logo; }
            .footer-logo img { width: 92px; }
            .footer-meta { grid-area: meta; justify-self: start; }
            .footer-tagline { grid-area: tagline; }
            .footer-legal {
                grid-area: legal;
                justify-content: flex-start;
                gap: 7px 18px;
            }

            .privacy-notice {
                right: 12px;
                left: 12px;
                bottom: max(12px, env(safe-area-inset-bottom));
                grid-template-columns: minmax(0, 1fr) auto;
                gap: 12px;
                width: calc(100% - 24px);
                padding: 14px;
                border-radius: 18px;
            }

 .privacy-notice .primary-action { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }

            [data-reveal] {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }