@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #080808;
    --surface: #111111;
    --surface2: #161616;
    --border: rgba(255,255,255,0.06);
    --text: #f0f0f0;
    --muted: rgba(255,255,255,0.4);
    --accent: #3b82f6;
    --accent2: #14b8a6;
    --green: #22c55e;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ambient background glow: stays fixed on screen while scrolling, slowly
   crossfading from the primary to the secondary accent color the further
   down the page you are (--glow-primary/--glow-secondary set in main.js).
   Both start at 0 right at the top of the page — the glow used to be
   visible immediately on load and collided with the hard edge of the
   .orb blur clip in the hero, showing up as a seam right under the hero.
   Starting at 0 and only fading in once you've scrolled past the hero
   avoids that. */
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    z-index: -1;
}

body::before {
    width: 480px; height: 480px;
    background: var(--accent);
    bottom: -160px;
    left: -140px;
    opacity: var(--glow-primary, 0);
}

body::after {
    width: 420px; height: 420px;
    background: var(--accent2);
    top: 45%;
    right: -140px;
    opacity: var(--glow-secondary, 0);
}

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

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Floating Nav Pill ---------- */
.nav-pill {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    height: 68px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 32px;
    background: rgba(10,10,10,0.85);
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    border-radius: 0 0 20px 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.4);
    transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}

.nav-pill .nav-links { margin: 0 auto; }

.nav-logo {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.nav-links a { transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-btn {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-btn-ghost { color: var(--text); }
.nav-btn-ghost:hover { color: var(--accent); }

.nav-btn-primary { background: var(--accent); color: #fff; }
.nav-btn-primary:hover { transform: translateY(-1px); opacity: 0.92; }

.nav-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--surface2);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-hamburger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), top 0.35s var(--ease);
}

.nav-hamburger span:nth-child(1) { top: 14px; }
.nav-hamburger span:nth-child(2) { top: 19px; }
.nav-hamburger span:nth-child(3) { top: 24px; }

.nav-hamburger.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.mobile-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-overlay a {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.mobile-overlay.open a { opacity: 1; transform: translateY(0); }
.mobile-overlay.open a:nth-child(1) { transition-delay: 0.08s; }
.mobile-overlay.open a:nth-child(2) { transition-delay: 0.14s; }
.mobile-overlay.open a:nth-child(3) { transition-delay: 0.20s; }
.mobile-overlay.open a:nth-child(4) { transition-delay: 0.26s; }
.mobile-overlay.open a:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 40px;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(130px);
    -webkit-filter: blur(130px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    pointer-events: none;
    /* iOS Safari can paint the very first frame with the blur filter not
       yet applied, showing a hard-edged colored box/line where the orb
       sits; staying invisible for one frame then fading in avoids that */
    opacity: 0;
    animation: orb-fade-in .6s ease forwards;
    animation-delay: .05s;
}

@keyframes orb-fade-in {
    to { opacity: 0.55; }
}

.orb-blue {
    width: clamp(280px, 33vw, 640px); height: clamp(280px, 33vw, 640px);
    background: #60a5fa;
    top: clamp(-190px, -8.3vw, -70px); left: clamp(-160px, -6.9vw, -60px);
}
.orb-teal {
    width: clamp(240px, 29vw, 560px); height: clamp(240px, 29vw, 560px);
    background: #2dd4bf;
    bottom: clamp(-170px, -9.7vw, -60px); right: clamp(-140px, -6.9vw, -60px);
}

/* .hero clips the orbs' blur bleed at its bottom edge, which can leave a hard
   seam where the glow cuts off abruptly. Masking the orbs themselves (rather
   than painting an opaque overlay over that area) fades just their color to
   nothing before the clip point, without blocking the ambient body::before/
   after scroll-glow that shows through .hero's transparent background — an
   opaque overlay there would hide that glow too and create its own seam
   against the section below, where the glow isn't hidden. Fixed px (not %)
   so the fade zone stays correct regardless of the orbs' own clamp() sizing. */
.hero-orbs {
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(to top, transparent 0, black 280px);
    -webkit-mask-image: linear-gradient(to top, transparent 0, black 280px);
    pointer-events: none;
}

.eyebrow {
    margin-bottom: 28px;
    /* animation wrapper only: no background/border of its own, so it stays
       fully transparent while opacity is 0 (iOS Safari can otherwise flash
       the unmasked pill box during the reveal transition) */
}

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    overflow: hidden;
}

.eyebrow-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0 0 24px;
    max-width: 900px;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--muted);
    max-width: 560px;
    margin: 0 0 40px;
    line-height: 1.6;
}

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

.btn {
    padding: 15px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease);
    display: inline-block;
    overflow: hidden;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); opacity: 0.92; }

.btn-outline { border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-2px); }

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

.hero .eyebrow.reveal { transition-delay: 0s; }
.hero h1.reveal { transition-delay: 0.1s; }
.hero p.reveal { transition-delay: 0.2s; }
.hero .hero-ctas.reveal { transition-delay: 0.3s; }

/* ---------- Section headings ---------- */
.section {
    padding: 56px 24px 100px;
}

.section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 56px;
}

.section-head h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
}

.section-head p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Bento Grid ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.bento-card.col-span-2 { grid-column: span 2; }
.bento-card.col-span-1 { grid-column: span 1; }

.bento-card.reveal:nth-child(1) { transition-delay: 0s; }
.bento-card.reveal:nth-child(2) { transition-delay: 0.05s; }
.bento-card.reveal:nth-child(3) { transition-delay: 0.1s; }
.bento-card.reveal:nth-child(4) { transition-delay: 0.15s; }
.bento-card.reveal:nth-child(5) { transition-delay: 0.2s; }
.bento-card.reveal:nth-child(6) { transition-delay: 0.25s; }
.bento-card.reveal:nth-child(7) { transition-delay: 0.3s; }
.bento-card.reveal:nth-child(8) { transition-delay: 0.35s; }
.bento-card.reveal:nth-child(9) { transition-delay: 0.4s; }

.bento-card {
    position: relative;
    border-radius: 24px;
    padding: 3px;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.bento-card:hover { transform: translateY(-4px) scale(1.012); }

.bento-card-inner {
    position: relative;
    height: 100%;
    min-height: 220px;
    background: var(--surface);
    border-radius: 21px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: background 0.35s var(--ease);
}

.bento-card:hover .bento-card-inner { background: var(--surface2); }

.bento-glow {
    position: absolute;
    inset: -40% -40% auto auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(60px);
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.bento-card:hover .bento-glow { opacity: 0.35; }

.bento-card.color-blue .bento-glow { background: var(--accent); }
.bento-card.color-teal .bento-glow { background: var(--accent2); }
.bento-card.color-green .bento-glow { background: var(--green); }
.bento-card.color-gray .bento-glow { background: #888; }

.bento-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.bento-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.bento-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-live { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
.badge-soon { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }
.badge-e2ee { background: rgba(20,184,166,0.12); color: var(--accent2); border: 1px solid rgba(20,184,166,0.25); }

.bento-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 20px 0 6px;
}

.bento-card.col-span-2 h3 { font-size: 1.5rem; }

.bento-card p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.bento-domain {
    margin-top: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Dev / In Entwicklung Grid ---------- */
.section-tight { padding-top: 20px; }

.section-head a { color: var(--accent); font-weight: 700; }
.section-head a:hover { text-decoration: underline; }

.lab-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 620px;
    margin: 0 auto;
    padding: 22px 26px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.lab-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.14);
    background: var(--surface2);
}

.lab-cta-icons { display: flex; flex-shrink: 0; }

.lab-cta-icons .lab-cta-icon {
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--surface2);
    border: 2px solid var(--bg);
}

.lab-cta-icons .lab-cta-icon:first-child { margin-left: 0; }

.lab-cta-text { flex: 1; }

.lab-cta-text h3 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.lab-cta-text p {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.lab-cta-arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--accent);
}

@media (max-width: 560px) {
    .lab-cta { flex-direction: column; text-align: center; padding: 24px 20px; }
}

.lab-cta-other {
    max-width: 620px;
    margin: 16px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lab-cta-other-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--muted);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.lab-cta-other-item:hover { border-color: rgba(255,255,255,0.14); background: var(--surface2); }

.lab-cta-other-item strong { color: var(--text); }

.lab-cta-other-item .badge { margin-left: auto; }

/* ---------- Footer ---------- */
footer {
    padding: 56px 24px 40px;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
}

footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

footer .footer-links a { font-weight: 600; }
footer .footer-links a:hover { color: var(--text); }

/* ---------- Simple content pages (about / support) ---------- */
.page-hero {
    padding: 160px 24px 60px;
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.page-hero p {
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.content-card {
    max-width: 720px;
    margin: 0 auto 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
}

.content-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.content-card p, .content-card li { color: var(--muted); line-height: 1.7; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    padding: 18px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.925rem;
}

.faq-answer-inner { padding-bottom: 18px; }

.faq-item.open .faq-answer { max-height: 300px; }

.faq-icon { transition: transform 0.3s var(--ease); font-weight: 400; color: var(--muted); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
}

/* ---------- Contact / Support Form ---------- */
.contact-form-group { margin-bottom: 20px; }
.contact-form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.contact-form-group label span { color: var(--muted); font-weight: 400; }
.contact-form-input {
    width: 100%; background: rgba(255,255,255,.04);
    border: 1px solid var(--border); border-radius: 12px;
    color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .9rem; padding: 12px 16px;
    transition: border-color .2s, background .2s; outline: none; resize: none;
}
.contact-form-input:focus { border-color: var(--accent); background: rgba(59,130,246,.06); }
.contact-form-input::placeholder { color: var(--muted); }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-submit-btn {
    width: 100%; padding: 15px;
    background: var(--accent); color: #fff; border: none; border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700;
    cursor: pointer; margin-top: 4px;
    transition: opacity .2s, transform .15s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.contact-submit-btn:hover { opacity: .9; transform: translateY(-2px); }
.contact-submit-btn:disabled { opacity: .5; cursor: default; transform: none; }
.contact-form-success { display: none; text-align: center; padding: 24px 0 4px; }
.contact-form-success .success-icon { font-size: 2.4rem; margin-bottom: 12px; }
.contact-form-success h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
.contact-form-success p { color: var(--muted); font-size: .88rem; }
.contact-form-error { display: none; color: #ef4444; font-size: .82rem; margin-top: 10px; text-align: center; }
@media (max-width: 560px) {
    .contact-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-actions .nav-btn-ghost { display: none; }
    .nav-hamburger { display: block; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento-card.col-span-2 { grid-column: span 2; }
}

@media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .bento-card.col-span-2, .bento-card.col-span-1 { grid-column: span 1; }
    .nav-pill { padding: 0 18px; }
}


/* ---------- LAB specific ---------- */
.lab-warning {
    position: relative;
    z-index: 998;
    margin-top: 68px;
    background: rgba(234,179,8,0.1);
    border-bottom: 1px solid rgba(234,179,8,0.3);
    color: #eab308;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
}

.lab-warning a { text-decoration: underline; color: #eab308; }

.badge-lab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(234,179,8,0.14);
    color: #eab308;
    border: 1px solid rgba(234,179,8,0.35);
    white-space: nowrap;
}

.nav-logo .badge-lab { margin-left: 8px; vertical-align: middle; }

.badge-beta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
    white-space: nowrap;
}

.lab-project-banner {
    max-width: 720px;
    margin: 0 auto 40px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 16px;
    padding: 16px 20px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.6;
}

.lab-project-banner a { color: #ef4444; font-weight: 700; }

.lab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(234,179,8,0.1);
    border: 1px solid rgba(234,179,8,0.3);
    font-size: 0.8rem;
    font-weight: 700;
    color: #eab308;
    margin-bottom: 28px;
}

/* lab3-only hero orb colors (amber/red instead of 5033.ch's blue/teal),
   same size/position/blur technique as .orb-blue/.orb-teal */
.orb-amber {
    width: clamp(280px, 33vw, 640px); height: clamp(280px, 33vw, 640px);
    background: #fbbf24;
    top: clamp(-190px, -8.3vw, -70px); left: clamp(-160px, -6.9vw, -60px);
}
.orb-red {
    width: clamp(240px, 29vw, 560px); height: clamp(240px, 29vw, 560px);
    background: #f87171;
    bottom: clamp(-170px, -9.7vw, -60px); right: clamp(-140px, -6.9vw, -60px);
}

/* ---------- First-visit consent gate (blocks the page until accepted) ---------- */
.lab-gate {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    background: rgba(8,8,8,0.75);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.lab-gate.open { opacity: 1; pointer-events: auto; }

.lab-gate-bar {
    width: 100%;
    max-width: 760px;
    margin-top: 64px;
    height: fit-content;
    display: flex;
    gap: 18px;
    padding: 26px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(22,22,22,0.98), rgba(17,17,17,0.98));
    border: 1px solid rgba(234,179,8,0.35);
    box-shadow: 0 0 0 1px rgba(234,179,8,0.08), 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(234,179,8,0.12);
    transform: translateY(-24px);
    opacity: 0;
    transition: transform 0.4s var(--ease) 0.1s, opacity 0.4s var(--ease) 0.1s;
}

.lab-gate.open .lab-gate-bar { transform: translateY(0); opacity: 1; }

.lab-gate-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(234,179,8,0.12);
    border: 1px solid rgba(234,179,8,0.3);
}

.lab-gate-body h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 4px 0 12px;
}

.lab-gate-list {
    margin: 0 0 20px;
    padding-left: 18px;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.lab-gate-list li + li { margin-top: 8px; }

.lab-gate-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lab-gate-actions .btn { font-size: 0.85rem; padding: 11px 20px; }

@media (max-width: 560px) {
    .lab-gate-bar { flex-direction: column; margin-top: 40px; padding: 22px; }
}

/* ---------- lab3-only top bar accent: amber border/glow instead of 5033.ch's neutral one ---------- */
.nav-pill-lab {
    border-bottom-color: rgba(234,179,8,0.3);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 40px rgba(0,0,0,0.4), 0 0 24px rgba(234,179,8,0.12);
}

/* lab3-only ambient glow colors: amber/red instead of 5033.ch's blue/teal */
body::before { background: #fbbf24; }
body::after { background: #f87171; }