/* =========================================================
   AI HOUSE BUCHAREST — LANDING PAGE
   Inspired by promocrat.com/conference (Poppins, dark, neon green)
   Notes for Elementor port:
     - Color tokens map to Elementor global colors
     - Each section maps cleanly to one Elementor Section
     - Spacing tokens map to Elementor spacing variables
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
    /* =========================================================
       PROMOCRAT BRAND BOOK PALETTE (only these colors are used)
       Primary    : bright green #03D777, black #000000
       Neutral    : white #FFFFFF
       Secondary  : light blue #03BED7, dark blue #002532
       Emeralds   : 300 #042726, 200 #082F2F, 100 #0B403A
       Muted/dim  : white at lowered alpha (still brand-safe)
       ========================================================= */
    --color-bg: #000000;
    --color-text: #FFFFFF;

    --color-primary: #03D777;        /* bright green */
    --color-primary-hover: #03D777;  /* same, glow handles emphasis */

    --color-light-blue: #03BED7;
    --color-dark-blue: #002532;
    --color-emerald-300: #042726;
    --color-emerald-200: #082F2F;
    --color-emerald-100: #0B403A;

    /* Surfaces (emerald 300 + transparency over the aurora) */
    --color-surface: rgba(4, 39, 38, 0.72);   /* emerald-300 @ 72% */
    --color-surface-2: rgba(8, 47, 47, 0.72); /* emerald-200 @ 72% */

    /* Text variants are white at lowered alpha (still brand) */
    --color-muted: rgba(255, 255, 255, 0.72);
    --color-dim: rgba(255, 255, 255, 0.5);

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(3, 215, 119, 0.35);

    /* Typography */
    --font-primary: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout */
    --container-max: 1200px;
    --container-pad: 24px;
    --section-pad: 44px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Effects */
    --glow: 0 0 24px rgba(3, 215, 119, 0.45);
    --glow-strong: 0 0 48px rgba(3, 215, 119, 0.55);
}

/* ---------- RESET ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

/* =========================================================
   ANIMATED AURORA BACKGROUND
   Layered, GPU-accelerated, dependency-free.
   - 4 large blurred gradient blobs drift across the viewport
   - Subtle dot grid overlay (tech feel)
   - Very faint noise for texture
   Sits behind everything via fixed position + z-index: 0.
   ========================================================= */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at top, #042726 0%, #000000 65%); /* emerald-300 → black */
}

/* Lift all page content above the aurora */
.site-header,
section,
.site-footer {
    position: relative;
    z-index: 1;
}

/* PERF: skip rendering of long-form sections when scrolled off-screen.
   contain-intrinsic-size reserves a fallback box height so scroll position
   doesn't jump as sections enter/leave the render boundary.
   Skipped on .hero (always above the fold) and .timeline-section (its
   rail-fill JS depends on continuous getBoundingClientRect measurements). */
.about-section,
.curators-section,
.sponsors-section,
.tickets-section,
.partners-strip,
.partner-section,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* PERF: pause looped animations on elements scrolled out of view.
   JS toggles .is-offscreen via IntersectionObserver. */
.is-offscreen,
.is-offscreen::before,
.is-offscreen::after {
    animation-play-state: paused !important;
}

/* PERF-LITE: low-end devices (<4 GB RAM or <4 cores). Strip the most
   expensive effects but keep the brand visuals intact. */
.perf-lite .aurora-blob-2,
.perf-lite .aurora-blob-3 {
    display: none;
}
.perf-lite .aurora-blob {
    filter: blur(50px);
    animation-duration: 60s !important;
}
.perf-lite .aurora-noise::after {
    display: none;
}
.perf-lite .aurora-noise {
    opacity: 0.10;
}
.perf-lite .hover-gradient-cta::before,
.perf-lite .expect-perk,
.perf-lite .location-chip-dot,
.perf-lite .hero-countdown-livedot {
    animation: none !important;
}
.perf-lite .site-header,
.perf-lite .partners-strip,
.perf-lite .ticket-card,
.perf-lite .curator-card,
.perf-lite .sponsor-card,
.perf-lite .expect-perk {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.aurora-blob {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.65;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

/* Aurora tuned to mimic a ShaderGradient "plane" shader with:
   - color1/color3 = #0B403A (emerald-100, primary)
   - color2 = #002532 (dark blue, accent)
   - brightness 1.2 (single bright highlight blob simulates env-preset lighting)
   - uSpeed 0.4 (slow drift — animations 45-60s)
   - grain: on (handled by .aurora-noise layers below)
   Dark, moody, brand-coherent. */
.aurora-blob-1 {
    background: radial-gradient(circle, #0B403A 0%, rgba(11, 64, 58, 0) 65%);
    top: -20%;
    left: -10%;
    opacity: 0.85;
    animation: aurora-drift-1 48s ease-in-out infinite alternate;
}

.aurora-blob-2 {
    background: radial-gradient(circle, #002532 0%, rgba(0, 37, 50, 0) 65%);
    top: 30%;
    right: -15%;
    width: 55vw;
    height: 55vw;
    opacity: 0.7;
    animation: aurora-drift-2 56s ease-in-out infinite alternate;
}

.aurora-blob-3 {
    background: radial-gradient(circle, #0B403A 0%, rgba(11, 64, 58, 0) 65%);
    bottom: -10%;
    left: 20%;
    width: 50vw;
    height: 50vw;
    opacity: 0.65;
    animation: aurora-drift-3 60s ease-in-out infinite alternate;
}

/* Brightness-1.2 highlight — small soft brand-green spot for the
   "lobby" env-preset reflection feel. Sparse, low opacity. */
.aurora-blob-4 {
    background: radial-gradient(circle, rgba(3, 215, 119, 0.35) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    width: 35vw;
    height: 35vw;
    opacity: 0.55;
    filter: blur(70px);
    animation: aurora-drift-4 52s ease-in-out infinite alternate;
}

/* Drift paths kept large for organic flow, but with much longer durations
   above the animation now feels slow and contemplative (uSpeed 0.4-equivalent). */
@keyframes aurora-drift-1 {
    0%   { transform: translate(0, 0) scale(1);          opacity: 0.70; }
    33%  { transform: translate(28vw, 18vh) scale(1.25); opacity: 0.85; }
    66%  { transform: translate(12vw, 35vh) scale(0.85); opacity: 0.65; }
    100% { transform: translate(-8vw, 22vh) scale(1.1);  opacity: 0.80; }
}

@keyframes aurora-drift-2 {
    0%   { transform: translate(0, 0) scale(1);            opacity: 0.55; }
    33%  { transform: translate(-22vw, 26vh) scale(1.18);  opacity: 0.70; }
    66%  { transform: translate(-32vw, 8vh) scale(0.80);   opacity: 0.50; }
    100% { transform: translate(-12vw, -10vh) scale(1.05); opacity: 0.65; }
}

@keyframes aurora-drift-3 {
    0%   { transform: translate(0, 0) scale(1);            opacity: 0.50; }
    33%  { transform: translate(30vw, -22vh) scale(1.30);  opacity: 0.70; }
    66%  { transform: translate(-18vw, -35vh) scale(0.95); opacity: 0.55; }
    100% { transform: translate(8vw, -15vh) scale(1.15);   opacity: 0.60; }
}

@keyframes aurora-drift-4 {
    0%   { transform: translate(-50%, -50%) scale(1);       opacity: 0.40; }
    33%  { transform: translate(-25%, -80%) scale(1.20);    opacity: 0.60; }
    66%  { transform: translate(-80%, -25%) scale(0.85);    opacity: 0.35; }
    100% { transform: translate(-55%, -65%) scale(1.10);    opacity: 0.50; }
}

/* Dot grid overlay — gives the aurora a "tech" feel */
.aurora-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    opacity: 0.6;
}

/* Film grain — two layered noise patterns for richer, more visible texture.
   STATIC: no animation. The grain is locked to the viewport (parent .aurora
   is position:fixed), so it stays fixed across the entire background. */
.aurora-noise {
    position: absolute;
    inset: 0;
    opacity: 0.20;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.aurora-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
    background-size: 280px 280px;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Reduced motion: stop the drift */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob { animation: none !important; }
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-hover);
}

ul {
    list-style: none;
}

/* ---------- UTILITIES ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.text-glow {
    color: var(--color-primary);
    text-shadow: var(--glow);
}

.eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.eyebrow-center {
    display: block;
    text-align: center;
}

.section-title {
    font-size: clamp(36px, 5vw, 70px);
    font-weight: 600;
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

/* About section title — matches the .negative chip type styling:
   lighter weight (500 instead of 600) + airier letter-spacing
   (0.01em instead of the tight -0.02em default). Line-height
   relaxed for breathing room between rows, and word-spacing
   tightened so the title reads as a denser phrase. */
.about-section .section-title {
    line-height: 1.20;
    font-weight: 500;
    letter-spacing: 0.01em;
    word-spacing: -0.08em;
}

.section-title-center {
    text-align: center;
}

.section-lead {
    font-size: 18px;
    color: var(--color-muted);
    max-width: 720px;
    line-height: 1.7;
    font-weight: 300;
}

.section-lead-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--color-primary);
    color: #000;
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #000;
    box-shadow: var(--glow);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(3, 215, 119, 0.05);
}

/* =========================================================
   HOVER BORDER GRADIENT CTA
   A brand-green "spot" travels around the button perimeter
   in a 4-step cycle (TOP → LEFT → BOTTOM → RIGHT → TOP) on a
   ~3s smooth loop. Spot position is driven by CSS vars
   (--spot-x / --spot-y) so the same mechanism handles both
   the auto-cycle (via @keyframes) AND cursor tracking on hover
   (via JS inline styles).
   ========================================================= */
@property --spot-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: true;
}

@property --spot-y {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

.hover-gradient-cta {
    --spot-x: 50%;
    --spot-y: 0%;
    position: relative;
    display: inline-flex;
    padding: 2px;
    height: 56px;
    min-width: 220px;
    border-radius: 999px;
    background: #000000;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    /* Two-layer outer glow — tight bright halo + wider soft bloom */
    box-shadow: 0 0 20px rgba(3, 215, 119, 0.28),
                0 0 56px rgba(3, 215, 119, 0.14);
    transition: transform 0.18s ease, box-shadow 0.4s ease;
}

@media (hover: hover) {
    .hover-gradient-cta:hover {
        box-shadow: 0 0 28px rgba(3, 215, 119, 0.45),
                    0 0 80px rgba(3, 215, 119, 0.22);
    }
}

/* The spot layer — gradient position driven by CSS vars */
.hover-gradient-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        30% 70% at var(--spot-x) var(--spot-y),
        #03D777 0%,
        transparent 70%
    );
    animation: hover-gradient-cycle 3s ease-in-out infinite;
}

/* Auto-cycle: animate the vars (with @property they interpolate smoothly) */
@keyframes hover-gradient-cycle {
    0%, 100% { --spot-x: 50%;  --spot-y: 0%;   }  /* TOP    */
    25%      { --spot-x: 0%;   --spot-y: 50%;  }  /* LEFT   */
    50%      { --spot-x: 50%;  --spot-y: 100%; }  /* BOTTOM */
    75%      { --spot-x: 100%; --spot-y: 50%;  }  /* RIGHT  */
}

/* On hover (mouse devices only): kill the auto cycle and let JS drive the
   spot via inline --spot-x / --spot-y on the button. A transition on the
   ::before vars makes cursor moves glide instead of snapping. */
@media (hover: hover) {
    .hover-gradient-cta:hover::before {
        animation: none;
        transition: --spot-x 0.18s linear, --spot-y 0.18s linear;
    }
}

/* Inner pill — solid black, holds icon + label, sits above the spot layer */
.hover-gradient-cta-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    background: #000000;
    color: #FFFFFF;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.hover-gradient-cta-inner svg {
    color: #FFFFFF;
    flex-shrink: 0;
}

.hover-gradient-cta:active .hover-gradient-cta-inner {
    transform: scale(0.98);
}

.hover-gradient-cta:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hover-gradient-cta::before {
        animation: none !important;
        background: radial-gradient(circle at 50% 50%, rgba(3, 215, 119, 0.4), transparent 70%);
    }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* Smooth frosted glass — no refraction filter here (it produced visible
       wave distortion on the navbar's wide edges + nav text). Keeps the
       sheen gradient and rim lighting from the Liquid Glass look. */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
    -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 6px 20px rgba(0, 0, 0, 0.14);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 26px;
    width: auto;
    display: block;
}

.primary-nav .nav-list {
    display: flex;
    gap: 32px;
    align-items: center;
}

.primary-nav a {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 400;
    transition: color 0.2s ease;
    position: relative;
}

.primary-nav a:hover {
    color: var(--color-primary);
}

.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.25s ease;
}

.primary-nav a:hover::after {
    width: 100%;
}

.nav-cta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: all 0.25s ease;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    padding-top: 160px;
    padding-bottom: var(--section-pad);
    position: relative;
    /* z-index higher than other sections (which are z-index: 1) so the
       hero banner's hover glow/shadow can bleed down into the next
       section instead of being clipped at the section boundary. */
    z-index: 2;
    /* No overflow:hidden — would also clip the shadow. */
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
}

.hero-title {
    font-size: clamp(56px, 8vw, 110px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 12px 0 24px;
}

.hero-tagline {
    font-size: 18px;
    color: var(--color-muted);
    font-weight: 300;
    margin-bottom: 16px;
    line-height: 1.6;
    max-width: 560px;
}

/* Second sentence emphasised — the access policy in primary green */
.hero-tagline-access {
    display: inline;
    color: var(--color-primary);
    font-weight: 500;
}

/* Location + date line right under the tagline — small uppercase label
   in the same muted white as the description above. */
.hero-meta-line {
    margin: 0 0 30px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Force both hero CTAs (Buy Tickets and the hover-border-gradient CTA) to
   share an identical footprint: same min-width, same fixed height, same
   pill shape. */
.hero-actions .btn,
.hero-actions .hover-gradient-cta {
    height: 56px;
    min-width: 220px;
    box-sizing: border-box;
}

.hero-actions .btn-lg {
    padding: 0 32px;
    line-height: 1;
}

.hero-visual {
    position: relative;
    perspective: 1200px; /* depth for the 3D tilt on banner */
}

.hero-banner {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5),
                0 0 0 1px var(--color-border),
                0 0 80px rgba(3, 215, 119, 0.25);
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(0) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.5s ease;
    will-change: transform;
}

@media (hover: hover) {
    .hero-visual:hover .hero-banner {
        transform: rotateX(4deg) rotateY(-6deg) translateZ(20px) scale(1.02);
        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6),
                    0 0 0 1px var(--color-border-strong),
                    0 0 120px rgba(3, 215, 119, 0.40);
    }
}

/* =========================================================
   PARTNERS SLIDER
   ========================================================= */
.partners-strip {
    padding: 60px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

/* Static grain texture applied like a filter over the partners-strip
   background. NOT animated — it sits fixed within the section,
   clipped by overflow: hidden on the parent, underneath the content. */
.partners-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ps-grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ps-grain)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* Make sure the strip's content renders above the grain ::before */
.partners-strip > .container {
    position: relative;
    z-index: 1;
}

.partners-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: center;
}

.partners-cta {
    padding-right: 24px;
    border-right: 1px solid var(--color-border);
}

.partners-cta-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 12px;
}

.partners-cta-text {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 18px;
}

.partners-slider {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.partners-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: partners-scroll 35s linear infinite;
}

.partner-logo {
    flex: 0 0 auto;
    height: 60px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.partner-logo:hover {
    opacity: 1;
}

/* Force every partner logo to pure white, regardless of source color.
   Works for both black SVGs and colored PNGs: brightness(0) makes all
   visible pixels black, invert(1) flips them to white. Transparent
   pixels stay transparent. */
.partner-logo img {
    max-height: 36px;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    object-fit: contain;
}

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* =========================================================
   HERO — LOCATION CHIP & INLINE COUNTDOWN
   ========================================================= */

/* Hidden SVG filter defs — kept off-flow */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =========================================================
   APPLE LIQUID GLASS — location chip
   The defining traits of Apple's iOS 26 / macOS 26 Liquid Glass:
   1. REFRACTION (not just blur) — content behind bends as through a lens.
      Achieved with backdrop-filter: url(#liquid-glass) which applies the
      feDisplacementMap defined in the <svg.svg-defs> at top of body.
   2. Specular rim lighting — bright top edge + soft bottom rim, like
      light catching the curved surface of glass.
   3. Variable internal tint — inner gradient brighter at corners
      (where refraction concentrates), darker in the middle.
   4. Saturation + brightness boost on backdrop — colors behind pop.
   5. Animated sheen — soft light streak that drifts across.
   6. Soft floating drop-shadow — the element levitates over the page.
   Browsers without backdrop-filter:url() support (Safari) still get
   layered gradients + shadows = credible fallback look.
   ========================================================= */
/* "Powered by" row — plain background row that holds the dot, text, and
   the (Liquid Glass) chip. Only the chip itself carries the glass effect. */
.hero-attribution {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 16px;
    position: relative;
    isolation: isolate;

    /* Inner tint — brighter at corners, dimmer center
       (mimics how real glass catches light at the edges) */
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 30%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.20) 100%);

    /* THE refraction effect + frost + saturation/brightness boost. */
    backdrop-filter: url(#liquid-glass) blur(14px) saturate(180%) brightness(1.10);
    -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.10); /* Safari: skips url() */

    /* Multi-layer rim lighting + drop shadow */
    box-shadow:
        /* Top specular highlight — the brightest "edge of glass" line */
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
        /* Bottom rim — soft inner shadow gives depth */
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        /* Hairline border around the whole shape (sub-pixel) */
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        /* Outer drop shadow — the chip floats */
        0 10px 30px rgba(0, 0, 0, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Animated sheen — diagonal highlight drifts slowly across the surface.
   Mix-blend-mode: screen makes it brighten the chip rather than dim it. */
.location-chip::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        125deg,
        transparent 25%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 75%
    );
    background-size: 250% 100%;
    background-position: 200% 0;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: glass-sheen 7s ease-in-out infinite;
}

@keyframes glass-sheen {
    0%, 100% { background-position: 200% 0; opacity: 0.6; }
    50%      { background-position: -100% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .location-chip::before { animation: none; }
}

.location-chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 12px rgba(3, 215, 119, 0.9);
    animation: chip-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.location-chip-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.90);
    white-space: nowrap;
}

/* Sponsor logo inline in the chip — small, forced white to read on
   the dark/glass surface. */
.location-chip-logo {
    height: 16px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

@keyframes chip-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(3, 215, 119, 0.7),
                    0 0 12px rgba(3, 215, 119, 0.9);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(3, 215, 119, 0),
                    0 0 14px rgba(3, 215, 119, 1);
    }
}

/* =========================================================
   HERO COUNTDOWN — modern minimal
   No outer panel. Pulsing live dot + label above. Four big
   tabular numbers separated by thin vertical dividers.
   ========================================================= */
.hero-countdown {
    margin-bottom: 32px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hero-countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero-countdown-livedot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 10px rgba(3, 215, 119, 0.9);
    animation: countdown-live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes countdown-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

.hero-countdown-units {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 500px;
}

.hero-countdown-unit {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    position: relative;
    min-width: 0;
}

/* Thin vertical divider between units — fades at top/bottom for elegance */
.hero-countdown-unit:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.12) 30%,
        rgba(255, 255, 255, 0.12) 70%,
        transparent
    );
}

.hero-countdown-value {
    font-size: clamp(40px, 5.4vw, 58px);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.hero-countdown-name {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-section {
    /* Bottom padding zeroed: the Bolt perk sits at the bottom of the about
       block, and the next section (Curators) compensates with minimal
       top padding so the visual gap stays tight. */
    padding: var(--section-pad) 0 0;
}

/* About section — everything center-aligned (text + flex children) */
.about-intro {
    margin: 0 auto;
    max-width: 780px;
    text-align: center;
}

.about-section .section-lead {
    margin-left: auto;
    margin-right: auto;
}

.about-section .about-closer {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

/* Negatives flex container centers its chips */
.about-section .about-negatives {
    justify-content: center;
}

/* Drop the left-border quote treatment — doesn't fit a centered context */
.about-section .about-quote {
    border-left: 0;
    padding-left: 0;
}

/* Bolt perk centered + sensible max-width inside the about column */
.about-section .perk-reveal {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* About — negatives + closer */
.about-negatives {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 32px 0 28px;
}

/* "No X" negatives — same Apple Liquid Glass treatment as .location-chip.
   Pill shape (rounded-full) instead of rounded-rect since the negatives
   are single-line statements. Text stays primary green to keep the
   semantic distinction as "things this event is NOT". */
.negative {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
    position: relative;
    isolation: isolate;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 30%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.20) 100%);
    backdrop-filter: url(#liquid-glass) blur(14px) saturate(180%) brightness(1.10);
    -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.10);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Same drifting sheen as .location-chip, but each negative offset on
   its own phase so the 3 chips don't shimmer in sync (looks more organic). */
.negative::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        125deg,
        transparent 25%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 75%
    );
    background-size: 250% 100%;
    background-position: 200% 0;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: glass-sheen 7s ease-in-out infinite;
}

.about-negatives .negative:nth-child(2)::before { animation-delay: -2.3s; }
.about-negatives .negative:nth-child(3)::before { animation-delay: -4.6s; }

@media (prefers-reduced-motion: reduce) {
    .negative::before { animation: none; }
}

.about-closer {
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 300;
    max-width: 760px;
}

.about-quote {
    display: block;
    margin-top: 18px;
    color: var(--color-text);
    font-weight: 500;
    font-size: 18px;
    font-style: italic;
    border-left: 3px solid var(--color-primary);
    padding-left: 16px;
}

/* =========================================================
   WHAT TO EXPECT — TIMELINE
   Vertical rail on the left, green fill grows on scroll.
   Each item has a sticky 01..08 number that holds while the
   reader is on that item's content.
   ========================================================= */
.timeline-section {
    padding: var(--section-pad) 0;
}

.timeline {
    position: relative;
    max-width: var(--container-max);
    margin: 56px auto 48px;
    padding: 0 var(--container-pad);
}

/* Vertical rail — subtle white "unlit" track, masked at top/bottom */
.timeline-rail {
    position: absolute;
    left: calc(var(--container-pad) + 19px);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 5%,
        rgba(255, 255, 255, 0.10) 95%,
        transparent 100%);
    overflow: hidden;
    pointer-events: none;
}

/* Inner fill — brand green, gradient at the top edge for a glow effect.
   Height is updated from script.js based on scroll progress. */
.timeline-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(to top,
        var(--color-primary) 0%,
        var(--color-primary) 10%,
        rgba(3, 215, 119, 0) 100%);
    will-change: height;
}

.timeline-item {
    display: flex;
    gap: 64px;
    padding: 90px 0;
    position: relative;
}

.timeline-item:first-child { padding-top: 36px; }
.timeline-item:last-child  { padding-bottom: 36px; }

/* Left "marker" column — sticks while you scroll through its content */
.timeline-marker {
    position: sticky;
    top: 140px;
    align-self: flex-start;
    flex-shrink: 0;
    width: 240px;
    display: flex;
    align-items: center;
    gap: 36px;
    z-index: 2;
}

/* The dot sits ON the rail (its center aligns with rail.left + 1) */
.timeline-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.timeline-dot::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 16px rgba(3, 215, 119, 0.85);
}

/* Big 01..08 number — the "label" for the item.
   Dimmed by default; turns white when its item enters the active scroll
   zone (.is-active toggled by JS via IntersectionObserver). */
.timeline-num {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.timeline-item.is-active .timeline-num {
    color: #FFFFFF;
    text-shadow: 0 0 24px rgba(255, 255, 255, 0.20);
}

.timeline-item.is-active .timeline-dot::after {
    box-shadow: 0 0 24px rgba(3, 215, 119, 1);
}

.timeline-body {
    flex: 1;
    padding-top: 6px;
    min-width: 0;
}

.timeline-body-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--color-text);
    letter-spacing: -0.015em;
}

.timeline-body p {
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
    max-width: 620px;
}

/* =========================================================
   BOLT PRESS-TO-REVEAL
   The whole zone starts covered by a dark "We got a surprise"
   pane. Clicking bursts brand-green confetti and uncovers the
   actual Bolt callout below. After reveal the inner state is
   permanent (no auto re-cover).
   ========================================================= */
.perk-reveal {
    position: relative;
    margin-top: 24px;
    min-height: 96px;
    /* Grid stacking — cover + revealed share the SAME cell. Parent height =
       max of the two. Cover stays in flow during reveal (no abrupt removal),
       so the transition reads as a smooth crossfade + growth instead of the
       previous "cut + jump + grow". */
    display: grid;
    grid-template-areas: "stack";
}

.perk-reveal > .perk-cover,
.perk-reveal > .perk-revealed,
.perk-reveal > .perk-confetti {
    grid-area: stack;
}

/* The cover — a button styled like a mystery card */
.perk-cover {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 28px;
    /* Transparent black + blur — same recipe as .partners-strip so the
       aurora behind reads through softly. */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(3, 215, 119, 0.45);
    border-radius: var(--radius-lg);
    color: #FFFFFF;
    font-family: var(--font-primary);
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.4s ease;
}

/* Repeating diagonal Bolt logos as the cover backdrop.
   Uses a custom SVG tile that bakes in transparent padding around the
   logo — that's the only way to get visible spacing between repeated
   background tiles (background-repeat tiles seamlessly otherwise).
   Tile is 220x160; logo sits at 110x60 inside, so ~55px gap per side. */
.perk-cover::before {
    content: "";
    position: absolute;
    /* Extend WAY past the box in all directions so that, after the -22°
       rotation, the rotated rectangle's corners still cover the parent's
       corners (rotation pulls the corners inward; -100% on each side
       guarantees full coverage). */
    top: -120%;
    left: -120%;
    right: -120%;
    bottom: -120%;
    background-image: url("assets/partners/bolt-tile.svg");
    background-repeat: repeat;
    background-size: 120px auto;
    transform: rotate(-22deg);
    opacity: 0.12;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    pointer-events: none;
    z-index: 0;
}

/* Make sure the cover content (spark / title / hint) sits above
   both the Bolt-logo pattern (::before) and the sheen (::after). */
.perk-cover > * {
    position: relative;
    z-index: 2;
}

.perk-cover:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: var(--color-primary);
    box-shadow: 0 0 40px rgba(3, 215, 119, 0.30);
}

.perk-cover:active { transform: translateY(-1px) scale(0.99); }

.perk-cover-spark {
    font-size: 22px;
    color: var(--color-primary);
    text-shadow: 0 0 14px rgba(3, 215, 119, 0.9);
    animation: spark-twinkle 1.6s ease-in-out infinite;
}

@keyframes spark-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: 1; }
    50%      { transform: scale(1.2) rotate(15deg); opacity: 0.55; }
}

.perk-cover-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.perk-cover-hint {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Subtle moving gleam across the cover surface, above the bolt-logo pattern */
.perk-cover::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(3, 215, 119, 0.10), transparent);
    transform: skewX(-15deg);
    animation: perk-cover-sheen 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes perk-cover-sheen {
    0%       { left: -100%; }
    60%, 100%{ left: 200%; }
}

/* Once .is-revealed is added by JS, the cover fades out *in place*.
   No more `position: absolute` swap (that's what produced the jump). */
.perk-reveal.is-revealed .perk-cover {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

/* Inner Bolt callout — hidden via opacity + translateY only. Because
   it shares the grid cell with the cover, having it visually invisible
   here means the parent stays sized by the cover until reveal. After
   reveal, the cover is opacity:0 (no visual contribution) so the cell
   visibly contains only the revealed callout. */
.perk-revealed {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.5s ease,
                transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.perk-reveal.is-revealed .perk-revealed {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.5s ease 0.15s,
                transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.15s;
}

/* Confetti container — only visible during the burst, particles dropped via JS */
.perk-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

.perk-confetti-piece {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 2px;
    will-change: transform, opacity;
    animation: confetti-fly 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes confetti-fly {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.3);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--end-x, 0), var(--end-y, 0)) rotate(var(--end-rot, 0deg)) scale(1);
        opacity: 0;
    }
}

/* The revealed Bolt callout uses the existing styling, just without the breathing
   animation (it pulled attention before; now the reveal itself does the work). */
/* Revealed callout — solid white border, no green tint, logo + text
   centered as a single column, no badge box around the logo. */
.expect-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
    padding: 32px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #FFFFFF;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.expect-perk p {
    text-align: center;
    flex: none;
    min-width: 0;
    max-width: 560px;
}

/* Soft directional gradient overlay for depth */
.expect-perk::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 50%, rgba(3, 215, 119, 0.22), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.expect-perk > * {
    position: relative;
    z-index: 1;
}

/* Bolt logo wrapper — no badge styling, just a transparent inline
   container holding the centered white logo. */
.expect-perk-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.expect-perk-logo {
    height: 36px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.expect-perk p {
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    margin: 0;
    flex: 1;
    min-width: 250px;
}

.expect-perk p strong {
    color: var(--color-primary);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .perk-cover-spark,
    .perk-cover::after { animation: none !important; }
    .perk-confetti-piece { display: none !important; }
}

/* Curators */
.curators-section {
    /* Top padding tightened — the Bolt perk above (in .about-section) sits
       right next to it. Bottom keeps default section padding. */
    padding: 24px 0 var(--section-pad);
}

/* Center the heading block above the cards.
   The targeted selector only hits the heading elements (eyebrow / title /
   lead) — the curator cards inside .curators-grid stay left-aligned. */
.curators-section > .container > .eyebrow,
.curators-section > .container > .section-title,
.curators-section > .container > .section-lead {
    text-align: center;
}

.curators-section > .container > .eyebrow {
    display: block;
}

.curators-section > .container > .section-lead {
    margin-left: auto;
    margin-right: auto;
}

.curators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.curator-card {
    background: var(--color-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 28px;
    align-items: start;
}

.curator-card:hover {
    border-color: var(--color-border-strong);
}

.curator-card:hover .curator-photo {
    transform: scale(1.03);
    border-color: var(--color-border-strong);
}

/* Photo frame — 1:1 portrait, rounded, with a subtle green border-glow on hover.
   The wrap absorbs the transform so the image itself can scale without
   breaking the grid layout. */
.curator-photo-wrap {
    width: 180px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.curator-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
    display: block;
}

.curator-info {
    min-width: 0; /* lets text wrap inside the grid cell */
}

/* LinkedIn quick-link — small pill in the top-right of each curator card.
   Visible on both desktop and mobile. Hover → brand green fill. */
.curator-linkedin {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
    z-index: 3;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.curator-linkedin svg {
    width: 16px;
    height: 16px;
    display: block;
}

.curator-linkedin:hover,
.curator-linkedin:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000000;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 20px rgba(3, 215, 119, 0.30);
    outline: none;
}

/* Curator company logo — small mark at the top of the info column.
   Instantly logo is forced to white via filter (its native SVG has
   black text invisible on dark bg). Promocrat keeps its natural
   colors so the brand-mark green triangle stays intact. */
.curator-logo {
    height: 22px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.curator-logo-img {
    max-height: 100%;
    width: auto;
    display: block;
}

.curator-logo-img--white {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* "Forbes 30 under 30" — quieter credential on its own line below the role */
.curator-role-extra {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.curator-name {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.curator-role {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 16px;
}

.curator-bio {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 300;
}

/* Sponsors / Powered by */
.sponsors-section {
    padding: var(--section-pad) 0;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
    align-items: stretch; /* keep all cards same height per grid row */
}

.sponsor-card {
    background: var(--color-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
    /* Equal-height cards with content centered vertically + logo centered horizontally. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 180px;
}

.sponsor-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
}

.sponsor-card-main {
    border-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(3, 215, 119, 0.12), var(--color-surface) 70%);
    box-shadow: 0 0 0 1px var(--color-primary), 0 30px 60px rgba(3, 215, 119, 0.18);
}

.sponsor-tier {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.sponsor-name {
    color: var(--color-text);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Logo cell — fixed height, logo image centered horizontally and vertically.
   Same dimensions across all sponsor cards (no special Main Sponsor size). */
.sponsor-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-logo img {
    max-height: 44px;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    display: block;
}

.sponsors-footnote {
    text-align: center;
    margin-top: 36px;
    color: var(--color-muted);
    font-size: 15px;
    font-weight: 300;
}

/* Sponsors dot nav — desktop hidden, mobile shows below the slider */
.sponsors-dots { display: none; }

.sponsors-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.sponsors-dot.is-active {
    background: var(--color-primary);
    transform: scale(1.35);
}

.sponsors-dot:hover {
    background: rgba(255, 255, 255, 0.5);
}

.sponsors-dot.is-active:hover {
    background: var(--color-primary);
}

/* =========================================================
   TICKETS
   ========================================================= */
.tickets-section {
    padding: var(--section-pad) 0;
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.ticket-card {
    background: var(--color-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease,
                background 0.35s ease,
                box-shadow 0.35s ease;
}

/* Featured "Full Pass" styling — applied PERMANENTLY only on touch
   devices (where hover doesn't exist as a discovery mechanism).
   On desktop, .ticket-card-feature looks identical to other cards
   by default; only the hover state below promotes whichever card the
   user is pointing at. */
@media (hover: none) {
    .ticket-card-feature {
        border-color: var(--color-primary);
        background: linear-gradient(180deg, rgba(3, 215, 119, 0.10), var(--color-surface) 60%);
        box-shadow: 0 0 0 1px var(--color-primary), 0 30px 60px rgba(3, 215, 119, 0.18);
    }
    .ticket-card-feature .btn-outline {
        background: var(--color-primary);
        color: #000000;
        border-color: var(--color-primary);
    }
}

/* On hover (desktop / mouse-capable devices), the hovered ticket card
   adopts the featured look: green border + gradient bg + green outer
   glow + rise. The outline CTA flips to filled green. No card is
   pre-promoted by default — discovery happens via the cursor. */
@media (hover: hover) {
    .ticket-card:hover {
        border-color: var(--color-primary);
        background: linear-gradient(180deg, rgba(3, 215, 119, 0.12), var(--color-surface) 60%);
        box-shadow: 0 0 0 1px var(--color-primary),
                    0 36px 70px rgba(3, 215, 119, 0.25);
        transform: translateY(-10px);
    }

    .ticket-card:hover .btn-outline {
        background: var(--color-primary);
        color: #000000;
        border-color: var(--color-primary);
    }

    /* If the button itself is hovered, keep the strong glow */
    .ticket-card:hover .btn-outline:hover {
        background: var(--color-primary-hover);
        box-shadow: var(--glow);
        transform: translateY(-1px);
    }
}

.ticket-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--color-primary);
    color: #000000;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ticket-tag-muted {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border-strong);
}

.ticket-name {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 12px;
}

.ticket-name-meta {
    color: var(--color-muted);
    font-weight: 400;
    font-size: 17px;
    margin-left: 4px;
}

.ticket-desc {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    margin-bottom: 24px;
    flex-grow: 1;
}

.ticket-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
    color: var(--color-primary);
}

.price-currency {
    font-size: 24px;
    font-weight: 500;
}

.price-value {
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: var(--glow);
}

.ticket-stock {
    color: var(--color-dim);
    font-size: 12px;
    margin-bottom: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.tickets-footnote {
    text-align: center;
    margin-top: 40px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 300;
}

/* =========================================================
   PARTNER SECTION
   ========================================================= */
.partner-section {
    padding: var(--section-pad) 0;
    background: linear-gradient(180deg, transparent, rgba(3, 215, 119, 0.04));
}

/* Partner section — centered heading + lead, perks laid out as a 2×2
   grid so 4 short benefits balance nicely under the centered text.
   Each perk keeps its arrow but the text inside the cell stays
   left-aligned so the arrows line up. */
.partner-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.partner-section .section-lead {
    margin-left: auto;
    margin-right: auto;
}

.partner-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 36px;
    margin: 36px auto 40px;
    max-width: 620px;
    text-align: left;
    list-style: none;
    padding: 0;
}

.partner-perks li {
    padding-left: 30px;
    position: relative;
    color: var(--color-muted);
    font-size: 15.5px;
    line-height: 1.5;
    font-weight: 300;
}

.partner-perks li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 18px;
}

/* Mobile: collapse to single column so each perk reads on its own line */
@media (max-width: 600px) {
    .partner-perks {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    padding: 80px 0 32px;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo-img {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 18px;
}

.footer-tag {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 6px;
    max-width: 320px;
}

.footer-meta {
    color: var(--color-dim);
    font-size: 13px;
    font-weight: 300;
}

.footer-heading {
    color: var(--color-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-bottom: 14px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a,
.footer-links li {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 300;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    color: var(--color-dim);
    font-size: 13px;
    font-weight: 300;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
    :root { --section-pad: 40px; }

    .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .tickets-grid { grid-template-columns: repeat(2, 1fr); }
    .sponsors-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Timeline — slightly tighter on tablets */
    .timeline-marker { width: 200px; gap: 28px; }
    .timeline-num { font-size: 48px; }
    .timeline-item { gap: 48px; padding: 70px 0; }
}

@media (max-width: 900px) {
    :root { --section-pad: 36px; }

    /* Mobile nav: hide nav links and the CTA pair entirely (CTAs stay in
       hero only on phones). Hamburger toggles a slide-down panel with
       just the anchor links. */
    .primary-nav { display: none; }
    .nav-cta     { display: none; } /* hidden on phones — only desktop shows the 2 buttons */
    .nav-toggle  { display: flex; }

    /* Lift the brand + hamburger above the full-screen overlay so the
       user can still see (and tap) them when the menu is open. */
    .site-header .brand,
    .site-header .nav-toggle {
        position: relative;
        z-index: 102;
    }

    /* Full-screen overlay panel: covers the entire viewport when open.
       Brand + toggle (z 102) stay on top. */
    .site-header .primary-nav {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh; /* respect mobile dynamic viewport (browser chrome) */
        background: rgba(0, 0, 0, 0.94);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        z-index: 99; /* below header bar so the X toggle stays clickable */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px 24px 40px;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.32s ease, visibility 0s linear 0.32s;
    }

    .site-header.is-open .primary-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition: opacity 0.32s ease, visibility 0s linear 0s;
    }

    .site-header.is-open .primary-nav .nav-list {
        flex-direction: column;
        gap: 4px;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 320px;
    }

    /* Stagger each link in from slightly below + fade */
    .site-header.is-open .primary-nav .nav-list li {
        opacity: 0;
        transform: translateY(14px);
        animation: mobile-nav-item-in 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
        width: 100%;
        text-align: center;
    }
    .site-header.is-open .primary-nav .nav-list li:nth-child(1) { animation-delay: 0.10s; }
    .site-header.is-open .primary-nav .nav-list li:nth-child(2) { animation-delay: 0.16s; }
    .site-header.is-open .primary-nav .nav-list li:nth-child(3) { animation-delay: 0.22s; }
    .site-header.is-open .primary-nav .nav-list li:nth-child(4) { animation-delay: 0.28s; }
    .site-header.is-open .primary-nav .nav-list li:nth-child(5) { animation-delay: 0.34s; }

    @keyframes mobile-nav-item-in {
        to { opacity: 1; transform: translateY(0); }
    }

    .site-header.is-open .primary-nav .nav-list a {
        display: inline-block;
        padding: 16px 24px;
        font-size: 26px;
        font-weight: 500;
        color: #FFFFFF;
        letter-spacing: -0.01em;
    }
    .site-header.is-open .primary-nav .nav-list a::after { display: none; }
    .site-header.is-open .primary-nav .nav-list a:hover {
        color: var(--color-primary);
    }

    /* Hamburger → X animation */
    .nav-toggle span {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.2s ease;
    }
    .site-header.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .site-header.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    .site-header.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ===== Tablet & smaller: hero collapses to 1-col, banner still visible ===== */
    .hero { padding-top: 130px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
    /* Modern countdown is unboxed — no padding override needed at tablet */

    .partners-grid { grid-template-columns: 1fr; gap: 32px; }
    .partners-cta { padding-right: 0; border-right: none; border-bottom: 1px solid var(--color-border); padding-bottom: 24px; text-align: center; }

    .curators-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MOBILE OPTIMIZATION (≤ 768px / phone-like)
   - Hide AI House banner in hero (saves vertical space, focuses on FOMO)
   - Tighter card padding and section spacing
   - Keep multi-column grids where they fit (rooms 2×2, expect 2-col)
   ========================================================= */
@media (max-width: 768px) {
    :root {
        --container-pad: 18px;
        --section-pad: 32px;
        --radius-md: 14px;
        --radius-lg: 20px;
    }

    /* ===== PERF: mobile GPU is much weaker. Reduce expensive effects. ===== */

    /* Aurora: lighter blur radius (smaller filter region = faster compositing).
       Keep blob-1 (primary emerald) + blob-4 (bright highlight) so the
       ShaderGradient look stays alive; drop blob-2 (dark blue, ~invisible
       on small dark bg anyway) and blob-3 (duplicate emerald). */
    .aurora-blob {
        filter: blur(60px); /* was 90px */
    }
    .aurora-blob-2,
    .aurora-blob-3 {
        display: none;
    }

    /* Grain: drop opacity slightly so it costs less compositing */
    .aurora-noise { opacity: 0.15; }
    .aurora-noise::after { opacity: 0.50; }

    /* backdrop-filter is the #1 GPU bottleneck on mobile. Cut blur radius in half. */
    .site-header,
    .partners-strip,
    .ticket-card,
    .curator-card,
    .sponsor-card,
    .expect-perk {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* ----- Hero ----- */
    .hero { padding-top: 120px; padding-bottom: 64px; }
    .hero-grid { gap: 28px; }
    .hero-visual { display: none; } /* hide the AI House banner on mobile */

    .hero-content { max-width: 100%; }
    .hero-title { font-size: clamp(44px, 11vw, 64px); line-height: 0.98; }
    .hero-tagline { font-size: 17px; margin-bottom: 24px; }

    .hero-attribution {
        gap: 10px;
        margin-bottom: 22px;
    }
    .location-chip {
        padding: 7px 14px;
        gap: 9px;
        border-radius: 14px;
    }
    .location-chip-text {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .location-chip-dot { width: 8px; height: 8px; }
    .location-chip-logo { height: 14px; }

    /* Compact countdown on phones — keep vertical dividers, tighter units */
    .hero-countdown {
        margin-bottom: 26px;
    }
    .hero-countdown-units { max-width: 100%; }
    .hero-countdown-unit { padding: 6px 4px; }
    .hero-countdown-value { font-size: 34px; }
    .hero-countdown-name {
        font-size: 9px;
        letter-spacing: 1.5px;
        margin-top: 8px;
    }
    .hero-countdown-label { font-size: 10px; letter-spacing: 0.5px; margin-bottom: 14px; }

    .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-actions .btn { width: 100%; padding: 14px 20px; }

    /* Hover-gradient CTA full-width on mobile, slightly shorter. */
    .hover-gradient-cta {
        width: 100%;
        min-width: 0;
        height: 54px;
    }
    .hover-gradient-cta-inner {
        font-size: 14.5px;
        padding: 0 20px;
    }

    /* ----- Section typography ----- */
    .section-title { font-size: clamp(30px, 7.5vw, 44px); line-height: 1.08; }
    .section-lead { font-size: 16px; }
    .eyebrow { font-size: 12px; letter-spacing: 1.6px; }

    /* ----- Cards: tighter padding everywhere ----- */
    .ticket-card { padding: 26px 22px; }
    .ticket-name { font-size: 22px; }
    .ticket-desc { font-size: 13.5px; line-height: 1.5; }
    .price-value { font-size: 46px; }
    .price-currency { font-size: 20px; }

    /* Timeline — collapse sticky marker, dot stays on rail, number above body */
    .timeline { margin: 32px auto; }
    .timeline-rail { left: calc(var(--container-pad) + 13px); }
    .timeline-item {
        flex-direction: column;
        gap: 14px;
        padding: 40px 0;
    }
    .timeline-marker {
        position: static;
        width: auto;
        gap: 14px;
        top: auto;
    }
    .timeline-dot { width: 28px; height: 28px; }
    .timeline-dot::after { width: 10px; height: 10px; }
    .timeline-num { font-size: 28px; }
    .timeline-body { padding-top: 0; padding-left: 42px; }
    .timeline-body-title { font-size: 22px; margin-bottom: 10px; }
    .timeline-body p { font-size: 14.5px; line-height: 1.6; }

    /* Tighten the section's bottom padding so the gap to the next
       section matches the top padding (visual symmetry). */
    .curators-section { padding-bottom: 24px; }

    /* Curator cards on mobile: PROFILE-CARD layout — round photo on top,
       centered company logo + name + role + bio underneath. Symmetric,
       polished, instantly readable on small screens. */
    .curator-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 30px 22px 28px;
    }

    /* Photo becomes a circular avatar */
    .curator-photo-wrap {
        width: 128px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow:
            0 10px 32px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .curator-photo {
        border-radius: 50%;
        border: 0;
    }

    /* Info column — flex stack, centered both axes */
    .curator-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    .curator-logo {
        height: 22px;
        margin: 0 0 4px;
    }

    .curator-name {
        font-size: 24px;
        margin: 0;
        line-height: 1.15;
    }

    .curator-role {
        font-size: 13.5px;
        margin: 0;
        line-height: 1.45;
    }

    /* Forbes credential — its own line, slightly tighter under the role */
    .curator-role-extra {
        display: block;
        margin-top: 2px;
        font-size: 12.5px;
    }

    .curator-bio {
        font-size: 14px;
        line-height: 1.55;
        max-width: 340px;
        margin-top: 6px;
    }

    .sponsor-card { padding: 26px 20px; }
    .sponsor-logo { height: 50px; }
    .sponsor-logo img { max-height: 38px; }

    .about-quote { font-size: 16px; padding-left: 14px; }
    .negative { font-size: 13px; padding: 7px 14px; }

    /* About title on mobile — keep it short and tight (target ~2 lines).
       Smaller font + text-wrap: balance lets the browser distribute the
       text evenly across rows instead of producing 4 ragged lines. */
    .about-section .section-title {
        font-size: clamp(22px, 6vw, 32px);
        line-height: 1.25;
        text-wrap: balance;
    }

    /* About negatives on mobile: first chip alone on row 1 (centered),
       chips 2 + 3 share row 2 side-by-side. Grid handles the layout
       cleanly — col-span 2 on the first child gives it the whole row
       without forcing it to 100% width. */
    .about-negatives {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: 10px 10px;
    }
    .about-negatives .negative:first-child {
        grid-column: span 2;
        justify-self: center;
    }

    /* ----- Tickets ----- */
    .tickets-grid { grid-template-columns: 1fr; gap: 18px; }

    /* =========================================================
       SPONSORS — sticky horizontal scroll on phones.
       The section becomes tall (260vh). .sponsors-content sticks to the
       top of the viewport for the duration of that scroll. JS reads the
       scroll progress (page.scrollY relative to section bounds) and
       translates .sponsors-grid horizontally by an equivalent amount.
       After the last card, the sticky releases and normal vertical scroll
       resumes to the next section.

       content-visibility:auto from the global rule must be turned off
       here — it breaks position:sticky in many browsers.
       ========================================================= */
    .sponsors-section {
        height: 260vh;
        content-visibility: visible;
    }

    .sponsors-content {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        /* space-between pushes the heading to the viewport top and the
           footnote to the bottom so the pinned content uses the full
           viewport height — no wasted air above heading or below footnote. */
        justify-content: space-between;
        overflow: hidden;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .sponsors-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        overflow: visible;
        scroll-snap-type: none;
        will-change: transform;
        max-width: none;
        /* Break out of container padding so the cards can travel past
           the viewport edges as they scroll. */
        margin: 28px calc(-1 * var(--container-pad)) 0;
        padding: 0 var(--container-pad);
        align-items: stretch;
    }
    .sponsors-grid::-webkit-scrollbar { display: none; }

    .sponsor-card {
        flex: 0 0 80vw;
        max-width: 80vw;
        scroll-snap-align: none;
        min-height: 200px;
        margin: 0;
    }

    .sponsors-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .sponsors-footnote {
        margin-top: 18px;
        font-size: 13.5px;
        padding: 0 8px;
    }

    /* ----- Partners strip ----- */
    .partners-strip { padding: 40px 0; }
    .partners-cta-title { font-size: 22px; }
    .partner-logo { height: 50px; min-width: 130px; padding: 0 18px; }
    .partner-logo img { max-height: 28px; }

    /* Phone-only tweaks — base styles already give centered column layout
       and a transparent badge wrapper; here we just shrink things down. */
    .expect-perk { padding: 24px 22px; gap: 14px; }
    .expect-perk-logo { height: 28px; }
    .expect-perk p { font-size: 14.5px; }

    /* Larger sparkle on the press-to-reveal cover */
    .perk-cover-spark { font-size: 32px; }

    /* ----- Footer ----- */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; margin-bottom: 36px; }
    .site-footer { padding: 56px 0 24px; }
}

/* =========================================================
   VERY SMALL PHONES (≤ 420px) — final squeeze
   ========================================================= */
@media (max-width: 420px) {
    .hero-title { font-size: 42px; }
    .section-title { font-size: 28px; }
    .hero-countdown-value { font-size: 28px; }
    .hero-countdown-name { font-size: 8px; }
    .location-chip-text { font-size: 10px; letter-spacing: 0.5px; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    .ticket-card,
    .curator-card,
    .sponsor-card { padding: 22px 18px; }

    /* Tighter timeline on tiny phones */
    .timeline-num { font-size: 24px; }
    .timeline-body-title { font-size: 20px; }
    .timeline-body p { font-size: 14px; }

    /* Tiny-phone curator profile card — slightly smaller avatar + tighter
       typography. Layout (column, centered) inherited from ≤768px rule. */
    .curator-card {
        gap: 12px;
        padding: 26px 18px 24px;
    }
    .curator-photo-wrap { width: 108px; }
    .curator-name { font-size: 21px; }
    .curator-bio { font-size: 13.5px; }
}

/* =========================================================
   FADE-IN ON SCROLL (lazy reveal)
   Gate is `html.js .fade-in` — only browsers with JS apply the
   initial hidden state. The .js flag is set by a sync inline
   script in <head>, so this runs BEFORE first paint (no flash).
   JS-disabled browsers skip the flag entirely → content renders
   normally as graceful degradation.
   ========================================================= */
html.js .fade-in {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease-out,
                transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

html.js .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion: skip reveal animation, content shows immediately */
@media (prefers-reduced-motion: reduce) {
    html.js .fade-in,
    html.js .fade-in.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}