/* CFControl landing — design system aligned with wiki.cfgaming.de */

:root {
    --bg: #edf1f6;
    --card: #ffffff;
    --section-alt: #e2e9f3;
    --footer-bg: #d4dfec;
    --footer-border: rgba(14, 116, 178, 0.16);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: rgba(15, 23, 42, 0.08);
    --section-border: rgba(100, 130, 160, 0.18);
    --nav-surface: rgba(241, 245, 249, 0.85);
    --nav-border: rgba(226, 232, 240, 0.9);
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
    --glow: rgba(14, 165, 233, 0.14);
    --accent: #0ea5e9;
    --accent-strong: #0284c7;
    --hero-ink: #ffffff;
    --hero-ink-muted: rgba(255, 255, 255, 0.78);
}

.dark {
    color-scheme: dark;
    --bg: #080a0f;
    --card: #11151d;
    --section-alt: #0c1018;
    --footer-bg: #05070b;
    --footer-border: rgba(255, 255, 255, 0.06);
    --text-main: #f1f5f9;
    --text-muted: #8b9bb0;
    --border-color: rgba(255, 255, 255, 0.055);
    --section-border: rgba(255, 255, 255, 0.05);
    --nav-surface: rgba(255, 255, 255, 0.035);
    --nav-border: rgba(255, 255, 255, 0.07);
    --scrollbar-track: #080a0f;
    --scrollbar-thumb: #1e2633;
    --scrollbar-thumb-hover: #2d3748;
    --glow: rgba(56, 189, 248, 0.14);
    --accent: #0ea5e9;
    --accent-strong: #38bdf8;
    --hero-ink: #f8fafc;
    --hero-ink-muted: rgba(248, 250, 252, 0.72);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

body {
    background: var(--bg);
    color: var(--text-main);
}

/* Theme iris wipe (View Transitions API) — expands from the toggle */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(root) {
    z-index: 1;
}
::view-transition-new(root) {
    z-index: 2;
    animation: theme-iris 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes theme-iris {
    from {
        clip-path: circle(0px at var(--theme-x, 50%) var(--theme-y, 50%));
    }
    to {
        clip-path: circle(var(--theme-r, 100vmax) at var(--theme-x, 50%) var(--theme-y, 50%));
    }
}

html.theme-ready .lp-hero,
html.theme-ready .lp-hero-mesh,
html.theme-ready .lp-hero-wave,
html.theme-ready .lp-hero-wave::after,
html.theme-ready .site-footer--hero,
html.theme-ready .site-footer--hero .site-footer-wave {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Language switch — soft text crossfade */
html.lang-ready :is([data-i18n], [data-i18n-html], [data-legal-privacy]) {
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        filter 0.22s ease;
}
html.lang-switching :is([data-i18n], [data-i18n-html], [data-legal-privacy]) {
    opacity: 0;
    transform: translateY(0.18em);
    filter: blur(2.5px);
    pointer-events: none;
}
html.lang-ready .lang-fab :is([data-i18n], [data-i18n-html]),
html.lang-switching .lang-fab :is([data-i18n], [data-i18n-html]) {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    html.lang-ready :is([data-i18n], [data-i18n-html], [data-legal-privacy]),
    html.lang-switching :is([data-i18n], [data-i18n-html], [data-legal-privacy]) {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ——— Navbar ——— */

/* Light + over hero (transparent or scrolled blue): light ink */
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .brand-wordmark,
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-text,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .brand-wordmark,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-text {
    color: rgba(255, 255, 255, 0.95);
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-text:hover,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-text:hover {
    color: #fff;
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-text::after,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-text::after {
    background: #fff;
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-theme,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-theme {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-theme:hover,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-theme:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-cta,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-cta {
    color: #fff;
    background: #0ea5e9;
    border-color: rgba(125, 211, 252, 0.55);
    box-shadow: 0 10px 22px -12px rgba(14, 165, 233, 0.55);
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-cta:hover,
html:not(.dark) body.has-hero-nav.nav-solid #navbar .nav-cta:hover {
    background: #38bdf8;
    color: #fff;
    border-color: rgba(186, 230, 253, 0.65);
}
html:not(.dark) body.has-hero-nav #navbar .brand-mark {
    filter:
        brightness(1.35)
        saturate(0.42)
        contrast(1.08)
        drop-shadow(0 1px 1px rgba(15, 23, 42, 0.35));
}
html:not(.dark) body.has-hero-nav #navbar .brand-lockup:hover .brand-wordmark {
    color: #fff;
}
html:not(.dark) body.has-hero-nav.nav-solid #navbar.is-scrolled {
    background: rgba(12, 64, 96, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(8, 40, 64, 0.28);
}

/* Dark + over hero (top of page): light ink on dark hero */
.dark body.has-hero-nav:not(.nav-solid) #navbar .brand-wordmark,
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-text {
    color: rgba(248, 250, 252, 0.95);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-text:hover {
    color: #fff;
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-text::after {
    background: #7dd3fc;
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-theme {
    color: rgba(248, 250, 252, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-theme:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-cta {
    color: #fff;
    background: #0ea5e9;
    border-color: rgba(125, 211, 252, 0.4);
    box-shadow: 0 10px 22px -12px rgba(14, 165, 233, 0.55);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .nav-cta:hover {
    background: #38bdf8;
    color: #fff;
    border-color: rgba(186, 230, 253, 0.5);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .brand-lockup:hover .brand-wordmark {
    color: #7dd3fc;
}
.dark body.has-hero-nav #navbar .brand-mark {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Dark + scrolled: solid dark bar, default dark CTA/text already fit */
.dark body.has-hero-nav.nav-solid #navbar.is-scrolled {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-color: var(--footer-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#navbar {
    transition: none;
}
#navbar.is-scrolled {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: var(--footer-border);
    box-shadow: 0 10px 30px rgba(15, 18, 25, 0.06);
}
.dark #navbar.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0;
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-lockup:hover {
    transform: scale(1.06);
}
.brand-lockup .brand-mark {
    /* no filter transition — theme filter swaps must be instant */
}

.brand-wordmark {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f172a;
    margin-left: 0;
    font-synthesis: none;
}
.dark .brand-wordmark { color: #fff; }
.brand-lockup:hover .brand-wordmark { color: #0ea5e9; }
.brand-wordmark--muted {
    color: #334155;
    font-size: 1.1rem;
}
.dark .brand-wordmark--muted { color: #cbd5e1; }
.brand-lockup:hover .brand-wordmark--muted { color: #0f172a; }
.dark .brand-lockup:hover .brand-wordmark--muted { color: #fff; }

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0.1rem;
    margin-left: 0.15rem;
}
.brand-sub {
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #64748b;
    margin-top: 0.2rem;
}
.dark .brand-sub { color: #94a3b8; }
.brand-lockup:hover .brand-sub { color: #0ea5e9; }

html:not(.dark) body.has-hero-nav #navbar .brand-sub {
    color: rgba(255, 255, 255, 0.7);
}
html:not(.dark) body.has-hero-nav #navbar .brand-lockup:hover .brand-sub {
    color: rgba(255, 255, 255, 0.95);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .brand-sub {
    color: rgba(186, 230, 253, 0.7);
}
.dark body.has-hero-nav:not(.nav-solid) #navbar .brand-lockup:hover .brand-sub {
    color: #7dd3fc;
}

.nav-text {
    position: relative;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    padding-bottom: 2px;
}
.dark .nav-text { color: #cbd5e1; }
.nav-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #0ea5e9;
    transition: width 0.2s ease;
}
.nav-text:hover { color: #0f172a; }
.dark .nav-text:hover { color: #fff; }
.nav-text:hover::after { width: 100%; }
.nav-text--discord:hover { color: #5865F2; }
.nav-text--discord:hover::after { background: #5865F2; }

.nav-theme {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(241, 245, 249, 0.85);
    color: #64748b;
}
.dark .nav-theme {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
.nav-theme:hover {
    color: #0ea5e9;
    transform: scale(1.05);
}

/* Floating language switch — bottom corner */
.lang-fab {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.28rem 0.28rem 0.55rem;
    gap: 0.15rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 10px 28px -16px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    cursor: pointer;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.lang-fab:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow:
        0 12px 30px -14px rgba(14, 165, 233, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(-1px);
}
.lang-fab:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 3px;
}
.dark .lang-fab {
    border-color: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, #11151d 86%, transparent);
    box-shadow:
        0 14px 32px -16px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.dark .lang-fab:hover {
    border-color: rgba(14, 165, 233, 0.45);
}
.lang-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    color: var(--accent);
    font-size: 0.78rem;
    opacity: 0.9;
    margin-right: 0.15rem;
    pointer-events: none;
}
.lang-fab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    height: 2rem;
    padding: 0 0.55rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    pointer-events: none;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lang-fab:hover .lang-fab-btn:not(.is-active) {
    color: var(--text-main);
}
.lang-fab-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 8px 18px -10px rgba(14, 165, 233, 0.75);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    padding: 0 1.15rem;
    border-radius: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #0ea5e9;
    border: 1px solid rgba(125, 211, 252, 0.45);
    box-shadow: 0 10px 22px -12px rgba(14, 165, 233, 0.55);
}
.dark .nav-cta {
    background: #0284c7;
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 22px -12px rgba(2, 132, 199, 0.55);
}
.nav-cta:hover {
    transform: translateY(-1px);
    background: #0284c7;
    border-color: rgba(125, 211, 252, 0.65);
    box-shadow: 0 14px 28px -12px rgba(14, 165, 233, 0.65);
}
.dark .nav-cta:hover {
    background: #0ea5e9;
}

.nav-cluster {
    display: flex;
    align-items: center;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--nav-border);
    background: var(--nav-surface);
    overflow: hidden;
}
.nav-cluster > * + * { border-left: 1px solid var(--nav-border); }

/* ——— Hero (wiki-style full-bleed) ——— */
.lp-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    min-height: min(100vh, 920px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5.5rem;
    padding-bottom: clamp(6rem, 12vw, 9rem);
    color: var(--hero-ink);
    background:
        linear-gradient(128deg, #0a3550 0%, #0c4a66 32%, #0f5f7e 58%, #1a7394 82%, #2a86a8 100%);
}
.dark .lp-hero {
    background:
        radial-gradient(ellipse 70% 55% at 15% 20%, rgba(56, 140, 180, 0.22), transparent 55%),
        radial-gradient(ellipse 55% 45% at 88% 12%, rgba(80, 160, 190, 0.13), transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 90%, rgba(20, 90, 120, 0.12), transparent 50%),
        #0d121a;
}
.dark .lp-hero-mesh { opacity: 0.58; }

/* Compact hero for Impressum / Kontakt */
.lp-hero--page {
    min-height: auto;
    justify-content: flex-end;
    padding-top: 6.5rem;
    padding-bottom: clamp(5.5rem, 10vw, 7.5rem);
}
.lp-hero--page .lp-hero-inner {
    flex: 0 1 auto;
    align-items: flex-end;
    padding-bottom: 0;
}

.lp-hero-mesh {
    position: absolute;
    inset: -8%;
    z-index: 0;
    background:
        radial-gradient(ellipse 52% 48% at 8% 18%, rgba(90, 170, 200, 0.28), transparent 58%),
        radial-gradient(ellipse 48% 44% at 6% 78%, rgba(40, 120, 150, 0.22), transparent 54%),
        radial-gradient(ellipse 54% 50% at 92% 22%, rgba(120, 180, 205, 0.22), transparent 56%),
        radial-gradient(ellipse 50% 46% at 90% 82%, rgba(50, 130, 160, 0.18), transparent 54%);
    filter: blur(2px);
    animation: mesh-drift 22s ease-in-out infinite alternate;
    pointer-events: none;
}

.lp-hero-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.lp-title-joy {
    font-size: clamp(2.35rem, 6.5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.lp-title-joy .joy-line {
    display: block;
    color: #fff;
}
.lp-title-joy .joy-accent {
    background: linear-gradient(105deg, #e0f2fe 0%, #7dd3fc 40%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(56, 189, 248, 0.35));
}
.dark .lp-title-joy .joy-accent {
    background: linear-gradient(105deg, #bae6fd 0%, #38bdf8 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 6px 20px rgba(14, 165, 233, 0.4));
}

.lp-type-accent {
    color: #7dd3fc;
    border-bottom-color: rgba(125, 211, 252, 0.55) !important;
}
.dark .lp-type-accent {
    color: #38bdf8;
    border-bottom-color: rgba(56, 189, 248, 0.5) !important;
}

.lp-stat-value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.lp-stat-value.is-live { color: #6ee7b7; }
.lp-stat-value.is-secure { color: #fde68a; }
.lp-stat-value.is-wiki { color: #7dd3fc; }
.dark .lp-stat-value.is-live { color: #34d399; }
.dark .lp-stat-value.is-secure { color: #fbbf24; }
.dark .lp-stat-value.is-wiki { color: #38bdf8; }

.lp-hero-stage {
    --shadow-x: 10px;
    --shadow-y: 18px;
    position: relative;
    perspective: 960px;
    perspective-origin: 58% 42%;
    transform-style: preserve-3d;
}
/* Flat ground shadow — outside the 3D tilt so it stays under the card */
.lp-hero-cast-shadow {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 28%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 55% 45% at 50% 45%, rgba(2, 20, 40, 0.5) 0%, rgba(2, 20, 40, 0.22) 40%, transparent 72%);
    filter: blur(22px);
    transform: translate3d(var(--shadow-x), var(--shadow-y), 0) scale(1.05, 0.42);
    transform-origin: center center;
    pointer-events: none;
}
.dark .lp-hero-cast-shadow {
    background:
        radial-gradient(ellipse 55% 45% at 50% 45%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 42%, transparent 72%);
}
.lp-hero-tilt {
    --tilt-x: 9deg;
    --tilt-y: -18deg;
    --tilt-z: 0deg;
    --tilt-scale: 1.02;
    --glare-x: 30%;
    --glare-y: 20%;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    transform:
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y))
        rotateZ(var(--tilt-z))
        scale3d(var(--tilt-scale), var(--tilt-scale), 1);
    transition: none;
    will-change: transform;
}
.lp-hero-tilt .lp-tilt-layer {
    position: relative;
    overflow: visible;
    transform-style: preserve-3d;
    transform: translateZ(18px);
}
.lp-hero-panel-face {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transform: translateZ(0);
    pointer-events: none;
}
.dark .lp-hero-panel-face {
    background: rgba(15, 18, 28, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
}
.lp-tilt-shell > .lp-depth-scene {
    position: relative;
    z-index: 1;
}
.lp-hero-tilt .lp-tilt-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: 1rem;
    transform: translateZ(80px);
    background:
        radial-gradient(
            circle 55% at var(--glare-x) var(--glare-y),
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 35%,
            transparent 62%
        );
    mix-blend-mode: soft-light;
    pointer-events: none;
    opacity: 0.9;
}

/* Inner dashboard planes — depth, not just outer tilt */
.lp-depth-scene {
    transform-style: preserve-3d;
}
.lp-depth {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.lp-depth-0 { transform: translateZ(6px); }
.lp-depth-1 { transform: translateZ(22px); }
.lp-depth-2 { transform: translateZ(40px); }
.lp-depth-3 {
    transform: translateZ(60px);
    box-shadow: 0 12px 24px -14px rgba(2, 20, 40, 0.55);
}
.lp-depth-4 {
    transform: translateZ(82px);
    box-shadow: 0 16px 30px -14px rgba(2, 20, 40, 0.6);
}

.lp-hero-tilt .lp-tilt-float {
    transform: translateZ(96px);
    box-shadow:
        0 22px 40px -18px rgba(2, 20, 40, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.lp-hero-tilt .lp-tilt-float:nth-of-type(2) {
    transform: translateZ(84px) rotateY(-5deg);
}
.lp-hero-tilt .lp-tilt-float:last-child {
    transform: translateZ(118px) rotateY(7deg);
}

.lp-hero-panel {
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 1rem;
    box-shadow:
        0 24px 60px -28px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.dark .lp-hero-panel {
    background: rgba(15, 18, 28, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
}

.lp-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    opacity: 0.45;
    pointer-events: none;
}

@keyframes mesh-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-1.5%, 1.2%, 0) scale(1.03); }
}

.lp-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    height: clamp(72px, 9vw, 112px);
    line-height: 0;
    color: var(--bg);
    pointer-events: none;
    transform: translateZ(0);
}
.lp-hero-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
.lp-hero-wave::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 14px;
    background: var(--bg);
}

/* First-section overlap rules live after .lp-section-* so they win */

.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.35);
}
.dark .lp-chip {
    border-color: rgba(125, 211, 252, 0.28);
    background: rgba(14, 165, 233, 0.14);
    color: #e0f2fe;
}

/* Light hero: sky primary on teal field */
.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.45rem;
    border-radius: 0.75rem;
    background: #0ea5e9;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid rgba(125, 211, 252, 0.55);
    box-shadow:
        0 12px 28px -10px rgba(14, 165, 233, 0.5),
        0 0 0 1px rgba(14, 165, 233, 0.15) inset;
}
.lp-btn-primary:hover {
    transform: translateY(-2px);
    background: #38bdf8;
    color: #fff;
    box-shadow: 0 16px 32px -10px rgba(56, 189, 248, 0.55);
}
/* Dark hero: sky primary on dark field */
.dark .lp-btn-primary {
    background: #0ea5e9;
    color: #fff;
    border-color: rgba(125, 211, 252, 0.45);
    box-shadow:
        0 12px 28px -10px rgba(14, 165, 233, 0.5),
        0 0 0 1px rgba(14, 165, 233, 0.2) inset;
}
.dark .lp-btn-primary:hover {
    background: #38bdf8;
    color: #fff;
    box-shadow: 0 16px 32px -10px rgba(56, 189, 248, 0.55);
}

.lp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.45rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}
.lp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(15, 23, 42, 0.45);
}
.dark .lp-btn-secondary {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}
.dark .lp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(186, 230, 253, 0.55);
    color: #fff;
}

/* keep ghost for other pages if referenced */
.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.35rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.lp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.lp-float {
    animation: float-y 7s ease-in-out infinite;
}
.lp-float-delay { animation-delay: 2.2s; }
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.lp-hero-tilt .lp-tilt-float.lp-float {
    animation-name: float-y-z;
}
.lp-hero-tilt .lp-tilt-float.lp-float:nth-of-type(2) {
    animation-name: float-y-z-a;
}
.lp-hero-tilt .lp-tilt-float.lp-float:last-child {
    animation-name: float-y-z-b;
}
@keyframes float-y-z {
    0%, 100% { transform: translateZ(96px) translateY(0); }
    50% { transform: translateZ(96px) translateY(-12px); }
}
@keyframes float-y-z-a {
    0%, 100% { transform: translateZ(84px) rotateY(-5deg) translateY(0); }
    50% { transform: translateZ(84px) rotateY(-5deg) translateY(-14px); }
}
@keyframes float-y-z-b {
    0%, 100% { transform: translateZ(118px) rotateY(7deg) translateY(0); }
    50% { transform: translateZ(118px) rotateY(7deg) translateY(-16px); }
}

/* ——— Sections ——— */
.lp-section-a,
.lp-section-b {
    position: relative;
    isolation: isolate;
    overflow: hidden; /* keep large glows inside this section only */
}
.lp-section-a > *,
.lp-section-b > * {
    position: relative;
    z-index: 1;
}

.lp-section-a {
    background: var(--bg);
}
.lp-section-b {
    background: var(--section-alt);
    border-top: 1px solid var(--section-border);
    border-bottom: 1px solid var(--section-border);
}

/*
 * Landing only: first section sits ABOVE the hero wave, with transparent bg so there is no
 * hard rectangle edge. Cards + glows overlap the wave and soft-bridge the seam.
 */
body.has-hero-nav main > section.lp-section-a:first-of-type {
    z-index: 3;
    /* Allow vertical overlap with hero wave, but never widen the page */
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
    background: transparent;
    margin-top: calc(clamp(72px, 9vw, 112px) * -0.55);
    --g1-top: -4%;
    --g1-left: 16%;
    --g2-top: 8%;
    --g2-left: 84%;
}
body.has-hero-nav main > section.lp-section-a:first-of-type::before,
body.has-hero-nav main > section.lp-section-a:first-of-type::after {
    width: min(70vw, 680px);
    height: min(70vw, 680px);
    filter: blur(56px);
    opacity: 0.75;
}

/* Large ambient glows — clipped by overflow; colors via --glow-1/--glow-2; move via --g* */
.lp-section-a,
.lp-section-b {
    --glow-1: rgba(14, 165, 233, 0.28);
    --glow-1-soft: rgba(14, 165, 233, 0.1);
    --glow-2: rgba(2, 132, 199, 0.22);
    --glow-2-soft: rgba(2, 132, 199, 0.08);
    --g1x: 0px;
    --g1y: 0px;
    --g2x: 0px;
    --g2y: 0px;
}

.lp-section-a::before,
.lp-section-a::after,
.lp-section-b::before,
.lp-section-b::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: min(72vw, 720px);
    height: min(72vw, 720px);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    opacity: 0.72;
    filter: blur(56px);
}

/* Per-section palette (stronger) */
main > section:nth-child(1) {
    --glow-1: rgba(14, 165, 233, 0.32);
    --glow-1-soft: rgba(14, 165, 233, 0.12);
    --glow-2: rgba(56, 189, 248, 0.24);
    --glow-2-soft: rgba(56, 189, 248, 0.09);
}
main > section:nth-child(2) {
    --glow-1: rgba(20, 184, 166, 0.3);
    --glow-1-soft: rgba(20, 184, 166, 0.11);
    --glow-2: rgba(14, 165, 233, 0.24);
    --glow-2-soft: rgba(14, 165, 233, 0.09);
}
main > section:nth-child(3) {
    --glow-1: rgba(99, 102, 241, 0.28);
    --glow-1-soft: rgba(99, 102, 241, 0.1);
    --glow-2: rgba(56, 189, 248, 0.24);
    --glow-2-soft: rgba(56, 189, 248, 0.09);
}
main > section:nth-child(4) {
    --glow-1: rgba(245, 158, 11, 0.26);
    --glow-1-soft: rgba(245, 158, 11, 0.09);
    --glow-2: rgba(14, 165, 233, 0.24);
    --glow-2-soft: rgba(14, 165, 233, 0.09);
}
main > section:nth-child(5) {
    --glow-1: rgba(16, 185, 129, 0.28);
    --glow-1-soft: rgba(16, 185, 129, 0.1);
    --glow-2: rgba(6, 182, 212, 0.24);
    --glow-2-soft: rgba(6, 182, 212, 0.09);
}
main > section:nth-child(6) {
    --glow-1: rgba(139, 92, 246, 0.28);
    --glow-1-soft: rgba(139, 92, 246, 0.1);
    --glow-2: rgba(14, 165, 233, 0.22);
    --glow-2-soft: rgba(14, 165, 233, 0.08);
}
main > section:nth-child(7) {
    --glow-1: rgba(236, 72, 153, 0.26);
    --glow-1-soft: rgba(236, 72, 153, 0.09);
    --glow-2: rgba(56, 189, 248, 0.24);
    --glow-2-soft: rgba(56, 189, 248, 0.09);
}
main > section:nth-child(8) {
    --glow-1: rgba(34, 211, 238, 0.28);
    --glow-1-soft: rgba(34, 211, 238, 0.1);
    --glow-2: rgba(59, 130, 246, 0.24);
    --glow-2-soft: rgba(59, 130, 246, 0.09);
}

.dark main > section:nth-child(1) {
    --glow-1: rgba(56, 189, 248, 0.26);
    --glow-1-soft: rgba(56, 189, 248, 0.09);
    --glow-2: rgba(14, 165, 233, 0.2);
    --glow-2-soft: rgba(14, 165, 233, 0.07);
}
.dark main > section:nth-child(2) {
    --glow-1: rgba(45, 212, 191, 0.24);
    --glow-1-soft: rgba(45, 212, 191, 0.08);
    --glow-2: rgba(56, 189, 248, 0.18);
    --glow-2-soft: rgba(56, 189, 248, 0.07);
}
.dark main > section:nth-child(3) {
    --glow-1: rgba(129, 140, 248, 0.24);
    --glow-1-soft: rgba(129, 140, 248, 0.08);
    --glow-2: rgba(56, 189, 248, 0.18);
    --glow-2-soft: rgba(56, 189, 248, 0.07);
}
.dark main > section:nth-child(4) {
    --glow-1: rgba(251, 191, 36, 0.2);
    --glow-1-soft: rgba(251, 191, 36, 0.07);
    --glow-2: rgba(56, 189, 248, 0.18);
    --glow-2-soft: rgba(56, 189, 248, 0.07);
}
.dark main > section:nth-child(5) {
    --glow-1: rgba(52, 211, 153, 0.22);
    --glow-1-soft: rgba(52, 211, 153, 0.08);
    --glow-2: rgba(34, 211, 238, 0.18);
    --glow-2-soft: rgba(34, 211, 238, 0.07);
}
.dark main > section:nth-child(6) {
    --glow-1: rgba(167, 139, 250, 0.22);
    --glow-1-soft: rgba(167, 139, 250, 0.08);
    --glow-2: rgba(56, 189, 248, 0.17);
    --glow-2-soft: rgba(56, 189, 248, 0.06);
}
.dark main > section:nth-child(7) {
    --glow-1: rgba(244, 114, 182, 0.2);
    --glow-1-soft: rgba(244, 114, 182, 0.07);
    --glow-2: rgba(56, 189, 248, 0.18);
    --glow-2-soft: rgba(56, 189, 248, 0.07);
}
.dark main > section:nth-child(8) {
    --glow-1: rgba(34, 211, 238, 0.24);
    --glow-1-soft: rgba(34, 211, 238, 0.08);
    --glow-2: rgba(96, 165, 250, 0.18);
    --glow-2-soft: rgba(96, 165, 250, 0.07);
}

/* Base anchors overridden per section via --g*-top / --g*-left (JS) */
.lp-section-a::before,
.lp-section-b::before {
    top: var(--g1-top, 42%);
    left: var(--g1-left, 24%);
    right: auto;
    bottom: auto;
    background: radial-gradient(circle at center, var(--glow-1) 0%, var(--glow-1-soft) 26%, transparent 78%);
    transform: translate3d(calc(-50% + var(--g1x)), calc(-50% + var(--g1y)), 0);
}
.lp-section-a::after,
.lp-section-b::after {
    top: var(--g2-top, 58%);
    left: var(--g2-left, 76%);
    right: auto;
    bottom: auto;
    width: min(64vw, 640px);
    height: min(64vw, 640px);
    background: radial-gradient(circle at center, var(--glow-2) 0%, var(--glow-2-soft) 24%, transparent 80%);
    transform: translate3d(calc(-50% + var(--g2x)), calc(-50% + var(--g2y)), 0);
}

/* First-section glow size/opacity set with the overlap rule above */

.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(14, 165, 233, 0.08);
    color: var(--accent-strong);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dark .lp-kicker {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.22);
    background: rgba(14, 165, 233, 0.1);
}

.lp-card {
    background: var(--card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 10px 28px -20px rgba(15, 23, 42, 0.22);
    position: relative;
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.lp-card:active {
    transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
    .lp-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color));
        box-shadow: 0 18px 36px -22px rgba(15, 23, 42, 0.28);
    }
    .dark .lp-card:hover {
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.8);
    }
}
.dark .lp-card {
    background: var(--card);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.7);
}

/* Quiet hover wash — no mouse-follow blob */
.lp-card-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent) 7%, transparent) 0%,
        transparent 42%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 0;
}
.lp-card-glow:hover::after { opacity: 1; }

.lp-mini {
    background: color-mix(in srgb, var(--bg) 55%, var(--card));
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}
.dark .lp-mini {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.05);
}

.lp-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 165, 233, 0.1);
    color: var(--accent);
    border: 1px solid rgba(14, 165, 233, 0.16);
}

/* Community panel (wiki) */
.lp-community {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background: var(--card);
    overflow: hidden;
    box-shadow: 0 10px 28px -20px rgba(15, 23, 42, 0.18);
}
.dark .lp-community {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.65);
}
@media (min-width: 640px) {
    .lp-community { grid-template-columns: 1fr 1fr; }
}
.lp-community a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.lp-community a + a { border-top: 1px solid var(--section-border); }
@media (min-width: 640px) {
    .lp-community a + a { border-top: none; border-left: 1px solid var(--section-border); }
}
.lp-community a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Footer — multi-column panel; bg matches scrolled navbar */
.site-footer {
    background: #0c4060;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dark .site-footer {
    background: var(--bg);
    border-top-color: var(--footer-border);
}

.site-footer--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 0;
    padding: clamp(3.5rem, 6vw, 5rem) 0 1.5rem;
    color: rgba(248, 250, 252, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(ellipse 55% 45% at 50% 115%, rgba(56, 189, 248, 0.18), transparent 55%),
        #0c4060;
}
.dark .site-footer--hero {
    border-top-color: var(--footer-border);
    background:
        radial-gradient(ellipse 55% 45% at 50% 115%, rgba(14, 165, 233, 0.12), transparent 55%),
        var(--bg);
}

.site-footer--hero .site-footer-wave {
    display: none;
}

.site-footer--hero > .site-footer-inner {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: start;
    justify-items: center;
    padding-bottom: 2.25rem;
}

.footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    max-width: none;
    width: 100%;
}

.site-footer--hero .footer-brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transform-origin: center center;
}
.site-footer--hero .footer-brand .brand-text {
    margin-left: 0;
    padding-top: 0;
    align-items: center;
    text-align: center;
}
.site-footer--hero .footer-brand .brand-sub {
    margin-top: 0.25rem;
}
.site-footer--hero .footer-socials {
    justify-content: center;
}

.site-footer--hero .footer-brand .brand-mark {
    width: 2.75rem;
    height: 2.75rem;
}
.site-footer--hero .brand-wordmark,
.site-footer--hero .brand-wordmark--muted {
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
}
.site-footer--hero .brand-sub {
    color: rgba(186, 230, 253, 0.78);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.site-footer--hero .brand-lockup:hover .brand-wordmark,
.site-footer--hero .brand-lockup:hover .brand-wordmark--muted {
    color: #7dd3fc;
}
.site-footer--hero .brand-lockup:hover .brand-sub {
    color: rgba(226, 232, 240, 0.9);
}
html:not(.dark) .site-footer--hero .brand-mark {
    filter:
        brightness(1.35)
        saturate(0.42)
        contrast(1.08)
        drop-shadow(0 1px 1px rgba(15, 23, 42, 0.35));
}
.dark .site-footer--hero .brand-mark {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.footer-blurb {
    margin: 0;
    max-width: 18rem;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
    color: rgba(148, 163, 184, 0.95);
}
.footer-blurb strong {
    color: #e2e8f0;
    font-weight: 700;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.site-footer--hero .footer-social {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.82);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.site-footer--hero .footer-social:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(56, 189, 248, 0.35);
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}
.footer-col-title {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
}
.footer-col-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}
.site-footer--hero .footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(226, 232, 240, 0.78);
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer--hero .footer-link:hover {
    color: #fff;
    background: transparent;
    border-bottom-color: transparent;
}
.site-footer--hero .footer-link + .footer-link::before {
    content: none;
}
.footer-ext {
    font-size: 0.72em;
    opacity: 0.55;
    transform: translateY(-0.05em);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.site-footer--hero .footer-meta {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(148, 163, 184, 0.88);
}
.site-footer--hero .footer-meta .fa-heart {
    color: #38bdf8;
}
.footer-meta--copy {
    letter-spacing: 0.01em;
}
.footer-meta--made {
    margin-left: 0;
}

@media (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
        row-gap: 2rem;
    }
    .footer-brand-col {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 639px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
        row-gap: 1.75rem;
    }
    .footer-brand-col {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
    }
}

/* Reveal */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: none;
}
.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }

.opacity-0-start { opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Forms (kontakt) */
.form-input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1e293b;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    outline: none;
}
.dark .form-input {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.form-input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}
.form-input.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Contact captcha */
.contact-captcha {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0.02) 55%, transparent),
        #f8fafc;
}
.dark .contact-captcha {
    border-color: rgba(56, 189, 248, 0.16);
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.04) 50%, transparent),
        rgba(0, 0, 0, 0.18);
}
.contact-captcha__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.contact-captcha__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.18);
}
.dark .contact-captcha__icon {
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(56, 189, 248, 0.2);
}
.contact-captcha__titles {
    min-width: 0;
}
.contact-captcha__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.dark .contact-captcha__label {
    color: #94a3b8;
}
.contact-captcha__hint {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #64748b;
}
.dark .contact-captcha__hint {
    color: #94a3b8;
}
.contact-captcha__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}
.contact-captcha__eq {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    font-family: Outfit, Inter, system-ui, sans-serif;
    user-select: none;
}
.dark .contact-captcha__eq {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.contact-captcha__num {
    min-width: 1.35rem;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.dark .contact-captcha__num {
    color: #f8fafc;
}
.contact-captcha__op,
.contact-captcha__eqsign {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0ea5e9;
    line-height: 1;
}
.contact-captcha__answer {
    width: 5.25rem !important;
    text-align: center;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* hide number spinners */
    -moz-appearance: textfield;
    appearance: textfield;
}
.contact-captcha__answer::-webkit-outer-spin-button,
.contact-captcha__answer::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.contact-captcha__refresh {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dark .contact-captcha__refresh {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.contact-captcha__refresh:hover {
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.08);
}
.contact-captcha__refresh.is-spinning i {
    animation: contact-captcha-spin 0.7s linear infinite;
}
@keyframes contact-captcha-spin {
    to { transform: rotate(360deg); }
}
.contact-captcha__error {
    margin: 0;
    font-size: 0.75rem;
    color: #ef4444;
}
@media (max-width: 420px) {
    .contact-captcha__answer {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 4.5rem;
    }
}

.btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    pointer-events: none;
}
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti-piece {
    position: absolute; width: 8px; height: 8px; background: #0ea5e9;
    top: 50%; left: 50%; opacity: 0;
}
@keyframes confetti-explode {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); opacity: 0; }
}

.legal-content h3 { font-size: 1.2rem; font-weight: 650; margin: 1.5rem 0 0.75rem; color: var(--text-main); }
.legal-content h4 { font-size: 1.05rem; font-weight: 600; margin: 1.15rem 0 0.45rem; color: var(--text-main); }
.legal-content p { margin-bottom: 0.9rem; line-height: 1.7; color: var(--text-muted); font-size: 0.95rem; }
.legal-content ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; color: var(--text-muted); }
.legal-content a { color: #0ea5e9; }
.legal-content a:hover { color: #38bdf8; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .lp-float, .lp-hero-mesh, .opacity-0-start, .lp-hero-tilt {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .lp-section-a,
    .lp-section-b {
        --g1x: 0px;
        --g1y: 0px;
        --g2x: 0px;
        --g2y: 0px;
    }
}

/* ——— Responsive polish ——— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    max-width: 100%;
}
body {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
    overflow-x: clip;
    max-width: 100%;
    position: relative;
}

.lp-btn-primary,
.lp-btn-secondary,
.lang-fab {
    min-height: 2.75rem;
    touch-action: manipulation;
}
.nav-cta {
    min-height: 2.75rem;
    touch-action: manipulation;
}
.nav-theme {
    touch-action: manipulation;
}

/* Keep navbar actions visible on narrow screens */
#navbar .nav-bar-inner {
    min-width: 0;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
@media (min-width: 640px) {
    #navbar .nav-bar-inner {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
    }
}
#navbar .nav-actions {
    flex-shrink: 0;
    margin-left: auto;
}
#navbar .brand-lockup {
    flex-shrink: 0;
}
#navbar .brand-mark {
    flex-shrink: 0;
}
#navbar .brand-text {
    min-width: 0;
}


#mobile-menu a {
    min-height: 2.75rem;
    align-items: center;
}

body.menu-open {
    overflow: hidden;
}
body.menu-open #navbar {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--nav-border);
}

.lp-type-line {
    display: block;
    min-height: 1.55em;
}

.lp-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    width: 100%;
    max-width: 36rem;
}
.lp-hero-stats > .lp-hero-stat-divider {
    display: none;
}
.lp-hero-stats > div:not(.lp-hero-stat-divider) {
    min-width: 0;
}

@media (max-width: 1023px) {
    .lp-hero {
        min-height: auto;
        padding-top: 5.25rem;
        padding-bottom: clamp(4.5rem, 12vw, 7rem);
    }
    .lp-hero-stage {
        perspective: none;
        margin-top: 0.5rem;
        padding-inline: 0.25rem;
    }
    .lp-hero-tilt {
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        --tilt-z: 0deg;
        --tilt-scale: 1;
    }
    .lp-hero-tilt .lp-tilt-layer {
        transform: none;
    }
    .lp-hero-tilt .lp-depth,
    .lp-hero-tilt .lp-tilt-float {
        transform: none !important;
    }
    .lp-hero-cast-shadow {
        opacity: 0.55;
        transform: translate3d(0, 12px, 0) scale(1.02, 0.4);
    }
    .lp-title-joy {
        font-size: clamp(2rem, 9vw, 3.25rem);
    }
}

@media (max-width: 767px) {
    #navbar .nav-bar-inner {
        gap: 0.75rem;
    }
    #navbar .nav-actions {
        gap: 0.5rem;
    }
    #navbar .brand-lockup {
        flex-shrink: 0;
        transform: none !important;
    }
    #navbar .brand-sub {
        font-size: 0.65rem;
    }
    #navbar .brand-wordmark {
        font-size: 1.05rem;
    }
    .nav-theme {
        width: 2.35rem;
        height: 2.35rem;
        min-width: 2.35rem;
        min-height: 2.35rem;
        flex-shrink: 0;
        transform: none !important;
    }
    .lp-section-a,
    .lp-section-b {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }
    .lp-hero--page {
        padding-top: 5.5rem;
        padding-bottom: clamp(4rem, 12vw, 5.5rem);
    }
    .lp-stat-value {
        font-size: 1.35rem;
    }
    .lp-hero-stats {
        gap: 0.65rem 0.5rem;
        text-align: center;
    }
    .lp-hero-stats .text-xs {
        font-size: 0.65rem;
        letter-spacing: 0.04em;
        line-height: 1.25;
    }
    .lp-btn-primary,
    .lp-btn-secondary {
        width: 100%;
        padding: 0.95rem 1.2rem;
    }
    #features .lp-mini {
        aspect-ratio: auto;
        min-height: 11.5rem;
    }
    #features .lp-card,
    #playground .lp-card {
        overflow: visible;
    }
    #drag-container {
        height: 300px !important;
        max-width: 100%;
        touch-action: pan-y;
    }
    #drag-container .w-24 {
        width: 4.25rem;
        height: 4.25rem;
    }
    #drag-container .w-14 {
        width: 3rem;
        height: 3rem;
    }
    .lang-fab {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        padding: 0.22rem 0.22rem 0.22rem 0.45rem;
        transform: scale(0.96);
        transform-origin: left bottom;
    }
    .site-footer--hero .site-footer-inner {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }
    .site-footer--hero .footer-meta {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }
    .legal-page-card {
        padding: 1.35rem !important;
    }
    .legal-page-card h2 {
        font-size: 1.55rem !important;
    }
    .legal-contact-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
    .legal-contact-row > span:first-child {
        width: auto !important;
    }
}

@media (max-width: 767px) {
    body.has-hero-nav main > section.lp-section-a:first-of-type {
        --g1-left: 20%;
        --g2-left: 72%;
        overflow: hidden; /* clip reliably on older mobile browsers */
    }
    body.has-hero-nav main > section.lp-section-a:first-of-type::before,
    body.has-hero-nav main > section.lp-section-a:first-of-type::after {
        width: min(58vw, 360px);
        height: min(58vw, 360px);
    }
}

@media (max-width: 639px) {
    .lp-chip {
        font-size: 0.68rem;
        padding: 0.4rem 0.75rem;
    }
    #playground #server-restart-btn,
    #playground #create-team-btn,
    #features #create-team-btn,
    #features #dropdown-trigger {
        min-height: 2.5rem;
    }
    #playground label.flex {
        min-height: 2.5rem;
    }
    #playground input.peer + span {
        width: 2.75rem;
        height: 1.5rem;
    }
    #playground input.peer + span::after {
        width: 1.05rem;
        height: 1.05rem;
        top: 0.2rem;
        left: 0.2rem;
    }
    #playground input.peer:checked + span::after {
        transform: translateX(1.25rem);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .lp-hero-stats {
        max-width: 28rem;
    }
}

@media (hover: none) {
    .lang-fab:hover {
        transform: none;
        box-shadow:
            0 10px 28px -16px rgba(15, 23, 42, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }
    .dark .lang-fab:hover {
        box-shadow:
            0 14px 32px -16px rgba(0, 0, 0, 0.65),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }
}

/* ——— Maintenance page ——— */
.maintenance-page {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0a3550;
    font-family: Inter, system-ui, sans-serif;
}
.maintenance-stage {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: grid;
    place-items: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.35rem max(1.5rem, env(safe-area-inset-bottom));
    background: linear-gradient(128deg, #0a3550 0%, #0c4a66 32%, #0f5f7e 58%, #1a7394 82%, #2a86a8 100%);
    overflow: hidden;
}
.maintenance-stage .lp-hero-mesh {
    z-index: 0;
    opacity: 0.85;
}
.maintenance-panel {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    max-height: calc(100dvh - 3rem);
    overflow: auto;
    padding: 1.75rem 1.55rem 1.55rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 28, 42, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #f8fafc;
}
.maintenance-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.45rem;
}
.maintenance-logo {
    width: 3.05rem;
    height: 3.05rem;
    object-fit: contain;
}
.maintenance-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.maintenance-name {
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: 0.06em;
    color: #fff;
}
.maintenance-sub {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.62);
}
.maintenance-title {
    margin: 0 0 0.75rem;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.45rem, 4.2vw, 1.7rem);
    letter-spacing: -0.025em;
    line-height: 1.22;
    color: #fff;
}
.maintenance-text {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(248, 250, 252, 0.78);
}
.maintenance-text a {
    color: #bae6fd;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.maintenance-text p {
    margin: 0 0 0.5rem;
}
.maintenance-eta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 1.35rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.maintenance-eta__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(224, 242, 254, 0.62);
}
.maintenance-eta__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #f0f9ff;
}
.maintenance-eta__sep {
    font-weight: 500;
    color: rgba(224, 242, 254, 0.45);
}
.maintenance-eta__time {
    font-weight: 600;
    color: rgba(224, 242, 254, 0.92);
}
.maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.maintenance-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.maintenance-link--primary {
    color: #0c4a66;
    background: #e0f2fe;
    border: 1px solid transparent;
}
.maintenance-link--primary:hover {
    background: #fff;
}
.maintenance-link:not(.maintenance-link--primary) {
    color: rgba(248, 250, 252, 0.92);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.maintenance-link:not(.maintenance-link--primary):hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}
@media (min-width: 480px) {
    .maintenance-panel {
        padding: 2rem 1.85rem 1.75rem;
    }
}

/* Bypass: maintenance active badge in navbar */
.nav-maintenance-badge {
    display: none;
    align-items: center;
    gap: 0.4rem;
    max-width: 11rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    flex-shrink: 1;
    min-width: 0;
}
.dark .nav-maintenance-badge {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.12);
}
.nav-maintenance-badge.is-visible { display: inline-flex; }
.nav-maintenance-badge i { font-size: 0.72rem; opacity: 0.95; }
.nav-maintenance-badge__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: maintenance-pulse 1.8s ease-out infinite;
}
html:not(.dark) body.has-hero-nav:not(.nav-solid) #navbar .nav-maintenance-badge {
    color: #fde68a;
    border-color: rgba(253, 230, 138, 0.35);
    background: rgba(15, 23, 42, 0.22);
}
@media (max-width: 639px) {
    .nav-maintenance-badge span { display: none; }
    .nav-maintenance-badge {
        max-width: none;
        padding: 0.45rem 0.55rem;
    }
}

/* Index easter egg → /archiv/ */
.ee-archive-trigger {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: default;
}

.ee-archive-trigger.is-hot {
    color: #0ea5e9;
    text-shadow: 0 0 18px rgba(14, 165, 233, 0.45);
}

.ee-toast {
    position: fixed;
    left: 50%;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(120%);
    z-index: 80;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 40px -18px rgba(2, 6, 23, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.ee-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ——— Patch notes ——— */
.pn-feed {
    position: relative;
}
.pn-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pn-entry {
    position: relative;
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0 1.15rem;
    padding-bottom: 2.25rem;
}
.pn-entry:last-child {
    padding-bottom: 0;
}
.pn-entry__rail {
    position: relative;
    display: flex;
    justify-content: center;
}
.pn-entry__rail::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    bottom: -2.25rem;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        rgba(14, 165, 233, 0.45) 0%,
        rgba(148, 163, 184, 0.28) 100%
    );
}
.pn-entry:last-child .pn-entry__rail::before {
    bottom: 0.4rem;
    opacity: 0.35;
}
.dark .pn-entry__rail::before {
    background: linear-gradient(
        180deg,
        rgba(56, 189, 248, 0.5) 0%,
        rgba(148, 163, 184, 0.18) 100%
    );
}
.pn-entry__dot {
    position: relative;
    z-index: 1;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: #0ea5e9;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 88%, #0ea5e9);
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.pn-entry.reveal:not(.active) .pn-entry__dot {
    transform: scale(0.35);
    opacity: 0.45;
}
.pn-entry.reveal.active .pn-entry__dot {
    transform: scale(1);
    opacity: 1;
}
.pn-entry--highlight .pn-entry__dot {
    background: #38bdf8;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--bg) 88%, #38bdf8),
        0 0 0 8px rgba(14, 165, 233, 0.12);
}
.pn-entry.reveal:not(.active) .pn-card {
    transform: translateY(10px);
}
.pn-entry.reveal.active .pn-card {
    transform: none;
}
.pn-entry .pn-card {
    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.pn-entry__body {
    min-width: 0;
}
.pn-card {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.2rem 1.15rem;
}
.pn-entry--highlight .pn-card {
    border-color: rgba(14, 165, 233, 0.35);
}
.dark .pn-entry--highlight .pn-card {
    border-color: rgba(56, 189, 248, 0.35);
}
.pn-entry__head {
    margin-bottom: 1.05rem;
}
.pn-entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
    margin-bottom: 0.55rem;
}
.pn-version {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}
.dark .pn-version {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.16);
}
.pn-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0c4a66;
    background: #e0f2fe;
}
.dark .pn-badge {
    color: #e0f2fe;
    background: rgba(14, 165, 233, 0.22);
}
.pn-date {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
}
.dark .pn-date {
    color: #94a3b8;
}
.pn-entry__title {
    margin: 0 0 0.35rem;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #0f172a;
}
.dark .pn-entry__title {
    color: #f8fafc;
}
.pn-entry__summary {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #475569;
}
.dark .pn-entry__summary {
    color: #94a3b8;
}
.pn-changes {
    display: grid;
    gap: 0.95rem;
}
@media (min-width: 640px) {
    .pn-card {
        padding: 1.45rem 1.4rem 1.3rem;
    }
    .pn-changes {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.35rem;
    }
    .pn-cat--entfernt {
        grid-column: 1 / -1;
    }
}
.pn-cat {
    padding-left: 0.85rem;
    border-left: 2px solid rgba(148, 163, 184, 0.35);
}
.dark .pn-cat {
    border-left-color: rgba(148, 163, 184, 0.25);
}
.pn-cat--neu { border-left-color: rgba(16, 185, 129, 0.7); }
.pn-cat--verbessert { border-left-color: rgba(14, 165, 233, 0.75); }
.pn-cat--behoben { border-left-color: rgba(139, 92, 246, 0.7); }
.pn-cat--entfernt { border-left-color: rgba(239, 68, 68, 0.75); }
.pn-cat__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}
.dark .pn-cat__title {
    color: #94a3b8;
}
.pn-cat__title i {
    font-size: 0.72rem;
    opacity: 0.85;
}
.pn-cat--neu .pn-cat__title { color: #059669; }
.dark .pn-cat--neu .pn-cat__title { color: #34d399; }
.pn-cat--verbessert .pn-cat__title { color: #0284c7; }
.dark .pn-cat--verbessert .pn-cat__title { color: #38bdf8; }
.pn-cat--behoben .pn-cat__title { color: #7c3aed; }
.dark .pn-cat--behoben .pn-cat__title { color: #a78bfa; }
.pn-cat--entfernt .pn-cat__title { color: #dc2626; }
.dark .pn-cat--entfernt .pn-cat__title { color: #f87171; }
.pn-cat__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pn-cat__list li {
    position: relative;
    margin: 0 0 0.38rem;
    padding-left: 0.9rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #334155;
}
.dark .pn-cat__list li {
    color: #cbd5e1;
}
.pn-cat__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.4;
}
.pn-cat__list li:last-child {
    margin-bottom: 0;
}
.pn-empty {
    max-width: 22rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pn-entry {
        grid-template-columns: 1.25rem 1fr;
        gap: 0 1.5rem;
        padding-bottom: 2.75rem;
    }
}

/* ——— Milestones / history ——— */
.ms-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}
.dark .ms-type {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.16);
}
.ms-type i { font-size: 0.68rem; opacity: 0.9; }
.ms-type--milestone { color: #0f766e; background: rgba(20, 184, 166, 0.14); }
.dark .ms-type--milestone { color: #5eead4; background: rgba(20, 184, 166, 0.16); }
.ms-type--event { color: #0369a1; background: rgba(14, 165, 233, 0.12); }
.dark .ms-type--event { color: #7dd3fc; background: rgba(14, 165, 233, 0.16); }
.ms-type--release { color: #7c3aed; background: rgba(139, 92, 246, 0.14); }
.dark .ms-type--release { color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.ms-type--other { color: #64748b; background: rgba(148, 163, 184, 0.16); }
.dark .ms-type--other { color: #94a3b8; background: rgba(148, 163, 184, 0.14); }

.ms-teaser-grid {
    display: grid;
    gap: 1rem;
}
@media (min-width: 768px) {
    .ms-teaser-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
    }
}
.ms-teaser-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.2rem 1.15rem 1.15rem;
    text-decoration: none;
    color: inherit;
}
.ms-teaser-card__date {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0284c7;
}
.dark .ms-teaser-card__date {
    color: #38bdf8;
}
.ms-teaser-card__title {
    margin: 0 0 0.4rem;
    font-family: Outfit, Inter, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0f172a;
}
.dark .ms-teaser-card__title {
    color: #f8fafc;
}
.ms-teaser-card__text {
    margin: 0;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #64748b;
}
.dark .ms-teaser-card__text {
    color: #94a3b8;
}
.ms-teaser-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}