@font-face {
    font-family: 'GraphikCustom';
    src: url('../fonts/graphik/graphik_regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikCustom';
    src: url('../fonts/graphik/graphik_medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BoingDisplay';
    src: url('../fonts/boing/boing_semibold_web.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --ui-marketing-hero-bg: #090a0d;
    --ui-marketing-spotlight:
        radial-gradient(circle at 12% 0%, rgba(138, 99, 255, 0.28), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(245, 158, 11, 0.12), transparent 20%),
        radial-gradient(circle at 72% 30%, rgba(143, 231, 255, 0.1), transparent 18%);
    --ui-marketing-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
    --marketing-body-font: 'GraphikCustom', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --marketing-display-font: 'BoingDisplay', 'GraphikCustom', 'Inter', system-ui, sans-serif;
    --marketing-line: rgba(255, 255, 255, 0.08);
    --marketing-line-strong: rgba(255, 255, 255, 0.12);
    --marketing-muted: rgba(210, 212, 219, 0.74);
    --marketing-soft: rgba(255, 255, 255, 0.04);
    --marketing-soft-strong: rgba(255, 255, 255, 0.07);
    --marketing-warm: #f59e0b;
    --marketing-warm-soft: rgba(245, 158, 11, 0.12);
    --marketing-content-max: 1440px;
    --marketing-copy-max: 38rem;
    --marketing-section-space: clamp(4.25rem, 8vw, 6.8rem);
    --marketing-header-height: 88px;
    --marketing-header-height-mobile: 78px;
}

html {
    background: var(--ui-bg);
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--marketing-header-height) + 20px);
}

html,
body {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.marketing-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    color: var(--ui-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #111217 0%, #090a0d 48%, #0c0e12 100%);
    font-family: var(--marketing-body-font);
}

body.marketing-shell.menu-open {
    overflow: hidden;
}

body.marketing-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        var(--ui-marketing-spotlight);
    background-size: 96px 96px, 96px 96px, auto;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.18) 70%, transparent);
    opacity: 0.48;
    pointer-events: none;
    z-index: 0;
}

body.marketing-shell::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.06), transparent 24%),
        radial-gradient(circle at top right, rgba(138, 99, 255, 0.08), transparent 28%),
        radial-gradient(rgba(255, 255, 255, 0.045) 0.75px, transparent 0.75px);
    background-size: auto, auto, 18px 18px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
}

body.marketing-shell a {
    -webkit-tap-highlight-color: transparent;
}

body.marketing-shell :focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.82);
    outline-offset: 3px;
}

.marketing-container {
    width: 100%;
    max-width: var(--marketing-content-max);
    margin: 0 auto;
    padding: 0 clamp(18px, 5vw, 44px);
}

.marketing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: var(--marketing-header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(9, 10, 13, 0.54);
    backdrop-filter: blur(18px);
    transition:
        height var(--ui-duration-base) var(--ui-ease),
        background var(--ui-duration-base) var(--ui-ease),
        border-color var(--ui-duration-base) var(--ui-ease),
        box-shadow var(--ui-duration-base) var(--ui-ease);
}

.marketing-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.26), transparent);
    opacity: 0;
    transition: opacity var(--ui-duration-base) var(--ui-ease);
}

.marketing-header.is-scrolled {
    height: 76px;
    background: rgba(9, 10, 13, 0.86);
    border-bottom-color: var(--marketing-line-strong);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.marketing-header.is-scrolled::after {
    opacity: 1;
}

.marketing-content,
.marketing-footer {
    position: relative;
    z-index: 1;
}

.marketing-content {
    flex: 1;
    padding-top: var(--marketing-header-height);
}

.marketing-footer {
    margin-top: 2rem;
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: calc(var(--marketing-header-height-mobile) + 18px);
    }

    .marketing-header {
        height: var(--marketing-header-height-mobile);
    }

    .marketing-header.is-scrolled {
        height: 70px;
    }

    .marketing-content {
        padding-top: var(--marketing-header-height-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}