/* =========================================================
   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);

    /* Sold-out red — used for ticket ribbons + disabled CTAs */
    --color-soldout: #E5484D;
    --color-soldout-soft: rgba(229, 72, 77, 0.12);

    /* 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,
.agenda-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 titles — softer treatment shared across the whole page:
   lighter weight (500), airier letter-spacing (+0.01em), tighter
   word-spacing (-0.08em) so the phrase reads dense, and a relaxed
   line-height for breathing room. `text-wrap: balance` keeps lines
   visually even at any width. */
.section-title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.20;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
    word-spacing: -0.08em;
    text-wrap: balance;
}

.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);
}

/* Disabled CTA for sold-out tickets — red-tinted, non-interactive.
   No hover state, no pointer; renders as a <button disabled>. */
.btn-soldout,
.btn-soldout:hover {
    background: var(--color-soldout-soft);
    color: var(--color-soldout);
    border-color: rgba(229, 72, 77, 0.45);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* =========================================================
   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: #FFFFFF;
    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;
}

/* 3D house illustration with a slow float + subtle tilt loop, sat over
   a pulsing brand-green radial glow. Replaces the old banner image. */
.hero-3d {
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-3d-glow {
    position: absolute;
    left: -10%;
    right: -10%;
    top: 4%;
    bottom: -14%;
    background: radial-gradient(closest-side,
        rgba(0, 0, 0, 0.95),
        rgba(0, 0, 0, 0.55) 35%,
        rgba(0, 0, 0, 0.18) 65%,
        rgba(0, 0, 0, 0) 80%);
    filter: blur(56px);
    z-index: 0;
    pointer-events: none;
    animation: hero-3d-glow-pulse 2.6s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

/* The scene = floating composition (house + all people). Drop-shadow and
   float animation live here so everything moves together as one unit. */
.hero-3d-scene {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: hero-3d-float 2.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 35px 45px rgba(0, 0, 0, 0.55));
    will-change: transform;
    z-index: 1;
}

.hero-3d-house {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* People pop in one by one after page load, staggered. Positioned as a
   percentage of the scene so they scale with the house. Each instance
   sets its own top/left/width + animation-delay below. */
.hero-3d-person {
    position: absolute;
    object-fit: contain;
    opacity: 0;
    transform: translateY(18px) scale(0.82);
    animation: hero-3d-person-in 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
    will-change: opacity, transform;
}

/* Per-person positions — left/top/width as % of the .hero-3d-scene box.
   Matched to where each figure sits in the source render. */
.hero-3d-person-1 { left: 75%; bottom: 19%; width: 13%; animation-delay: 0.3s; }
.hero-3d-person-2 { left: 82%; bottom: 19%; width: 13%; animation-delay: 0.6s; }
.hero-3d-person-3 { left: 32%; top: 67%;    width: 13%; animation-delay: 0.9s; }
.hero-3d-person-4 { left: 20%; bottom: 18%; width: 13%; animation-delay: 1.2s; }
.hero-3d-person-5 { left: 43%; bottom: 43%; width: 12%; animation-delay: 1.5s; }
.hero-3d-person-6 { left: 50%; top: 42%;    width: 15%; animation-delay: 1.8s; }

@keyframes hero-3d-float {
    0%   { transform: translateY(-10px) rotate(-2deg); }
    100% { transform: translateY(10px)  rotate(2deg);  }
}

@keyframes hero-3d-glow-pulse {
    0%   { opacity: 0.45; transform: scale(0.85); }
    100% { opacity: 1;    transform: scale(1.18); }
}

@keyframes hero-3d-person-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (hover: hover) {
    .hero-3d:hover .hero-3d-glow {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-3d-scene,
    .hero-3d-glow {
        animation: none;
    }
    .hero-3d-person {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* =========================================================
   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;
}

/* =========================================================
   HERO COUNTDOWN — ENDED STATE (variant B)
   Once the target passes, the frozen 00 numbers stay as a
   blurred, dimmed backdrop while a crisp "Event ended"
   message sits on top. Toggled by the `.is-ended` class
   (hardcoded in markup + re-applied by script.js at expiry).
   ========================================================= */
.hero-countdown.is-ended {
    display: grid;
    justify-items: start;
}

/* Drop the live "doors open in" label + pulsing dot once ended */
.hero-countdown.is-ended .hero-countdown-label {
    display: none;
}

/* Stack frozen units + message in the same grid cell so the block
   sizes to the taller of the two and never overlaps its neighbours */
.hero-countdown.is-ended .hero-countdown-units,
.hero-countdown.is-ended .hero-countdown-ended {
    grid-area: 1 / 1;
}

/* Frozen numbers become a soft backdrop */
.hero-countdown.is-ended .hero-countdown-units {
    filter: blur(7px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
    width: 100%;
}

/* Crisp message on top — hidden until .is-ended */
.hero-countdown-ended {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    align-self: center;
}

.hero-countdown.is-ended .hero-countdown-ended {
    display: flex;
}

.hero-countdown-ended-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.hero-countdown-ended-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-soldout);
    box-shadow: 0 0 10px rgba(229, 72, 77, 0.7);
    flex-shrink: 0;
}

.hero-countdown-ended-title {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.hero-countdown-ended-sub {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 1.5;
}

/* =========================================================
   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: 880px;
    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;
    opacity: 0.25;
    transition: opacity 0.4s ease;
}

.timeline-item.is-active .timeline-body {
    opacity: 1;
}

.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;
}

/* The 11 speaker cards live in a horizontal scroll-snap carousel on every
   viewport — swipe / drag / arrows / dots. */
/* ---------- PEOPLE IN THE ROOM ----------
   Desktop: rows of four horizontal cards — photo on the left, and on the right
   the name (hero), then the title, then the company logo under it. Flex + center
   so a short final row (e.g. the last 3) sits centered, not left-aligned.
   Mobile collapses to a one-card drag slider (see the max-width: 768px block). */
.room-people {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 44px;
}

/* ---------- SPEAKER CARD (photo left · name / title / logo right) ---------- */
.speaker-card {
    position: relative;
    flex: 0 0 calc((100% - 48px) / 4); /* exactly 4 per row (3 × 16px gaps) */
    min-height: 172px;                 /* every card the same size, regardless of title length */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: stretch;
    padding: 20px 20px 18px;
    background: var(--color-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.speaker-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.speaker-photo-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.speaker-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.speaker-card:hover .speaker-photo { transform: scale(1.05); }

/* Right column — name first and biggest, then title, then logo pinned to the
   bottom of the card (flex column + margin-top:auto on the logo). */
.speaker-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.speaker-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    padding-right: 26px; /* clear the LinkedIn badge */
}
.speaker-name .name-link {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.25s ease;
}
.speaker-name .name-link:hover,
.speaker-name .name-link:focus-visible { color: var(--color-primary); outline: none; }

.speaker-position {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Company logo — sits under the title. One uniform size for every brand:
   normalized by height (logos have very different aspect ratios), with
   max-width: 100% so the wide wordmarks can't overflow the card. */
.speaker-logo {
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: auto; /* pin the logo to the bottom of the card */
}

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

/* A few compact marks (RBL, Politehnica, Bridging Gaps) read small at the
   shared height — bump just these up. The logo row above is sized to fit them
   so every card stays the same height. */
.speaker-logo-img--lg {
    max-height: 40px;
}

.speaker-linkedin {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    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: 8px;
    color: rgba(255, 255, 255, 0.7);
    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;
}
.speaker-linkedin svg { width: 14px; height: 14px; display: block; }
.speaker-linkedin:hover,
.speaker-linkedin:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #000000;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 6px 18px rgba(3, 215, 119, 0.30);
    outline: none;
}

/* ---------- CURATORS — kept as-is, in their own row below the speakers ---------- */
.room-curators-section { padding: 4px 0 var(--section-pad); }
.curators-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 940px;
    margin: 0 auto;
}

/* Carousel controls — arrows + dots. Slider lives on mobile only, so these
   are hidden on desktop and switched back on inside the phone media query. */
.room-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}
.room-dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 60%;
}
.carousel-arrow {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    border: 0;
    color: var(--color-text);
    cursor: pointer;

    /* Apple Liquid Glass — inner corner-bright tint + refraction + rim light */
    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.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 8px 22px rgba(0, 0, 0, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.carousel-arrow svg { width: 18px; height: 18px; display: block; position: relative; z-index: 1; }
.carousel-arrow:hover {
    transform: translateY(-1px);
    color: var(--color-primary);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(3, 215, 119, 0.40),
        0 12px 26px rgba(0, 0, 0, 0.36),
        0 2px 6px rgba(0, 0, 0, 0.20);
}
.carousel-arrow[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.room-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;
}

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

.room-dot:hover { background: rgba(255, 255, 255, 0.5); }
.room-dot.is-active:hover { background: var(--color-primary); }

.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;
}

/* "Curated by" badge — pinned to the top-left corner of each curator card. */
.curator-card {
    position: relative;
}

.curator-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #000000;
    background: var(--color-primary);
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(3, 215, 119, 0.30);
}

/* "Speaker" badge on attendee cards — subtle glass pill (not a loud filled
   color) so it reads as a quiet label, distinct from the solid green
   "Curated by" badge on the two curators. */
.attendee-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Name → LinkedIn links. Inherit the surrounding type; only the color
   shifts to brand green on hover/focus to signal it's clickable. */
.name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.name-link:hover,
.name-link:focus-visible {
    color: var(--color-primary);
    outline: none;
}

/* ---------- ATTENDEE CARDS ---------- */
.attendee-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px 24px;
    background: var(--color-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

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

.attendee-card:hover .attendee-photo {
    transform: scale(1.04);
}

/* Circular headshot */
.attendee-photo-wrap {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    margin-bottom: 16px;
}

.attendee-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* No background — logos render white directly on the dark card, same as
   the curator logos (Instantly / promocrat). Fixed container height keeps
   every logo the same height regardless of its native colors/ratio. */
.attendee-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-bottom: 16px;
}

.attendee-logo-img {
    max-height: 22px;
    max-width: 100%;       /* never overflow the card on narrow screens */
    width: auto;
    object-fit: contain;
    display: block;
    /* Flip every logo to solid white so they read on the dark surface */
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.attendee-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.attendee-role {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* LinkedIn pill — top-right, mirrors the curator card treatment */
.attendee-linkedin {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    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: 9px;
    color: rgba(255, 255, 255, 0.7);
    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;
}

.attendee-linkedin svg {
    width: 15px;
    height: 15px;
    display: block;
}

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

/* 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;
}

/* "Recommended" diagonal ribbon — pinned to the top-right corner of the
   featured Full Pass card. The card is clipped to its border-radius so
   the ribbon's overflow is sliced cleanly along the rounded corner. */
.ticket-card-feature {
    overflow: hidden;
}

.ticket-ribbon {
    position: absolute;
    top: 28px;
    right: -37px;
    width: 150px;
    padding: 3px 0;
    background: var(--color-primary);
    color: #000000;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: center center;
    box-shadow: 0 6px 16px rgba(3, 215, 119, 0.35);
    pointer-events: none;
    z-index: 2;
}

/* Red "Sold Out" ribbon — same diagonal geometry as .ticket-ribbon,
   recolored. Pinned to sold-out cards (Full Pass, Day 2, Day 1). */
.ticket-ribbon-soldout {
    background: var(--color-soldout);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(229, 72, 77, 0.40);
}

/* Green "Available" ribbon — marks Evening Mixer as the only buyable pass.
   Inherits the green base, kept explicit for intent. */
.ticket-ribbon-available {
    background: var(--color-primary);
    color: #000000;
    box-shadow: 0 6px 16px rgba(3, 215, 119, 0.35);
}

/* Sold-out card — content dimmed/desaturated so the red ribbon and the
   "Sold Out" CTA stay vivid. overflow:hidden clips the diagonal ribbon. */
.ticket-card-soldout {
    overflow: hidden;
}

.ticket-card-soldout .ticket-tag,
.ticket-card-soldout .ticket-name,
.ticket-card-soldout .ticket-desc,
.ticket-card-soldout .ticket-price,
.ticket-card-soldout .price-with-vat {
    opacity: 0.45;
    filter: grayscale(0.5);
}

/* "Sold out" stock line stays legible + red for reinforcement. */
.ticket-card-soldout .ticket-stock {
    color: var(--color-soldout);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Available card (Evening Mixer) — permanently promoted look so the only
   buyable pass stands out, regardless of hover/touch. */
.ticket-card-available {
    overflow: hidden;
    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);
}

/* 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:not(.ticket-card-soldout):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:not(.ticket-card-soldout):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:not(.ticket-card-soldout):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: 4px;
    color: var(--color-primary);
}

/* Wraps currency + value so they stay tight against each other while the
   "ex. VAT" note can hang as a superscript at the top-right. */
.price-main {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.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);
}

/* "ex. VAT" — small superscript label hanging at the top-right of the
   price, no box. align-self:flex-start lifts it to the price's cap height. */
.price-vat-note {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Gross price below — small, in brand green */
.price-with-vat {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 12px;
    letter-spacing: 0.2px;
}

.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;
}

/* =========================================================
   AGENDA SECTION — Day 1 / Day 2 switcher + timeline
   ========================================================= */
.agenda-section {
    padding: var(--section-pad) 0;
}

/* ---------- Day switcher ---------- */
.agenda-switch {
    display: inline-flex;
    gap: 6px;
    margin: 36px auto 0;
    padding: 6px;
    border-radius: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    /* Center the inline-flex pill group */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.agenda-switch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 130px;
    padding: 12px 28px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.agenda-switch-day {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.agenda-switch-date {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agenda-switch-btn:hover {
    color: var(--color-text);
}

.agenda-switch-btn.is-active {
    background: var(--color-primary);
    color: #000000;
    box-shadow: 0 6px 18px rgba(3, 215, 119, 0.30);
}

.agenda-switch-btn.is-active .agenda-switch-date {
    opacity: 0.85;
}

/* ---------- Day panel ---------- */
.agenda-day {
    max-width: 760px;
    margin: 44px auto 0;
}

.agenda-day[hidden] {
    display: none;
}

/* Fade+rise when a day becomes active (JS removes [hidden] then the
   panel animates in). */
.agenda-day.is-active {
    animation: agenda-day-in 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes agenda-day-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Day theme header ---------- */
.agenda-day-head {
    text-align: center;
    padding: 24px 28px;
    margin-bottom: 36px;
    border-radius: 18px;
    background:
        linear-gradient(135deg,
            rgba(3, 215, 119, 0.10) 0%,
            rgba(3, 190, 215, 0.06) 100%);
    border: 1px solid var(--color-border-strong);
}

.agenda-theme-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.agenda-theme-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.agenda-theme-desc {
    color: var(--color-muted);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Timeline list ---------- */
.agenda-list {
    position: relative;
}

.agenda-item {
    position: relative;
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 24px;
    padding: 0 0 28px 0;
}

/* Vertical rail: a line down the left edge of the content column, with a
   dot at each item. Drawn on .agenda-content so it spans the full height. */
.agenda-content {
    position: relative;
    padding: 0 0 4px 28px;
    border-left: 2px solid var(--color-border);
}

.agenda-content::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(3, 215, 119, 0.15);
}

/* Last item: stop the rail line right at the dot so it doesn't dangle. */
.agenda-list > .agenda-item:last-child .agenda-content,
.agenda-parallel:last-child .agenda-item .agenda-content {
    border-left-color: transparent;
}

.agenda-time {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.2px;
    padding-top: 1px;
    white-space: nowrap;
}

.agenda-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.agenda-desc {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    margin: 8px 0 0;
}

/* Named speaker(s) byline — green, light */
.agenda-byline {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    margin: 8px 0 0;
}

.agenda-byline-org {
    color: var(--color-muted);
    font-weight: 400;
}

/* Rich speaker chip — small round photo + name + company logo */
.agenda-speaker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 5px 14px 5px 5px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.agenda-speaker-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    flex-shrink: 0;
}

.agenda-speaker-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.agenda-speaker-logo {
    display: inline-flex;
    align-items: center;
    height: 15px;
    padding-left: 10px;
    border-left: 1px solid var(--color-border);
}

.agenda-speaker-logo img {
    max-height: 15px;
    max-width: 88px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Wrapping row of compact speaker chips for panels */
.agenda-speakers-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.agenda-speaker--mini {
    margin-top: 0;
    padding: 4px 14px 4px 4px;
    gap: 8px;
}
.agenda-speaker--mini .agenda-speaker-photo { width: 28px; height: 28px; }
.agenda-speaker--mini .agenda-speaker-name { font-size: 13px; }

/* Logos with dark/black native colors → flip to white for the dark chip */
.agenda-speaker-logo img.is-white {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* Speaker role chips */
.agenda-speakers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.agenda-speakers li {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}

/* Small tag above a title (Workshop #1, Experience Partner moment) */
.agenda-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-light-blue);
    margin-bottom: 8px;
}

/* ---------- Break / light rows ---------- */
.agenda-item--break .agenda-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dim);
}

.agenda-item--break .agenda-content::before {
    background: transparent;
    border: 2px solid var(--color-border);
    box-shadow: none;
    left: -6px;
}

.agenda-item--break .agenda-time {
    color: var(--color-dim);
    font-weight: 500;
}

/* ---------- Feature rows (BBQ, Party) ---------- */
.agenda-item--feature .agenda-content {
    border-left-color: var(--color-primary);
}

.agenda-item--feature .agenda-title {
    font-size: 19px;
}

/* ---------- Parallel sessions ---------- */
.agenda-parallel {
    position: relative;
    padding: 0 0 28px 0;
}

.agenda-parallel-label {
    display: inline-block;
    margin: 0 0 14px 112px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(3, 215, 119, 0.4);
}

.agenda-parallel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Inside the parallel grid, items become self-contained cards (no shared
   time column — the time sits inside each card). */
.agenda-parallel-grid .agenda-item--parallel {
    display: block;
    padding: 20px;
    border-radius: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.agenda-parallel-grid .agenda-item--parallel .agenda-time {
    text-align: left;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.agenda-parallel-grid .agenda-item--parallel .agenda-content {
    padding: 0;
    border-left: 0;
}

.agenda-parallel-grid .agenda-item--parallel .agenda-content::before {
    display: none;
}

/* Sticky wrapper is a no-op on desktop (plain block); dots hidden. */
.agenda-parallel-dots { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
    .agenda-switch-btn {
        min-width: 110px;
        padding: 10px 18px;
    }

    .agenda-item {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }

    .agenda-time {
        font-size: 12px;
    }

    .agenda-content {
        padding-left: 20px;
    }

    .agenda-day-head {
        padding: 20px;
    }

    /* ===== Parallel events → sticky horizontal scroll reel on phones =====
       The .agenda-parallel block grows tall, its inner .agenda-parallel-sticky
       pins to the viewport, and JS slides the two cards horizontally so you
       see one, then scroll reveals the other from the right. */
    .agenda-section { content-visibility: visible; } /* keep sticky working */

    .agenda-parallel {
        height: 150vh;
        padding: 0;
    }

    /* On phones the two parallel events simply stack, one below the other. */
    .agenda-parallel {
        height: auto;
        padding: 0 0 28px;
    }

    .agenda-parallel-sticky {
        position: static;
        display: block;
        height: auto;
        overflow: visible;
        padding: 0;
        text-align: center;       /* centers the inline-block label */
    }

    .agenda-parallel-label {
        margin: 0 0 16px;
    }

    .agenda-parallel-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .agenda-parallel-grid .agenda-item--parallel {
        max-width: none;
    }

    .agenda-parallel-dots {
        display: none;            /* not needed when stacked */
    }
}

@media (prefers-reduced-motion: reduce) {
    .agenda-day.is-active { animation: none; }
}

/* =========================================================
   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;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-copy { margin: 0; }

/* "Website by Zup!" credit — liquid-glass pill that expands on hover to
   reveal the email. Click anywhere on the chip opens a mailto. */
.zup-credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--color-text);
    perspective: 400px;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.2px;
    text-decoration: none;
    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);
    transition: box-shadow 0.4s ease, color 0.4s ease;
}

/* Zup bolt mark — PNG icon forced to white (same trick used for the
   Bolt logo elsewhere on the site). Flips 3D around the Y axis on a
   continuous loop — coin-spin effect (perspective on the parent gives
   the depth). */
.zup-credit-mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: zup-bolt-spin 3.2s linear infinite;
    will-change: transform;
}

@keyframes zup-bolt-spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .zup-credit-mark { animation: none; }
}

.zup-credit-label {
    white-space: nowrap;
}

/* The email starts collapsed (max-width 0) and slides open on hover. */
.zup-credit-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-primary);
    transition: max-width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.3s ease 0.05s;
}

.zup-credit-arrow {
    display: inline-block;
    transform: translateX(-4px);
    transition: transform 0.4s ease;
}

.zup-credit:hover {
    color: #FFFFFF;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(3, 215, 119, 0.40),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 0 32px rgba(3, 215, 119, 0.35);
}

.zup-credit:hover .zup-credit-email {
    max-width: 220px;
    opacity: 1;
}

.zup-credit:hover .zup-credit-arrow {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .zup-credit-email,
    .zup-credit-arrow,
    .zup-credit { transition: none; }
}

/* =========================================================
   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; }
    .site-header.is-open .primary-nav .nav-list li:nth-child(6) { animation-delay: 0.40s; }

    @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; }

}

/* =========================================================
   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(22px, 6vw, 32px); line-height: 1.25; }
    .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 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;
    }

    /* ----- PEOPLE IN THE ROOM — one-card drag slider on phones.
       Desktop is a 4-up grid; here it collapses into a horizontal scroll-snap
       reel of the same photo-left / name → title → logo cards. ----- */
    .room-people {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 30px calc(-1 * var(--container-pad)) 0;
        padding: 12px var(--container-pad);
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    }
    .room-people:active { cursor: grabbing; }
    .room-people::-webkit-scrollbar { display: none; }

    .speaker-card {
        flex: 0 0 80vw;
        max-width: 360px;
        min-height: 0;
        scroll-snap-align: center;
        gap: 16px;
        padding: 22px 20px 20px;
        transform: none;
    }
    .speaker-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--color-border);
    }
    .speaker-photo-wrap { width: 84px; height: 84px; }
    /* Wide cards on phones — show the full name + title, no line clamp */
    .speaker-name {
        font-size: 17px;
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
    .speaker-position {
        font-size: 13px;
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }
    .speaker-logo { height: 44px; }
    .speaker-logo-img { max-height: 30px; max-width: 100%; }
    .speaker-logo-img--lg { max-height: 42px; }

    .room-controls { display: flex; }
    .carousel-arrow { width: 36px; height: 36px; }
    .room-dots { max-width: 50%; }
    .curators-row { grid-template-columns: 1fr; }

    /* ----- 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;
    }
}

/* =========================================================
   PARTNER MODAL — choice screen + form
   Liquid Glass card on a blurred backdrop. Two stacked
   panels (choice / form), JS toggles which is visible.
   ========================================================= */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.modal.is-open {
    display: flex;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    animation: modal-fade-in 220ms ease-out;
}

.modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    padding: 40px 36px 36px;
    border-radius: 24px;
    color: var(--color-text);

    background:
        linear-gradient(160deg,
            rgba(8, 47, 47, 0.92) 0%,
            rgba(4, 39, 38, 0.92) 100%);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 6px 18px rgba(0, 0, 0, 0.35);

    animation: modal-pop-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.modal-card[hidden] {
    display: none;
}

/* Ticket alert — narrower, centered single-card variant. Reuses the
   base .modal-card glass styling; only sizing + alignment differ. */
.modal-card--alert {
    max-width: 440px;
    text-align: center;
}

.modal-card--alert .modal-lead {
    margin-left: auto;
    margin-right: auto;
}

/* Emphasize the only available pass in brand green. */
.modal-card--alert strong {
    color: var(--color-primary);
    font-weight: 600;
}

.modal-card--alert .btn {
    margin-top: 22px;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-muted);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.20);
}

.modal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: var(--color-dim);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 14px;
    transition: color 0.18s ease;
}

.modal-back:hover {
    color: var(--color-primary);
}

.modal-eyebrow {
    margin: 0 0 10px;
}

.modal-title {
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.modal-lead {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 26px;
}

/* ---------- CHOICE SCREEN ---------- */
.modal-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .modal-choices { grid-template-columns: 1fr; }
}

.modal-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.modal-choice:hover {
    transform: translateY(-2px);
    background: rgba(3, 215, 119, 0.06);
    border-color: rgba(3, 215, 119, 0.35);
}

.modal-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(3, 215, 119, 0.10);
    color: var(--color-primary);
    margin-bottom: 4px;
}

.modal-choice-title {
    font-size: 16px;
    font-weight: 600;
}

.modal-choice-text {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5;
}

.modal-choice-cta {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

/* ---------- FORM ---------- */
.partner-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

/* Honeypot — absolutely positioned out of sight. Don't use display:none
   (some bots skip those); off-screen + 0 opacity is the standard trick. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

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

/* Two-column row for Nume / Prenume — stacks on narrow screens.
   Mirrors the Aceternity SignupFormDemo layout. */
.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

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

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.2px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.form-input::placeholder {
    color: var(--color-dim);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(3, 215, 119, 0.18);
}

.form-textarea {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
}

.form-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.30);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

/* Liquid Glass submit button — same recipe as .location-chip:
   SVG refraction filter + multi-layer rim lighting + inner corner-bright
   gradient + soft floating shadow. Animated sheen drifts across. */
.btn-glass {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    isolation: isolate;
    cursor: pointer;
    overflow: hidden;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            rgba(255, 255, 255, 0.04) 70%,
            rgba(255, 255, 255, 0.18) 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.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 10px 30px rgba(0, 0, 0, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.18);

    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Animated sheen — diagonal highlight drifts across */
.btn-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        125deg,
        transparent 25%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 75%
    );
    mix-blend-mode: screen;
    background-size: 200% 200%;
    animation: form-submit-sheen 6s ease-in-out infinite;
}

@keyframes form-submit-sheen {
    0%, 100% { background-position: 200% 200%; }
    50%      { background-position: 0% 0%; }
}

.btn-glass:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(3, 215, 119, 0.45),
        0 14px 34px rgba(0, 0, 0, 0.38),
        0 2px 6px rgba(0, 0, 0, 0.20);
}

.btn-glass[disabled] {
    opacity: 0.7;
    cursor: progress;
    transform: none;
}

.form-submit-label {
    position: relative;
    z-index: 1;
}

.form-submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #fff;
    margin-left: 10px;
    vertical-align: middle;
    animation: form-spin 0.8s linear infinite;
}

.btn-glass.is-loading .form-submit-spinner {
    display: inline-block;
}

@keyframes form-spin {
    to { transform: rotate(360deg); }
}

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

/* Auto-width modifier — for inline glass buttons like the success Close.
   Centers itself in its container. */
.btn-glass--auto {
    width: auto;
    min-width: 140px;
    display: inline-block;
    padding: 0 36px;
    margin: 0 auto;
}

/* ---------- SUCCESS STATE: hide form scaffolding ----------
   When the modal-card has .is-success-state, the eyebrow, title, back
   button AND the form itself disappear — only the centered success
   block remains. We can't rely on the `hidden` HTML attribute for the
   form because .partner-form sets display:flex, which wins over [hidden]. */
.modal-card--form.is-success-state .modal-eyebrow,
.modal-card--form.is-success-state .modal-title,
.modal-card--form.is-success-state .modal-back,
.modal-card--form.is-success-state .partner-form {
    display: none;
}

/* ---------- CONFETTI HOST — sits over the whole form card,
   particles spawned by JS, doesn't block clicks. */
.confetti-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

/* ---------- SUCCESS ---------- */
.form-success {
    text-align: center;
    padding: 14px 0 6px;
}

.form-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(3, 215, 119, 0.14);
    color: var(--color-primary);
    margin: 0 auto 18px;
}

.form-success-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.form-success-text {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 24px;
}

/* Minimal variant — no icon, just a bold "Sent!" headline and a Close button.
   Vertically generous so it feels intentional, not like a stub state. */
.form-success--minimal {
    padding: 48px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

/* `display: flex` above wins over the browser default `[hidden] { display: none }`,
   so we explicitly re-assert the hidden state here. */
.form-success--minimal[hidden] {
    display: none;
}

.form-success--minimal .form-success-title {
    font-size: clamp(40px, 7vw, 56px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    background: linear-gradient(135deg,
        var(--color-primary) 0%,
        var(--color-light-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary); /* fallback */
}

/* ---------- ANIMATIONS ---------- */
@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .modal-card,
    .form-submit-spinner {
        animation: none !important;
    }
}

/* ---------- MOBILE TWEAKS ---------- */
@media (max-width: 520px) {
    .modal {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }
    .modal-card {
        padding: 32px 22px 26px;
        border-radius: 20px;
    }
    .modal-title {
        font-size: 22px;
    }
}

/* Lock background scroll while modal is open. JS adds .modal-open on <html>. */
html.modal-open,
html.modal-open body {
    overflow: hidden;
}