/* ============================================================
   ibmarker.css | Cinematic Dark theme for iBMarker
   Imports shared design tokens from _tokens.css. Change a font or
   brand colour there and every page on this site picks it up.
   ============================================================ */

@import url('_tokens.css');

/* ---- RESET & BASE ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0c0f17;
    /* Layer stack, bottom to top:
   1. Two edge-confined colour pools (emerald TL, blue BR) - colour lives in
      the periphery, never directly behind the reading column.
   2. Centre-darkening vignette: pulls the middle toward near-black so body
      copy floats on a calm, low-variance field (legibility, not decoration). */
    background-image: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(80, 230, 195, 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(99, 130, 255, 0.10), transparent 60%), radial-gradient(ellipse 90% 70% at 50% 38%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
    background-attachment: fixed;
    color: #e8ecf5;
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}

/* ---- GLOBAL BACKGROUND ---- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 800px 500px at 18% 35%, rgba(80, 230, 195, 0.10), transparent 70%), radial-gradient(ellipse 700px 600px at 88% 75%, rgba(99, 130, 255, 0.08), transparent 70%);
    pointer-events: none;
    animation: glowDrift 18s ease-in-out infinite alternate;
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ---- UTILITIES ---- */
.container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }
}

.accent {
    color: #50e6c3;
}

.serif {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
}

.section-divider {
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent);
    margin: 0;
}

/* ---- NAV ---- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 60px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(6, 9, 18, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

.logo-icon {
    height: 32px;
    width: auto;
}

.logo-full {
    height: 82px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 28px;
    font-size: 16px;
    color: #9aa3bb;
}

    .nav-links a {
        transition: color 0.15s;
        position: relative;
    }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 1px;
            background: #50e6c3;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nav-links a:hover {
            color: #fff;
        }

            .nav-links a:hover::after {
                transform: scaleX(1);
                transform-origin: left;
            }
        /* Current page: brighter label with the accent underline held open. */
        .nav-links a.is-current {
            color: #fff;
        }

            .nav-links a.is-current::after {
                transform: scaleX(1);
                transform-origin: left;
            }

.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-login {
    font-size: 14px;
    color: #9aa3bb;
    padding: 8px 16px;
    transition: color 0.15s;
    border: 1px solid #6b7593;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.15s;
}

    .nav-login:hover {
        color: #fff;
    }

.nav-cta {
    background: #f0f3fa;
    color: #060912;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.15s;
}

    .nav-cta:hover {
        background: #fff;
        transform: translateY(-1px);
    }
/* Hamburger - three CSS-drawn bars that morph into an X when .is-open.
   Built from three <span>s rather than an SVG so we can animate position
   and rotation independently and get the classic top->X / middle->fade /
   bottom->X transformation with one cubic-bezier curve. */
.hamburger {
    display: none;
    position: relative;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101; /* above the .mobile-menu overlay */
}

    .hamburger span {
        position: absolute;
        left: 5px;
        width: 22px;
        height: 1.5px;
        background: #e8ecf5;
        border-radius: 2px;
        transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.25s ease;
    }

        .hamburger span:nth-child(1) {
            top: 10px;
        }

        .hamburger span:nth-child(2) {
            top: 15px;
        }

        .hamburger span:nth-child(3) {
            top: 20px;
        }

    .hamburger.is-open span {
        background: #50e6c3;
    }

        .hamburger.is-open span:nth-child(1) {
            top: 15px;
            transform: rotate(45deg);
        }

        .hamburger.is-open span:nth-child(2) {
            opacity: 0;
            transform: translateX(-8px);
        }

        .hamburger.is-open span:nth-child(3) {
            top: 15px;
            transform: rotate(-45deg);
        }

/* Mobile menu - full-viewport overlay below the fixed nav. Slides down
   with a subtle blur on entry. Each item then staggers in from the left
   so the panel composes itself rather than appearing wholesale. */
.mobile-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(6, 9, 18, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
    }

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 48px;
    max-width: 480px;
}

    .mobile-menu-inner > a {
        font-size: 26px;
        font-weight: 600;
        color: #f0f3fa;
        padding: 18px 0;
        letter-spacing: -0.02em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

        .mobile-menu-inner > a:hover,
        .mobile-menu-inner > a:focus-visible {
            color: #50e6c3;
            padding-left: 8px;
            outline: none;
        }

        .mobile-menu-inner > a.is-current {
            color: #50e6c3;
        }

.mobile-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}

.mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0f3fa;
    color: #060912 !important;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    /* Stretch across the menu's content width so the primary CTA reads as
     a full-width button rather than a narrow pill pinned to the left,
     matching modern mobile UX. The inner is also capped at max-width 480px
     so the button never gets unreasonably wide on tablets. */
    align-self: stretch;
    border-bottom: none !important;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .mobile-menu-cta:hover,
    .mobile-menu-cta:focus-visible {
        background: #fff;
        transform: translateY(-1px);
        /* Override the .mobile-menu-inner > a hover padding shift so the
     centred label doesn't jump sideways on focus/hover. */
        padding-left: 24px !important;
    }

/* Stagger - items slide in from the left as the panel opens */
.mobile-menu.is-open .mobile-menu-inner > * {
    animation: mobileMenuItemIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(1) {
        animation-delay: 0.06s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(2) {
        animation-delay: 0.10s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(3) {
        animation-delay: 0.14s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(4) {
        animation-delay: 0.18s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(5) {
        animation-delay: 0.22s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(6) {
        animation-delay: 0.26s;
    }

    .mobile-menu.is-open .mobile-menu-inner > *:nth-child(7) {
        animation-delay: 0.30s;
    }

@keyframes mobileMenuItemIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 0 24px;
    }

    .nav-links, .nav-right {
        display: none;
    }

    .hamburger {
        display: block;
    }
}

/* ---- CUSTOM SCROLLBAR ---- */
/* Themed scrollbar that picks up the emerald accent on hover. The thumb
   has a 3px transparent border with background-clip: padding-box so it
   sits centered in the track with breathing room around it - feels less
   like a chunky native bar and more like a UI element. Firefox uses the
   shorthand scrollbar-color property; Chrome/Safari/Edge use the
   ::-webkit pseudo-elements. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    transition: background 0.25s ease;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(80, 230, 195, 0.4);
        background-clip: padding-box;
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---- HERO ---- */
.hero {
    padding: 140px 0 100px;
    position: relative;
    z-index: 2;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    background: rgba(80, 230, 195, 0.08);
    border: 1px solid rgba(80, 230, 195, 0.22);
    border-radius: 999px;
    font-size: 14px;
    color: #9ce6cf;
    font-weight: 400;
    margin-bottom: 28px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #50e6c3;
    box-shadow: 0 0 8px #50e6c3;
    animation: dotPulse 2.4s ease-in-out infinite;
}

.eyebrow-tag {
    background: rgba(80, 230, 195, 0.15);
    color: #cfeee2;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.hero h1 {
    font-weight: 600;
    font-size: clamp(2rem, 1.1rem + 4.5vw, 3.7rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #f0f3fa;
    margin: 0 0 22px;
}

    .hero h1 em {
        font-family: var(--font-accent);
        font-style: italic;
        font-weight: 400;
        color: #50e6c3;
        letter-spacing: -0.02em;
    }

.hero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: #9aa3bb;
    max-width: 470px;
    margin: 0 0 36px;
}

.ctas {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: #f0f3fa;
    color: #060912;
    border: none;
    border-radius: 10px;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, background 0.15s;
}

    .btn-primary:hover {
        background: #fff;
        transform: translateY(-1px);
    }

    .btn-primary::after {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.12) 50%, transparent 100%);
        transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .btn-primary:hover::after {
        left: 130%;
    }

.btn-secondary {
    background: transparent;
    color: #e8ecf5;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s, background 0.15s;
}

    .btn-secondary:hover {
        border-color: rgba(255,255,255,0.3);
        background: rgba(255,255,255,0.03);
    }

.trust-row {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 12px;
    color: #6b7593;
    white-space: nowrap;
}

.trust-label {
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.trust-logos {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 16px;
    color: #9aa3bb;
    flex-wrap: wrap;
}

/* ---- HERO PEEK CARD ---- */
.peek {
    position: relative;
    height: 520px;
    perspective: 1800px;
}
/* Solo placement outside the hero grid (e.g. the solutions "Live demo"
   section): centre the card and cap its width. */
.peek-solo {
    max-width: 960px;
    margin: 0 auto;
}

.peek-card {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0e1422, #0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: rotateY(-8deg) rotateX(4deg);
    transform-origin: center;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease-out;
}

    .peek-card.tilt-active {
        transition: transform 0.08s ease-out, box-shadow 0.3s ease-out;
    }

    .peek-card.tilt-reset {
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease-out;
    }

.peek-glow {
    position: absolute;
    inset: -1px;
    background: radial-gradient(ellipse 400px 300px at 50% 50%, rgba(80,230,195,0.25), transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.4;
    animation: glowShift 6s ease-in-out infinite alternate;
    transition: opacity 0.3s;
}

.peek-card.tilt-active .peek-glow {
    animation: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.peek-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
}

    .peek-chrome span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #4a4e60;
    }

    .peek-chrome small {
        margin-left: auto;
        font-size: 10px;
        color: #6b7593;
        letter-spacing: 0.04em;
    }

.peek-body {
    padding: 24px 26px;
}

.peek-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.peek-h-l {
    font-size: 12px;
    color: #6b7593;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.peek-h-r {
    font-size: 11px;
    color: #50e6c3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .peek-h-r::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #50e6c3;
        box-shadow: 0 0 6px #50e6c3;
    }

.peek-title {
    font-size: 15px;
    font-weight: 600;
    color: #e8ecf5;
    margin-bottom: 16px;
}

.peek-passage {
    background: rgba(255,255,255,0.025);
    border-left: 2px solid rgba(80,230,195,0.35);
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.7;
    color: #b8c0d4;
    margin-bottom: 18px;
}

    .peek-passage mark {
        background: rgba(80,230,195,0.18);
        color: #cfeee2;
        padding: 1px 4px;
        border-radius: 3px;
    }

.peek-rubric {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.peek-rubric-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.peek-rubric-name {
    color: #9aa3bb;
    flex: 0 0 110px;
}

.peek-rubric-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

    .peek-rubric-bar i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, #50e6c3, #38b89c);
        border-radius: 2px;
        transform-origin: left;
        animation: barFill 1.2s 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

.peek-rubric-val {
    color: #e8ecf5;
    flex: 0 0 40px;
    text-align: right;
    font-weight: 500;
}

.peek-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.peek-score-l {
    font-size: 11px;
    color: #6b7593;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.peek-score-r {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .peek-score-r b {
        font-family: var(--font-accent);
        font-style: italic;
        font-size: 38px;
        color: #50e6c3;
        line-height: 1;
        font-weight: 400;
    }

    .peek-score-r span {
        font-size: 11px;
        color: #6b7593;
    }

.peek-band {
    background: rgba(80,230,195,0.12);
    border: 1px solid rgba(80,230,195,0.3);
    color: #cfeee2;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 999px;
}

.chip {
    position: absolute;
    background: #0e1422;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 11px;
    color: #b8c0d4;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    white-space: nowrap;
    z-index: 3;
    animation: floatBob 4s ease-in-out infinite;
}

.chip-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(80,230,195,0.15);
    color: #50e6c3;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 11px;
}

.chip-1 {
    top: 6px;
    left: -10px;
}
/* Bumped above the new .peek-nav strip so the chip doesn't overlap the step bar. */
.chip-2 {
    bottom: 64px;
    right: 27px;
    animation-delay: -2s;
}

/* ---- HERO PEEK CARD: MULTI-FRAME DEMO ---- */
/* The peek-card is now a 4-frame walkthrough (Submit -> Mark -> Feedback ->
   Cohort), with the chrome bar fixed at the top, frames stacked in the middle,
   and a step nav at the bottom. peek-demo.js auto-advances every 5s, pauses
   on hover, and pins on click. */
.peek-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.peek-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

    .peek-frame.is-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .peek-frame .peek-body {
        padding: 22px 26px;
    }

.peek-h-r--neutral {
    color: #9aa3bb;
}

    .peek-h-r--neutral::before {
        display: none;
    }

.peek-h-r--done {
    color: #88f0d8;
}

    .peek-h-r--done::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #88f0d8;
        box-shadow: 0 0 6px #88f0d8;
    }

/* Frame 01 - Submission */
.peek-submission {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 18px;
}

.peek-sub-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.peek-sub-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(80,230,195,0.25), rgba(99,130,255,0.2));
    border: 1px solid rgba(80,230,195,0.3);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #cfeee2;
    letter-spacing: 0.04em;
}

.peek-sub-name {
    font-size: 13px;
    font-weight: 600;
    color: #e8ecf5;
}

.peek-sub-sub {
    font-size: 11px;
    color: #6b7593;
    margin-top: 2px;
}

.peek-sub-preview {
    font-family: var(--font-display);
    font-size: 12.5px;
    line-height: 1.65;
    color: #b8c0d4;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(0,0,0,0.18);
    border-left: 2px solid rgba(80,230,195,0.3);
    margin-bottom: 14px;
}

.peek-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.peek-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    color: #6b7593;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.peek-progress-pct {
    color: #50e6c3;
    font-weight: 600;
}

.peek-progress-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}

    .peek-progress-bar i {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, #50e6c3, #88f0d8);
        border-radius: 2px;
    }

.peek-frame.is-active[data-frame="0"] .peek-progress-bar i {
    animation: peekProgress 4.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes peekProgress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Frame 03 - Student Feedback */
.peek-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.peek-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: #b8c0d4;
}

.peek-note-tag {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    align-self: flex-start;
}

.peek-note--good {
    border-color: rgba(80,230,195,0.22);
}

    .peek-note--good .peek-note-tag {
        background: rgba(80,230,195,0.18);
        color: #cfeee2;
    }

.peek-note--apply {
    border-color: rgba(99,130,255,0.22);
}

    .peek-note--apply .peek-note-tag {
        background: rgba(99,130,255,0.18);
        color: #b8c4ff;
    }

.peek-note--develop {
    border-color: rgba(255,184,77,0.22);
}

    .peek-note--develop .peek-note-tag {
        background: rgba(255,184,77,0.16);
        color: #ffd699;
    }

/* Frame 04 - Coordinator Cohort */
.peek-cohort {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.peek-cohort-head,
.peek-cohort-row {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr 0.6fr 0.6fr 0.55fr;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 11px;
}

.peek-cohort-head {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.18);
}

.peek-cohort-score-h {
    text-align: right;
}

.peek-cohort-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

    .peek-cohort-row:last-child {
        border-bottom: none;
    }

.peek-cohort-name {
    color: #e8ecf5;
    font-weight: 500;
}

.peek-cohort-score {
    text-align: right;
    color: #e8ecf5;
    font-weight: 600;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 14px;
}

.peek-cohort-flag {
    color: #f0883e;
}

.peek-heat {
    display: inline-block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
    justify-self: start;
}

.peek-heat--hi {
    background: rgba(80,230,195,0.55);
    box-shadow: 0 0 8px rgba(80,230,195,0.25);
}

.peek-heat--mid {
    background: rgba(255,184,77,0.45);
}

.peek-heat--lo {
    background: rgba(248,81,73,0.40);
}

.peek-cohort-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #9aa3bb;
    padding-top: 4px;
}

    .peek-cohort-foot b {
        color: #e8ecf5;
        font-weight: 600;
    }

.peek-cohort-alert {
    color: #f0883e;
    background: rgba(240,136,62,0.1);
    border: 1px solid rgba(240,136,62,0.25);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

/* Step nav at the bottom of the card */
.peek-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
}

.peek-step {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    color: #6b7593;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

    .peek-step:hover {
        color: #b8c0d4;
        background: rgba(255,255,255,0.025);
    }

    .peek-step:focus-visible {
        outline: none;
        border-color: rgba(80,230,195,0.4);
        color: #cfeee2;
    }

.peek-step-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.04em;
    line-height: 1;
    opacity: 0.7;
}

.peek-step-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.peek-step.is-active {
    background: rgba(80,230,195,0.08);
    border-color: rgba(80,230,195,0.3);
    color: #cfeee2;
}

    .peek-step.is-active .peek-step-num {
        color: #50e6c3;
        opacity: 1;
    }

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .peek {
        height: 480px;
    }

    .chip {
        display: none;
    }

    .trust-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .peek-step-num {
        display: none;
    }
}

/* ---- ROI CALCULATOR ---- */
.roi {
    padding: 100px 0;
}

.roi-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 18px;
    background: linear-gradient(180deg, #0e1422, #0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
}

.roi-inputs {
    padding: 36px 36px;
    border-right: 1px solid rgba(255,255,255,0.06);
    background: radial-gradient(ellipse 360px 240px at 20% 30%, rgba(99,130,255,0.06), transparent 70%), rgba(255,255,255,0.01);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.roi-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .roi-field label {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #6b7593;
        font-weight: 600;
    }

.roi-input-row {
    display: flex;
    align-items: stretch;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}

    .roi-input-row:focus-within {
        border-color: rgba(80,230,195,0.4);
        background: rgba(0,0,0,0.36);
    }

    .roi-input-row input {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: none;
        padding: 13px 14px;
        color: #f0f3fa;
        font-family: var(--font-accent);
        font-style: italic;
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
        -moz-appearance: textfield;
    }

        .roi-input-row input:focus {
            outline: none;
        }

        .roi-input-row input::-webkit-outer-spin-button,
        .roi-input-row input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

.roi-input-unit {
    display: grid;
    place-items: center;
    padding: 0 16px;
    font-size: 11px;
    color: #6b7593;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.roi-assumptions {
    font-size: 11.5px;
    line-height: 1.55;
    color: #6b7593;
    margin-top: 4px;
}

.roi-outputs {
    padding: 36px 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
}

.roi-result {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.2s, background 0.2s;
}

    .roi-result:hover {
        border-color: rgba(80,230,195,0.22);
        background: rgba(80,230,195,0.025);
    }

    .roi-result:first-child {
        grid-column: 1 / -1;
        background: radial-gradient(ellipse 320px 200px at 75% 50%, rgba(80,230,195,0.10), transparent 70%), rgba(255,255,255,0.03);
        border-color: rgba(80,230,195,0.25);
    }

.roi-result-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 44px;
    color: #50e6c3;
    font-weight: 400;
    line-height: 1;
}

.roi-result:first-child .roi-result-num {
    font-size: 64px;
}

.roi-result-unit {
    font-size: 11.5px;
    color: #9aa3bb;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.roi-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0f3fa;
    color: #060912;
    border-radius: 10px;
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, transform 0.15s;
}

    .roi-cta:hover {
        background: #fff;
        transform: translateY(-1px);
    }

@media (max-width: 900px) {
    .roi-grid {
        grid-template-columns: 1fr;
    }

    .roi-inputs {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
}

@media (max-width: 560px) {
    .roi-inputs, .roi-outputs {
        padding: 28px 24px;
    }

    .roi-outputs {
        grid-template-columns: 1fr;
    }

    .roi-result:first-child .roi-result-num {
        font-size: 52px;
    }
}

/* ---- SECTION SHARED ---- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    background: rgba(80,230,195,0.08);
    border: 1px solid rgba(80,230,195,0.22);
    border-radius: 999px;
    font-size: 11px;
    color: #9ce6cf;
    font-weight: 500;
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(1.625rem, 1rem + 2.6vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #f0f3fa;
    margin-bottom: 12px;
    line-height: 1.1;
}

.section-sub {
    font-size: 18px;
    color: #9aa3bb;
    max-width: 960px;
    margin: auto;
    margin-bottom: 36px;
    line-height: 1.6;
    text-align: center;
}

.section-card {
    padding: 16px 20px;
    background: linear-gradient(#0e1422, #6b7593) left / 1px 100% no-repeat, linear-gradient(to right, #6b7593, #0e1422) bottom / 100% 1px no-repeat;
    background-repeat: no-repeat;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* ---- PILLARS ---- */
.pillars {
    padding: 33px 0;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pillar-card {
    /* Anchor as block - cards link to deep-dive pages. */
    display: block;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 28px 22px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    color: inherit;
}

    .pillar-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 200px 80px at 50% 0%, rgba(80,230,195,0.12), transparent 70%);
        opacity: 0;
        transition: opacity 0.25s;
        pointer-events: none;
    }

    .pillar-card:hover {
        border-color: rgba(80,230,195,0.3);
        background: rgba(80,230,195,0.03);
        transform: translateY(-3px);
    }

        .pillar-card:hover::after {
            opacity: 1;
        }

    .pillar-card:focus-visible {
        outline: none;
        border-color: rgba(80,230,195,0.5);
        box-shadow: 0 0 0 2px rgba(80,230,195,0.25);
    }

.pillar-icon {
    width: 40px;
    height: 40px;
    background: rgba(80,230,195,0.1);
    border: 1px solid rgba(80,230,195,0.25);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #50e6c3;
    margin-bottom: 18px;
}

.pillar-card h3 {
    font-size: 20px;
    font-weight: 500;
    color: #f0f3fa;
    margin-bottom: 6px;
}

.pillar-card p {
    font-size: 16px;
    line-height: 1.5;
    color: #9aa3bb;
}
/* Arrow affordance - quiet by default, asserts itself on hover so the
   card reads as navigable without shouting. Mirrors the hero/nav CTA arrow. */
.pillar-arrow {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #50e6c3;
    background: rgba(80,230,195,0.06);
    border: 1px solid rgba(80,230,195,0.18);
    opacity: 1;
    transition: opacity 0.25s, transform 0.25s, background 0.25s, border-color 0.25s;
    pointer-events: none;
}

.pillar-card:hover .pillar-arrow {
    opacity: 0.7;
    transform: translate(2px, -2px);
    background: rgba(80,230,195,0.14);
    border-color: rgba(80,230,195,0.4);
}

/* Staggered card reveal */
.pillar-card {
    transition: opacity 0.6s, transform 0.6s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal .pillar-card {
    opacity: 0;
    transform: translateY(16px);
}

.reveal.visible .pillar-card {
    opacity: 1;
    transform: translateY(0);
}

    .reveal.visible .pillar-card:nth-child(1) {
        transition-delay: 0.05s;
    }

    .reveal.visible .pillar-card:nth-child(2) {
        transition-delay: 0.12s;
    }

    .reveal.visible .pillar-card:nth-child(3) {
        transition-delay: 0.19s;
    }

    .reveal.visible .pillar-card:nth-child(4) {
        transition-delay: 0.26s;
    }

    .reveal.visible .pillar-card:nth-child(5) {
        transition-delay: 0.33s;
    }

    .reveal.visible .pillar-card:nth-child(6) {
        transition-delay: 0.40s;
    }

/* ---- Summary card: quick links to all five pillars (card 1 of the grid) ---- */
.pillar-card--summary h3 {
    margin-bottom: 10px;
}

.pillar-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

    .pillar-summary-list li {
        margin: 0;
    }

    .pillar-summary-list a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 10px;
        margin: 0 -10px;
        border-radius: 8px;
        text-decoration: none;
        color: #e8ecf5;
        font-size: 18px;
        font-weight: 400;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

        .pillar-summary-list a:hover {
            background: rgba(80,230,195,0.08);
            color: #f0f3fa;
            transform: translateX(3px);
        }

    .pillar-summary-list .ps-num {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #50e6c3;
        background: rgba(80,230,195,0.1);
        border: 1px solid rgba(80,230,195,0.25);
    }

    .pillar-summary-list .ps-arrow {
        margin-left: auto;
        color: #50e6c3;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .pillar-summary-list a:hover .ps-arrow {
        opacity: 1;
        transform: translateX(0);
    }

@media (max-width: 900px) {
    .pillar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pillar-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- ECOSYSTEM ---- */
.ecosystem {
    padding: 100px 0;
}

.eco-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.eco-text .section-title {
    margin-bottom: 20px;
}

.eco-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #9aa3bb;
    margin-bottom: 16px;
}

.eco-visual {
    position: relative;
    background: linear-gradient(180deg, #0e1422, #0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 32px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .eco-visual::before {
        content: '';
        position: absolute;
        inset: -1px;
        background: linear-gradient(135deg, transparent 40%, rgba(80,230,195,0.15) 55%, transparent 70%);
        border-radius: 16px;
        pointer-events: none;
        opacity: 0.5;
    }

.eco-ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(80,230,195,0.2);
    margin: 0 auto 28px;
    position: relative;
    display: grid;
    place-items: center;
    animation: ringPulse 4s ease-in-out infinite;
}

    .eco-ring::before {
        content: '';
        position: absolute;
        inset: 20px;
        border-radius: 50%;
        border: 1px solid rgba(80,230,195,0.15);
        animation: ringSpin 24s linear infinite;
    }

.eco-ring-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #50e6c3;
    font-weight: 600;
}

.eco-roles {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.eco-role {
    position: relative;
    background: rgba(80,230,195,0.06);
    border: 1px solid rgba(80,230,195,0.18);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    color: #cfeee2;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}

    .eco-role:hover {
        background: rgba(80,230,195,0.12);
        transform: translateY(-2px);
    }

    /* Tooltips on the stakeholder pills. Content comes from each pill's
   data-tip attribute; shown on hover AND keyboard focus. The bubble sits
   above the pill with a small arrow. */
    .eco-role[data-tip] {
        cursor: help;
    }

    .eco-role:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(80,230,195,0.4);
    }

    .eco-role[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        width: max-content;
        max-width: 230px;
        background: #0e1422;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        color: #b8c0d4;
        text-align: left;
        box-shadow: 0 12px 32px rgba(0,0,0,0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 5;
    }

    .eco-role[data-tip]::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #0e1422;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 6;
    }

    .eco-role[data-tip]:hover,
    .eco-role[data-tip]:focus-visible {
        z-index: 7;
    }

        .eco-role[data-tip]:hover::after,
        .eco-role[data-tip]:focus-visible::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .eco-role[data-tip]:hover::before,
        .eco-role[data-tip]:focus-visible::before {
            opacity: 1;
        }

@media (max-width: 900px) {
    .eco-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- FEATURES ---- */
.features {
    padding: 120px 0;
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feat-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 32px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

    .feat-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-2px);
    }


    .feat-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 240px;
        height: 120px;
        background: radial-gradient(ellipse at top right, rgba(80,230,195,0.08), transparent 70%);
        pointer-events: none;
    }

    .feat-card h3 {
        font-size: 20px;
        font-weight: 400;
        color: #f0f3fa;
        margin-bottom: 10px;
    }

    .feat-card p {
        font-size: 16px;
        line-height: 1.6;
        color: #9aa3bb;
    }

    .feat-card .feat-stat {
        margin-top: 20px;
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
    }

.feat-stat b {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 32px;
    color: #50e6c3;
    font-weight: 400;
}

.feat-stat span {
    font-size: 18px;
    color: #6b7593;
}

/* Stagger feature cards */
.reveal .feat-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s, transform 0.6s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .feat-card {
    opacity: 1;
    transform: translateY(0);
}

    .reveal.visible .feat-card:nth-child(1) {
        transition-delay: 0.05s;
    }

    .reveal.visible .feat-card:nth-child(2) {
        transition-delay: 0.15s;
    }

    .reveal.visible .feat-card:nth-child(3) {
        transition-delay: 0.25s;
    }

    .reveal.visible .feat-card:nth-child(4) {
        transition-delay: 0.35s;
    }

@media (max-width: 640px) {
    .feat-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- GAMING ---- */
.gaming {
    padding: 20px 0;
}

.gaming-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.gaming-visual {
    background: linear-gradient(180deg, #0e1422, #0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

    .gaming-visual::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 400px 200px at 50% 80%, rgba(99,130,255,0.1), transparent);
        pointer-events: none;
    }

.game-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(99,130,255,0.1);
    border: 1px solid rgba(99,130,255,0.25);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #b8c4ff;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}

.game-tile {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .game-tile:hover {
        transform: translateY(-3px) scale(1.08);
        box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    }

    .game-tile.t1 {
        background: rgba(80,230,195,0.12);
        color: #50e6c3;
    }

    .game-tile.t2 {
        background: rgba(99,130,255,0.12);
        color: #8da0ff;
    }

    .game-tile.t3 {
        background: rgba(255,184,77,0.12);
        color: #ffb84d;
    }

    .game-tile.t4 {
        background: rgba(255,122,89,0.1);
        color: #ff7a59;
    }

    .game-tile.empty {
        background: rgba(255,255,255,0.02);
        border-style: dashed;
    }

        .game-tile.empty:hover {
            transform: none;
            box-shadow: none;
        }

/* ---- GAMING: interactive "MCQ Battle" demo (mirrors the real mode) ---- */
.game-stage {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mcq-card {
    width: 100%;
    max-width: 380px;
    text-align: left;
    background: linear-gradient(180deg, #0e1422, #0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.mcq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mcq-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #b8c4ff;
    background: rgba(99,130,255,0.12);
    border: 1px solid rgba(99,130,255,0.3);
    border-radius: 999px;
    padding: 5px 12px;
}

.mcq-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #9aa3bb;
}

.mcq-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mcq-subject {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 600;
}

.mcq-league {
    font-size: 11px;
    color: #ffd699;
    font-weight: 600;
}

.mcq-prompt {
    font-size: 13px;
    line-height: 1.5;
    color: #9aa3bb;
}

.mcq-q {
    font-size: 14.5px;
    font-weight: 600;
    color: #e8ecf5;
    line-height: 1.35;
}

/* Subject select */
.mcq-subjects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mcq-subject-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #cfeee2;
    background: rgba(80,230,195,0.06);
    border: 1px solid rgba(80,230,195,0.22);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

    .mcq-subject-btn:hover {
        background: rgba(80,230,195,0.12);
        border-color: rgba(80,230,195,0.4);
        transform: translateY(-1px);
    }

    .mcq-subject-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(80,230,195,0.4);
    }

/* Clickable answer options */
.mcq-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mcq-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 12.5px;
    color: #b8c0d4;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
    padding: 9px 11px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

    .mcq-opt:hover:not(.locked) {
        border-color: rgba(99,130,255,0.45);
        background: rgba(99,130,255,0.06);
        color: #e8ecf5;
    }

    .mcq-opt:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(99,130,255,0.4);
    }

    .mcq-opt.locked {
        cursor: default;
    }

.mcq-key {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.07);
    color: #9aa3bb;
}

.mcq-opt.correct {
    border-color: rgba(80,230,195,0.5);
    background: rgba(80,230,195,0.1);
    color: #cfeee2;
}

    .mcq-opt.correct .mcq-key {
        background: #50e6c3;
        color: #07261f;
    }

.mcq-opt.wrong {
    border-color: rgba(248,81,73,0.5);
    background: rgba(248,81,73,0.08);
    color: #f8a39c;
}

    .mcq-opt.wrong .mcq-key {
        background: #f85149;
        color: #2a0c0a;
    }

/* Live scores (in game) + standings (end) */
.mcq-players, .mcq-standings {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.mcq-player {
    display: grid;
    grid-template-columns: 24px 1fr 54px 38px;
    align-items: center;
    gap: 9px;
    font-size: 11px;
}

.mcq-standings .mcq-player {
    grid-template-columns: 22px 24px 1fr 40px;
}

.mcq-place {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 14px;
    color: #6b7593;
    text-align: center;
}

.mcq-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 8px;
    font-weight: 700;
    background: rgba(255,255,255,0.06);
    color: #9aa3bb;
    letter-spacing: 0.02em;
}

.mcq-player.is-you .mcq-av {
    background: linear-gradient(135deg, rgba(80,230,195,0.32), rgba(99,130,255,0.28));
    color: #cfeee2;
    border: 1px solid rgba(80,230,195,0.3);
}

.mcq-pname {
    color: #9aa3bb;
}

.mcq-player.is-you .mcq-pname {
    color: #e8ecf5;
    font-weight: 600;
}

.mcq-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}

    .mcq-bar i {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, #6382ff, #4a5fd0);
        transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
    }

.mcq-player.is-you .mcq-bar i {
    background: linear-gradient(90deg, #50e6c3, #38b89c);
}

.mcq-score {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 15px;
    color: #e8ecf5;
    text-align: right;
}

/* Result + ELO breakdown */
.mcq-result {
    font-size: 13px;
    line-height: 1.5;
    color: #b8c0d4;
}

    .mcq-result b {
        color: #f0f3fa;
    }

.mcq-elo {
    background: rgba(99,130,255,0.06);
    border: 1px solid rgba(99,130,255,0.2);
    border-radius: 10px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mcq-elo-head {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8da0ff;
    font-weight: 700;
}

.mcq-elo-rating {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: #9aa3bb;
}

    .mcq-elo-rating b {
        font-family: var(--font-mono);
        font-size: 14px;
        color: #f0f3fa;
        font-weight: 600;
    }

    .mcq-elo-rating .up, .mcq-elo-row b.up {
        color: #50e6c3;
        font-weight: 700;
    }

    .mcq-elo-rating .down, .mcq-elo-row b.down {
        color: #f8a39c;
        font-weight: 700;
    }

.mcq-elo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: #9aa3bb;
}

.mcq-elo-note {
    font-size: 10.5px;
    line-height: 1.5;
    color: #6b7593;
    margin-top: 2px;
}

/* Action bar (feedback + next / play again) */
.mcq-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
}

.mcq-feedback {
    font-size: 11.5px;
    font-weight: 600;
}

    .mcq-feedback.is-ok {
        color: #50e6c3;
    }

    .mcq-feedback.is-no {
        color: #f8a39c;
    }

.mcq-next {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #060912;
    background: #f0f3fa;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}

    .mcq-next:hover {
        background: #fff;
        transform: translateY(-1px);
    }

    .mcq-next:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(80,230,195,0.5);
    }

.mcq-rank {
    font-size: 10.5px;
    color: #6b7593;
    font-family: var(--font-mono);
}

.gaming-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .gaming-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 18px;
        line-height: 1.5;
        color: #9aa3bb;
    }

        .gaming-list li::before {
            content: '';
            flex-shrink: 0;
            margin-top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #50e6c3;
            box-shadow: 0 0 6px rgba(80,230,195,0.4);
        }

@media (max-width: 900px) {
    .gaming-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- METRICS ---- */
.metrics {
    padding: 20px 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.metric-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    transition: all 0.25s;
}

    .metric-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-2px);
    }

.metric-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 56px;
    color: #50e6c3;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 4px;
}

.metric-unit {
    font-size: 12px;
    color: #6b7593;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.metric-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #f0f3fa;
    margin-bottom: 12px;
}

.metric-card ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-card li {
    font-size: 12px;
    color: #9aa3bb;
    line-height: 1.5;
}

/* Stagger metric cards */
.reveal .metric-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s, transform 0.6s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .metric-card {
    opacity: 1;
    transform: translateY(0);
}

    .reveal.visible .metric-card:nth-child(1) {
        transition-delay: 0.05s;
    }

    .reveal.visible .metric-card:nth-child(2) {
        transition-delay: 0.15s;
    }

    .reveal.visible .metric-card:nth-child(3) {
        transition-delay: 0.25s;
    }

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- SUBJECTS ---- */
.subjects {
    padding: 20px 0;
}

.subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.subj-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.2s;
}

    .subj-card:hover {
        border-color: rgba(80,230,195,0.2);
        transform: translateY(-2px);
    }

    .subj-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 240px;
        height: 120px;
        background: radial-gradient(ellipse at top right, rgba(80,230,195,0.08), transparent 70%);
        pointer-events: none;
    }

    .subj-card h4 {
        font-size: 16px;
        font-weight: 400;
        color: #f0f3fa;
        margin-bottom: 10px;
    }

    .subj-card li {
        font-size: 14px;
        color: #9aa3bb;
        line-height: 1.8;
    }

/* Stagger subject cards */
.reveal .subj-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible .subj-card {
    opacity: 1;
    transform: translateY(0);
}

    .reveal.visible .subj-card:nth-child(1) {
        transition-delay: 0.04s;
    }

    .reveal.visible .subj-card:nth-child(2) {
        transition-delay: 0.10s;
    }

    .reveal.visible .subj-card:nth-child(3) {
        transition-delay: 0.16s;
    }

    .reveal.visible .subj-card:nth-child(4) {
        transition-delay: 0.22s;
    }

    .reveal.visible .subj-card:nth-child(5) {
        transition-delay: 0.28s;
    }

    .reveal.visible .subj-card:nth-child(6) {
        transition-delay: 0.34s;
    }

@media (max-width: 768px) {
    .subj-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .subj-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- SUBJECT FINDER (live filter over the subjects grid) ---- */
.subj-search {
    margin-bottom: 24px;
}

    .subj-search input {
        width: 100%;
        max-width: 440px;
        background: rgba(0,0,0,0.25);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        padding: 12px 16px;
        color: #e8ecf5;
        font-family: inherit;
        font-size: 14px;
        transition: border-color 0.15s, background 0.15s;
    }

        .subj-search input::placeholder {
            color: #6b7593;
        }

        .subj-search input:focus {
            outline: none;
            border-color: rgba(80,230,195,0.4);
            background: rgba(0,0,0,0.35);
        }

.subj-search-empty {
    margin-top: 14px;
    font-size: 14px;
    color: #9aa3bb;
}

    .subj-search-empty a {
        color: #50e6c3;
        border-bottom: 1px solid rgba(80,230,195,0.4);
    }

        .subj-search-empty a:hover {
            color: #88f0d8;
        }

/* ---- FREE ACCESS ---- */
.free-access {
    padding: 20px 0;
}

.free-card {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.25s;
}

    .free-card:hover {
        border-color: rgba(80,230,195,0.25);
    }

.free-card-left {
    padding: 40px 36px;
    background: radial-gradient(ellipse 300px 250px at 30% 70%, rgba(80,230,195,0.08), transparent 70%), rgba(255,255,255,0.015);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
}

.free-card-brand {
    font-size: 20px;
    font-weight: 700;
    color: #f0f3fa;
    margin-bottom: 4px;
}

.free-card-tagline {
    font-size: 14px;
    color: #9aa3bb;
    margin-bottom: 6px;
}

.free-card-full {
    font-size: 15px;
    font-weight: 600;
    color: #50e6c3;
    margin-bottom: auto;
}

.free-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(80,230,195,0.4);
    display: grid;
    place-items: center;
    margin: 32px auto 0;
    position: relative;
    animation: ringPulse 4s ease-in-out infinite;
}

    .free-ring::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px solid rgba(80,230,195,0.12);
    }

.free-ring-label {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 32px;
    color: #50e6c3;
    font-weight: 400;
}

.free-card-right {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .free-card-right h3 {
        font-size: 22px;
        font-weight: 400;
        color: #f0f3fa;
        margin-bottom: 16px;
    }

        .free-card-right h3::after {
            content: '';
            display: block;
            width: 48px;
            height: 1px;
            background: rgba(255,255,255,0.12);
            margin-top: 16px;
        }

    .free-card-right p {
        font-size: 16px;
        line-height: 1.65;
        color: #9aa3bb;
        margin-bottom: 28px;
    }

.free-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.free-cta-link {
    font-size: 16px;
    font-weight: 500;
    color: #e8ecf5;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}

    .free-cta-link:hover {
        color: #fff;
        border-color: #fff;
    }

@media (max-width: 768px) {
    .free-card {
        grid-template-columns: 1fr;
    }

    .free-card-left {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .free-card-right {
        padding: 32px 28px;
    }
}

/* ---- FOOTER ---- */
.footer {
    padding: 48px 0 32px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
/*.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}*/
.footer-links {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #6b7593;
    flex-wrap: wrap;
}

    .footer-links a:hover {
        color: #9aa3bb;
    }

.footer-copy {
    font-size: 12px;
    color: #6b7593;
}



.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
}

.footer-col h4 {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7593;
}

.footer-col a {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    color: #9aa3bb;
    text-decoration: none;
}

    .footer-col a:hover {
        color: #f0f3fa;
    }

.footer-bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .footer-legal a {
        color: #9aa3bb;
        text-decoration: none;
    }

        .footer-legal a:hover {
            color: #f0f3fa;
        }

.footer-copy {
    margin-top: 10px;
    font-size: 13px;
    color: #9aa3bb;
}

.footer-trademark {
    margin: 12px auto 0;
    max-width: 720px;
    font-size: 11px;
    line-height: 1.6;
    color: #6b7593;
}

@media (max-width: 700px) {
    .footer-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 8px #50e6c3;
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 14px #50e6c3, 0 0 22px rgba(80,230,195,0.5);
        transform: scale(1.2);
    }
}

@keyframes glowDrift {
    from {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }

    to {
        background-position: 100% 100%;
        filter: hue-rotate(8deg);
    }
}

@keyframes glowShift {
    from {
        opacity: 0.3;
        transform: translateX(-8px);
    }

    to {
        opacity: 0.5;
        transform: translateX(8px);
    }
}

@keyframes barFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes floatBob {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes ringPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(80,230,195,0);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(80,230,195,0.06);
    }
}

@keyframes ringSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Scroll-triggered fade-in */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Hero entry stagger */
.hero .eyebrow {
    animation: riseIn 0.6s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}

.hero h1 {
    animation: riseIn 0.7s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}

.hero-lede {
    animation: riseIn 0.6s 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

.hero .ctas {
    animation: riseIn 0.55s 0.58s cubic-bezier(0.16,1,0.3,1) both;
}

.hero .trust-row {
    animation: riseIn 0.55s 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

.peek-card {
    animation: peekIn 1s 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.chip-1 {
    animation: chipIn 0.7s 1.1s cubic-bezier(0.16,1,0.3,1) both, floatBob 4s ease-in-out 1.8s infinite;
}

.chip-2 {
    animation: chipIn 0.7s 1.3s cubic-bezier(0.16,1,0.3,1) both, floatBob 4s ease-in-out 2s infinite;
}

.logo, .nav-links, .nav-right {
    animation: riseIn 0.5s 0.1s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes peekIn {
    from {
        opacity: 0;
        transform: translateY(28px) rotateY(-12deg) rotateX(6deg) scale(.97);
    }

    to {
        opacity: 1;
        transform: rotateY(-8deg) rotateX(4deg);
    }
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   SUB-PAGE COMPONENTS
   ============================================================ */

/* ---- SUB-PAGE HERO ---- */
.sub-hero {
    padding: 130px 0 50px;
    position: relative;
    z-index: 2;
    text-align: center;
}

    .sub-hero .eyebrow {
        margin: 0 auto 24px;
    }

    .sub-hero h1 {
        font-weight: 600;
        font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.75rem);
        line-height: 1.06;
        letter-spacing: -0.035em;
        color: #f0f3fa;
        max-width: 880px;
        margin: 0 auto 20px;
    }

        .sub-hero h1 em {
            font-family: var(--font-accent);
            font-style: italic;
            font-weight: 400;
            color: #50e6c3;
            letter-spacing: -0.02em;
        }

    .sub-hero p {
        font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
        line-height: 1.6;
        color: #9aa3bb;
        max-width: 640px;
        margin: 0 auto 32px;
    }

    .sub-hero .ctas {
        justify-content: center;
    }

@media (max-width: 768px) {
    .sub-hero {
        padding: 110px 0 50px;
    }
}

/* ---- DETAIL CARD (Solutions feature deep-dives) ---- */
.detail-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.25s;
}

    .detail-card:hover {
        border-color: rgba(80,230,195,0.25);
    }

.detail-card-body {
    padding: 44px 42px;
}

.detail-card-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 14px;
    color: #50e6c3;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.detail-card h3 {
    font-size: 26px;
    font-weight: 600;
    color: #f0f3fa;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 14px;
}

    .detail-card h3 em {
        font-family: var(--font-accent);
        font-style: italic;
        font-weight: 400;
        color: #50e6c3;
    }

.detail-card p {
    font-size: 14px;
    line-height: 1.75;
    color: #9aa3bb;
}

.detail-card-meta {
    padding: 40px 38px;
    background: radial-gradient(ellipse 280px 200px at 80% 30%, rgba(80,230,195,0.06), transparent 70%), rgba(255,255,255,0.015);
    border-left: 1px solid rgba(255,255,255,0.06);
}

    .detail-card-meta h4 {
        font-size: 11px;
        color: #6b7593;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 22px;
        font-weight: 600;
    }

    .detail-card-meta dl {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .detail-card-meta dt {
        font-family: var(--font-accent);
        font-style: italic;
        color: #50e6c3;
        font-size: 24px;
        line-height: 1;
        font-weight: 400;
    }

    .detail-card-meta dd {
        font-size: 13px;
        color: #9aa3bb;
        line-height: 1.5;
        margin-top: 6px;
    }

@media (max-width: 800px) {
    .detail-card {
        grid-template-columns: 1fr;
    }

    .detail-card-meta {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .detail-card-body, .detail-card-meta {
        padding: 32px 28px;
    }
}
/* Scannable body: a short lede + emerald-dot bullets, used in place of a
   dense prose paragraph inside .detail-card-body. Reuses the same bullet
   visual language as .gaming-list / .path-card for consistency. */
.detail-lede {
    font-size: 14.5px;
    line-height: 1.7;
    color: #b8c0d4;
    margin-bottom: 18px;
}

.detail-points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .detail-points li {
        font-size: 13.5px;
        line-height: 1.55;
        color: #9aa3bb;
        padding-left: 18px;
        position: relative;
    }

        .detail-points li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #50e6c3;
            box-shadow: 0 0 6px rgba(80,230,195,0.4);
        }

        .detail-points li b {
            color: #e8ecf5;
            font-weight: 600;
        }

/* ---- IN-PAGE SECTION RAIL (floating dot navigation) ----
   Built entirely by section-rail.js from every element carrying a
   data-rail="Label" attribute, in document order. Pages opt in by adding
   id + data-rail to their sections - there is no per-page dot markup to
   maintain. A fixed rail on the right edge tracks scroll position
   (scroll-spy) and smooth-scrolls to a section on click. Labels reveal on
   hover/focus; the active section is shown by the filled emerald dot.
   Desktop affordance only - hidden where it would overlap centered
   content, and on phones (which use the hamburger menu instead). */
.dot-rail {
    position: fixed;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}
    /* Each row is a clickable pill: dot on the gutter side, label always
   visible to its right. Pointer + hover background signal it's actionable. */
    .dot-rail a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 7px 12px 7px 5px;
        cursor: pointer;
        position: relative;
        border-radius: 999px;
        transition: background 0.2s ease;
    }

        .dot-rail a:hover {
            background: rgba(255,255,255,0.04);
        }

        .dot-rail a:focus-visible {
            outline: none;
            background: rgba(80,230,195,0.08);
        }

.dot-rail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.16);
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.dot-rail-label {
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #9aa3bb;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.dot-rail a:hover .dot-rail-dot,
.dot-rail a:focus-visible .dot-rail-dot {
    background: rgba(80,230,195,0.55);
    border-color: rgba(80,230,195,0.5);
}

.dot-rail a:hover .dot-rail-label,
.dot-rail a:focus-visible .dot-rail-label {
    color: #f0f3fa;
}

.dot-rail a.is-active .dot-rail-dot {
    background: #50e6c3;
    border-color: #50e6c3;
    box-shadow: 0 0 10px rgba(80,230,195,0.6);
    transform: scale(1.3);
}

.dot-rail a.is-active .dot-rail-label {
    color: #cfeee2;
    font-weight: 600;
}
/* Anchor target offset so a clicked section clears the fixed top nav. */
[data-rail] {
    scroll-margin-top: 88px;
}
/* Needs gutter room beside the centered content - show only where the
   labelled rail won't overlap the page body. */
@media (max-width: 1224px) {
    .dot-rail {
        display: none;
    }
}

@media print {
    .dot-rail {
        display: none;
    }
}

/* ---- FAQ ---- */
.faq-section {
    padding: 100px 0;
}

.faq-group {
    display: none;
    margin-bottom: 0;
}

    .faq-group.is-active {
        display: block;
        animation: faq-group-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

@keyframes faq-group-in {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Segmented control - audience filter above the FAQ list. The active state
   is rendered as a separate sliding pill (.faq-toggle-indicator) positioned
   under the active button by JS - giving the active selection a physical
   glide between options instead of a hard color flip. */
.faq-toggle {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}

.faq-toggle-indicator {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 0;
    background: rgba(80,230,195,0.12);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(80,230,195,0.3);
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.faq-toggle-btn {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    color: #9aa3bb;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.25s ease;
}

    .faq-toggle-btn:hover {
        color: #f0f3fa;
    }

    .faq-toggle-btn.is-active {
        color: #cfeee2;
    }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}

    .faq-item[open] {
        border-color: rgba(80,230,195,0.25);
        background: rgba(80,230,195,0.02);
    }

.faq-q {
    cursor: pointer;
    padding: 18px 22px;
    font-size: 14.5px;
    font-weight: 600;
    color: #f0f3fa;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

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

    .faq-q::after {
        content: '+';
        font-family: var(--font-body);
        font-weight: 300;
        color: #50e6c3;
        font-size: 22px;
        line-height: 1;
        flex-shrink: 0;
        /* Close: gentler/slower rotate-back to + */
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

.faq-item[open] .faq-q::after {
    transform: rotate(45deg);
    /* Open: snappy rotate to x */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Collapse / expand animation.

   We do NOT rely on the browser's native <details> show/hide for the
   animation: in Chrome 131+ the content sits in a ::details-content
   pseudo-element that resists author CSS height transitions, and in
   earlier browsers the children are hidden via UA mechanisms that
   don't transition cleanly either.

   Instead, .faq-a is forced into layout at height: 0 with !important
   (overriding any UA display:none). A JS handler on .faq-q manages
   the [open] attribute and animates `height` between 0 and the
   measured scrollHeight. CSS declares only the transition specs and
   final visual style; the live height values are inline.

   Open and close use different transitions because each transition
   is read from the *destination* state. Close is intentionally slower
   with a softer ease-in-out curve so the collapse decelerates rather
   than snapping shut. */
.faq-a {
    display: block !important;
    height: 0;
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open] .faq-a {
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-a > * {
    padding: 0 22px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #9aa3bb;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open] .faq-a > * {
    opacity: 1;
    transition: opacity 0.25s ease 0.1s;
}

.faq-a p {
    margin-bottom: 10px;
}

    .faq-a p:last-child {
        margin-bottom: 0;
    }

/* ---- COMPARISON TABLE ---- */
.compare-wrap {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    font-size: 14px;
}

    .compare-table th, .compare-table td {
        padding: 16px 22px;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        vertical-align: top;
    }

    .compare-table thead th {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #cfeee2;
        font-weight: 600;
        background: rgba(80,230,195,0.05);
    }

        .compare-table thead th:first-child {
            color: #6b7593;
        }

    .compare-table tbody tr:last-child td,
    .compare-table tbody tr:last-child th {
        border-bottom: none;
    }

    .compare-table tbody th {
        font-weight: 500;
        color: #e8ecf5;
        font-size: 13.5px;
    }

    .compare-table td {
        color: #9aa3bb;
        font-size: 13px;
    }

    .compare-table .yes {
        color: #50e6c3;
        font-weight: 600;
    }

        .compare-table .yes small {
            display: block;
            color: #9aa3bb;
            font-weight: 400;
            font-size: 11px;
            margin-top: 2px;
        }

    .compare-table .partial {
        color: #ffb84d;
        font-weight: 600;
    }

        .compare-table .partial small {
            display: block;
            color: #9aa3bb;
            font-weight: 400;
            font-size: 11px;
            margin-top: 2px;
        }

    .compare-table .no {
        color: #6b7593;
    }

        .compare-table .no small {
            display: block;
            color: #4a5269;
            font-weight: 400;
            font-size: 11px;
            margin-top: 2px;
        }
    /* Highlight the iBMarker column so the table reads as positioning, not just data. */
    .compare-table thead th.compare-self,
    .compare-table tbody td.compare-self {
        background: rgba(80,230,195,0.045);
        border-left: 1px solid rgba(80,230,195,0.18);
        border-right: 1px solid rgba(80,230,195,0.18);
    }

    .compare-table thead th.compare-self {
        color: #cfeee2;
    }

.compare-foot {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7593;
    max-width: 760px;
}

@media (max-width: 600px) {
    .compare-table {
        font-size: 12.5px;
    }

        .compare-table th, .compare-table td {
            padding: 12px 14px;
        }
}

/* ---- COMPARISON TABLE: view filter + row hover ---- */
.compare-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.compare-controls-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 600;
    margin-right: 4px;
}

.compare-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    color: #9aa3bb;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .compare-btn:hover {
        color: #f0f3fa;
        border-color: rgba(255,255,255,0.2);
    }

    .compare-btn.is-active {
        color: #cfeee2;
        background: rgba(80,230,195,0.12);
        border-color: rgba(80,230,195,0.35);
    }
/* Column 1 = Capability, 2 = iBMarker (always shown); 3/4/5 = alternatives.
   Each view hides the two alternative columns it isn't comparing against. */
.compare-table.view-generic :is(th, td):nth-child(4),
.compare-table.view-generic :is(th, td):nth-child(5),
.compare-table.view-legacy :is(th, td):nth-child(3),
.compare-table.view-legacy :is(th, td):nth-child(5),
.compare-table.view-manual :is(th, td):nth-child(3),
.compare-table.view-manual :is(th, td):nth-child(4) {
    display: none;
}

.compare-table tbody tr:hover th[scope="row"],
.compare-table tbody tr:hover td {
    background: rgba(255,255,255,0.035);
}

    .compare-table tbody tr:hover td.compare-self {
        background: rgba(80,230,195,0.085);
    }

/* ---- PRICING ---- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.price-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s;
    position: relative;
}

    .price-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-3px);
    }

    .price-card.featured {
        border-color: rgba(80,230,195,0.45);
        background: radial-gradient(ellipse 300px 200px at 50% 0%, rgba(80,230,195,0.1), transparent 70%), rgba(255,255,255,0.03);
    }

.price-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(80,230,195,0.18);
    border: 1px solid rgba(80,230,195,0.4);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    color: #cfeee2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.price-name {
    font-size: 12px;
    font-weight: 700;
    color: #50e6c3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.price-tagline {
    font-size: 14px;
    color: #9aa3bb;
    margin-bottom: 22px;
    min-height: 38px;
}

.price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

    .price-amount b {
        font-family: var(--font-accent);
        font-style: italic;
        font-size: 44px;
        color: #f0f3fa;
        line-height: 1;
        font-weight: 400;
    }

    .price-amount span {
        font-size: 12px;
        color: #6b7593;
    }

.price-alt {
    font-size: 12px;
    color: #6b7593;
    margin-bottom: 22px;
}

.price-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    flex-grow: 1;
}

    .price-features li {
        font-size: 12.5px;
        line-height: 1.5;
        color: #b8c0d4;
        padding-left: 18px;
        position: relative;
    }

        .price-features li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #50e6c3;
            box-shadow: 0 0 6px rgba(80,230,195,0.35);
        }

        .price-features li.muted {
            color: #6b7593;
        }

            .price-features li.muted::before {
                background: #3a4153;
                box-shadow: none;
            }

.price-meta {
    font-size: 11px;
    color: #6b7593;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 14px;
    line-height: 1.6;
}

.price-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    color: #e8ecf5;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}

.price-card.featured .price-cta {
    background: #f0f3fa;
    color: #060912;
    border-color: #f0f3fa;
}

.price-cta:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
}

.price-card.featured .price-cta:hover {
    background: #fff;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- PROMO BANNER ---- */
.promo-banner {
    background: radial-gradient(ellipse 600px 300px at 30% 50%, rgba(80,230,195,0.1), transparent 70%), rgba(255,255,255,0.02);
    border: 1px solid rgba(80,230,195,0.25);
    border-radius: 16px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.promo-banner-text h3 {
    font-size: 19px;
    font-weight: 600;
    color: #f0f3fa;
    margin-bottom: 6px;
}

.promo-banner-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #9aa3bb;
    max-width: 620px;
}

.promo-tag {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 38px;
    color: #50e6c3;
    line-height: 1;
}

/* ---- OFFICE / CONTACT CARDS ---- */
.office-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.office-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 32px 28px;
    transition: all 0.25s;
}

    .office-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-2px);
    }

.office-flag {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #50e6c3;
    font-weight: 700;
    margin-bottom: 8px;
}

.office-name {
    font-size: 22px;
    font-weight: 600;
    color: #f0f3fa;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.office-card address {
    font-size: 13px;
    line-height: 1.7;
    color: #9aa3bb;
    font-style: normal;
    margin-bottom: 18px;
}

.office-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .office-meta a, .office-meta span {
        font-size: 12.5px;
        color: #b8c0d4;
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
    }

        .office-meta a:hover {
            color: #50e6c3;
        }

    .office-meta b {
        color: #6b7593;
        font-weight: 600;
        min-width: 50px;
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

@media (max-width: 900px) {
    .office-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- FORM ---- */
.contact-form {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

    .contact-form .full {
        grid-column: 1 / -1;
    }

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field label {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #6b7593;
        font-weight: 600;
    }

    .field input, .field select, .field textarea {
        background: rgba(0,0,0,0.25);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
        padding: 12px 14px;
        color: #e8ecf5;
        font-family: inherit;
        font-size: 14px;
        transition: border-color 0.15s, background 0.15s;
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            outline: none;
            border-color: rgba(80,230,195,0.4);
            background: rgba(0,0,0,0.35);
        }

    .field textarea {
        min-height: 120px;
        resize: vertical;
    }

.contact-form button {
    justify-self: start;
    cursor: pointer;
}

    .contact-form button.is-loading {
        opacity: 0.7;
        cursor: progress;
    }

/* Inline validation + submission states for the contact form. */
.field-error {
    display: none;
    font-size: 11.5px;
    color: #f8a39c;
}

.field.has-error .field-error {
    display: block;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: rgba(248, 81, 73, 0.6);
    background: rgba(248, 81, 73, 0.06);
}
/* Honeypot: kept in the DOM but off-screen for humans. */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    display: none;
    font-size: 14px;
    line-height: 1.6;
    padding: 14px 18px;
    border-radius: 10px;
}

    .form-status.is-ok {
        color: #cfeee2;
        background: rgba(80, 230, 195, 0.08);
        border: 1px solid rgba(80, 230, 195, 0.3);
    }

    .form-status.is-error {
        color: #f8a39c;
        background: rgba(248, 81, 73, 0.07);
        border: 1px solid rgba(248, 81, 73, 0.35);
    }

@media (max-width: 700px) {
    .contact-form {
        grid-template-columns: 1fr;
        padding: 28px;
    }
}

/* ---- PARTNER CARDS ---- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.partner-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 32px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

    .partner-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-2px);
    }

    .partner-card::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 240px;
        height: 120px;
        background: radial-gradient(ellipse at top right, rgba(80,230,195,0.08), transparent 70%);
        pointer-events: none;
    }

.partner-name {
    font-size: 22px;
    font-weight: 600;
    color: #f0f3fa;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.partner-url {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 14px;
    color: #50e6c3;
    margin-bottom: 18px;
}

    .partner-url a:hover {
        text-decoration: underline;
    }

.partner-card h4 {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 600;
    margin: 18px 0 10px;
}

.partner-card ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.partner-card li {
    font-size: 13px;
    line-height: 1.6;
    color: #9aa3bb;
    padding-left: 14px;
    position: relative;
}

    .partner-card li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(80,230,195,0.6);
    }

.partner-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #9aa3bb;
}

@media (max-width: 800px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- LEGAL ---- */
.legal {
    padding: 60px 0 100px;
}

.legal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.legal-toc-title {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 700;
    margin-bottom: 10px;
}

.legal-toc a {
    font-size: 13px;
    color: #9aa3bb;
    padding: 4px 0;
    transition: color 0.15s;
}

    .legal-toc a:hover {
        color: #50e6c3;
    }

.legal-body {
    font-size: 15px;
    line-height: 1.75;
    color: #9aa3bb;
}

    .legal-body section {
        margin-bottom: 48px;
        scroll-margin-top: 80px;
    }

    .legal-body h2 {
        font-size: 24px;
        font-weight: 600;
        color: #f0f3fa;
        letter-spacing: -0.015em;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

        .legal-body h2 em {
            font-family: var(--font-accent);
            font-style: italic;
            font-weight: 400;
            color: #50e6c3;
        }

    .legal-body h3 {
        font-size: 15px;
        font-weight: 600;
        color: #e8ecf5;
        margin: 22px 0 8px;
    }

    .legal-body p {
        margin-bottom: 14px;
    }

    .legal-body ul {
        padding-left: 18px;
        margin-bottom: 14px;
    }

    .legal-body li {
        font-size: 14px;
        line-height: 1.7;
        color: #9aa3bb;
        list-style: disc;
        margin-bottom: 6px;
    }

    .legal-body strong {
        color: #e8ecf5;
    }

    .legal-body a {
        color: #50e6c3;
    }

        .legal-body a:hover {
            text-decoration: underline;
        }

@media (max-width: 900px) {
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-toc {
        position: static;
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 32px;
    }

    .legal-toc-title {
        width: 100%;
    }

    .legal-toc a {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        padding: 6px 12px;
        border-radius: 999px;
    }
}

/* ---- PRINCIPLES ---- */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.principle-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.25s;
    position: relative;
}

    .principle-card:hover {
        border-color: rgba(80,230,195,0.25);
        transform: translateY(-2px);
    }

.principle-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 28px;
    color: #50e6c3;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 16px;
}

.principle-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #f0f3fa;
    margin-bottom: 8px;
}

.principle-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #9aa3bb;
}

@media (max-width: 768px) {
    .principle-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .principle-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- ELIGIBILITY CHIPS ---- */
.eligibility {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 40px;
    max-width: 760px;
    justify-content: center;
}

    .eligibility span {
        background: rgba(80,230,195,0.06);
        border: 1px solid rgba(80,230,195,0.2);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 12px;
        color: #cfeee2;
    }

/* ---- PATHWAY (registration) ---- */
.path-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.path-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.25s;
}

    .path-card:hover {
        border-color: rgba(80,230,195,0.3);
        transform: translateY(-3px);
    }

.path-num {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 14px;
    color: #50e6c3;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.path-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: #f0f3fa;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.path-card .path-target {
    font-size: 13px;
    color: #9aa3bb;
    margin-bottom: 24px;
}


.path-card ul {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

    .path-card ul h-short {
        height: 100px;
    }

.path-card li {
    font-size: 13px;
    line-height: 1.55;
    color: #b8c0d4;
    padding-left: 16px;
    position: relative;
}

    .path-card li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 7px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #50e6c3;
        box-shadow: 0 0 6px rgba(80,230,195,0.4);
    }

.path-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f3fa;
    color: #060912;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
    transition: all 0.15s;
}

    .path-cta:hover {
        background: #fff;
        transform: translateY(-1px);
    }

.path-border {
    border-color: rgba(80,230,195,0.3);
}

    .path-border:hover {
        border: 1px solid rgba(255,255,255,0.08);
        transform: translateY(-3px);
    }

@media (max-width: 900px) {
    .path-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- REFS / DOC LIST ---- */
.ref-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ref-item {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    transition: border-color 0.2s;
}

    .ref-item:hover {
        border-color: rgba(80,230,195,0.2);
    }

.ref-item-text {
    font-size: 13px;
    line-height: 1.6;
    color: #9aa3bb;
    flex: 1;
    min-width: 280px;
}

    .ref-item-text b {
        color: #e8ecf5;
        font-weight: 600;
    }

.ref-item a {
    font-size: 12px;
    color: #50e6c3;
    font-weight: 600;
    border: 1px solid rgba(80,230,195,0.3);
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.15s;
    white-space: nowrap;
}

    .ref-item a:hover {
        background: rgba(80,230,195,0.08);
    }

/* ---- DISCLAIMER FOOTER NOTE ---- */
.footer-disclaimer {
    font-size: 11px;
    line-height: 1.6;
    color: #6b7593;
    max-width: 800px;
    margin: 14px auto 0;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ============================================================
   CROSS-PAGE VIEW TRANSITIONS
   Supported: Chrome/Edge 111+, Safari 18.2+, Firefox 131+.
   In unsupported browsers this whole block is silently ignored,
   pages simply hard-cut.

   Effect: navigating between marketing pages crossfades the
   main content while the nav, footer, and logo stay anchored -
   so the page feels like one continuous surface rather than a
   stack of separate documents.
   ============================================================ */

@view-transition {
    navigation: auto;
}

/* Root crossfade - content area. Slightly longer ease so the
   eye registers continuity, not a cut. Outgoing snapshot uses
   a fast fade-out, incoming uses a softer rise-in so the new
   page asserts itself rather than blinking in. */
::view-transition-old(root) {
    animation: vt-fade-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: vt-rise-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vt-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Persistent shell - the nav, footer, and logo are given their
   own view-transition-name so they get their own snapshot pair.
   When old and new share a name AND the same position, the
   browser keeps them visually still while the rest crossfades.
   This is the same technique the credential pages use for
   .form-card / .wordmark. */
.nav {
    view-transition-name: site-nav;
}

.footer {
    view-transition-name: site-footer;
}

.nav .logo {
    view-transition-name: site-logo;
}

/* Each named element gets a gentle, equal-length crossfade so
   any tiny content differences (e.g. active link colour) blend
   instead of flickering. */
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(site-logo),
::view-transition-new(site-logo) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect prefers-reduced-motion - fall back to instant cuts. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(site-nav),
    ::view-transition-new(site-nav),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer),
    ::view-transition-old(site-logo),
    ::view-transition-new(site-logo) {
        animation-duration: 0.001ms !important;
    }
}

/* ============================================================
   MOBILE-FIRST OVERRIDES
   ============================================================
   The component sections above are desktop-default with a few
   max-width overrides. This block consolidates the broader
   mobile polish - reflowed hero, denser typography, stacked
   CTAs, the peek card hidden on phones, touch-only affordances,
   and tighter section padding. Kept in one place so future
   small-screen tuning has one obvious home.
   ============================================================ */

/* Tablet and below: trim hero / section padding so the eye
   doesn't have to scroll past so much empty vertical space. */
@media (max-width: 768px) {
    .hero {
        padding: 100px 0 60px;
    }

    .sub-hero {
        padding: 92px 0 50px;
    }

    .pillars,
    .ecosystem,
    .features,
    .gaming,
    .metrics,
    .subjects,
    .free-access,
    .faq-section {
        padding: 70px 0;
    }

    .section-sub {
        margin-bottom: 36px;
    }
}

/* Phone portrait: hero stacks, peek card drops out, type scales
   down to keep above-the-fold information dense. The peek card
   is decorative and burns vertical space on phones - the CTA is
   the message that needs to reach the viewport. */
@media (max-width: 700px) {
    .hero-lede {
        margin-bottom: 28px;
    }

    .hero-grid {
        gap: 24px;
    }

    .peek {
        display: none;
    }

    .eyebrow {
        white-space: normal;
        line-height: 1.5;
        padding: 8px 14px 8px 8px;
    }

    .trust-row {
        margin-top: 32px;
        padding-top: 20px;
    }
}

/* Phone portrait: stack CTAs vertically and stretch full-width
   so the primary action is always thumb-reachable, not a small
   pill in the corner. */
@media (max-width: 520px) {
    .ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

        .ctas .btn-primary,
        .ctas .btn-secondary {
            justify-content: center;
            width: 100%;
        }

    .container {
        padding: 0 18px;
    }
}

/* Small phones (320-380px): tighten section padding. Type is handled
   by the clamp() floors, so no font-size hard-caps are needed here. */
@media (max-width: 380px) {
    .hero {
        padding: 90px 0 50px;
    }

    .sub-hero {
        padding: 84px 0 40px;
    }

    .container {
        padding: 0 16px;
    }
}

/* Pillar grid on phones - the cards are the page's nav hub on
   mobile, so give them more breathing room, bigger type, and
   a bigger touch target. */
@media (max-width: 560px) {
    .pillar-grid {
        gap: 10px;
    }

    .pillar-card {
        padding: 26px 22px;
        padding-right: 60px;
    }

        .pillar-card h3 {
            font-size: 17px;
            margin-bottom: 8px;
        }

        .pillar-card p {
            font-size: 13px;
        }

    .pillar-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 16px;
    }

    .pillar-arrow {
        top: 22px;
        right: 20px;
        width: 30px;
        height: 30px;
    }
}

/* Touch devices (no hover): hover-only affordances need to be
   visible by default since the user can't trigger the hover
   state. The pillar card arrow is the main one - without this,
   the cards look like static blocks on a phone. */
@media (hover: none) {
    .pillar-arrow {
        opacity: 1;
        background: rgba(80,230,195,0.12);
        border-color: rgba(80,230,195,0.32);
    }

    .pillar-card:hover {
        /* Suppress the desktop translate-up on touch - it triggers
       on tap and causes a flicker on iOS. */
        transform: none;
    }
}

/* Detail cards (sub-page deep-dives) - shrink padding so on a
   375px viewport the body copy isn't suffocating against the
   card edge. The 2-column layout already collapses at 800px
   from the component-level rule. */
@media (max-width: 700px) {
    .detail-card-body {
        padding: 28px 24px;
    }

    .detail-card-meta {
        padding: 24px 24px;
    }

    .detail-card h3 {
        font-size: 22px;
        line-height: 1.25;
    }

    .detail-card p {
        font-size: 13.5px;
    }
}

/* Free-access CTA card on phones - the brand block + body grid
   already stacks at 768px; tighten internal padding on small
   phones so the card doesn't dominate the viewport. */
@media (max-width: 480px) {
    .free-card-left {
        padding: 32px 24px;
    }

    .free-card-right {
        padding: 28px 24px;
    }

    .free-ring {
        width: 96px;
        height: 96px;
        margin-top: 24px;
    }

    .free-ring-label {
        font-size: 26px;
    }

    .free-ctas {
        gap: 12px;
    }
}

/* Footer on phones - links wrap naturally, but the logo +
   links + copy row reads better stacked at narrow widths. */
@media (max-width: 560px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-links {
        gap: 16px;
        row-gap: 8px;
    }
}

/* Nav on very small phones - the bar's horizontal padding from
   the 768px rule is fine, but the logo image scales down a hair
   so the hamburger has room to breathe. */
@media (max-width: 380px) {
    .logo-full {
        height: 44px;
    }
}

/* ============================================================
   SCROLL EFFECTS (homepage showcase)
   - Directional reveals  : [data-rv] -> .rv-in (reveal.js)
   - Horizontal snap row   : .hscroll  (pillars)  + hscroll.js
   - Pinned horizontal pan : .pin-pan  (features) + pin-pan.js
   - Parallax depth         : .parallax-* (native CSS scroll-driven)
   Every effect degrades to a static, fully-visible layout where
   unsupported, and is neutralised under prefers-reduced-motion.
   ============================================================ */

/* ---- Directional reveals ---- */
[data-rv] {
    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), filter 0.7s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
}

[data-rv="up"] {
    transform: translateY(28px);
}

[data-rv="left"] {
    transform: translateX(-44px);
}

[data-rv="right"] {
    transform: translateX(44px);
}

[data-rv="scale"] {
    transform: scale(0.92);
}

[data-rv="blur"] {
    filter: blur(10px);
}

[data-rv].rv-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---- Horizontal scroll-snap row (pillars) ---- */
.hscroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7593;
    font-weight: 600;
    margin-bottom: 18px;
}

    .hscroll-hint svg {
        color: #50e6c3;
    }

.pillar-grid.hscroll {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    cursor: grab;
    scrollbar-width: thin;
}

    .pillar-grid.hscroll.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

    .pillar-grid.hscroll .pillar-card {
        flex: 0 0 clamp(230px, 26%, 280px);
        scroll-snap-align: start;
    }
/* Auto-scroll ("marquee") variant: continuous drift, so snapping is off and
   the scrollbar is hidden (the row advances itself; hover/drag pauses it). */
.hscroll[data-autoscroll] {
    scroll-snap-type: none;
    scrollbar-width: none;
}

    .hscroll[data-autoscroll]::-webkit-scrollbar {
        display: none;
    }
/* Keep the horizontal row at all widths (overrides the grid breakpoints). */
@media (max-width: 900px) {
    .pillar-grid.hscroll {
        grid-template-columns: none;
    }
}

@media (max-width: 560px) {
    .pillar-grid.hscroll .pillar-card {
        flex-basis: 78%;
    }
}

/* ---- Pinned horizontal pan (features) ----
   Progressive enhancement: the DEFAULT (no JS, mobile, or reduced motion) is
   an ordinary horizontal scroll row that always works. pin-pan.js adds
   .is-pinned only on capable desktops to upgrade it to the sticky pan. */
.pin-pan {
    position: relative;
}

.pin-pan-head {
    margin-bottom: 28px;
}

.pin-pan-sticky {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pin-pan-track {
    display: flex;
    gap: 22px;
    padding: 24px 60px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}

    .pin-pan-track > * {
        flex: 0 0 min(400px, 82vw);
        margin: 0;
        scroll-snap-align: start;
    }

@media (max-width: 768px) {
    .pin-pan-track {
        padding: 16px 24px;
        gap: 16px;
    }
}

/* Enhanced (JS, desktop, motion OK): pin the viewport and drive the pan. */
/*.pin-pan.is-pinned .pin-pan-sticky {
    position: sticky;
    top: 64px;
    width: 80%;
    overflow: hidden;
}

.pin-pan.is-pinned .pin-pan-track {
    overflow: visible;
    scroll-snap-type: none;
}*/

/* ---- Parallax depth (native scroll-driven; static fallback) ---- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .parallax-up {
            animation: rvParallaxUp linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        .parallax-scale {
            animation: rvParallaxScale linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 45%;
        }
    }
}

@keyframes rvParallaxUp {
    from {
        transform: translateY(40px);
    }

    to {
        transform: translateY(-40px);
    }
}

@keyframes rvParallaxScale {
    from {
        transform: scale(0.86);
    }

    to {
        transform: scale(1);
    }
}

/* ============================================================
   UNIVERSITY BADGE EXPLORER (interactive)
   ============================================================ */
.badge-explorer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}

.badge-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.badge-node {
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9aa3bb;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

    .badge-node:hover {
        transform: translateY(-2px);
        border-color: rgba(80,230,195,0.3);
    }

    .badge-node:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(80,230,195,0.4);
    }

.badge-medal {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
    background: rgba(255,255,255,0.06);
    color: #9aa3bb;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.badge-node-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-node.is-active {
    border-color: rgba(80,230,195,0.45);
    background: rgba(80,230,195,0.06);
    color: #e8ecf5;
}

    .badge-node.is-active .badge-medal {
        background: linear-gradient(135deg,#50e6c3,#38b89c);
        color: #07261f;
        border-color: transparent;
        box-shadow: 0 0 14px rgba(80,230,195,0.4);
    }

.badge-detail {
    background: linear-gradient(180deg,#0e1422,#0a0f1d);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.badge-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.badge-detail-medal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 20px;
    background: linear-gradient(135deg,#50e6c3,#38b89c);
    color: #07261f;
    box-shadow: 0 0 18px rgba(80,230,195,0.35);
}

.badge-detail-name {
    font-size: 22px;
    font-weight: 600;
    color: #f0f3fa;
    letter-spacing: -0.01em;
}

.badge-detail-sub {
    font-size: 12px;
    color: #6b7593;
}

.badge-mult {
    margin-left: auto;
    text-align: right;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 26px;
    color: #50e6c3;
    line-height: 1.1;
}

    .badge-mult span {
        display: block;
        font-family: var(--font-body);
        font-style: normal;
        font-size: 10px;
        color: #6b7593;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

.badge-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #9aa3bb;
}

.badge-req {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.badge-req-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #9aa3bb;
}

    .badge-req-label b {
        color: #cfeee2;
        font-family: var(--font-mono);
        font-size: 13px;
    }

.badge-req-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}

    .badge-req-bar i {
        display: block;
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg,#50e6c3,#88f0d8);
        transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
    }

.badge-prestige {
    font-size: 12.5px;
    line-height: 1.55;
    color: #ffd699;
    background: rgba(255,184,77,0.08);
    border: 1px solid rgba(255,184,77,0.25);
    border-radius: 10px;
    padding: 11px 13px;
}

    .badge-prestige b {
        color: #ffe0a3;
    }

@media (max-width: 640px) {
    .badge-track {
        grid-template-columns: repeat(3, 1fr);
    }

    .badge-detail-head {
        flex-wrap: wrap;
    }

    .badge-mult {
        margin-left: 0;
    }
}

/* ---- Interactive ecosystem ring (homepage): role hover cues the ring ---- */
.eco-ring-label {
    transition: color 0.3s ease;
}

.eco-ring.is-active {
    border-color: rgba(80,230,195,0.6);
}

    .eco-ring.is-active .eco-ring-label {
        color: #88f0d8;
    }