:root {
    --ink: #061018;
    --storm: #0b1f33;
    --deep: #12324f;
    --sky: #1487b8;
    --teal: #0f766e;
    --foam: #e7f3f7;
    --mist: #f3f7f9;
    --sand: #ebe6df;
    --paper: #faf8f5;
    --line: rgba(11, 31, 51, 0.12);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        ui-sans-serif,
        system-ui,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    color: var(--ink);
    background: var(--mist);
    -webkit-font-smoothing: antialiased;
}

.font-display {
    font-family: inherit;
}

.bg-storm {
    background: var(--storm);
}

.bg-ink {
    background: var(--ink);
}

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

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

.bg-foam {
    background: var(--foam);
}

.bg-paper {
    background: var(--paper);
}

.bg-sand {
    background: var(--sand);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--sky);
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.35s var(--ease), background 0.25s ease, box-shadow 0.35s var(--ease);
}

.btn-primary:hover {
    background: #0f6f99;
    transform: translateY(-2px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s var(--ease);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
}

.btn-outline-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--line);
    color: var(--storm);
    font-weight: 600;
    background: transparent;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s var(--ease);
}

.btn-outline-ink:hover {
    background: var(--foam);
    border-color: rgba(20, 135, 184, 0.35);
    transform: translateY(-2px);
}

.hero-plane {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(20, 135, 184, 0.35), transparent 55%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(15, 118, 110, 0.25), transparent 50%),
        linear-gradient(145deg, #061018 0%, #0b1f33 45%, #12324f 100%);
}

.hero-plane::before {
    content: "";
    position: absolute;
    inset: 0;
    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);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
    pointer-events: none;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.45;
    animation: hero-drift 28s var(--ease) infinite alternate;
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(6, 16, 24, 0.92) 0%,
        rgba(11, 31, 51, 0.78) 42%,
        rgba(11, 31, 51, 0.45) 100%
    );
}

@keyframes hero-drift {
    from {
        transform: scale(1.05) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.12) translate3d(-2%, -1%, 0);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-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;
}

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

.hero-plane .reveal {
    animation: rise-in 0.9s var(--ease) both;
}

.hero-plane .reveal-delay-1 {
    animation-delay: 0.12s;
}

.hero-plane .reveal-delay-2 {
    animation-delay: 0.24s;
}

.hero-plane .reveal-delay-3 {
    animation-delay: 0.36s;
}

.module-row {
    border-top: 1px solid var(--line);
    transition: background 0.35s var(--ease);
}

.module-row:hover {
    background: rgba(20, 135, 184, 0.04);
}

.module-row:last-child {
    border-bottom: 1px solid var(--line);
}

.feature-rail {
    display: grid;
    gap: 0;
}

.feature-rail > * {
    border-top: 1px solid var(--line);
    padding-block: 1.75rem;
}

.feature-rail > *:last-child {
    border-bottom: 1px solid var(--line);
}

.nav-scrolled {
    background: rgba(250, 248, 245, 0.92) !important;
    backdrop-filter: blur(14px);
    color: var(--storm) !important;
    box-shadow: 0 1px 0 var(--line);
}

.nav-scrolled .brand-mark {
    color: var(--storm);
}

.nav-scrolled .nav-link {
    color: var(--storm) !important;
}

.nav-scrolled .btn-login {
    color: var(--storm);
    border-color: var(--line);
}

.nav-scrolled .btn-login:hover {
    background: var(--foam);
}

footer .brand-mark {
    color: #fff;
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-chevron {
    transition: transform 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .hero-media img,
    .reveal,
    .btn-primary,
    .btn-ghost,
    .btn-outline-ink {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}