/* ============================================================
 * DEAD COLD GAMES — STATIC STYLESHEET
 * Pure HTML/CSS only. No frameworks.
 * ============================================================ */

/* ---------- TUNING (edit these to taste) ---------- */
:root {
    /* Colors */
    --bg: #050608;
    --bg-soft: #070a0f;
    --bg-deep: #030405;
    --surface: #0a0d12;
    --text: #f8fafc;
    --text-soft: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faded: #64748b;
    --text-faint: #475569;
    --line: rgba(255, 255, 255, 0.06);
    --line-2: rgba(255, 255, 255, 0.1);
    --line-3: rgba(255, 255, 255, 0.15);
    --emerald: #34d399;
    --tint-blue: rgba(147, 197, 253, 0.5);
    --tint-violet: rgba(196, 181, 253, 0.5);

    /* Holo shimmer — change these to slow/brighten */
    --holo-duration: 5.5s;
    --holo-intensity: 1;
    --holo-tint-cyan: rgba(147, 197, 253, 0.82);
    --holo-tint-violet: rgba(216, 180, 254, 0.78);
    --holo-tint-center: rgba(255, 255, 255, 1);
}

/* ---------- RESET / BASE ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
html,
body {
    background: var(--bg);
    color: var(--text);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: dark;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none; 
}

.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 300px;
    height: 230px;
    border-radius: 54% 46% 58% 42% / 48% 58% 42% 52%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 38% 44%, rgba(255, 255, 255, 0.12), transparent 12%),
        radial-gradient(ellipse at 42% 50%, rgba(147, 197, 253, 0.22), transparent 54%),
        radial-gradient(ellipse at 66% 42%, rgba(216, 180, 254, 0.16), transparent 58%);
    filter: blur(22px);
    transition: opacity 220ms ease;
    animation: cursor-smoke-morph 5.8s ease-in-out infinite;
    will-change: transform, opacity, border-radius;
}

.cursor-glow::before,
.cursor-glow::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: radial-gradient(ellipse, rgba(147, 197, 253, 0.18), transparent 64%);
}

.cursor-glow::after {
    inset: 24% 6% 18% 34%;
    background: radial-gradient(ellipse, rgba(216, 180, 254, 0.16), transparent 66%);
}

.cursor-glow.is-visible {
    opacity: 0.72;
}

.custom-cursor-ready,
.custom-cursor-ready * {
    cursor: none !important;
}

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 10px;
    height: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: #bae6fd;
    box-shadow:
        0 0 0 1px rgba(5, 6, 8, 0.9),
        0 0 8px rgba(147, 197, 253, 0.95),
        0 0 16px rgba(216, 180, 254, 0.5);
    transition: opacity 140ms ease;
    will-change: transform, opacity;
}

.cursor-dot.is-visible {
    opacity: 1;
}

.cursor-smoke {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: var(--smoke-size);
    height: var(--smoke-size);
    border-radius: 52% 48% 60% 40% / 44% 56% 42% 58%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.1), transparent 18%),
        radial-gradient(ellipse at 42% 54%, rgba(147, 197, 253, 0.2), transparent 60%),
        radial-gradient(ellipse at 66% 42%, rgba(216, 180, 254, 0.14), transparent 64%);
    filter: blur(12px);
    animation: cursor-smoke-drift var(--smoke-duration, 900ms) ease-out forwards;
    transform: translate3d(var(--smoke-x), var(--smoke-y), 0) translate(-50%, -50%);
    will-change: transform, opacity, border-radius;
}

@keyframes cursor-smoke-morph {
    0%,
    100% {
        border-radius: 54% 46% 58% 42% / 48% 58% 42% 52%;
    }
    35% {
        border-radius: 48% 52% 44% 56% / 58% 46% 54% 42%;
    }
    70% {
        border-radius: 60% 40% 52% 48% / 44% 54% 46% 56%;
    }
}

@keyframes cursor-smoke-drift {
    0% {
        opacity: 0;
        border-radius: 52% 48% 60% 40% / 44% 56% 42% 58%;
        transform: translate3d(var(--smoke-x), var(--smoke-y), 0) translate(-50%, -50%) rotate(0deg) scale(0.35);
    }
    22% {
        opacity: var(--smoke-opacity, 0.52);
    }
    48% {
        opacity: var(--smoke-mid-opacity, 0.38);
        border-radius: 58% 42% 46% 54% / 48% 58% 42% 52%;
        transform: translate3d(
                calc(var(--smoke-x) + var(--smoke-mid-x, var(--smoke-drift-x))),
                calc(var(--smoke-y) + var(--smoke-mid-y, var(--smoke-drift-y))),
                0
            )
            translate(-50%, -50%)
            rotate(var(--smoke-mid-rotate, 0deg))
            scale(var(--smoke-mid-scale-x, 1), var(--smoke-mid-scale-y, 1));
    }
    100% {
        opacity: 0;
        border-radius: 44% 56% 46% 54% / 58% 42% 56% 44%;
        transform: translate3d(
                calc(var(--smoke-x) + var(--smoke-drift-x)),
                calc(var(--smoke-y) + var(--smoke-drift-y)),
                0
            )
            translate(-50%, -50%)
            rotate(var(--smoke-rotate))
            scale(var(--smoke-scale-x), var(--smoke-scale-y));
    }
}
img {
    display: block;
    max-width: 100%;
}
a,
button {
    font: inherit;
    color: inherit;
}
button {
    background: none;
    border: 0;
    cursor: pointer;
}
ul {
    list-style: none;
}
::selection {
    background: var(--text);
    color: var(--bg);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: #1c2027;
}
::-webkit-scrollbar-thumb:hover {
    background: #2a2f38;
}

/* ---------- LAYOUT HELPERS ---------- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .container {
        padding: 0 48px;
    }
}
.section {
    padding: 96px 0;
    position: relative;
    border-top: 1px solid var(--line);
    z-index: 1;
}
@media (min-width: 768px) {
    .section {
        padding: 160px 0;
    }
}
.text-white {
    color: var(--text);
}
.text-muted {
    color: var(--text-faded);
}
.text-soft {
    color: var(--text-soft);
}
.italic-light {
    font-style: italic;
    font-weight: 300;
}
.muted {
    color: var(--text-faint);
}
.small {
    font-size: 11px;
}
.mono,
.mono-text {
    font-family: "IBM Plex Sans", monospace;
    font-feature-settings: "ss01";
    letter-spacing: 0.04em;
}

.overline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 700;
}
.overline.mono {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--text-faint);
}
.status-dot {
    width: 8px;
    height: 8px;
    background: var(--emerald);
    border-radius: 50%;
    animation: slow-pulse 6s ease-in-out infinite;
}

/* ---------- TYPOGRAPHY ---------- */
.section-h2 {
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 20px;
}
@media (min-width: 1024px) {
    .section-h2 {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }
}
.section-lead {
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.6;
    max-width: 28rem;
    font-size: 1rem;
}

/* ---------- HEADING HOLO SHIMMER ---------- */
.holo-title {
    position: relative;
}
.holo-title-text {
    display: inline-block;
    position: relative;
}
.holo-title-text::after {
    content: attr(data-holo-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    white-space: pre-line;
    color: transparent;
    background-image: linear-gradient(
        110deg,
        transparent 35%,
        rgba(186, 230, 253, 0.78) 44%,
        rgba(255, 255, 255, 1) 50%,
        rgba(216, 180, 254, 0.72) 56%,
        transparent 65%
    );
    background-size: 280% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
}
.holo-title:hover,
.holo-title.is-holo-active {
    animation: none;
}
.holo-title:hover .holo-title-text::after,
.holo-title.is-holo-active .holo-title-text::after {
    animation: title-holo-sweep 620ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2px;
    text-decoration: none;
    transition:
        background 200ms,
        color 200ms,
        border-color 200ms,
        opacity 200ms;
    cursor: pointer;
    line-height: 1;
}
.btn-primary {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}
.btn-primary:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
}
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-3);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
 * NAV
 * ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition:
        background 300ms,
        backdrop-filter 300ms,
        border-color 300ms;
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
    background: rgba(5, 6, 8, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--line);
}
.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .nav-inner {
        padding: 0 48px;
        height: 80px;
    }
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-logo-mark {
    position: relative;
    height: 32px;
    width: 32px;
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
}
@media (min-width: 768px) {
    .nav-logo-mark {
        height: 36px;
        width: 36px;
    }
}
.nav-logo-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.9;
    transition:
        opacity 300ms,
        transform 300ms;
    animation: nav-logo-shimmer 3.5s ease-in-out infinite;
}
.nav-logo:hover .nav-logo-img {
    opacity: 1;
    transform: rotate(4deg);
}
.nav-logo-wordmark {
    display: none;
    font-family: "Syncopate", sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    font-weight: 700;
    line-height: 1;
}
@media (min-width: 640px) {
    .nav-logo-wordmark {
        display: block;
    }
}
.nav-logo-sub {
    display: block;
    color: var(--text-faded);
    font-weight: 400;
    margin-top: 4px;
}

.nav-links {
    display: none;
    align-items: center;
    gap: 32px;
}
@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
}
@media (min-width: 1024px) {
    .nav-links {
        gap: 40px;
    }
}
.nav-link {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    color: var(--text-soft);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    padding: 4px 0;
    transition: color 200ms;
}
.nav-link:link,
.nav-link:visited {
    color: var(--text-soft);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms;
}
.nav-link:hover {
    color: #fff;
}
.nav-link:hover::after {
    transform: scaleX(1);
}
a.nav-link::after {
    content: none;
}
.nav-cta {
    padding: 8px 20px;
    font-size: 11px;
}

.nav-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 8px;
}
@media (min-width: 768px) {
    .nav-mobile-toggle {
        display: none;
    }
}
.nav-mobile-toggle .icon-close {
    display: none;
}
.nav-mobile-toggle.is-open .icon-menu {
    display: none;
}
.nav-mobile-toggle.is-open .icon-close {
    display: block;
}
.nav-mobile {
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    background: rgba(5, 6, 8, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
}
.nav-mobile.is-open {
    display: flex;
}
.nav-mobile .nav-link {
    text-align: left;
    font-size: 13px;
}

/* ============================================================
 * HERO
 * ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    border-top: 0;
}
.hero-watermark {
    position: absolute;
    right: 4%;
    top: 8%;
    width: 50vw;
    max-width: 660px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
@media (min-width: 768px) {
    .hero-watermark {
        right: 4%;
        top: 10%;
        width: 34vw;
    }
}
.hero-watermark img {
    width: 100%;
    opacity: 0.07;
    transform: rotate(-4deg);
}
.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.4) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.4) 1px,
            transparent 1px
        );
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 2;
}
.hero-inner {
    position: relative;
    z-index: 10;
    padding-top: 160px;
    padding-bottom: 96px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .hero-inner {
        padding-top: 192px;
        padding-bottom: 128px;
    }
}

.hero-headline {
    font-family: "Outfit", sans-serif;
    font-size: clamp(3rem, 8vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text);
    margin-top: 32px;
}
.hero-subline {
    margin-top: 40px;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-muted);
}
@media (min-width: 768px) {
    .hero-subline {
        font-size: 1.125rem;
    }
}
.hero-ctas {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-stats {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-top: 64px;
    margin-top: 64px;
    border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
    .hero-stats {
        display: grid;
    }
}
.stat-num {
    font-family: "Syncopate", sans-serif;
    font-size: 1.5rem;
    color: var(--text);
    letter-spacing: -0.02em;
}
.stat-label {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 200ms;
}
@media (min-width: 768px) {
    .hero-scroll {
        right: 48px;
    }
}
.hero-scroll:hover {
    color: var(--text);
}

.game-page {
    background: var(--bg);
}
.game-page-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 140px 0 80px;
    overflow: hidden;
}
.game-page-inner {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 980px) {
    .game-page-inner {
        grid-template-columns: 7fr 5fr;
    }
}
.game-page-meta {
    margin-top: 36px;
}
.game-page-poster {
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.025);
    min-height: 320px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.game-page-poster img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

/* Grain */
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
 * SECTION FADE (intersection observer driven)
 * ============================================================ */
.section-fade {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* ============================================================
 * GAMES SECTION
 * ============================================================ */
.section-games {
    background: var(--bg);
    border-top: 0;
}
.game-page-section {
    padding-top: 132px;
}
@media (min-width: 768px) {
    .game-page-section {
        padding-top: 176px;
    }
}
.section-head {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 80px;
}
@media (min-width: 768px) {
    .section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .section-head .section-lead {
        text-align: right;
    }
}

.games-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -32px 0 28px;
}
.game-count {
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.28em;
}
.game-control-buttons {
    display: inline-flex;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    overflow: hidden;
}
.game-control {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-right: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
    cursor: pointer;
    transition:
        background 200ms,
        color 200ms,
        opacity 200ms;
}
.game-control:last-child {
    border-right: 0;
}
.game-control:hover:not(:disabled),
.game-control:focus-visible {
    background: #fff;
    color: #000;
}
.game-control:disabled {
    cursor: default;
    opacity: 0.35;
}
.game-title-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.game-title-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition:
        background 200ms,
        border-color 200ms,
        color 200ms;
}
.game-title-tab:hover,
.game-title-tab:focus-visible,
.game-title-tab.is-active {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.games-scroller:focus-visible {
    outline: 1px solid var(--line-3);
    outline-offset: 8px;
}
.games-track {
    display: grid;
    align-items: start;
}
.game-showcase {
    grid-area: 1 / 1;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.015);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        visibility 0s linear 260ms;
}
.game-showcase.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        visibility 0s;
}
.game-showcase-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}
.game-title {
    margin-top: 8px;
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 800;
    line-height: 0.95;
}
.game-showcase-head p {
    max-width: 34rem;
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .games-carousel-controls {
        margin-top: -48px;
    }
    .game-showcase {
        padding: 32px;
    }
    .game-showcase-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .game-showcase-head p {
        text-align: right;
    }
}

/* Trailer placeholder */
.trailer {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    cursor: pointer;
    margin-bottom: 40px;
    transition: transform 600ms;
}
.trailer:hover .play-btn {
    transform: scale(1.1);
}
.trailer-bg {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background: radial-gradient(
        1200px 400px at 30% 30%,
        rgba(148, 163, 184, 0.18),
        transparent 60%
    );
}
.trailer-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 33%;
    opacity: 0.05;
}
.trailer-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trailer-bar {
    position: absolute;
    left: 0;
    right: 0;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.trailer-bar-top {
    top: 0;
}
.trailer-dots {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.trailer-dots > span:not(.mono-text) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}
.trailer-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms;
    box-shadow: 0 0 80px rgba(148, 163, 184, 0.25);
}
.play-btn svg {
    margin-left: 6px;
}
@media (min-width: 768px) {
    .play-btn {
        width: 96px;
        height: 96px;
    }
}
.trailer-title {
    margin-top: 6px;
    font-family: "Outfit", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}
@media (min-width: 768px) {
    .trailer-title {
        font-size: 1.5rem;
    }
}
.trailer-pill {
    position: absolute;
    top: 56px;
    left: 20px;
    z-index: 5;
    padding: 4px 10px;
    border: 1px solid var(--line-2);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-family: ui-monospace, monospace;
}
.trailer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 5;
}

/* Meta strip */
.meta-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 80px;
}
@media (min-width: 768px) {
    .meta-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}
.meta-cell {
    padding: 20px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.meta-cell:nth-child(-n + 2) {
    border-top: 0;
}
@media (min-width: 768px) {
    .meta-cell {
        padding: 24px;
    }
    .meta-cell:nth-child(-n + 4) {
        border-top: 0;
    }
}
.meta-cell:first-child,
.meta-cell:nth-child(3) {
    border-left: 0;
}
@media (min-width: 768px) {
    .meta-cell:first-child {
        border-left: 0;
    }
    .meta-cell:nth-child(2),
    .meta-cell:nth-child(3),
    .meta-cell:nth-child(4) {
        border-left: 1px solid var(--line);
    }
    .meta-cell:nth-child(3) {
        border-left: 1px solid var(--line);
    }
}
.meta-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
    font-family: ui-monospace, monospace;
}
.meta-value {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}
@media (min-width: 768px) {
    .meta-value {
        font-size: 1rem;
    }
}

/* Features */
.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .features {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
.feature {
    padding: 28px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    transition:
        background 200ms,
        border-color 200ms;
}
.feature:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}
.feature-num {
    font-family: "Syncopate", sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--text-faint);
    margin-bottom: 16px;
}
.feature-title {
    font-family: "Outfit", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .feature-title {
        font-size: 1.5rem;
    }
}
.feature-text {
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.6;
    font-size: 0.875rem;
}

.games-cta-row {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
.games-cta-row > p {
    color: var(--text-faded);
    font-weight: 300;
    max-width: 28rem;
}
.btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
@media (min-width: 640px) {
    .games-cta-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ============================================================
 * STUDIO SECTION
 * ============================================================ */
.section-studio {
    background: var(--bg-soft);
}
.studio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .studio-grid {
        grid-template-columns: 5fr 7fr;
        gap: 80px;
    }
}

.studio-logo-block {
    position: relative;
    margin-top: 40px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.studio-logo-glow-ring {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background: radial-gradient(
        600px 300px at 50% 50%,
        rgba(147, 197, 253, 0.12),
        transparent 60%
    );
}
.studio-logo-grid {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.4) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.4) 1px,
            transparent 1px
        );
    background-size: 40px 40px;
}
.studio-logo-breathe {
    position: absolute;
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    filter: blur(60px);
    background: radial-gradient(
        circle,
        rgba(147, 197, 253, 0.8),
        rgba(96, 165, 250, 0.35) 40%,
        transparent 70%
    );
    animation: about-logo-breathe 4s ease-in-out infinite;
}
.studio-logo-wrap {
    position: relative;
    width: 50%;
    aspect-ratio: 1 / 1;
}
.studio-logo-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.9;
}
.studio-logo-stamp {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.studio-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-soft);
    font-weight: 300;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .studio-lead {
        font-size: 1.25rem;
    }
}
.studio-body {
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 56px;
    max-width: 36rem;
}
.values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    border-top: 1px solid var(--line);
    padding-top: 48px;
}
@media (min-width: 640px) {
    .values {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}
.values .value-key {
    font-family: "Syncopate", sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: var(--text);
    margin-bottom: 12px;
}
.values p {
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.6;
    font-size: 0.875rem;
}

/* ============================================================
 * LATEST UPDATES
 * ============================================================ */
.section-wishlist,
.section-media,
.section-press {
    background: var(--bg);
}
.wishlist-band,
.press-band {
    border: 1px solid var(--line-2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 52%),
        rgba(255, 255, 255, 0.025);
    border-radius: 2px;
    padding: clamp(26px, 4vw, 44px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}
.wishlist-band h2,
.press-band h2 {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.95;
    margin: 10px 0 12px;
}
.wishlist-band p,
.press-band p {
    color: var(--text-muted);
    max-width: 760px;
}
.milestone-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.milestone-strip div {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    padding: 16px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.milestone-strip span {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}
.milestone-strip strong {
    color: #fff;
    font-size: 1.05rem;
}
.section-latest {
    background: var(--bg-soft);
}
.latest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.latest-card {
    min-height: 260px;
    padding: 28px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%),
        rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    overflow: hidden;
}
.latest-card-featured {
    border-color: rgba(255, 255, 255, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 48%),
        rgba(255, 255, 255, 0.035);
}
.latest-card-image {
    width: calc(100% + 56px);
    max-width: none;
    height: 190px;
    object-fit: cover;
    margin: -28px -28px 2px;
    border-bottom: 1px solid var(--line);
}
.latest-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}
.latest-card-meta span:not(.overline),
.latest-card-meta time {
    border: 1px solid var(--line);
    padding: 4px 7px;
}
.latest-card h3 {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 0.95;
    letter-spacing: 0;
    max-width: 12ch;
}
.latest-card p {
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 44rem;
}
.latest-card-link {
    margin-top: auto;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.latest-card-link svg {
    color: var(--text-faint);
    transition: transform 200ms;
}
.latest-card-link:hover svg {
    transform: translate(2px, -2px);
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.media-card {
    margin: 0;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.025);
}
.media-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.media-card figcaption {
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 0.92rem;
}
@media (max-width: 820px) {
    .wishlist-band,
    .press-band {
        grid-template-columns: 1fr;
    }
    .milestone-strip,
    .media-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * PUBLIC TASK TRACKER
 * ============================================================ */
.section-tasks {
    background: var(--bg);
}
.task-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}
@media (min-width: 980px) {
    .task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.task-column {
    min-width: 0;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.018);
    border-radius: 4px;
    padding: 12px;
}
.task-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.task-column-head h3 {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
}
.task-column-head span,
.task-empty {
    color: var(--text-faint);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.task-column-list {
    display: grid;
    gap: 12px;
}
.task-empty {
    padding: 18px 8px;
}
.task-card {
    min-height: 190px;
    padding: 16px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 44%),
        rgba(255, 255, 255, 0.026);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.task-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.task-tag,
.task-status,
.task-percent {
    color: var(--text-faint);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.task-status {
    color: var(--text-soft);
}
.task-card h4 {
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: 1.15rem;
    line-height: 1.05;
}
.task-card p {
    flex: 1;
    color: var(--text-muted);
    line-height: 1.6;
}
.task-progress {
    height: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.task-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #fff, var(--holo-cyan), var(--holo-violet));
}
.task-percent {
    text-align: right;
}

/* ============================================================
 * DEVLOG
 * ============================================================ */
.section-devlog {
    background: var(--bg);
}
.devlog-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 64px;
    align-items: end;
}
@media (min-width: 1024px) {
    .devlog-head {
        grid-template-columns: 7fr 5fr;
    }
}

.devlog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .devlog-grid {
        grid-template-columns: 7fr 5fr;
        gap: 40px;
    }
}

.devlog-list {
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    order: 2;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .devlog-list {
        order: 1;
    }
}
.devlog-toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
    .devlog-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.devlog-order {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    overflow: hidden;
}
.devlog-order-btn {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid var(--line-2);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition:
        background 200ms,
        color 200ms;
}
.devlog-order-btn:last-child {
    border-right: 0;
}
.devlog-order-btn:hover,
.devlog-order-btn:focus-visible,
.devlog-order-btn.is-active {
    background: #fff;
    color: #000;
}
.devlog-scroll {
    max-height: min(58vh, 520px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
}
.devlog-scroll::-webkit-scrollbar {
    width: 10px;
}
.devlog-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}
.devlog-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
}
.ep {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background 200ms;
}
@media (min-width: 768px) {
    .ep {
        gap: 32px;
        padding: 28px;
    }
}
.ep:last-child {
    border-bottom: 0;
}
.ep:hover {
    background: rgba(255, 255, 255, 0.03);
}
.ep:hover .ep-arrow {
    color: #fff;
    transform: translate(2px, -2px);
}
.ep-num {
    font-family: "Syncopate", sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #fff;
    width: 64px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .ep-num {
        font-size: 13px;
        width: 96px;
    }
}
.ep-body {
    flex: 1;
    min-width: 0;
}
.ep-body h3 {
    font-family: "Outfit", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .ep-body h3 {
        font-size: 1.5rem;
    }
}
.badge {
    display: none;
    padding: 4px 10px;
    border: 1px solid var(--line-2);
    color: var(--text-faded);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-family: ui-monospace, monospace;
    border-radius: 2px;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .badge {
        display: inline-block;
    }
}
.badge-live {
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.05);
}
.ep-arrow {
    color: var(--text-faint);
    transition:
        color 200ms,
        transform 200ms;
    flex-shrink: 0;
}
.full-channel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0 0;
    padding: 0 28px 28px 28px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: color 200ms;
}
.full-channel-link:hover {
    color: var(--text-soft);
}

.devlog-socials {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 1024px) {
    .devlog-socials {
        order: 2;
    }
}
.social-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 2px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: #fff;
    text-decoration: none;
    transition:
        background 200ms,
        border-color 200ms;
}
.social-card:hover {
    border-color: var(--line-3);
    background: rgba(255, 255, 255, 0.04);
}
.social-card .ep-arrow,
.social-card svg:last-child {
    color: var(--text-faint);
    margin-left: auto;
    transition: transform 200ms;
}
.social-card:hover svg:last-child {
    transform: translate(2px, -2px);
}
.social-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}
.social-text {
    flex: 1;
}
.social-handle {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 2px;
}
@media (min-width: 768px) {
    .social-handle {
        font-size: 1rem;
    }
}
.social-primary {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.social-primary:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
}
.social-primary .social-icon {
    background: rgba(0, 0, 0, 0.1);
}
.social-primary .mono-text {
    color: rgba(0, 0, 0, 0.6) !important;
}
.social-primary svg:last-child {
    color: rgba(0, 0, 0, 0.6);
}

/* ============================================================
 * CONNECT
 * ============================================================ */
.section-connect {
    background: var(--bg);
}
.connect-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 1024px) {
    .connect-grid {
        grid-template-columns: 5fr 7fr;
        gap: 64px;
    }
}
.connect-lead {
    color: var(--text-faded);
    font-weight: 300;
    line-height: 1.6;
    max-width: 28rem;
    margin: 24px 0 48px;
}

.newsletter-form {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 200ms;
}
.newsletter-form:hover,
.newsletter-form:focus-within {
    background: rgba(255, 255, 255, 0.04);
}
.newsletter-form input[type="email"] {
    flex: 1;
    height: 56px;
    background: transparent;
    border: 0;
    padding: 0 20px;
    color: #fff;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}
.newsletter-form input::placeholder {
    color: var(--text-faint);
}
.newsletter-form button {
    height: 56px;
    padding: 0 24px;
    background: #fff;
    color: #000;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    transition: background 200ms;
    font-family: inherit;
}
.newsletter-form button:hover {
    background: #e2e8f0;
}
.newsletter-form button:disabled {
    opacity: 0.6;
}

.connect-meta {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 24px;
}
.connect-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: var(--text-muted);
}
.connect-meta-row svg {
    margin-top: 4px;
    flex-shrink: 0;
}
.connect-meta-row a {
    color: #fff;
    text-decoration: none;
    transition: color 200ms;
}
.connect-meta-row a:hover {
    color: var(--text-soft);
}

.connect-right {
    padding-top: 0;
}
@media (min-width: 1024px) {
    .connect-right {
        padding-left: 40px;
        border-left: 1px solid var(--line);
    }
}
.connect-h3 {
    font-family: "Outfit", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-top: 16px;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .connect-h3 {
        font-size: 1.875rem;
    }
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr 1fr;
    }
}
.field {
    display: flex;
    flex-direction: column;
}
.field.full {
    grid-column: 1 / -1;
}
.hidden-field {
    display: none;
}
.field label {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}
.field input,
.field textarea {
    height: 48px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: #fff;
    padding: 0 16px;
    border-radius: 2px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 200ms;
}
.field textarea {
    height: auto;
    min-height: 160px;
    padding: 12px 16px;
    resize: vertical;
}
.field input:focus,
.field textarea:focus {
    border-color: rgba(255, 255, 255, 0.5);
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-faint);
}
.contact-foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
}
.contact-foot p {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-faint);
}
.contact-foot button {
    padding: 14px 28px;
    background: #fff;
    color: #000;
    border: 0;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 200ms;
    font-family: inherit;
}
.contact-foot button:hover {
    background: #e2e8f0;
}
.contact-foot button:disabled {
    opacity: 0.6;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer {
    position: relative;
    z-index: 20;
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
    padding: 80px 0 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 80px;
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 6fr 3fr 3fr;
    }
}
.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.footer-logo {
    height: 48px;
    width: auto;
    opacity: 0.9;
}
@media (min-width: 768px) {
    .footer-logo {
        height: 56px;
    }
}
.footer-wordmark {
    font-family: "Syncopate", sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #fff;
}
@media (min-width: 768px) {
    .footer-wordmark {
        font-size: 1.5rem;
    }
}
.footer-wordmark-sub {
    font-family: "Syncopate", sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--text-faint);
    font-weight: 300;
    margin-top: 4px;
}
@media (min-width: 768px) {
    .footer-wordmark-sub {
        font-size: 11px;
    }
}
.footer-blurb {
    color: var(--text-faint);
    font-weight: 300;
    line-height: 1.6;
    max-width: 22rem;
    font-size: 0.875rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-links button {
    background: none;
    border: 0;
    color: var(--text-soft);
    font-size: 0.875rem;
    text-align: left;
    transition: color 200ms;
}
.footer-links a {
    color: var(--text-soft);
    font-size: 0.875rem;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-align: left;
    transition: color 200ms;
}
.footer-links a:link,
.footer-links a:visited {
    color: var(--text-soft);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}
.footer-links a:hover,
.footer-links a:active,
.footer-links a:focus {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}
.footer-links button:hover {
    color: #fff;
}
.footer-links a:hover {
    color: var(--text);
}

.footer-socials {
    display: flex;
    gap: 12px;
}
.footer-socials a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-2);
    color: var(--text-muted);
    transition:
        background 200ms,
        color 200ms,
        border-color 200ms;
    border-radius: 2px;
}
.footer-socials a:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.footer-bottom .mono-text {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.footer-legal {
    display: flex;
    gap: 32px;
}
.footer-legal a {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-decoration: none;
    transition: color 200ms;
}
.footer-legal a:hover {
    color: var(--text-soft);
}

/* ============================================================
 * TOAST
 * ============================================================ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--text);
    padding: 14px 18px;
    border-radius: 2px;
    font-size: 0.875rem;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 240ms ease-out,
        opacity 240ms ease-out;
    max-width: calc(100vw - 48px);
}
.toast.is-open {
    transform: translateY(0);
    opacity: 1;
}
.toast.is-error {
    border-color: rgba(248, 113, 113, 0.4);
}

/* ============================================================
 * QUICK SIGNUP MODAL
 * ============================================================ */
.quick-signup-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
.quick-signup-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.quick-signup-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 4, 8, 0.74);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.quick-signup-dialog {
    position: relative;
    width: min(620px, 100%);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        var(--surface);
    box-shadow: 0 28px 120px rgba(0, 0, 0, 0.62);
    padding: 28px;
}
.quick-signup-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.quick-signup-head h2 {
    margin-top: 8px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 0.95;
}
.quick-signup-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
    cursor: pointer;
}
.quick-signup-dialog > p {
    color: var(--text-soft);
    line-height: 1.65;
}
.quick-signup-form {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 200ms;
}
.quick-signup-form:hover,
.quick-signup-form:focus-within {
    background: rgba(255, 255, 255, 0.04);
}
.quick-signup-form input {
    min-width: 0;
    flex: 1;
    height: 56px;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0 18px;
    outline: none;
    font: inherit;
    font-size: 15px;
}
.quick-signup-form input::placeholder {
    color: var(--text-faint);
}
.quick-signup-form button {
    height: 56px;
    border: 0;
    border-radius: 2px;
    background: #fff;
    color: #000;
    cursor: pointer;
    padding: 0 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-family: inherit;
}
.quick-signup-form button:disabled {
    cursor: default;
    opacity: 0.58;
}
.quick-signup-status {
    min-height: 18px;
    margin-top: 16px;
    color: var(--text-faint);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.quick-signup-status.is-error {
    color: #fecaca;
}
.quick-signup-status.is-success {
    color: #bbf7d0;
}
.body-modal-open {
    overflow: hidden;
}
@media (max-width: 640px) {
    .quick-signup-modal {
        align-items: end;
        padding: 12px;
    }
    .quick-signup-dialog {
        padding: 22px 18px;
    }
    .quick-signup-form {
        flex-direction: column;
    }
    .quick-signup-form button {
        min-height: 48px;
        height: 48px;
    }
}

/* ============================================================
 * KEYFRAMES
 * ============================================================ */
@keyframes slow-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.85;
    }
}

/* Hero watermark logo — slow float + glow breath */
.hero-logo-float {
    animation: hero-logo-float 11s ease-in-out infinite;
    will-change: transform;
}
@keyframes hero-logo-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -14px, 0) rotate(1.5deg);
    }
}
.hero-logo-glow {
    animation: hero-logo-glow 7s ease-in-out infinite;
    will-change: filter, opacity;
}
@keyframes hero-logo-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 60px rgba(147, 197, 253, 0.08));
        opacity: 0.06;
    }
    50% {
        filter: drop-shadow(0 0 90px rgba(147, 197, 253, 0.2));
        opacity: 0.1;
    }
}

@keyframes nav-logo-shimmer {
    0% {
        filter: drop-shadow(0 0 0 rgba(147, 197, 253, 0));
    }
    40% {
        filter: drop-shadow(0 0 16px rgba(147, 197, 253, 0.9))
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(147, 197, 253, 0));
    }
}

.about-logo-float {
    animation: about-logo-float 5s ease-in-out infinite;
}
@keyframes about-logo-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@keyframes about-logo-breathe {
    0%,
    100% {
        transform: scale(0.85);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

/* Holo shimmer */
@keyframes holo-sweep {
    0%,
    72%,
    100% {
        background-position: 150% 0;
        opacity: 0;
    }
    76% {
        opacity: var(--holo-intensity);
    }
    88% {
        background-position: -60% 0;
        opacity: var(--holo-intensity);
    }
    92% {
        opacity: 0;
    }
}

@keyframes title-holo-sweep {
    0% {
        background-position: 130% 0;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    86% {
        opacity: 1;
    }
    100% {
        background-position: -60% 0;
        opacity: 0;
    }
}

.holo-sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent 38%,
        var(--holo-tint-cyan) 44%,
        var(--holo-tint-center) 50%,
        var(--holo-tint-violet) 56%,
        transparent 62%
    );
    background-size: 280% 100%;
    background-position: 150% 0;
    mix-blend-mode: screen;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: holo-sweep var(--holo-duration) cubic-bezier(0.4, 0.1, 0.3, 1)
        infinite;
}
.holo-sweep-nav {
    --holo-duration: 5.8s;
    animation-delay: 600ms;
    background: linear-gradient(
        110deg,
        transparent 40%,
        rgba(186, 230, 253, 0.8) 46%,
        rgba(255, 255, 255, 1) 50%,
        rgba(216, 180, 254, 0.78) 54%,
        transparent 60%
    );
    background-size: 280% 100%;
    background-position: 150% 0;
}
.nav-logo-mark .holo-sweep,
.studio-logo-wrap .holo-sweep {
    display: block;
    opacity: 0;
    animation: holo-sweep var(--holo-duration) cubic-bezier(0.2, 0, 0.2, 1)
        infinite;
}

@media (prefers-reduced-motion: reduce) {
    .about-logo-float,
    .nav-logo-img,
    .studio-logo-breathe,
    .holo-sweep,
    .holo-title,
    .status-dot,
    .hero-logo-float,
    .hero-logo-glow {
        animation: none !important;
    }
    .holo-title,
    .holo-title:hover,
    .holo-title.is-holo-active {
        animation: none;
    }
    .holo-title-text::after {
        display: none;
    }
    html {
        scroll-behavior: auto;
    }
    .section-fade {
        opacity: 1;
        transform: none;
    }
}