/* =====================================================================
   IMERSÃO DIRECT RESPONSE 2026 — styles
   Design system: "Dark Gold Luxury"
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* color — base */
  --black:#0A0A0B;
  --surface:#141416;
  --surface-2:#1C1C20;
  --surface-3:#232329;
  /* gold */
  --gold:#F4B324;
  --gold-400:#FFC93C;
  --gold-300:#FFDD87;
  --gold-600:#B8791A;
  --grad-gold:linear-gradient(100deg,#FFDD87 0%,#F4B324 48%,#B8791A 100%);
  --grad-gold-text:linear-gradient(100deg,#FFE7A6 0%,#F4B324 55%,#D9962A 100%);
  /* text */
  --text-hi:#F5F5F4;
  --text:#C9C9CE;
  --text-muted:#8A8A92;
  /* lines */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --line-gold:rgba(244,179,36,.35);
  /* elevation */
  --shadow-md:0 2px 4px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.55);
  --glow-gold:0 0 60px rgba(244,179,36,.28);
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-10:64px; --sp-12:96px; --sp-14:128px;
  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  /* layout */
  --container:1200px;
  --header-h:74px;
  /* type */
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* easing */
  --ease-out:cubic-bezier(.22,1,.32,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-emph:cubic-bezier(.2,0,0,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:var(--font-body);font-size:clamp(1rem,.97rem+.15vw,1.0625rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);color:var(--text-hi);line-height:1.08;margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px}
::selection{background:rgba(244,179,36,.3);color:#fff}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:clamp(64px,9vw,120px)}
.gold{background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:none}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* section heads */
.kicker{font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.section-head{max-width:680px;margin-bottom:clamp(40px,6vw,64px)}
.section-title{font-size:clamp(2rem,1.4rem+2.6vw,3.25rem)}
.section-sub{margin-top:18px;color:var(--text-muted);font-size:1.05rem}
.muted-title{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted)}

/* ---------- Buttons ---------- */
.btn{
  --btn-h:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  height:var(--btn-h);padding:0 26px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:.01em;
  cursor:pointer;border:1px solid transparent;transition:transform .18s cubic-bezier(0,0,.2,1),box-shadow .25s,background .2s,color .2s;
  white-space:nowrap;
}
.btn .ico{width:1.15em;height:1.15em}
.btn-gold{background:var(--grad-gold);color:#1a1204;box-shadow:0 6px 20px rgba(244,179,36,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(244,179,36,.42),var(--glow-gold)}
.btn-gold:active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text-hi);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line-gold);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--gold);border-color:var(--line-gold)}
.btn-outline:hover{background:rgba(244,179,36,.08);transform:translateY(-2px)}
.btn-lg{--btn-h:60px;padding:0 34px;font-size:1.0625rem}
.btn-sm{--btn-h:44px;padding:0 20px;font-size:.9375rem}
.btn-block{display:flex;width:100%}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(10,10,11,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;width:100%}
.brand img{height:38px;width:auto}
.nav-desktop{display:flex;gap:30px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-desktop a{color:var(--text);position:relative;padding:4px 0}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--grad-gold);transition:width .25s}
.nav-desktop a:hover{color:var(--text-hi)}
.nav-desktop a:hover::after{width:100%}
.nav-cta{margin-left:4px}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;margin-left:auto;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--text-hi);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{position:fixed;inset:var(--header-h) 0 auto 0;z-index:99;background:rgba(10,10,11,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:24px clamp(20px,5vw,40px) 32px;display:flex;flex-direction:column;gap:8px;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.mobile-menu.open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;transition:opacity .25s,transform .25s,visibility 0s}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{padding:14px 4px;font-size:1.15rem;font-weight:600;color:var(--text-hi);border-bottom:1px solid var(--line-2)}
.mobile-menu .btn{margin-top:16px}

/* ---------- Hero (interactive polygon network + 3D monogram) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:var(--header-h);background:radial-gradient(120% 90% at 66% 40%,#111015 0%,var(--black) 60%)}
.hero-net{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;touch-action:none}
.hero-orb{position:absolute;z-index:1;top:48%;left:68%;width:min(48vw,540px);pointer-events:none;animation:orb-float 7s ease-in-out infinite;will-change:transform}
.hero-orb img{width:100%;height:auto;filter:drop-shadow(0 0 55px rgba(244,179,36,.4))}
@keyframes orb-float{0%,100%{transform:translate(-50%,calc(-50% - 9px))}50%{transform:translate(-50%,calc(-50% + 9px))}}
.hero-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,10,11,.93) 0%,rgba(10,10,11,.74) 40%,rgba(10,10,11,.22) 66%,rgba(10,10,11,.5) 100%),
  linear-gradient(0deg,var(--black) 1%,transparent 42%)}
.hero-spot{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(244,179,36,.10),transparent 68%)}
.hero:hover .hero-spot{opacity:1}
.hero-inner{position:relative;z-index:4;max-width:760px;padding-block:60px}
/* hero entrance stagger (auto on load; .js gates so no-JS shows static) */
.js .hero-anim{opacity:0;transform:translateY(26px);animation:hero-in .85s var(--ease-out) forwards;animation-delay:calc(var(--d) * 90ms + 220ms)}
@keyframes hero-in{to{opacity:1;transform:none}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:8px 16px;border:1px solid var(--line-gold);border-radius:var(--r-pill);background:rgba(244,179,36,.06);margin-bottom:26px}
.eyebrow .ico{color:var(--gold)}
.hero-title{font-size:clamp(2.6rem,1.5rem+5.2vw,5.25rem);letter-spacing:-.03em;text-transform:uppercase}
.hero-sub{margin-top:24px;font-size:clamp(1.1rem,1rem+.5vw,1.4rem);color:var(--text-hi);font-weight:500;max-width:600px;line-height:1.5}
.hero-lead{margin-top:14px;color:var(--text-muted);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-note{margin-top:22px;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:var(--text-muted);font-size:1.5rem;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Brands marquee ---------- */
.brands{border-block:1px solid var(--line-2);padding-block:38px;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.brands-label{text-align:center;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:28px;padding-inline:20px}
.marquee{overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(40px,7vw,88px);width:max-content;animation:scroll-x 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.brand-logo{display:flex;align-items:center;justify-content:center;height:30px;opacity:.55;transition:opacity .25s;flex:none}
.brand-logo img{height:100%;width:auto;filter:grayscale(1) brightness(1.6)}
.brand-logo:hover{opacity:1}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:#fff;letter-spacing:-.01em}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Stats ---------- */
.stats{padding-block:clamp(48px,7vw,80px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.stat{display:flex;flex-direction:column;gap:10px;padding:8px 0;text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(10px,1.5vw,20px));top:15%;height:70%;width:1px;background:var(--line)}
.stat-value{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,1.4rem+2.6vw,3.4rem);line-height:1;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.stat-icon{display:flex;align-items:center;justify-content:center;font-size:2.6rem;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.stat-icon .ico{width:1em;height:1em}
.stat-label{color:var(--text-muted);font-size:.9rem;max-width:200px;margin-inline:auto}

/* ---------- About ---------- */
.about{position:relative}
.about-inner{max-width:900px}
.about-title{font-size:clamp(1.9rem,1.2rem+3vw,3.4rem);margin-top:6px}
.about-text{margin-top:26px;font-size:clamp(1.05rem,1rem+.4vw,1.3rem);color:var(--text);max-width:760px;line-height:1.6}

/* ---------- Speakers ---------- */
.speakers{background:var(--surface);border-block:1px solid var(--line-2)}
.speakers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.speaker-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 24px;text-align:center;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.speaker-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(244,179,36,.10),transparent 60%);opacity:0;transition:opacity .3s}
.speaker-card:hover{transform:translateY(-4px);border-color:var(--line-gold)}
.speaker-card:hover::before{opacity:1}
.speaker-avatar{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--surface-3),#0e0e11);border:1px solid var(--line);color:var(--gold);font-size:1.6rem}
.speaker-card h3{font-size:1.15rem;color:var(--text-hi);letter-spacing:-.01em}
.speaker-card p{margin-top:6px;color:var(--text-muted);font-size:.9rem}
.speakers-foot{margin-top:36px;text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:.85rem;letter-spacing:.04em}

/* ---------- Topics ---------- */
.topics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.topic-card{display:flex;flex-direction:column;gap:16px;padding:28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .25s,border-color .25s,background .25s}
.topic-card .ico{width:30px;height:30px;color:var(--gold)}
.topic-card span{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text-hi)}
.topic-card:hover{transform:translateY(-4px);border-color:var(--line-gold);background:var(--surface-2)}

/* ---------- Experience gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.gallery-item{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.gallery-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.85) 0%,transparent 55%)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-hi)}

/* ---------- Ticket ---------- */
.ticket{position:relative;overflow-x:clip}
.ticket-card{position:relative;max-width:600px;margin-inline:auto;border-radius:var(--r-lg);padding:2px;background:var(--grad-gold);box-shadow:var(--shadow-lg),var(--glow-gold)}
.ticket-glow{position:absolute;inset:-40px;z-index:-1;background:radial-gradient(60% 50% at 50% 30%,rgba(244,179,36,.22),transparent 70%);filter:blur(20px)}
.ticket-body{background:linear-gradient(180deg,#161519,#0e0e11);border-radius:calc(var(--r-lg) - 2px);padding:clamp(32px,5vw,52px)}
.ticket-badge{display:inline-block;font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-gold);background:rgba(244,179,36,.08);padding:7px 15px;border-radius:var(--r-pill)}
.ticket-name{font-size:clamp(2.2rem,1.6rem+2.4vw,3.2rem);margin-top:20px;text-transform:uppercase;letter-spacing:-.02em}
.ticket-desc{margin-top:14px;color:var(--text-muted)}
.ticket-includes{margin:28px 0;display:flex;flex-direction:column;gap:15px}
.ticket-includes li{display:flex;gap:13px;align-items:flex-start;color:var(--text);font-size:1.02rem}
.ticket-includes .ico{width:22px;height:22px;color:var(--gold);margin-top:2px}
.ticket-card .btn{margin-top:8px}
.ticket-scarcity{margin-top:18px;text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;color:var(--text-muted);text-transform:uppercase}

/* ---------- Schedule ---------- */
.schedule{background:var(--surface);border-block:1px solid var(--line-2)}
.days{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,32px)}
.day-card{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px)}
.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.day-tag{font-family:var(--font-display);font-weight:800;font-size:1.6rem;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase}
.day-date{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
.timeline{display:flex;flex-direction:column}
.timeline li{position:relative;padding:12px 0 12px 28px;color:var(--text);border-bottom:1px solid var(--line-2)}
.timeline li:last-child{border-bottom:0}
.timeline li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,179,36,.14)}
.schedule-note{margin-top:26px;color:var(--text-muted);font-size:.85rem;font-family:var(--font-mono)}

/* ---------- Closing ---------- */
.closing{position:relative;min-height:64vh;display:flex;align-items:center;overflow:hidden;text-align:center}
.closing-bg{position:absolute;inset:0;z-index:0}
.closing-bg img{width:100%;height:100%;object-fit:cover}
.closing-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,11,.82),rgba(10,10,11,.72)),radial-gradient(circle at 50% 40%,transparent,rgba(10,10,11,.6))}
.closing-inner{position:relative;z-index:2;padding-block:clamp(72px,10vw,128px);display:flex;flex-direction:column;align-items:center;gap:36px}
.closing-title{font-size:clamp(2.1rem,1.4rem+3.4vw,4rem);text-transform:uppercase;letter-spacing:-.02em}

/* ---------- Location ---------- */
.location-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.location-address{display:flex;gap:12px;align-items:flex-start;margin-top:26px;color:var(--text-hi);font-size:1.1rem;line-height:1.5}
.location-address .ico{width:24px;height:24px;color:var(--gold);margin-top:3px}
.location-info .btn{margin-top:28px}
.location-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);aspect-ratio:16/11}
.location-map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05) brightness(.85)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:56px 32px;background:var(--surface)}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid var(--line-2)}
.footer-brand img{height:32px;margin-bottom:16px}
.footer-brand p{color:var(--text-muted);max-width:320px;font-size:.95rem}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center;font-size:.95rem;font-weight:500}
.footer-nav a{color:var(--text-muted)}
.footer-nav a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;color:var(--text-muted);font-size:.82rem;font-family:var(--font-mono);letter-spacing:.03em}

/* ---------- Reveal animation (progressive enhancement: only hides when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}
  .stat:nth-child(2)::after{display:none}
  .speakers-grid{grid-template-columns:repeat(2,1fr)}
  .topics-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-desktop,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .location-grid{grid-template-columns:1fr}
  .location-map{aspect-ratio:16/12}
  .days{grid-template-columns:1fr}
  .stat:nth-child(odd)::after{display:none}
  /* hero hugs its content (no giant empty gap on portrait) */
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 30px);padding-bottom:60px}
  .hero-inner{padding-block:0}
  .scroll-cue{display:none}
}
@media (max-width:560px){
  :root{--header-h:64px}
  .hero-cta .btn{width:100%}
  .hero-overlay{background:linear-gradient(90deg,rgba(10,10,11,.9),rgba(10,10,11,.62)),linear-gradient(0deg,var(--black) 4%,transparent 46%)}
  .stats-grid{grid-template-columns:1fr;gap:8px}
  .stat{flex-direction:row;align-items:center;gap:18px;text-align:left;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .stat::after{display:none!important}
  .stat-value{font-size:2.2rem;min-width:130px}
  .stat-icon{min-width:130px}
  .stat-label{margin-inline:0;text-align:left}
  .speakers-grid,.topics-grid,.gallery{grid-template-columns:1fr 1fr;gap:12px}
  .topic-card{padding:20px 16px}
  .topic-card span{font-size:.98rem}
  .footer-inner{flex-direction:column;gap:24px}
}
@media (max-width:380px){
  .speakers-grid,.gallery{grid-template-columns:1fr}
}

/* =====================================================================
   ROUND 2 — sponsors, price, scroll progress, motion polish
   ===================================================================== */
/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:200;background:var(--grad-gold);box-shadow:0 0 12px rgba(244,179,36,.5);pointer-events:none;will-change:transform}

/* sponsors — main showcase */
.sponsors{border-block:1px solid var(--line-2);padding-block:clamp(40px,6vw,64px);background:linear-gradient(180deg,rgba(244,179,36,.03),transparent)}
.sponsors-label{text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:34px}
.sponsors-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(40px,7vw,96px)}
.sponsor-logo{display:inline-flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-out)}
.sponsor-logo img{max-height:clamp(26px,3vw,36px);max-width:clamp(130px,17vw,205px);width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.58;transition:opacity .3s,filter .3s}
.sponsors-row .sponsor-logo:hover{transform:translateY(-3px)}
.sponsors-row .sponsor-logo:hover img{filter:none;opacity:1}
.sponsor-word{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;color:var(--text-hi);font-size:clamp(1.5rem,1rem+1.6vw,2.2rem);opacity:.92}

/* sponsor strip (slim passing marquee) */
.sponsor-strip{display:flex;align-items:center;gap:22px;padding:16px clamp(20px,5vw,40px);max-width:var(--container);margin-inline:auto;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sponsor-strip-label{flex:none;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.sponsor-marquee{flex:1;min-width:0}
.sponsor-marquee .marquee-track{gap:clamp(28px,5vw,60px);animation-duration:36s}
.sponsor-marquee .sponsor-word{font-size:1.15rem;opacity:.5;color:var(--text);transition:opacity .25s}
.sponsor-marquee .sponsor-logo img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.42;transition:opacity .25s}
.sponsor-marquee .sponsor-logo:hover img{opacity:.9}
.sponsor-marquee .sponsor-word:hover{opacity:1}

/* ticket price */
.ticket-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.ticket-price-value{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);line-height:1;background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.ticket-price-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}

/* motion polish — richer hovers (transform/opacity only) */
.btn-gold{position:relative;overflow:hidden}
.btn-gold>*{position:relative;z-index:1}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);transform:translateX(-120%);transition:transform .6s var(--ease-out)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn .ico{transition:transform .25s var(--ease-out)}
.btn:hover .ico:last-child{transform:translateX(3px)}
.topic-card .ico{transition:transform .3s var(--ease-out)}
.topic-card:hover .ico{transform:translateY(-3px) scale(1.08)}
.speaker-avatar{transition:transform .3s var(--ease-out)}
.speaker-card:hover .speaker-avatar{transform:scale(1.06)}
.day-card{transition:transform .3s var(--ease-out),border-color .3s}
.day-card:hover{transform:translateY(-3px);border-color:var(--line-gold)}
.location-map{transition:transform .4s var(--ease-out),box-shadow .4s}
.location-map:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.location-map:hover iframe{filter:grayscale(0) contrast(1.05) brightness(.95)}
.ticket-card{transition:transform .4s var(--ease-out),box-shadow .4s}
.ticket-card:hover{transform:translateY(-4px)}
.footer-nav a{position:relative;transition:color .2s}
.footer-nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--grad-gold);transition:width .25s}
.footer-nav a:hover::after{width:100%}
.brand{transition:opacity .2s}.brand:hover{opacity:.85}

/* ---------- Ticket polish (extra motion concentrated on the buy point) ---------- */
/* animated gold sheen across the ticket price */
.ticket-price-value{background-image:var(--grad-gold-text);background-size:220% 100%;background-position:0 0;animation:price-sheen 5.5s ease-in-out infinite}
@keyframes price-sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
/* the glow behind the offer card gently breathes */
.ticket-glow{animation:ticket-breathe 6s ease-in-out infinite}
@keyframes ticket-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* value-stack cascades in when the card reveals — leads the eye to the CTA */
.js .ticket-includes li{opacity:0;transform:translateX(-10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.js .ticket-card.in .ticket-includes li{opacity:1;transform:none}
.ticket-card.in .ticket-includes li:nth-child(1){transition-delay:.12s}
.ticket-card.in .ticket-includes li:nth-child(2){transition-delay:.20s}
.ticket-card.in .ticket-includes li:nth-child(3){transition-delay:.28s}
.ticket-card.in .ticket-includes li:nth-child(4){transition-delay:.36s}
.ticket-card.in .ticket-includes li:nth-child(5){transition-delay:.44s}

/* ---------- Creative motion: 3D card tilt · magnetic CTAs · cascades ---------- */
[data-tilt]{will-change:transform}
[data-tilt].tilting{transition:box-shadow .3s,border-color .3s!important}
.topic-card.tilting,.speaker-card.tilting,.spk-card.tilting,.day-card.tilting,.sponsor-tile.tilting{border-color:var(--line-gold);box-shadow:0 26px 56px rgba(0,0,0,.5),0 0 0 1px var(--line-gold)}
.sponsor-tile.tilting{box-shadow:0 26px 56px rgba(244,179,36,.24),0 0 0 1px var(--line-gold)}
.gallery-item.tilting{box-shadow:0 26px 56px rgba(0,0,0,.55)}
[data-magnetic]{will-change:transform;transition:transform .28s var(--ease-out)}
/* timeline steps cascade in with the day card */
.js .timeline li{opacity:0;transform:translateX(-10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.js .day-card.in .timeline li{opacity:1;transform:none}
/* cascade step is .08s from .10s; defined to 14 so the schedule can grow without an
   un-delayed item jumping the queue (Dia 1 went to 9 items and 8/9 had no delay) */
.day-card.in .timeline li:nth-child(1){transition-delay:.10s}
.day-card.in .timeline li:nth-child(2){transition-delay:.18s}
.day-card.in .timeline li:nth-child(3){transition-delay:.26s}
.day-card.in .timeline li:nth-child(4){transition-delay:.34s}
.day-card.in .timeline li:nth-child(5){transition-delay:.42s}
.day-card.in .timeline li:nth-child(6){transition-delay:.50s}
.day-card.in .timeline li:nth-child(7){transition-delay:.58s}
.day-card.in .timeline li:nth-child(8){transition-delay:.66s}
.day-card.in .timeline li:nth-child(9){transition-delay:.74s}
.day-card.in .timeline li:nth-child(10){transition-delay:.82s}
.day-card.in .timeline li:nth-child(11){transition-delay:.90s}
.day-card.in .timeline li:nth-child(12){transition-delay:.98s}
.day-card.in .timeline li:nth-child(13){transition-delay:1.06s}
.day-card.in .timeline li:nth-child(14){transition-delay:1.14s}
/* section kickers grow a small gold lead line on reveal */
.kicker{display:inline-flex;align-items:center;gap:12px;vertical-align:middle}
.kicker::before{content:"";width:0;height:2px;border-radius:2px;background:var(--grad-gold);transition:width .6s var(--ease-out) .12s}
.reveal.in .kicker::before{width:26px}

/* ---------- Mystery speakers: locked-avatar pulse + hover shimmer sweep ---------- */
.speaker-avatar{position:relative}
.speaker-avatar::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--line-gold);opacity:0;animation:lock-pulse 3.4s ease-in-out infinite}
@keyframes lock-pulse{0%,100%{opacity:0;transform:scale(.85)}45%{opacity:.55;transform:scale(1.1)}}
.speakers-grid .speaker-card:nth-child(2) .speaker-avatar::after{animation-delay:.85s}
.speakers-grid .speaker-card:nth-child(3) .speaker-avatar::after{animation-delay:1.7s}
.speakers-grid .speaker-card:nth-child(4) .speaker-avatar::after{animation-delay:2.55s}
.speaker-avatar .ico{transition:transform .35s var(--ease-out),color .35s}
.speaker-card:hover .speaker-avatar .ico{transform:translateY(-2px)}
/* gold shimmer sweeps across on hover */
.speaker-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 34%,rgba(244,179,36,.14) 50%,transparent 66%);transform:translateX(-130%);transition:transform .8s var(--ease-out)}
.speaker-card:hover::after{transform:translateX(130%)}
.speaker-card h3{position:relative;z-index:2}

/* responsive */
@media (max-width:820px){
  .hero-orb{left:50%;top:44%;width:min(62vw,340px);opacity:.4;animation:none}
  .hero-overlay{background:linear-gradient(0deg,var(--black) 6%,rgba(10,10,11,.6) 42%,rgba(10,10,11,.25) 100%)}
  .hero-spot{display:none}
  .sponsor-strip{gap:14px}
  .sponsor-strip-label{font-size:.6rem}
}
@media (hover:none){.sponsor-marquee .sponsor-word,.sponsor-marquee .sponsor-logo img{opacity:.72}}

/* ---------- ROUND 6: Speaker line-up (founders + guests) ---------- */
.section-head--center{margin-inline:auto;text-align:center}
/* 9 speakers (R17): 9 mod 4 = 1 would orphan the last card, 9 mod 3 = 0 is clean.
   821px = 3x255 + 2x28, so desktop renders an even 3+3+3 with cards at the SAME 255px as before. */
.lineup-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,1.9vw,28px);max-width:821px;margin-inline:auto}
.spk-card{flex:1 1 230px;max-width:255px;position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.32);transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.spk-card:hover{border-color:var(--line-gold);box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 0 1px var(--line-gold)}
.spk-photo{position:relative;aspect-ratio:5/6;overflow:hidden;background:radial-gradient(circle at 50% 30%,var(--surface-3),#0d0d10)}
.spk-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;transition:transform .8s var(--ease-out);will-change:transform}
.spk-card:hover .spk-photo img{transform:scale(1.05)}
.spk-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--surface-2),rgba(28,28,32,.15) 30%,transparent 46%)}
.spk-tag{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-300);background:rgba(10,10,11,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-gold);padding:5px 10px;border-radius:var(--r-pill)}
.spk-body{position:relative;z-index:2;padding:clamp(15px,1.4vw,20px);padding-top:6px}
.spk-body::before{content:"";display:block;width:26px;height:2px;border-radius:2px;background:var(--grad-gold);margin-bottom:11px;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out) .2s}
.reveal.in .spk-body::before{transform:scaleX(1)}
.spk-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,.86rem+.5vw,1.22rem);color:var(--text-hi);letter-spacing:-.01em;line-height:1.14}
.spk-role{margin-top:5px;font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.spk-bio{margin-top:12px;font-size:.9rem;line-height:1.55;color:var(--text-muted)}
.spk-bio strong{color:var(--text);font-weight:600}
@media (max-width:1024px){
  .lineup-grid{gap:18px;max-width:660px;margin-inline:auto}
  .spk-card{flex-basis:280px;max-width:320px}
}
@media (max-width:560px){
  .lineup-grid{max-width:460px;gap:14px}
  .spk-card{flex:1 1 100%;max-width:none;flex-direction:row}
  .spk-photo{flex:0 0 40%;aspect-ratio:3/4}
  .spk-photo::after{background:linear-gradient(to right,transparent 55%,rgba(20,20,22,.55))}
  .spk-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
  .spk-body::before{margin-bottom:9px}
  .spk-bio{margin-top:9px;font-size:.84rem}
}

/* ==========================================================================
   Sponsors row — Fullstack full lockup + phone gutter
   ========================================================================== */
/* The Fullstack mark now carries the FULFILLMENT tagline, so the asset is
   taller relative to its width (5.43:1 vs the old 6.93:1). Let WIDTH be the
   only constraint: the wordmark then renders at exactly the optical height it
   had before and the tagline simply sits beneath it. */
.sponsor-logo img[src*="fullstack"]{max-height:none}
/* Same correction in the 22px passing strips (22 x 227/178 = 28). */
.sponsor-marquee .sponsor-logo img[src*="fullstack"]{height:28px}
/* ROUND 13: Blackline added as a 4th sponsor, so the 2x2 phone override is needed AGAIN
   (same reason as R7 and R11: 4 logos in a flex-wrap row break 3+1 and orphan the last one).
   Keeping R12's padding-inline:20px — that fix was about the page gutter, not the count, and
   the row is full-bleed (the section has no inline padding of its own). */
@media (max-width:560px){
  .sponsors-row{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 18px;padding-inline:20px}
  /* ROUND 14 — sponsors went 4 → 5, so the 2-col grid would orphan the last logo
     alone in the left column. This rule centres a trailing odd logo across both
     columns. Written as :nth-child(odd):last-child rather than :nth-child(5) so it
     self-corrects every time this count changes — which on this project it does
     constantly (BuyGoods alone: added R7, removed R9, restored R11, removed R12,
     restored R14). Even counts are untouched. */
  .sponsors-row .sponsor-logo:nth-child(odd):last-child{grid-column:1 / -1}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.hero-anim,.ticket-includes li,.timeline li{opacity:1!important;transform:none!important}
  [data-tilt],[data-magnetic]{transform:none!important}
  .marquee-track{animation:none}
  .ticket-glow{animation:none}
  .hero-orb{animation:none}
  .scroll-progress{display:none}
}