/* ==========================================================================
   AI Conf Asia 2027 — v2
   Art direction matched to design/yo reference:
     · vivid blue hero, dark navy body
     · cyan/teal primary accent, lime + violet secondary
     · notched ("pixel") corners on cards, panels, photos, CTA
     · bracket eyebrow labels, rotated date pills, gradient semicircles
     · Poppins display / Inter body

   Order: tokens → reset → base → primitives → components → responsive/motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:          #04060d;
  --bg-raise:    #080b14;
  --panel:       #0c0f15;
  --panel-2:     #101319;
  --panel-3:     #161a21;

  /* Lines */
  --line:        rgba(255, 255, 255, .14);
  --line-soft:   rgba(255, 255, 255, .075);

  /* Brand */
  --cyan:        #2ee8d5;
  --cyan-dim:    #6feee2;
  --mint:        #b6f5ec;
  --lime:        #c9f24d;
  --green:       #22f58c;
  --violet:      #7c3aed;
  --violet-2:    #8b3dff;
  --orange:      #ff9d2e;
  --pink:        #ff4d9d;
  --blue:        #2f6bff;

  /* Hero */
  --hero-a:      #0f34c4;
  --hero-b:      #2456ec;
  --hero-c:      #4f8bff;

  /* Text */
  --text:        #ffffff;
  --text-muted:  rgba(255, 255, 255, .62);
  --text-subtle: rgba(255, 255, 255, .44);
  --text-faint:  rgba(255, 255, 255, .30);

  /* Gradients */
  --grad-semicircle: linear-gradient(145deg,
      #ffc21f 0%, #ff9d2e 18%, #ff4d9d 42%, #a94dff 66%, #4f6bff 86%, #2f8bff 100%);
  --grad-ticket: linear-gradient(100deg, #6d3bff 0%, #a249ff 34%, #e8479b 64%, #ff9d2e 100%);
  --grad-spectrum: linear-gradient(100deg,
      #3b6bff 0%, #b026ff 26%, #ff2d55 50%, #ff8a00 74%, #ffea00 100%);

  /* Geometry */
  --shell:       1378px;
  --gutter:      24px;
  --n:           clamp(6px, 2.5%, 22px); /* notch: % so it scales with the element, clamped so it stays <=25% */
  --radius-pill: 999px;



  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .26s;

  /* Type */
  --display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pixel:   'Silkscreen', 'Courier New', ui-monospace, monospace;

  --section-y: 84px;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-y: 120px; }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-width: none;
}
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
::selection { background: rgba(46, 232, 213, .35); color: #fff; }

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 200;
  padding: .8rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: #04140b;
  font-weight: 600;
  transform: translateY(-180%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
}
h1.display {
  font-size: clamp(2.2rem, 6.1vw, 5.1rem);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
h2.display {
  font-size: clamp(2rem, 4.9vw, 3.9rem);
  line-height: 1.06;
}
h3.display {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.lede { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
@media (min-width: 768px) { .lede { font-size: 1.0625rem; } }

/* Bracket eyebrow label — matches the notched label in the design */
.label {
  --n: clamp(3px, 1.6%, 10px);
  display: inline-block;
  padding: .55rem .95rem;
  border: 1.5px solid var(--cyan);
  color: #fff;
  font-family: var(--pixel);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  /* polygon inlined (not via --notch) so a local --n override resolves */
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}
.label--lime { border-color: var(--lime); }
.label--muted { border-color: var(--line); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
/* Pixel-cut button: two-step staircase corners instead of a radius,
   plus a faint block grid that steps on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(
    0 8px, var(--px) 8px, var(--px) var(--px), 8px var(--px), 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) var(--px), calc(100% - var(--px)) var(--px),
      calc(100% - var(--px)) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - var(--px)) calc(100% - 8px),
      calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - 8px) calc(100% - var(--px)),
      calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - var(--px)), var(--px) calc(100% - var(--px)),
      var(--px) calc(100% - 8px), 0 calc(100% - 8px)
  );
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
/* pixel-grid texture */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .16) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: .55;
  pointer-events: none;
}
.btn:hover::before { animation: pixel-step .55s steps(3) infinite; }
@keyframes pixel-step { to { background-position: 6px 6px; } }

.btn__text, .btn__tab { position: relative; z-index: 1; }

.btn:active { transform: translateY(1px); }
/* clip-path would swallow a normal outline, so draw focus inside the shape */
.btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.btn__text {
  display: inline-flex;
  align-items: center;
  padding: .9rem 1.4rem;
}

/* darker chevron tab on the right, as in the design */
.btn__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  background: rgba(0, 0, 0, .32);
}
.btn__tab svg { width: 15px; height: 15px; }

.btn--plain .btn__tab { display: none; }

.btn--green,
.btn--lime,
.btn--violet,
.btn--gradient { background: var(--lime); color: #101507; }
.btn--white   { background: #fff; color: #14121d; }
.btn--ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: #fff;
}
.btn--green:hover, .btn--lime:hover, .btn--violet:hover,
.btn--white:hover, .btn--gradient:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.btn--sm { min-height: 40px; font-size: .8125rem; }
.btn--sm .btn__text { padding: .7rem 1.05rem; }
.btn--sm .btn__tab { width: 34px; }
.btn--sm .btn__tab svg { width: 13px; height: 13px; }

.btn--lg { min-height: 54px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: stretch; }
.btn--block .btn__text { flex: 1; justify-content: center; }
.btn--block .btn__tab { flex: 0 0 42px; }

/* --------------------------------------------------------------------------
   5. SHAPES / PRIMITIVES
   -------------------------------------------------------------------------- */
.notch {
  /* polygon inlined so a local --n override resolves on this element */
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}

/* Notched box with a real 1px border (background-clip trick) */
.notch-box {
  --fill: var(--panel);
  --stroke: var(--line);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--stroke), var(--stroke)) border-box;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}

.pill {
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-pill);
  background: transparent;
}

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: 96px; }
main > .section > .shell,
main > .intro-band > .shell { position: relative; z-index: 1; }
@media (min-width: 768px) {
  main > .section + .section { padding-top: clamp(96px, 9vw, 132px); }
  main > .section + .section.cta,
  main > .section.cta + .section { padding-top: 0; }
  main > .section + .section.section--tight { padding-top: 128px; }
}

.section-head { text-align: center; }
.section-head h2 { margin-top: 1.2rem; }
.section-head h2:first-child { margin-top: 0; }
.section-head .lede { max-width: 42rem; margin: 1rem auto 0; }

/* Decorative glow blobs */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Four-point sparkle used on list bullets */
.spark { width: 15px; height: 15px; flex: none; }

/* --------------------------------------------------------------------------
   5b. MEDIA FRAME
   Plain wrapper for the masked media. The shape comes from a .mask-N class;
   this only handles clipping, background and sizing.
   -------------------------------------------------------------------------- */
.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--panel);
}
.media-frame.is-playing > iframe {
  position: absolute;
  inset: 0;
}
.media-frame > img,
.media-frame > video,
.media-frame > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* stepped corner for media frames */
/* --------------------------------------------------------------------------
   MASKS
   Percentage-based, so the cut holds its proportion at any element size.
   Every variant bites into ALL FOUR edges, none is a ladder/staircase, and
   none removes more than 25% of the width or height in any direction.
   -------------------------------------------------------------------------- */

/* 1 — stepped top-left, compact top-right, square lower cuts */
.mask-1 {
  clip-path: polygon(
    0 18%, 6% 18%, 6% 10%, 14% 10%, 14% 0,
    88% 0, 88% 7%, 96% 7%, 96% 14%, 100% 14%,
    100% 82%, 92% 82%, 92% 100%,
    10% 100%, 10% 92%, 0 92%
  );
}

/* Hero recap: four deliberately different, entirely orthogonal corner cuts.
   TL is a long staircase; TR is a compact two-step; BR is a deep blocky
   recess; BL is a narrow offset notch. No mirrored or diagonal corners. */
.media-frame--video {
  --media-step: clamp(10px, 1.8vw, 24px);
  --media-step-2: calc(var(--media-step) + var(--media-step));
  --media-step-3: calc(var(--media-step-2) + var(--media-step));
  --media-step-4: calc(var(--media-step-3) + var(--media-step));
  clip-path: polygon(
    /* top-left: long three-level staircase */
    0 var(--media-step-3),
    var(--media-step) var(--media-step-3),
    var(--media-step) var(--media-step-2),
    var(--media-step-2) var(--media-step-2),
    var(--media-step-2) var(--media-step),
    var(--media-step-4) var(--media-step),
    var(--media-step-4) 0,

    /* top-right: short, compact two-step */
    calc(100% - var(--media-step-2)) 0,
    calc(100% - var(--media-step-2)) var(--media-step),
    calc(100% - var(--media-step)) var(--media-step),
    calc(100% - var(--media-step)) var(--media-step-3),
    100% var(--media-step-3),

    /* bottom-right: deep squared recess */
    100% calc(100% - var(--media-step-4)),
    calc(100% - var(--media-step)) calc(100% - var(--media-step-4)),
    calc(100% - var(--media-step)) calc(100% - var(--media-step-2)),
    calc(100% - var(--media-step-3)) calc(100% - var(--media-step-2)),
    calc(100% - var(--media-step-3)) 100%,

    /* bottom-left: narrow offset notch */
    var(--media-step-2) 100%,
    var(--media-step-2) calc(100% - var(--media-step)),
    var(--media-step) calc(100% - var(--media-step)),
    var(--media-step) calc(100% - var(--media-step-3)),
    0 calc(100% - var(--media-step-3))
  );
}

/* 2 — broad top ledge with an offset lower staircase */
.mask-2 {
  clip-path: polygon(
    0 10%, 22% 10%, 22% 0,
    94% 0, 94% 18%, 100% 18%,
    100% 90%, 84% 90%, 84% 100%,
    18% 100%, 18% 94%, 9% 94%, 9% 82%, 0 82%
  );
}

/* 3 — shallow upper steps and a deep right-bottom recess */
.mask-3 {
  clip-path: polygon(
    0 8%, 10% 8%, 10% 0,
    82% 0, 82% 6%, 92% 6%, 92% 14%, 100% 14%,
    100% 72%, 94% 72%, 94% 86%, 82% 86%, 82% 100%,
    0 100%
  );
}

/* 4 — deep left crown and small staggered lower corners */
.mask-4 {
  clip-path: polygon(
    0 24%, 8% 24%, 8% 12%, 18% 12%, 18% 0,
    100% 0,
    100% 88%, 90% 88%, 90% 100%,
    12% 100%, 12% 94%, 5% 94%, 5% 84%, 0 84%
  );
}

/* 5 — compact left notches with a tall stepped right edge */
.mask-5 {
  clip-path: polygon(
    0 14%, 14% 14%, 14% 0,
    90% 0, 90% 8%, 96% 8%, 96% 22%, 100% 22%,
    100% 78%, 92% 78%, 92% 92%, 76% 92%, 76% 100%,
    8% 100%, 8% 88%, 0 88%
  );
}

/* 6 — long top-right staircase with a bottom-left block recess */
.mask-6 {
  clip-path: polygon(
    0 0,
    76% 0, 76% 7%, 86% 7%, 86% 14%, 94% 14%, 94% 24%, 100% 24%,
    100% 100%,
    24% 100%, 24% 92%, 12% 92%, 12% 80%, 0 80%
  );
}
/* --------------------------------------------------------------------------
   5d. GLITCH MARQUEE — terminal-style divider band
   -------------------------------------------------------------------------- */
.glitch {
  overflow: hidden;
  padding-block: 14px;
  border-block: 1px solid var(--line-soft);
  background: #06070c;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.glitch__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.glitch:hover .glitch__track { animation-play-state: paused; }
.glitch span {
  padding-inline: .5rem;
  font-family: var(--pixel);
  font-size: .75rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .34);
  white-space: nowrap;
}
.glitch em { color: var(--cyan); font-style: normal; }

/* --------------------------------------------------------------------------
   5e. YOUTUBE FACADE
   Thumbnail first, player swapped in once the block scrolls into view.
   -------------------------------------------------------------------------- */
.yt {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.yt > img { width: 100%; height: 100%; object-fit: cover; }
.yt__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 4, 20, .28);
  transition: background-color var(--dur) var(--ease);
}
.yt:hover .yt__play,
.yt:focus-visible .yt__play { background: rgba(6, 4, 20, .1); }
.yt__play > svg {
  width: 30px; height: 30px;
  margin-left: 4px;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
}
.yt__play::before {
  content: '';
  position: absolute;
  width: 82px; height: 82px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(8, 6, 22, .34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease);
}
.yt:hover .yt__play::before { transform: scale(1.06); }
.yt__play > svg { position: relative; z-index: 1; }

.hero__watch {
  margin-top: 14px;
  text-align: right;
  font-size: .875rem;
  color: var(--text-subtle);
}
.hero__watch a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__watch a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   6. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #05070f;
  border-bottom: 1px solid var(--line-soft);
}
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet-2), var(--cyan), var(--lime));
  transition: width .08s linear;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 13px;
}
.nav__logo img { height: 27px; width: auto; }

.nav__menu { display: none; align-items: center; gap: 1.9rem; }
.nav__menu a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .82);
  transition: color var(--dur) var(--ease);
}
.nav__menu a:hover,
.nav__menu a[aria-current="true"] { color: var(--lime); }
/* small dot separator between items, as in the design */
.nav__menu li + li::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 1.7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  vertical-align: middle;
}

.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
}
.nav__burger svg { width: 20px; height: 20px; }
.nav__burger:hover { background: rgba(255, 255, 255, .11); }

.nav__drawer {
  display: none;
  padding-block: .4rem 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.nav__drawer[data-open="true"] { display: block; }
.nav__drawer a {
  display: block;
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
}
.nav__drawer a:hover { color: var(--cyan); }

@media (min-width: 1000px) {
  .nav__menu { display: flex; }
  .nav__burger { display: none; }
  .nav__drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. HERO — vivid blue
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: linear-gradient(168deg, #3564e8 0%, #293cc2 42%, #11145f 100%);
  padding-block: 54px 0;
  overflow: hidden;
  transition: background-position .2s ease-out;
}
.hero__ambient {
  position: absolute;
  inset: 0 0 28%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.hero__landscape {
  position: absolute;
  left: -3%;
  bottom: -1px;
  width: 106%;
  height: 83%;
  overflow: visible;
}
.hero__ridge {
  transform-origin: center bottom;
  will-change: transform;
}
.hero__ridge--far {
  fill: rgba(72,91,194,.46);
  animation: ridge-far 44s ease-in-out infinite alternate;
}
.hero__ridge--mid {
  fill: rgba(40,52,145,.76);
  animation: ridge-mid 56s ease-in-out infinite alternate-reverse;
}
.hero__ridge--near {
  fill: #111650;
  animation: ridge-near 68s ease-in-out infinite alternate;
}
@keyframes ridge-far { to { transform: translateX(1%) scale(1.006); } }
@keyframes ridge-mid { to { transform: translateX(-.7%) scale(1.004); } }
@keyframes ridge-near { to { transform: translateX(.4%); } }
@media (max-width: 700px) {
  .hero__ambient { bottom: 48%; opacity: .78; }
  .hero__landscape { left: -20%; width: 140%; height: 74%; }
}
/* Fine monochrome grain keeps the plain blue field tactile without a focal glow. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__top {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  align-items: end;
}
@media (min-width: 1000px) {
  .hero__top { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .65fr); gap: clamp(56px, 7vw, 104px); }
}

.hero .label {
  padding: 0;
  border: 0;
  clip-path: none;
  color: rgba(255,255,255,.72);
  background: transparent;
}

.hero__title {
  max-width: 13ch;
  margin-top: 1.5rem;
  color: #fff;
}
.hero__title span { display: block; }
.hero__title span + span {
  margin-top: .08em;
  color: rgba(255,255,255,.76);
}

.hero__aside {
  padding: 1.4rem 0 .8rem;
}
.hero__kicker {
  margin-bottom: .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.hero__tagline {
  font-family: var(--display);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 24rem;
}
.hero__aside .btn { margin-top: 1.5rem; }
@media (max-width: 700px) {
  .hero__aside { padding: .5rem 0 0; }
  .hero__title { max-width: 11ch; }
}

/* Photo + rotated date pills */
.hero__media {
  position: relative;
  z-index: 2;
  margin-top: 46px;
  padding-bottom: 0;
}
.hero__media .media-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) { .hero__media .media-frame { aspect-ratio: 4 / 3; } }
.hero__media .media-frame.is-playing { background: #000; }
.hero__glitch {
  width: 100vw;
  margin-top: 28px;
  margin-left: calc(50% - 50vw);
  border: 0;
  background: rgba(4, 6, 13, .64);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__glitch .glitch__track {
  gap: 0;
  animation-duration: 58s;
}
.hero__glitch .glitch__set {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0;
}
.hero__glitch .glitch__item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: rgba(255,255,255,.62);
}
.hero__glitch .glitch__item::after {
  content: '◆';
  margin-inline: 3rem;
  color: var(--cyan);
  font-size: .58em;
  opacity: .8;
}

.datepills {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 6px;
  display: flex;
  align-items: center;
}
.datepill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: .6rem;
  padding: .75rem 1.5rem;
  margin-left: -3.4rem;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: #04231f;
  font-family: var(--display);
  font-size: clamp(.8rem, 1.35vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
}
.datepill:nth-child(odd)  { background: var(--mint); }
.datepill:nth-child(2n)   { background: var(--cyan); }
.datepill:nth-child(1) { transform: rotate(-9deg);  margin-left: 0; }
.datepill:nth-child(2) { transform: rotate(-4deg); }
.datepill:nth-child(3) { transform: rotate(2deg); }
.datepill:nth-child(4) { transform: rotate(-3deg); }
.datepill:nth-child(5) { transform: rotate(4deg); }
.datepill__sep { width: 1.5px; height: 1.15em; background: currentColor; opacity: .45; }
.datepill__mo { font-size: .78em; font-weight: 600; text-align: left; line-height: 1.05; }

@media (max-width: 700px) {
  .hero__media { padding-bottom: 0; }
  .hero__glitch { margin-top: 20px; }
  .datepills { left: -14%; right: -14%; }
  .datepill { padding: .5rem .8rem; margin-left: -2.2rem; gap: .4rem; }
  .datepill:nth-child(n + 5) { display: none; }
}

/* --------------------------------------------------------------------------
   8. WHY ATTEND
   -------------------------------------------------------------------------- */
.why { background: var(--bg); }
.why .section-head { margin-bottom: 0; }

.statpills {
  display: grid;
  gap: 16px;
  margin-top: 46px;
}
@media (min-width: 820px) { .statpills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.statpill {
  padding: 1.5rem 1.75rem 1.35rem;
  border: 2px solid var(--cyan);
  border-radius: var(--radius-pill);
  text-align: center;
}
.statpill__value {
  font-family: var(--pixel);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #fff;
}
.statpill--lead .statpill__value { color: var(--cyan); }
.statpill__label {
  margin-top: .35rem;
  font-size: .9375rem;
  color: var(--text-muted);
}

/* Quote marquee */
.quotes { margin-top: 64px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.quotes__track {
  display: flex;
  width: max-content;
  animation: marquee 64s linear infinite;
}
.quotes:hover .quotes__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.quote { width: 340px; flex: none; padding-inline: 1.6rem; }
.quote__mark {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: .8;
  color: var(--cyan);
}
.quote blockquote {
  margin-top: .7rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}
.quote blockquote strong { color: #fff; font-weight: 700; }
.quote figcaption { margin-top: 1.1rem; }
.quote__name { display: block; font-weight: 700; color: #fff; font-size: .9375rem; }
.quote__role { display: block; margin-top: .12rem; color: var(--cyan); font-size: .875rem; }

@media (max-width: 700px) {
  .quotes {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
  }
  .quotes__track { animation: none; }
  .quote { width: 78vw; scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------
   9. COMMUNITY SHAPES
   -------------------------------------------------------------------------- */
.community { background: var(--bg); padding-block: clamp(64px, 8vw, 104px); overflow: hidden; }
.community__head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.community__head .label { margin-bottom: 1rem; }
.community__head p { max-width: 38rem; margin-top: 1rem; color: var(--text-muted); line-height: 1.7; }
.glimpses {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.glimpses::-webkit-scrollbar { display: none; }
.glimpses.is-dragging { cursor: grabbing; }
.glimpses__track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding-inline: 18px;
  will-change: transform;
}
.glimpse {
  position: relative;
  flex: 0 0 auto;
  width: max-content;
  height: clamp(220px, 28vw, 340px);
  overflow: hidden;
  background: var(--panel);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)),
    calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)),
    0 calc(100% - var(--n)));
}
.glimpse img {
  width: auto; height: 100%;
  max-width: none;
  object-fit: contain;
  background: var(--panel);
  filter: saturate(.86) contrast(1.04);
  transition: filter .4s ease, transform .7s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.glimpse:hover img { filter: saturate(1.06) contrast(1.04); transform: scale(1.045); }
.glimpse figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: .35rem .6rem;
  background: rgba(4, 6, 13, .72);
  color: var(--lime);
  font-family: var(--pixel);
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .glimpses__track { transform: none !important; }
}

/* --------------------------------------------------------------------------
   10. SPEAKERS
   -------------------------------------------------------------------------- */
.speakers-hub { background: var(--bg); }
.speakers-hub__head { max-width: 40rem; }
.speakers-hub__head .label { margin-bottom: 1rem; }
.speakers-hub__head p { margin-top: 1.1rem; max-width: 34rem; color: var(--text-muted); line-height: 1.7; }

/* announced speaker + open call */
.speakers-hub__row {
  display: grid; gap: 2.5rem;
  margin-top: clamp(2.5rem,5vw,4rem);
  align-items: start;
}
@media (min-width: 940px) {
  .speakers-hub__row { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(2.5rem,5vw,4.5rem); }
}
/* unconfirmed speaker: card stays in markup as the template, apply panel spans the row */
.speaker-teaser[hidden] { display: none; }
.speaker-teaser[hidden] + .apply-panel { grid-column: 1 / -1; }

.apply-panel {
  position: relative;
  display: grid; gap: 1.5rem;
  padding: clamp(1.25rem,2.4vw,1.9rem);
  border: 1px dashed rgba(193,255,76,.38);
  background:
    radial-gradient(circle at 12% 0%, rgba(193,255,76,.07), transparent 42%),
    rgba(255,255,255,.015);
}
@media (min-width: 620px) {
  .apply-panel { grid-template-columns: 168px minmax(0,1fr); gap: 1.75rem; align-items: start; }
}

/* empty seat: placeholder portrait mirroring the speaker card */
.apply-panel__portrait {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  display: grid; place-items: center;
  background: #0d1017;
  border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(0 14%,14% 14%,14% 0,100% 0,100% 86%,86% 86%,86% 100%,0 100%);
}
.apply-panel__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(circle at 50% 55%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 30%, transparent 78%);
}
.apply-panel__figure {
  position: relative;
  width: 62%;
  height: auto;
  fill: none;
  stroke: rgba(193,255,76,.55);
  stroke-width: 2;
  transition: stroke .3s ease, transform .4s var(--ease);
}
.apply-panel__you {
  position: absolute;
  bottom: .55rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--lime);
  white-space: nowrap;
  text-align: center;
}
.apply-panel__you span { display: inline-block; animation: apply-blink 1.4s steps(1) infinite; }
@keyframes apply-blink { 50% { opacity: 0; } }
.apply-panel:hover .apply-panel__figure { stroke: var(--lime); transform: translateY(-4px); }

.apply-panel__body { min-width: 0; }
.apply-panel__status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--pixel); font-size: .55rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lime);
}
.apply-panel__status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 3px rgba(193,255,76,.18);
  animation: apply-pulse 2s ease-in-out infinite;
}
@keyframes apply-pulse { 50% { box-shadow: 0 0 0 7px rgba(193,255,76,.04); } }
.apply-panel h3 { margin-top: .8rem; font-family: var(--display); font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1.05; }
.apply-panel__body > p { margin-top: .7rem; max-width: 34rem; color: var(--text-muted); font-size: .92rem; line-height: 1.65; }

.apply-panel__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 1.75rem; margin-top: 1.3rem;
}
.apply-panel__facts > div { padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.apply-panel__facts dt {
  font-family: var(--pixel); font-size: .5rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle);
}
.apply-panel__facts dd { margin-top: .28rem; color: rgba(255,255,255,.85); font-size: .85rem; line-height: 1.5; }
.apply-panel .btn { margin-top: 1.4rem; }
@media (max-width: 700px) {
  .apply-panel__portrait { max-width: 150px; }
}
@media (max-width: 520px) {
  .apply-panel__facts { grid-template-columns: 1fr; }
}

/* 3. previous speakers */
.past-speakers { margin-top: clamp(3rem,6vw,5rem); }
.past-speakers__head { display: grid; gap: 1.25rem; align-items: end; }
.past-speakers__head h3 { font-family: var(--display); font-size: clamp(1.35rem,2.2vw,1.75rem); line-height: 1.15; }
.past-speakers__head p { margin-top: .5rem; color: var(--text-subtle); font-size: .9rem; }
@media (min-width: 820px) {
  .past-speakers__head { grid-template-columns: 1fr auto; }
  .past-speakers__head .speaker-filters { justify-content: flex-end; margin-top: 0; }
}

.speaker-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 2rem; }
.speaker-filter { padding: .65rem .85rem; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--text-muted); font-family: var(--pixel); font-size: .58rem; cursor: pointer; transition: color .25s ease, border-color .25s ease, background-color .25s ease; }
.speaker-filter span { margin-left: .35rem; color: var(--text-subtle); }
.speaker-filter:hover { border-color: var(--lime); color: #fff; }
.speaker-filter.is-active { border-color: var(--lime); background: var(--lime); color: #101507; }
.speaker-filter.is-active span { color: rgba(16,21,7,.6); }
.speaker.is-filtered-out { display: none; }
.speaker-teaser--announced { border: 0; background: transparent; padding: 0; min-height: 0; }
.speaker-teaser--announced .speaker__year { color: var(--lime); }
.speaker-teaser--announced .speaker__name { font-size: 1.05rem; }
.speaker-teaser--announced .speaker__role { min-height: 2.6em; font-size: .86rem; }
.speaker-teaser--announced .speaker__open {
  --float-x: 0px;
  --float-y: 0px;
  border-color: rgba(193,255,76,.5);
  transform: translate3d(var(--float-x), var(--float-y), 0);
  will-change: transform;
}
.speaker-teaser--announced.speaker:hover .speaker__open {
  background: var(--lime);
  color: #101507;
  transform: translate3d(var(--float-x), var(--float-y), 0);
}
.speaker__year { display: inline-block; margin-top: 1.1rem; color: var(--violet-2); font-family: var(--pixel); font-size: .58rem; letter-spacing: .08em; }
.speaker__year + .speaker__name { margin-top: .45rem; }
.speakers-grid {
  display: grid;
  gap: 42px 28px;
  margin-top: 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .speakers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1050px) {
  .speakers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px 42px;
  }
}
.speakers-grid--past { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (min-width:620px) { .speakers-grid--past { grid-template-columns:repeat(7,minmax(0,1fr)); gap:28px; } }
@media (min-width:1080px) { .speakers-grid--past { grid-template-columns:repeat(10,minmax(0,1fr)); gap:32px 30px; } }
.speakers-grid--past .speaker__dashes,
.speakers-grid--past .speaker__year,
.speakers-grid--past .speaker__name,
.speakers-grid--past .speaker__role,
.speakers-grid--past .speaker__open { display:none; }
.speakers-grid--past .speaker__photo { aspect-ratio:1; }
.speakers-grid--past .speaker__trigger { position:relative; }
.speakers-grid--past .speaker__trigger::after {
  content:attr(data-tooltip);
  position:absolute;
  z-index:8;
  left:50%;
  bottom:calc(100% + 10px);
  translate:-50% 6px;
  width:max-content;
  max-width:180px;
  padding:.5rem .65rem;
  background:var(--lime);
  color:#101507;
  font-family:var(--pixel);
  font-size:.52rem;
  line-height:1.35;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,translate .2s var(--ease);
  clip-path:polygon(0 6px,6px 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
}
.speakers-grid--past .speaker__trigger:hover::after,
.speakers-grid--past .speaker__trigger:focus-visible::after { opacity:1; translate:-50% 0; }
.speakers-grid--past .speaker:hover { transform:translateY(-4px); }

.speaker {
  text-align: center;
  transition: transform .45s var(--ease);
}
.speaker__photo {
  display: block;
  width: 100%;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  background: #e9eaee;
  overflow: hidden;
  transition: filter .45s var(--ease), box-shadow .45s var(--ease);
}
.speaker__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .65s var(--ease), filter .45s var(--ease);
}
/* A restrained digital scan gives the portraits some life without obscuring
   the person or changing the intentionally irregular silhouette. */
.speaker__photo::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: -18%;
  height: 16%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(78, 246, 221, .3), transparent);
  mix-blend-mode: screen;
  transform: translateY(0);
}
.speaker__photo::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(112, 86, 255, .2), transparent 42%, rgba(78, 246, 221, .14));
  transition: opacity .45s var(--ease);
}
.speaker:hover { transform: translateY(-8px); }
.speaker:hover .speaker__photo {
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32));
}
.speaker:hover .speaker__photo img {
  transform: scale(1.055);
  filter: contrast(1.06) saturate(1.08);
}
.speaker:hover .speaker__photo::before {
  opacity: 1;
  transform: translateY(740%);
  transition: transform .9s var(--ease), opacity .18s ease;
}
.speaker:hover .speaker__photo::after { opacity: 1; }

.speaker__dashes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}
.speaker__dashes span {
  display: block;
  width: 22px; height: 3px;
  border-radius: 1px;
  background: #fff;
  transition: width .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.speaker:hover .speaker__dashes span:first-child {
  width: 10px;
  background: var(--cyan);
  transform: translateX(-3px);
}
.speaker:hover .speaker__dashes span:nth-child(2) {
  width: 34px;
  background: var(--mint);
}
.speaker:hover .speaker__dashes span:last-child {
  width: 14px;
  background: var(--violet);
  transform: translateX(3px);
}
.speaker__name {
  margin-top: .9rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}
.speaker__role {
  display: block;
  min-height: 2.9em;
  margin-top: .2rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.speaker__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.speaker__trigger:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 8px;
}
.speaker__name { display: block; }
.speaker__open {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  margin-top: .85rem;
  padding: .48rem .8rem;
  border: 1px solid rgba(46, 232, 213, .45);
  background: rgba(46, 232, 213, .07);
  color: var(--cyan);
  font-family: var(--pixel);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: 1;
  clip-path: polygon(0 6px, 6px 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  transition: color var(--dur) ease, background-color var(--dur) ease, transform var(--dur) ease;
}
.speaker:hover .speaker__open {
  color: #04120f;
  background: var(--cyan);
  transform: translateY(-2px);
}

/* Speaker dossier modal — uses the same pixel/notched visual system as the page */
.speaker-dialog {
  --speaker-accent: var(--violet-2);
  width: min(980px, calc(100% - 28px));
  height: min(620px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  border: 0;
  background: #0a0c13;
  color: var(--text);
  overflow: hidden;
}
.speaker-dialog::backdrop { background: rgba(1,3,9,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.speaker-dialog__panel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--speaker-accent) 50%,rgba(255,255,255,.12));
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    #0a0c13;
  background-size: 34px 34px;
}
.speaker-dialog__panel::before { content:''; position:absolute; z-index:3; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--speaker-accent),var(--cyan),var(--lime)); }
.speaker-dialog__close {
  position:absolute; z-index:6; top:18px; right:18px;
  display:grid; place-items:center; width:42px; height:42px; padding:0;
  border:1px solid var(--speaker-accent); border-radius:0;
  background:#0a0c13; color:#fff; cursor:pointer;
  clip-path:polygon(0 8px,8px 8px,8px 0,100% 0,100% 100%,0 100%);
}
.speaker-dialog__close svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .25s ease; }
.speaker-dialog__close:hover { background:var(--speaker-accent); color:#070910; }
.speaker-dialog__close:hover svg { transform:rotate(90deg); }
.speaker-dialog__grid { position:relative; z-index:1; display:grid; min-height:0; overflow:hidden; }
.speaker-dialog__profile {
  position:relative; padding:clamp(1.35rem,3vw,2rem);
  border-right:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.025); overflow:hidden;
}
.speaker-dialog__profile::after { content:'•••'; position:absolute; right:1.2rem; bottom:1rem; color:var(--speaker-accent); font-family:var(--pixel); letter-spacing:.35em; opacity:.7; }
.speaker-dialog__eyebrow { display:flex; justify-content:space-between; gap:1rem; margin-right:3.4rem; font-family:var(--pixel); font-size:.58rem; letter-spacing:.1em; color:var(--text-subtle); }
.speaker-dialog__eyebrow span:first-child { color:var(--speaker-accent); }
.speaker-dialog__portrait {
  position:relative; width:min(100%,230px); aspect-ratio:1; margin-top:1.25rem; overflow:hidden;
  background:#e9eaee;
  clip-path:polygon(0 14%,14% 14%,14% 0,100% 0,100% 86%,86% 86%,86% 100%,0 100%);
}
.speaker-dialog__portrait::after { content:''; position:absolute; inset:0; border:3px solid var(--speaker-accent); clip-path:inherit; pointer-events:none; }
.speaker-dialog__portrait img { width:100%; height:100%; object-fit:cover; }
.speaker-dialog__speaker-label { display:inline-block; margin-top:1rem; padding:.3rem .55rem; background:var(--speaker-accent); color:#080a0f; font-family:var(--pixel); font-size:.55rem; letter-spacing:.07em; text-transform:uppercase; }
.speaker-dialog__profile h3 { margin-top:.6rem; font-family:var(--display); font-size:clamp(1.4rem,2.5vw,1.9rem); line-height:1.05; }
.speaker-dialog__role { margin-top:.4rem; color:var(--text-muted); line-height:1.5; }
.speaker-dialog__meta { display:grid; gap:.75rem; margin-top:1rem; padding-top:.85rem; border-top:1px dashed rgba(255,255,255,.18); }
.speaker-dialog__meta-label { font-family:var(--pixel); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); }
.speaker-dialog__meta-label--icon { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(255,255,255,.16); color:var(--speaker-accent); }
.speaker-dialog__meta-label--icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:square; }
.speaker-dialog__companies,.speaker-dialog__links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.speaker-dialog__company { display:inline-flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.76rem; }
.speaker-dialog__company-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--speaker-accent); color:#080a0f; font-family:var(--pixel); font-size:.5rem; clip-path:polygon(0 7px,7px 7px,7px 0,100% 0,100% 100%,0 100%); }
.speaker-dialog__links a { padding:.48rem .68rem; border:1px solid rgba(255,255,255,.16); color:var(--text-muted); font-family:var(--pixel); font-size:.53rem; letter-spacing:.04em; text-transform:uppercase; }
.speaker-dialog__links a:hover { border-color:var(--speaker-accent); color:var(--speaker-accent); transform:translateY(-2px); }
.speaker-dialog__content {
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.75rem,4vw,3rem); align-self:stretch; overflow:hidden;
}
.speaker-dialog__content::before { content:'AI'; position:absolute; right:1rem; bottom:-2rem; color:rgba(255,255,255,.025); font-family:var(--pixel); font-size:10rem; line-height:1; pointer-events:none; }
.speaker-dialog__kicker { position:relative; z-index:1; font-family:var(--pixel); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--speaker-accent); }
.speaker-dialog__content h2 { position:relative; z-index:1; max-width:38rem; margin-top:.75rem; font-family:var(--display); font-size:clamp(1.8rem,3.5vw,3.2rem); line-height:1; letter-spacing:-.04em; }
.speaker-dialog__bio { position:relative; z-index:1; max-width:38rem; margin-top:1.1rem; color:var(--text-muted); font-size:.88rem; line-height:1.6; }
.speaker-dialog__quote { position:relative; z-index:1; max-width:38rem; margin-top:1.25rem; padding:1rem 1.1rem 1rem 2.8rem; border:1px solid rgba(255,255,255,.13); background:#0d1019; clip-path:polygon(0 10px,10px 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,0 100%); }
.speaker-dialog__quote > span { position:absolute; left:.9rem; top:.45rem; color:var(--speaker-accent); font-family:var(--pixel); font-size:2.4rem; line-height:1; }
.speaker-dialog__quote p { color:rgba(255,255,255,.86); font-size:.86rem; line-height:1.5; }
.speaker-dialog__recap { position:relative; z-index:1; align-self:flex-start; margin-top:1rem; font-size:.85rem; padding-bottom:.2rem; border-bottom:1px solid var(--speaker-accent); color:var(--speaker-accent); font-weight:600; }
.speaker-dialog__nav { position:relative; z-index:4; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid rgba(255,255,255,.13); background:#080a10; }
.speaker-dialog__nav button { padding:1rem 1.35rem; border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--pixel); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
.speaker-dialog__nav button:first-child { text-align:left; border-right:1px solid rgba(255,255,255,.1); }
.speaker-dialog__nav button:last-child { text-align:right; border-left:1px solid rgba(255,255,255,.1); }
.speaker-dialog__nav button:hover { color:#080a10; background:var(--speaker-accent); }
.speaker-dialog__nav > span { padding:0 1rem; font-family:var(--pixel); font-size:.55rem; color:var(--speaker-accent); }
body:has(.speaker-dialog[open]) { overflow:hidden; }
@media (min-width:760px) {
  .speaker-dialog__grid { grid-template-columns:minmax(350px,.95fr) minmax(0,1.4fr); }
  .speaker-dialog__profile {
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;
    column-gap:1.25rem;
    align-content:center;
  }
  .speaker-dialog__eyebrow { grid-column:1 / -1; margin:0 3.4rem 1.2rem 0; }
  .speaker-dialog__portrait { grid-column:1; grid-row:2 / 4; width:150px; margin:0; align-self:start; }
  .speaker-dialog__profile h3 { grid-column:2; grid-row:2; align-self:end; margin-top:0; }
  .speaker-dialog__role { grid-column:2; grid-row:3; align-self:start; }
  .speaker-dialog__meta { grid-column:1 / -1; grid-row:4; grid-template-columns:1fr 1fr; margin-top:1.35rem; }
}
@media (max-width:759px) {
  .speaker-dialog { width:calc(100% - 18px); height:calc(100dvh - 18px); }
  .speaker-dialog__grid { display:block; overflow-y:auto; }
  .speaker-dialog__profile { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); overflow:visible; }
  .speaker-dialog__content { padding-top:2rem; overflow:visible; }
  .speaker-dialog__portrait { width:min(230px,75%); }
}

/* --------------------------------------------------------------------------
   11. SCHEDULE
   -------------------------------------------------------------------------- */
.schedule { background: var(--bg); }
.sessions { margin-top: 52px; display: grid; gap: 22px; }

.session {
  position: relative;
  display: grid;
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 2.2rem 0;
}
@media (min-width: 900px) {
  .session {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 330px;
    padding: 2.6rem 0;
  }
}

.session__label {
  position: absolute;
  top: 1.4rem; left: 1.6rem;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .38);
}

.session__art { display: grid; place-items: center; padding: 1.5rem 1.6rem 0; }
@media (min-width: 900px) { .session__art { padding: 0; } }

/* flat left edge, round right edge */
.semicircle {
  position: relative;
  display: grid;
  place-items: center;
  width: min(300px, 74%);
  aspect-ratio: 1 / 2;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--grad-semicircle);
}
.semicircle__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
}
.semicircle__num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.semicircle__mo {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
}

.session__body { padding: 2rem 1.6rem 0; }
@media (min-width: 900px) {
  .session__body { padding: 0 3.2rem 0 0; max-width: 34rem; }
}

.session__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.session__meta .label { --n: clamp(2px, 1.2%, 6px); padding: .35rem .7rem; font-size: .625rem; }

.session__body h3 { margin-top: 1.05rem; }
.session__body > p {
  margin-top: .85rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.session__list { margin-top: 1.3rem; display: grid; gap: .7rem; }
.session__list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .84);
}
.session__list .spark { color: var(--violet-2); }

/* --------------------------------------------------------------------------
   11C. SCHEDULE
   -------------------------------------------------------------------------- */
.itinerary { background: #070910; }
.itinerary__head {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
.itinerary__head h2 { margin-top: 1rem; }
.itinerary__head > p {
  max-width: 35rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}
@media (min-width: 850px) {
  .itinerary__head { grid-template-columns: 1fr .75fr; }
  .itinerary__head > p { justify-self: end; padding-bottom: .5rem; }
}

.itinerary__rail {
  border-top: 1px solid rgba(255,255,255,.15);
}
.day-card {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  border-bottom: 1px solid rgba(255,255,255,.15);
  overflow: hidden;
  transition: background-color .3s ease;
}
.day-card:hover { background: rgba(255,255,255,.035); }
.day-card__date {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 11rem;
  padding: 1.25rem .75rem;
  border-right: 1px solid rgba(255,255,255,.15);
}
.day-card__day {
  font-family: var(--pixel);
  font-size: 2.7rem;
  line-height: 1;
  color: #fff;
}
.day-card__month {
  margin-top: .4rem;
  font-family: var(--pixel);
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--text-subtle);
}
.day-card__weekday {
  margin-top: .85rem;
  font-family: var(--pixel);
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--text-subtle);
}
.day-card__content {
  position: relative;
  z-index: 2;
  padding: 1.6rem 1.25rem 1.8rem;
}
.day-card__topline {
  display: flex;
  gap: .7rem;
  font-family: var(--pixel);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--text-subtle);
}
.day-card__topline span:first-child::after { content: ' /'; }
.day-card__content h3 {
  margin-top: .9rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.day-card__content h3 br { display: block; }
.day-card__content > p {
  margin-top: .8rem;
  max-width: 42rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.day-card__content ul {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.2rem;
  margin-top: 1.15rem;
}
.day-card__content li {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
}
.day-card__content li svg {
  width: .65rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.day-card__symbol { display: none; }
.day-card--dinner h3 { color: var(--violet-2); }
.day-card--conference h3 { color: var(--lime); }
.day-card--hike h3 { color: var(--cyan); }

@media (min-width: 900px) {
  .day-card {
    grid-template-columns: 10rem minmax(0, 1fr);
    min-height: 15rem;
  }
  .day-card__date {
    grid-column: 1;
    grid-row: 1;
    min-height: 15rem;
  }
  .day-card__day { font-size: 4rem; }
  .day-card__content {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(2rem, 5vw, 6rem);
    align-content: center;
    padding: 2.4rem clamp(2rem, 4vw, 4rem);
  }
  .day-card__topline { grid-column: 1; grid-row: 1; }
  .day-card__content h3 { grid-column: 1; grid-row: 2 / 4; font-size: clamp(2.5rem, 3vw, 3.8rem); max-width: 18rem; }
  .day-card__content > p { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; }
  .day-card__content ul { grid-column: 2; grid-row: 3; align-self: start; }
  .day-card__content li { max-width: 22rem; }
}

@media (max-width: 520px) {
  .day-card { grid-template-columns: 5rem 1fr; }
  .day-card__date { min-height: 13rem; }
  .day-card__day { font-size: 2.15rem; }
  .day-card__content { padding-inline: 1rem; }
  .day-card__content ul { display: grid; }
}

/* --------------------------------------------------------------------------
   12. TICKETS
   -------------------------------------------------------------------------- */
.tickets { background: var(--bg-raise); }
.tickets__grid {
  display: grid;
  gap: 22px;
  margin-top: 52px;
}
@media (min-width: 760px) { .tickets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .tickets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* White ticket card with violet border + notched corners */
.ticket {
  --fill: #ffffff;
  --stroke: transparent;
  --n: clamp(8px, 3%, 20px);
  padding: 2.4rem 2.2rem 2rem;
  text-align: center;
  color: #171423;
}
.ticket__eyebrow {
  min-height: 1.25rem;
  font-family: var(--pixel);
  font-size: .7rem;
  letter-spacing: .04em;
  color: #665e75;
  text-transform: uppercase;
}
.ticket--featured,
.ticket--sponsor { --stroke: transparent; }
.ticket--coming {
  position: relative;
  opacity: .5;
  filter: grayscale(.72);
  user-select: none;
}
.ticket--coming::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: not-allowed;
}
.ticket__name {
  margin-top: .65rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #3b3746;
}
.ticket__price {
  margin-top: .5rem;
  font-family: var(--pixel);
  font-size: clamp(2.7rem, 5vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--violet);
}
.ticket__international { margin-top: .7rem; min-height: 1.4rem; color: #5d566b; font-size: .82rem; font-weight: 400; }
.ticket__includes {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: #171423;
}
.ticket__includes::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: #171423;
}
.ticket__list { margin-top: 1.4rem; text-align: left; display: grid; gap: .8rem; }
.ticket__list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .9375rem;
  color: #2c2838;
}
.ticket__list .spark { color: var(--violet); }
.ticket .btn { margin-top: 1.9rem; }
.ticket__unavailable { display: flex; justify-content: center; background: #ddd9e5; color: #777080; cursor: not-allowed; }

.tickets__note {
  margin: 30px auto 0;
  max-width: 58rem;
  text-align: center;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-subtle);
}
.tickets__note p + p { margin-top: .65rem; }
.tickets__note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   13. SPONSORS
   -------------------------------------------------------------------------- */
.sponsors { background: var(--bg); }
.sponsors__head {
  display: grid;
  gap: 26px;
  align-items: center;
}
@media (min-width: 900px) {
  .sponsors__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }
}
.sponsors__head h2 { font-size: clamp(2.1rem, 5vw, 4rem); }
.sponsors__head .btn { margin-top: 1.7rem; }

.sponsor-feature {
  --n: clamp(10px, 4%, 26px);
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 2.5rem;
}
.sponsor-feature,
.sponsor-cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sponsor-feature::before,
.sponsor-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: scale(.985);
  background: radial-gradient(circle at 50% 35%, rgba(193,255,76,.1), transparent 62%);
  transition: opacity .55s ease, transform .65s var(--ease);
}
.sponsor-feature:hover::before,
.sponsor-cell:hover::before {
  opacity: 1;
  transform: scale(1);
}
.sponsor-feature img { max-height: 84px; width: auto; }

.sponsor-grid {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.sponsor-grid--silver {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 620px) {
  .sponsor-grid--gold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-grid--silver { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .sponsor-grid--gold { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sponsor-grid--silver { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.sponsor-cell {
  --n: clamp(8px, 3%, 20px);
  display: grid;
  place-items: center;
  min-height: 168px;
  padding: 1.8rem;
  transition: transform .55s var(--ease);
}
.sponsor-cell:hover { transform: translateY(-2px); }
.sponsor-cell img {
  width: auto;
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
  opacity: .9;
  transition: opacity var(--dur) var(--ease);
}
.sponsor-cell:hover img { opacity: 1; }
.sponsor-cell--tall img { max-height: 66px; }
.sponsor-cell--silver {
  min-height: 112px;
  padding: 1.1rem .75rem;
}
.sponsor-cell--silver .sponsor-slot__label {
  font-size: .56rem;
  letter-spacing: .07em;
  text-align: center;
}

/* open sponsor slot: tier label only, no hover lift */
.sponsor-slot__label {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.42);
  font-family: var(--pixel);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .45s ease, letter-spacing .55s var(--ease);
}
.sponsor-feature .sponsor-slot__label { color: var(--lime); font-size: .85rem; }
.sponsor-slot:hover .sponsor-slot__label { color: rgba(255,255,255,.78); letter-spacing: .13em; }
.sponsor-feature:hover .sponsor-slot__label { color: var(--lime); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { background: var(--bg); }
.faq__layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) {
  .faq__layout { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 60px; }
}
.faq__intro h2 { margin-top: 1.2rem; }
.faq__intro h2:first-child { margin-top: 0; }
.faq__intro .lede { margin-top: 1.1rem; max-width: 26rem; }
.faq__intro .btn { margin-top: 1.9rem; }

.faq__list { display: grid; gap: 16px; }
.faq__item {
  --n: clamp(7px, 3%, 18px);
  --fill: transparent;
  --stroke: var(--line);
}
.faq__item[open] { --fill: #101319; --stroke: rgba(255, 255, 255, .22); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--cyan); }

.faq__sign {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0); opacity: 0; }

.faq__a {
  padding: 0 1.5rem 1.4rem;
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.7;
}
.faq__a a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   15. CTA BANNER
   -------------------------------------------------------------------------- */
.cta { background: var(--bg); padding-block: 0; }
.cta__box {
  --n: clamp(14px, 5%, 34px);
  --fill: var(--violet-2);
  --stroke: var(--violet-2);
  padding: clamp(3rem, 7vw, 6.5rem) 2rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(110deg, rgba(12,10,55,.9), rgba(37,22,122,.7)),
    var(--cta-image, none) center 42% / cover no-repeat,
    var(--violet-2);
}
.cta__box::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.7' intercept='-.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta__box > * { position: relative; z-index: 1; }
.cta__box h2 { color: #fff; }
.cta__box .lede { max-width: 40rem; margin: 1.2rem auto 0; color: rgba(255, 255, 255, .88); }
.cta__box .btn { margin-top: 2.2rem; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--bg); padding-top: 20px; }

.footer__box {
  display: grid;
  gap: 2.5rem;
  padding: 3.5rem 0 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 880px) {
  .footer__box { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 7vw; }
}
.footer__cell { min-width: 0; }

.footer__place {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.footer__mail { margin-top: 2.4rem; }
.footer__mail dt { font-size: .875rem; color: var(--text-subtle); }
.footer__mail dd {
  margin-top: .2rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
}
.footer__socials { display: flex; gap: 1rem; margin-top: 2.4rem; }
.footer__socials a { color: rgba(255, 255, 255, .68); transition: color var(--dur) var(--ease); }
.footer__socials a:hover { color: var(--cyan); }
.footer__socials svg { width: 19px; height: 19px; }

.footer__cols { display: grid; gap: 2.6rem; }
@media (min-width: 620px) { .footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }

.footer h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}
.footer__links { margin-top: 1.3rem; display: grid; gap: .85rem; }
.footer__links a { color: var(--text-muted); font-size: .9375rem; }
.footer__links a:hover { color: var(--cyan); }

.footer__form { margin-top: 1.3rem; display: grid; gap: .8rem; }
.footer__form input {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: .9375rem;
  outline: none;
}
.footer__form input::placeholder { color: rgba(255, 255, 255, .36); }
.footer__form input:focus { border-color: var(--cyan); }
.footer__form .btn { justify-self: start; }
.footer__organizer h2 { color: var(--text-muted); font-size: 1rem; font-weight: 500; }
.footer__organizer > a { display: inline-block; margin-top: .7rem; color: var(--cyan); font-weight: 600; }
.footer__organizer > a:hover { color: #fff; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.4rem 3.75rem;
  font-size: .875rem;
  color: var(--text-subtle);
}
.footer__legal { border-top: 1px solid rgba(255,255,255,.08); }
.footer__legal a { color: var(--text-muted); }
.footer__legal a:hover { color: #fff; }

.footer__wordmark {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding: 0 clamp(12px, 2vw, 32px);
  overflow: hidden;
  background: #03050a;
  cursor: crosshair;
}
.footer__wordmark-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(180px, 22vw, 420px);
  isolation: isolate;
}
.footer__wordmark-lines {
  grid-area: 1 / 1;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  touch-action: pan-y;
  opacity: .62;
  filter: drop-shadow(0 0 10px rgba(57,231,255,.12));
}
@media (prefers-reduced-motion: reduce) {
  .footer__wordmark-lines { transition: none; }
}

/* Closing band: dashed globe + big statement + CTA */
.intro-band {
  position: relative;
  background: #0a0a0c;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.intro-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 50%, rgba(193,255,76,.055), transparent 32%);
}
.footer__close {
  position: relative;
  display: grid;
  gap: 30px;
  align-items: center;
  padding-block: 64px 72px;
  overflow: hidden;
}
@media (min-width: 900px) {
  .footer__close { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
}
.globe {
  position: relative;
  display: grid;
  place-items: center;
  width: min(420px, 82%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  color: rgba(255,255,255,.72);
}
.globe::before {
  content: '';
  position: absolute;
  inset: 13%;
  background: radial-gradient(circle, rgba(57,231,255,.09), transparent 68%);
  filter: blur(18px);
}
.globe__ai {
  position: relative;
  width: 78%;
  height: auto;
  overflow: visible;
  fill: url(#ai-line-pattern);
  filter: drop-shadow(0 0 16px rgba(57,231,255,.16));
  animation: ai-line-drift 7s ease-in-out infinite alternate;
}
@keyframes ai-line-drift {
  to { transform: translateY(-5px); color: rgba(193,255,76,.78); }
}
.globe__star,
.globe__star-visible {
  transform-box: fill-box;
  transform-origin: center;
  animation: globe-star-flip 5.5s cubic-bezier(.45,.05,.35,1) infinite;
}
.globe__star-visible {
  fill: var(--lime);
  filter: drop-shadow(0 0 5px rgba(193,255,76,.7));
}
@keyframes globe-star-flip {
  0%, 38% { rotate: y 0deg; }
  50%, 88% { rotate: y 180deg; }
  100% { rotate: y 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .globe__ai,
  .globe__star,
  .globe__star-visible { animation: none; }
}
.footer__close p {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.9vw, 2.35rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: #fff;
}
.footer__close strong { color: var(--cyan); }
.footer__close .btn { margin-top: 1.7rem; }

/* --------------------------------------------------------------------------
   17. MOTION
   -------------------------------------------------------------------------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal="left"] { transform: translateX(-30px); }
.reveal-ready [data-reveal="right"] { transform: translateX(30px); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: translate(0,0); }
.reveal-ready .ticket--coming[data-reveal].is-visible { opacity: .5; }
.btn__tab svg { transition: transform .25s var(--ease); }
.btn:hover .btn__tab svg { transform: translateX(3px); }
.ticket { transition: transform .35s var(--ease), box-shadow .35s ease; }
.ticket:not(.ticket--coming):hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .quotes__track { animation: none; }
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .nav, .hero::after, .footer__close { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   19. NEWSLETTER FORM
   -------------------------------------------------------------------------- */
.news__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  width: min(100%, 560px);
  margin: 2.2rem auto 0;
}
.news__form .btn { min-height: 48px; }
.news__input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.025);
  color: #fff;
  outline: none;
  clip-path: polygon(0 8px,8px 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
@media (max-width: 520px) {
  .news__form { grid-template-columns: 1fr; }
  .news__form .btn { width: 100%; }
  .news__form .btn__text { flex: 1; justify-content: center; }
}
.news__input::placeholder { color: rgba(255, 255, 255, .36); }
.news__input:focus { border-color: var(--cyan); }

/* Inline arrow that trails button labels */
.btn__arrow { width: 17px; height: 17px; margin-left: .5rem; }

/* --------------------------------------------------------------------------
   COMMUNITY — editorial mosaic (replaces the old horizontal marquee, which
   read as a second scroller right under the quote marquee)
   -------------------------------------------------------------------------- */
.community-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(118px, 13.5vw, 196px);
  gap: clamp(8px, 1vw, 14px);
}
.mosaic {
  position: relative;
  grid-column: span var(--span, 1);
  grid-row: span var(--rows, 1);
  margin: 0;
  overflow: hidden;
  background: var(--panel);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)),
    calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)),
    0 calc(100% - var(--n)));
  --n: clamp(10px, 2.2%, 20px);
}
.mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06) brightness(.9);
  transition: filter .5s ease, transform .9s var(--ease);
}
.mosaic:hover img { filter: saturate(1.04) contrast(1.04) brightness(1); transform: scale(1.035); }
.mosaic figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .32rem .55rem;
  background: rgba(4, 6, 13, .74);
  color: var(--lime);
  font-family: var(--pixel);
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mosaic--lead { --span: 2; --rows: 2; }
.mosaic--wide { --span: 2; }
.mosaic--tall { --rows: 2; }
.mosaic--lead img { filter: saturate(.9) contrast(1.04); }
.mosaic--flat figcaption { color: var(--cyan); }

@media (max-width: 860px) {
  .community-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(112px, 27vw, 168px);
  }
  .mosaic--tall { --rows: 1; }
}
@media (max-width: 520px) {
  .community-mosaic { grid-auto-rows: clamp(96px, 30vw, 140px); }
  .mosaic--lead { --span: 2; --rows: 2; }
  .mosaic--wide { --span: 1; }
}

/* --------------------------------------------------------------------------
   MOBILE POLISH — compact, readable and intentionally composed
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --gutter: 18px;
    --section-y: 72px;
  }

  html { scroll-padding-top: 78px; }
  body { font-size: .9375rem; }

  h1.display {
    font-size: clamp(2.05rem, 11vw, 3.15rem);
    line-height: .98;
    overflow-wrap: anywhere;
  }
  h2.display {
    font-size: clamp(1.9rem, 9.5vw, 2.75rem);
    line-height: 1.02;
  }
  .section-head { text-align: left; }
  .section-head br { display: none; }
  .lede { line-height: 1.6; }
  .label { padding: .48rem .7rem; font-size: .54rem; }

  .btn { min-height: 46px; }
  .btn__text { padding: .68rem .9rem; }
  .btn__tab { width: 42px; }

  .nav__inner { gap: .65rem; padding-block: 10px; }
  .nav__logo { flex: 0 1 118px; min-width: 0; }
  .nav__logo img { width: 100%; height: auto; }
  .nav__actions { gap: .4rem; }
  .nav__actions .btn { min-height: 40px; font-size: .72rem; }
  .nav__actions .btn__text { padding-inline: .7rem; }
  .nav__actions .btn__tab { width: 34px; }
  .nav__burger { width: 40px; height: 40px; }
  .nav__drawer { padding-block: .25rem .8rem; }
  .nav__drawer a { min-height: 46px; display: flex; align-items: center; }

  .hero { padding-top: 42px; }
  .hero__ambient {
    inset: 0;
    opacity: .68;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__landscape { left: -34%; bottom: 0; width: 168%; height: 68%; }
  .hero__top { gap: 20px; }
  .hero__title { max-width: 10ch; }
  .hero__aside { max-width: 31rem; }
  .hero__tagline { font-size: 1rem; line-height: 1.5; }
  .hero__aside .btn { width: 100%; max-width: 260px; }
  .hero__aside .btn__text { flex: 1; justify-content: center; }
  .hero__media { margin-top: 30px; }
  .hero__media .media-frame { aspect-ratio: 1 / .82; }
  .hero__watch { margin-top: .65rem; }
  .hero__glitch { margin-top: 16px; }
  .hero__glitch .glitch__item::after { margin-inline: 1.5rem; }

  .intro-band .footer__close { padding-block: 48px 54px; }
  .footer__close p { font-size: clamp(1.25rem, 6.5vw, 1.75rem); line-height: 1.18; }
  .globe { width: min(150px, 42vw); }

  .statpills {
    gap: 0;
    margin-top: 34px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .statpill {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-radius: 0;
    text-align: left;
  }
  .statpill__value { font-size: 1.35rem; letter-spacing: -.02em; }
  .statpill__label { margin-top: 0; font-size: .82rem; line-height: 1.4; }
  .quotes { margin-top: 42px; }
  .quote { width: min(82vw, 310px); padding-inline: 1rem; }

  .community { padding-block: 56px 50px; }
  .community__head { margin-bottom: 1.75rem; }
  .glimpse { height: clamp(190px, 52vw, 250px); }
  .community__head h2 br { display: none; }
  .community__head p { margin-top: .85rem; line-height: 1.6; }
  .community-mosaic { gap: 7px; }
  .mosaic figcaption { font-size: .42rem; max-width: 100%; }

  .speakers-hub__head p { line-height: 1.6; }
  .apply-panel { gap: 1.1rem; padding: 1rem; }
  .apply-panel__portrait { max-width: 112px; }
  .apply-panel h3 { font-size: 1.45rem; }
  .apply-panel .btn { width: 100%; }
  .apply-panel .btn__text { flex: 1; justify-content: center; }
  .past-speakers { margin-top: 3rem; }
  .speaker-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .45rem;
    margin: 1.35rem calc(var(--gutter) * -1) 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .speaker-filters::-webkit-scrollbar { display: none; }
  .speaker-filter { flex: 0 0 auto; min-height: 42px; }
  .speakers-grid--past { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .speakers-grid--past .speaker__trigger::after { display: none; }

  .sessions { margin-top: 34px; gap: 16px; }
  .session { padding: 1.8rem 0; }
  .session__label { top: 1rem; left: 1rem; }
  .session__art { padding: 2.5rem 1rem 0; }
  .semicircle { width: min(170px, 52%); aspect-ratio: 1 / 1.55; }
  .session__body { padding: 1.5rem 1rem 0; }
  .session__body > p { font-size: .92rem; }

  .itinerary__head { margin-bottom: 2rem; }
  .itinerary__head > p { font-size: .95rem; line-height: 1.65; }
  .day-card { grid-template-columns: 1fr; }
  .day-card__date {
    min-height: 0;
    grid-template-columns: auto auto 1fr;
    justify-content: start;
    justify-items: start;
    align-items: baseline;
    gap: .6rem;
    padding: 1rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .day-card__day { font-size: 2rem; }
  .day-card__month,
  .day-card__weekday { margin-top: 0; }
  .day-card__weekday { justify-self: end; }
  .day-card__content { padding: 1.25rem 1rem 1.5rem; }
  .day-card__content h3 { font-size: clamp(1.65rem, 8vw, 2.25rem); }

  .tickets__grid { margin-top: 34px; gap: 16px; }
  .ticket { padding: 2rem 1.15rem 1.5rem; }
  .ticket__price { font-size: clamp(2.5rem, 13vw, 3.4rem); }

  .sponsors__head { gap: 20px; }
  .sponsor-feature { min-height: 160px; padding: 1.5rem; }
  .sponsor-cell { min-height: 130px; padding: 1.25rem; }
  .sponsor-cell--silver { min-height: 92px; padding: .85rem .5rem; }
  .sponsor-cell--silver .sponsor-slot__label { font-size: .48rem; }

  .faq__layout { gap: 30px; }
  .faq__q { gap: .8rem; padding: 1rem; font-size: .98rem; }
  .faq__a { padding: 0 1rem 1.1rem; font-size: .9rem; }

  .cta__box { padding: 3.25rem 1rem; }
  .cta__box .lede { line-height: 1.6; }
  .cta__box .btn { width: 100%; max-width: 280px; }
  .cta__box .btn__text { flex: 1; justify-content: center; }

  .footer { padding-top: 0; }
  .footer__box { gap: 2.25rem; padding-block: 2.75rem 2rem; }
  .footer__mail,
  .footer__socials { margin-top: 1.7rem; }
  .footer__socials { gap: .4rem; }
  .footer__socials a { display: grid; place-items: center; width: 42px; height: 42px; }
  .footer__cols { gap: 2rem; }
  .footer__legal {
    align-items: flex-start;
    gap: .75rem;
    padding-block: 1.15rem 1.5rem;
    font-size: .75rem;
  }
  .footer__wordmark {
    margin-top: .5rem;
    padding-inline: 8px;
    cursor: default;
  }
  .footer__wordmark-stage { height: clamp(108px, 29vw, 160px); }
  .footer__wordmark-lines { opacity: .72; filter: drop-shadow(0 0 6px rgba(57,231,255,.1)); }
}