/**
 * Home hero.
 *
 * Loaded after newindex.css so it can override the previous hero without editing it.
 * Every background graphic is CSS/SVG rather than an image so it scales, themes, and
 * loops forever without a seam. Motion is transform/opacity only, so it stays on the
 * compositor, and the whole scene stops under prefers-reduced-motion.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */

.qubibyte-home {
    --hero-cyan: #38d6f5;
    --hero-ring-dim: rgba(126, 150, 196, 0.45);
    --hero-violet: #8b7bff;
    --hero-pink: #f472b6;
    --hero-line: rgba(150, 190, 255, 0.55);
    --hero-line-soft: rgba(150, 190, 255, 0.26);
    --hero-panel-bg: linear-gradient(158deg,
            rgba(38, 42, 78, 0.88) 0%,
            rgba(26, 29, 58, 0.92) 46%,
            rgba(17, 19, 40, 0.95) 100%);
    --hero-panel-border: rgba(126, 140, 200, 0.34);
    --hero-panel-glow: 0 24px 70px rgba(10, 14, 38, 0.55), 0 0 0 1px rgba(150, 165, 230, 0.07);
    --hero-panel-fg: #eef1ff;
    --hero-panel-muted: #c3c8ee;
    --hero-code-bg: rgba(8, 9, 24, 0.86);
}

html[data-theme="light"] .qubibyte-home {
    --hero-cyan: #0a7ea4;
    --hero-ring-dim: rgba(90, 118, 160, 0.4);
    --hero-violet: #5b46c9;
    --hero-pink: #c026a3;
    --hero-line: rgba(85, 74, 158, 0.42);
    --hero-line-soft: rgba(85, 74, 158, 0.20);
    --hero-panel-bg: linear-gradient(158deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(238, 236, 255, 0.92) 48%,
            rgba(226, 232, 250, 0.92) 100%);
    --hero-panel-border: rgba(85, 74, 158, 0.28);
    --hero-panel-glow: 0 18px 50px rgba(85, 74, 158, 0.16), 0 0 0 1px rgba(85, 74, 158, 0.06);
    --hero-panel-fg: #1b1e3b;
    --hero-panel-muted: #4b5079;
    --hero-code-bg: rgba(255, 255, 255, 0.92);
}

/* ── Section shell ──────────────────────────────────────────────────── */

#Home.hero-v2 {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
    position: relative;
}

#Home.hero-v2 .home-content {
    min-height: 0;
    padding-top: calc(var(--navbar-offset, 80px) + 8px);
    padding-bottom: 48px;
    justify-content: center;
}

.hero-v2 .hero-shell {
    width: min(1560px, calc(100% - 64px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 3;
}

/* ── Left column ────────────────────────────────────────────────────── */

.hero-v2 .hero-copy {
    text-align: center;
    /* Optically centred: the panel is far taller, so matching box centres leaves the
       headline sitting low. */
    align-self: center;
    padding-bottom: 3vh;
}

.hero-v2 .hero-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 22px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--border-default);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 26px;
}

html[data-theme="light"] .hero-v2 .hero-badge-v2 {
    background: rgba(255, 255, 255, 0.75);
}

.hero-v2 .hero-badge-tick {
    color: var(--hero-cyan);
    font-size: 0.85em;
    line-height: 1;
}

.hero-v2 .hero-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.1rem, 7.4vw, 6.6rem);
    line-height: 0.94;
    letter-spacing: 0.005em;
    margin: 0;
    text-transform: uppercase;
}

.hero-v2 #introeverywhere,
.hero-v2 #introallatonce,
.hero-v2 .hero-headline span {
    display: block;
    position: relative;
    text-align: center;
}

/* newindex.css hides both lines for the old typewriter to reveal; there is no
   entrance any more, so they are simply visible. */
.hero-v2 #introeverywhere,
.hero-v2 #introallatonce {
    visibility: visible !important;
    opacity: 1 !important;
}

/* The original hero colours, kept as-is. */
.hero-v2 #introeverywhere {
    color: #4dc3ff;
}

.hero-v2 #introallatonce {
    color: #c76bcb;
}

/* Same face and weight as the original .hero-subtitle in newindex.css. */
.hero-v2 .hero-subtitle-v2 {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 24px auto 0;
    /* One line at desktop widths — it reads as a strapline, not a paragraph. */
    white-space: nowrap;
}

.hero-v2 .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.hero-v2 .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}

.hero-v2 .hero-cta--primary {
    border-width: 2px;
    border-color: rgba(120, 200, 245, 0.6);
    background: linear-gradient(180deg, rgba(34, 44, 84, 0.96) 0%, rgba(18, 22, 48, 0.97) 100%);
    color: #eef6ff;
    box-shadow: 0 8px 26px rgba(6, 12, 30, 0.5);
}

.hero-v2 .hero-cta--primary:hover {
    border-color: rgba(150, 225, 255, 0.9);
    color: #fff;
    box-shadow: 0 10px 30px rgba(6, 12, 30, 0.5), 0 0 24px rgba(90, 190, 255, 0.28);
}

html[data-theme="light"] .hero-v2 .hero-cta--primary {
    border-color: rgba(60, 130, 180, 0.6);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 246, 255, 0.98) 100%);
    color: #1d2748;
    box-shadow: 0 8px 22px rgba(80, 100, 160, 0.18);
}

.hero-v2 .hero-cta:hover {
    transform: translateY(-2px);
}

/* ── Mission panel ──────────────────────────────────────────────────── */

.hero-v2 .mission-panel {
    /* .mission-container is centred by the old mobile rules; the panel reads as a
       document, so keep its contents ranged left at every width. */
    text-align: left;
    background: var(--hero-panel-bg);
    border: 1px solid var(--hero-panel-border);
    border-radius: 22px;
    box-shadow: var(--hero-panel-glow);
    padding: 30px 32px 26px;
    color: var(--hero-panel-fg);
    position: relative;
    overflow: hidden;
    /* Own stacking context so the 3D globe behind can never composite into it. */
    isolation: isolate;
}

/* Soft violet bloom in the corner so the panel reads as glass, not a grey slab. */
.hero-v2 .mission-panel::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 90%;
    background: radial-gradient(circle, rgba(120, 150, 230, 0.16) 0%, transparent 70%);
    pointer-events: none;
}

html[data-theme="light"] .hero-v2 .mission-panel::before {
    background: radial-gradient(circle, rgba(139, 123, 255, 0.16) 0%, transparent 68%);
}

/* Title row: heading left, socials right. */
.hero-v2 .mission-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    position: relative;
}

/* The old hero revealed these via its entrance script and positioned them absolutely
   against the mission card; inside the panel they are just a static row. */
.hero-v2 .mission-social {
    /* Nudge so the visible tile tops (the PNGs carry ~4px of transparent padding)
       sit a hair above the heading's cap height. */
    margin-top: 0.5px;
    position: static !important;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 1 !important;
    visibility: visible !important;
    inset: auto !important;
    flex-shrink: 0;
}

/* Bare icons, no button chrome. */
.hero-v2 .mission-social a {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast);
}

.hero-v2 .mission-social a:hover {
    transform: translateY(-2px);
}

.hero-v2 .mission-social img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

html[data-theme="light"] .hero-v2 .mission-social img {
    filter: none;
}

/* newindex.css lifts and scales .social-icons img on hover; the link moves as
   one piece instead, so the icon only brightens. */
.hero-v2 .mission-social a:hover img {
    transform: none;
    opacity: 1;
}

.hero-v2 #introourmission,
.hero-v2 .mission-title {
    font-family: var(--font-display);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #ffffff;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    position: relative;
}

html[data-theme="light"] .hero-v2 #introourmission,
html[data-theme="light"] .hero-v2 .mission-title {
    color: #14172e;
}

.hero-v2 .mission-intro {
    font-size: 1.01rem;
    line-height: 1.5;
    color: var(--hero-panel-fg);
    margin: 0 0 16px;
    position: relative;
}

.hero-v2 .mission-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    position: relative;
}

.hero-v2 .mission-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hero-panel-fg);
}

.hero-v2 .mission-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hero-cyan), var(--hero-violet));
}

/* ── Code + circuit inset ───────────────────────────────────────────── */

.hero-v2 .mission-inset {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 1px;
    background: rgba(8, 9, 24, 0.94);
    border-radius: 12px;
    /* Every sample is 3-5 lines at a fixed 16px/1.6, so five lines plus the
       pane padding is the whole box and the panel never moves between rotations. */
    height: 156px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--hero-panel-border);
}

/* Cross-fade between samples. */
.hero-v2 .mission-code,
.hero-v2 .mission-viz {
    transition: opacity 0.9s ease;
}

.hero-v2 .mission-inset.is-swapping .mission-code,
.hero-v2 .mission-inset.is-swapping .mission-viz {
    opacity: 0;
}

.hero-v2 .mission-load-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 3;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(150, 225, 255, 0.7);
    background: rgba(10, 16, 34, 0.92);
    color: #eaf7ff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.hero-v2 .mission-inset:hover .mission-load-btn,
.hero-v2 .mission-load-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.hero-v2 .mission-load-btn:hover {
    background: rgba(18, 30, 58, 0.96);
    border-color: #9fe4ff;
}

/* Dim the sample slightly so the button reads over it. */
.hero-v2 .mission-inset:hover .mission-code,
.hero-v2 .mission-inset:hover .mission-viz {
    opacity: 0.32;
}

/* Code sits top-aligned so shorter samples don't jump around in the fixed box. */
.hero-v2 .mission-code {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-v2 .mission-code,
.hero-v2 .mission-viz {
    background: var(--hero-code-bg);
    padding: 14px 16px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.hero-v2 .mission-code {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.6;
    /* The pane is dark in every theme, so plain tokens must not inherit the
       light theme's dark body text. */
    color: #cbd5e1;
    overflow: hidden;
}

.hero-v2 .code-line {
    white-space: pre;
}

.hero-v2 .code-num {
    display: inline-block;
    margin-right: 10px;
}

.hero-v2 .code-num {
    color: rgba(148, 163, 184, 0.5);
    user-select: none;
    min-width: 1.1em;
    text-align: right;
}

/* Same token palette the simulator's editor paints (.token-* in simulator/styles/main.css). */
.hero-v2 .c-gate { color: #c084fc; font-weight: 600; }
.hero-v2 .c-kw { color: #9295ff; font-weight: 600; }
.hero-v2 .c-num { color: #fbbf24; }
.hero-v2 .c-op { color: #94a3b8; }
.hero-v2 .c-var { color: #7dd3fc; }
.hero-v2 .c-cm { color: #96addb; font-style: italic; }

/* Light theme: a paper-white pane with the simulator's light-editor palette. */
html[data-theme="light"] .hero-v2 .mission-inset {
    background: rgba(226, 230, 245, 0.95);
}

html[data-theme="light"] .hero-v2 .mission-code {
    color: #1e293b;
}

html[data-theme="light"] .hero-v2 .code-num { color: #94a3b8; }
html[data-theme="light"] .hero-v2 .c-gate { color: #7c3aed; }
html[data-theme="light"] .hero-v2 .c-num { color: #b45309; }
html[data-theme="light"] .hero-v2 .c-op { color: #475569; }
html[data-theme="light"] .hero-v2 .c-var { color: #0369a1; }
html[data-theme="light"] .hero-v2 .c-cm { color: #64748b; }

html[data-theme="light"] .hero-v2 .viz-wire { stroke: rgba(76, 64, 160, 0.5); }
html[data-theme="light"] .hero-v2 .viz-label { fill: #334155; }
/* The control dot's ring is the pane colour, like the simulator's surface border. */
html[data-theme="light"] .hero-v2 .viz-ctrl { stroke: #f4f5fc; }
html[data-theme="light"] .hero-v2 .viz-meas { stroke: #fff; }
.hero-v2 .c-fn { color: #c084fc; font-weight: 600; }
.hero-v2 .c-txt { color: #e2e8f0; }

.hero-v2 .mission-viz {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
}

.hero-v2 .viz-circuit {
    width: 100%;
    height: auto;
    max-height: 132px;
    display: block;
}

.hero-v2 .viz-label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: rgba(199, 210, 254, 0.85);
}

.hero-v2 .viz-meter {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.hero-v2 .viz-meter-fill {
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, #34d399, #38bdf8, #8b7bff);
    animation: hero-meter 6s ease-in-out infinite;
}

@keyframes hero-meter {
    0% { width: 12%; }
    55% { width: 88%; }
    75% { width: 92%; }
    100% { width: 12%; }
}

.hero-v2 .mission-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    position: relative;
}

.hero-v2 .mission-watch {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: none;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.02rem;
    color: var(--hero-panel-fg);
    text-decoration: none;
}

.hero-v2 .mission-watch-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--hero-cyan);
    display: block;
    flex: 0 0 30px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

/* Outline, progress arc and glyphs are drawn in one SVG, so everything shares
   the circle's centre. The arc fills clockwise from the top as the clip plays. */
.hero-v2 .mission-ring {
    display: block;
    width: 30px;
    height: 30px;
}

/* While the clip is active the outline settles to a greyer blue and the bright
   cyan comes back around the ring as the clip plays. At the end the arc is full,
   the outline returns to cyan underneath it, and the arc clears unseen. */
.hero-v2 .mission-ring .ring-track {
    transition: stroke 0.6s ease;
}

.hero-v2 .mission-footer.has-played .ring-track {
    stroke: var(--hero-ring-dim);
}

.hero-v2 .mission-ring .ring-progress {
    stroke: var(--hero-cyan);
    transition: stroke-dashoffset 0.25s linear, stroke var(--transition-fast);
}

.hero-v2 .mission-watch:hover .mission-ring .ring-progress {
    stroke: #04121c;
}

.hero-v2 .mission-watch:hover .mission-footer.has-played .ring-track,
.hero-v2 .mission-footer.has-played .mission-watch:hover .ring-track {
    stroke: rgba(4, 18, 28, 0.32);
}

.hero-v2 .mission-watch:hover .mission-watch-icon {
    background: var(--hero-cyan);
    color: #04121c;
}

/* Caption under the button while the clip plays. Absolutely placed in the
   panel's bottom padding, so showing it never moves anything. */
.hero-v2 .mission-audio-caption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 1px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-style: italic;
    line-height: 1.3;
    color: var(--hero-panel-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hero-v2 .mission-footer.has-played .mission-audio-caption {
    opacity: 1;
    pointer-events: auto;
}

.hero-v2 .mission-audio-caption a {
    color: var(--hero-cyan);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--hero-cyan) 45%, transparent);
    transition: border-color var(--transition-fast);
}

.hero-v2 .mission-audio-caption a:hover {
    color: var(--hero-cyan);
    border-color: var(--hero-cyan);
}

/* ── Background scene ───────────────────────────────────────────────── */

.hero-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Wireframe surface across the lower hero — painted by js/hero-surface.js. */
.hero-surface-canvas {
    position: absolute;
    /* Wider than the hero, and the mesh itself overshoots the canvas, so the
       sheet runs off both sides instead of ending in view. */
    left: -15%;
    bottom: -2%;
    width: 130%;
    height: 50%;
    opacity: 1;
}

/* Wireframe globe, right side — painted by js/hero-globe.js. */
.hero-globe-canvas {
    position: absolute;
    top: 50%;
    right: -4%;
    width: min(860px, 58vw);
    aspect-ratio: 1;
    margin-top: min(-430px, -29vw);
    opacity: 0.95;
}

/*
 * Nebula glows. Broad, soft colour fields behind everything, the way the reference
 * has teal and magenta bleeding through the dark.
 */
.hero-glow {
    position: absolute;
    /* The gradients fade to transparent at the box edge (closest-side), so no
       border-radius clip is needed; a blur() filter on top used to hide the rim
       but made the GPU re-blur four viewport-sized layers every frame. */
    will-change: transform, opacity;
    opacity: 0.5;
    animation: hero-glow-breathe var(--dur, 22s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes hero-glow-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.42; }
    50% { transform: translate3d(2%, -3%, 0) scale(1.12); opacity: 0.6; }
}

html[data-theme="light"] .hero-glow {
    opacity: 0.28;
}

/*
 * Light trails radiating out from behind the globe. Each one rotates about the globe
 * centre and runs outward, so the burst reads as motion coming past the sphere.
 */
/* Full-scene band, tilted, so trails sweep across the open areas rather than
   radiating from a point that the mission panel happens to cover. */
.hero-streaks {
    position: absolute;
    inset: -10% -5%;
    transform: rotate(-16deg);
    pointer-events: none;
}

.hero-streak {
    position: absolute;
    left: 0;
    top: calc(var(--t) * 1%);
    height: 1px;
    width: calc(var(--len, 26) * 1%);
    background: linear-gradient(90deg, transparent, var(--streak-color, rgba(126, 231, 255, .8)) 62%, transparent);
    opacity: 0;
    animation: hero-streak-run var(--dur, 7s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}

@keyframes hero-streak-run {
    0% { transform: translate3d(-40%, 0, 0) scaleX(0.25); opacity: 0; }
    14% { opacity: 0.9; }
    62% { opacity: 0.45; }
    100% { transform: translate3d(380%, 0, 0) scaleX(1); opacity: 0; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .hero-v2 .hero-shell {
        grid-template-columns: 1fr;
        gap: 34px;
        width: min(760px, calc(100% - 44px));
    }

    .hero-globe-canvas {
        right: -26%;
        width: min(700px, 96vw);
        margin-top: min(-330px, -46vw);
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    #Home.hero-v2 {
        min-height: 0;
        align-items: flex-start;
    }

    #Home.hero-v2 .home-content {
        padding-top: calc(var(--navbar-offset, 80px) + 4px);
        padding-bottom: 34px;
    }

    .hero-v2 .hero-shell {
        width: calc(100% - 32px);
        gap: 26px;
    }

    .hero-v2 .hero-badge-v2 {
        font-size: 0.82rem;
        padding: 7px 16px;
        margin-bottom: 18px;
        letter-spacing: 0.12em;
    }

    .hero-v2 .hero-headline {
        font-size: clamp(2.5rem, 12.5vw, 3.7rem);
    }

    .hero-v2 .hero-subtitle-v2 {
        font-size: 1.2rem;
        margin-top: 16px;
        white-space: normal;
    }

    .hero-v2 .hero-ctas {
        margin-top: 24px;
        gap: 10px;
    }

    .hero-v2 .hero-cta {
        flex: 1 1 auto;
        padding: 13px 18px;
        font-size: 0.92rem;
        letter-spacing: 0.04em;
    }

    .hero-v2 .mission-panel {
        /* Bottom padding holds the two-line audio caption on narrow screens. */
        padding: 22px 20px 40px;
        border-radius: 18px;
    }

    .hero-v2 .mission-audio-caption {
        white-space: normal;
        font-size: 0.7rem;
        padding: 0 4px;
    }

    /* Title row: heading left, socials right. */
.hero-v2 .mission-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    position: relative;
}

    /* Title and socials share one row at phone widths, so both are sized to fit
       instead of letting the heading wrap around the icons. */
    .hero-v2 .mission-title {
        font-size: 1.4rem;
        white-space: nowrap;
        text-align: left;
    }

    .hero-v2 .mission-head {
        gap: 10px;
    }

    .hero-v2 .mission-social {
        gap: 6px;
        margin-top: -0.5px;
    }

    .hero-v2 .mission-social a,
    .hero-v2 .mission-social img {
        width: 29px;
        height: 29px;
    }

    .hero-v2 .mission-intro,
    .hero-v2 .mission-list li {
        font-size: 0.95rem;
    }

    /* The ::before glow sits off-centre and reads as a second background colour
       on a phone-width panel. */
    .hero-v2 .mission-panel::before {
        display: none;
    }

    /* Two tiny panes side by side stop being readable; stack them, and give the
       stack the height two rows actually need. */
    .hero-v2 .mission-inset {
        grid-template-columns: 1fr;
        grid-template-rows: 156px 110px;
        height: 267px;
    }

    /* The diagram row is 110px with 10px padding either side. */
    .hero-v2 .viz-circuit {
        max-height: 90px;
    }

    .hero-surface-canvas {
        height: 40%;
        width: 150%;
        left: -25%;
    }

    .hero-globe-canvas {
        top: 30%;
        right: -40%;
        width: 124vw;
        margin-top: -62vw;
        opacity: 0.45;
    }

    .hero-streaks {
        opacity: 0.55;
    }
}

@media (max-width: 480px) {
    .hero-v2 .hero-cta {
        flex-basis: 100%;
    }
}

/* ── Motion preferences ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .hero-streak,
    .hero-v2 .hero-headline span,
    .hero-v2 .viz-gate,
    .hero-v2 .viz-meter-fill {
        animation: none !important;
    }

    .hero-streak {
        opacity: 0.4;
    }

    .hero-v2 .viz-meter-fill {
        width: 62%;
    }
}

/* newindex.css centres #intropar under 768px; the panel copy stays left. */
.hero-v2 #intropar {
    text-align: left !important;
}

/* newindex.css starts both at opacity 0 for an entrance fade the old hero script
   did; here they are simply visible from the first frame. */
.hero-v2 #introourmission,
.hero-v2 #intropar {
    opacity: 1;
}

/* ── Warp-out to the simulator (js/hero-warp.js) ───────────────────── */

.hero-v2 .hero-shell,
.hero-v2 .hero-streaks {
    transition: opacity 0.32s ease, transform 0.45s cubic-bezier(0.4, 0, 0.7, 0.2);
}

.hero-v2.is-warping .hero-shell {
    opacity: 0;
    transform: scale(0.955) translateY(-14px);
    pointer-events: none;
}

.hero-v2.is-warping .hero-streaks {
    opacity: 0;
}

.hero-v2.is-warping .hero-glow {
    animation-play-state: paused;
    transition: opacity 0.5s ease;
    opacity: 0.85;
}

/* ── Load ───────────────────────────────────────────────────────────── */

/* The gutter is reserved throughout, so releasing the scrollbar after parsing
   does not shift the layout. */
html:has(body.qubibyte-home) {
    scrollbar-gutter: stable;
}

html.is-parsing:has(body.qubibyte-home) {
    overflow-y: hidden;
}

/* The one instant jump back to the saved position on reload. */
html.is-restoring {
    scroll-behavior: auto !important;
}

/* Restored reload: everything that would fade in is simply there. */
/* Landing on a section from a sub page: nothing shows until the jump is made. */
/* Opacity, not visibility: the headline forces visibility: visible on itself. */
html.section-pending body {
    opacity: 0 !important;
}

html.scroll-restored .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}