/* ==========================================================================
   THE INFLUENCER TABLE — An Exclusive Creator Summit
   Stylesheet
   --------------------------------------------------------------------------
   Contents
     01. Design tokens (custom properties)
     02. Base / reset overrides
     03. Ambient layers (grain, cursor glow, scroll progress)
     04. Typography primitives (eyebrow, section title, body)
     05. Buttons
     06. Navbar + brand shine
     07. Hero
     08. About + stats
     09. Speakers
     10. Format / agenda
     11. Invite CTA
     12. Footer
     13. Motion utilities (reveal, stagger, split text)
     14. Responsive refinements
     15. Reduced motion fallback
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Single accent (Rolex green). Everything else is neutral so the accent reads
   as deliberate rather than decorative.
   ========================================================================== */
:root {

  /* --- Base surfaces --------------------------------------------------- */
  --ink-1000: #050506;
  /* deepest — page floor            */
  --ink-900: #08080A;
  /* body background                 */
  --ink-850: #0B0B0E;
  /* alternating section             */
  --ink-800: #101014;
  /* raised surface / card           */
  --ink-750: #16161B;
  /* card hover                      */

  /* --- Accent (Rolex green) ---------------------------------------------- */
  --accent: #0FA255;
  --accent-soft: #45D389;
  --accent-deep: #00522F;
  --accent-rgb: 15, 162, 85;
  --brand-grad: linear-gradient(135deg, #0FA255, #04220F);

  /* --- Text ------------------------------------------------------------
     Contrast checked against --ink-900:
       --text-hi     #F2F4F2  ≈ 17.0:1   (AAA)
       --text-mid    #B2B7B3  ≈  9.8:1   (AAA)
       --text-low    #8B918D  ≈  6.2:1   (AA)
       --accent-soft #45D389  ≈ 10.4:1   (AAA)
       --accent      #0FA255  ≈  6.0:1   (AA, small text safe)
     -------------------------------------------------------------------- */
  --text-hi: #F2F4F2;
  --text-mid: #B2B7B3;
  --text-low: #8B918D;

  /* --- Lines & strokes -------------------------------------------------- */
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .16);
  --line-accent: rgba(var(--accent-rgb), .40);

  /* --- Soft, diffused shadows (never harsh) ----------------------------- */
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-md: 0 18px 48px -18px rgba(0, 0, 0, .70);
  --shadow-lg: 0 40px 90px -32px rgba(0, 0, 0, .80);
  --shadow-glow: 0 0 60px -12px rgba(var(--accent-rgb), .38);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(.66rem, .58rem + .22vw, .75rem);
  --fs-body: clamp(.98rem, .93rem + .22vw, 1.06rem);
  --fs-lede: clamp(1.06rem, .98rem + .42vw, 1.28rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  --fs-h2-lg: clamp(2.35rem, 1.5rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.6rem, 1.1rem + 6.2vw, 6.25rem);

  --lh-tight: 1.04;
  --lh-body: 1.72;
  --ls-eyebrow: .22em;

  /* --- Spacing rhythm --------------------------------------------------- */
  --space-2xs: .5rem;
  --space-xs: .875rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --section-y: clamp(5rem, 3rem + 8vw, 9.5rem);

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Motion: one signature curve used everywhere ---------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-reveal: 1100ms;

  /* --- Layout ----------------------------------------------------------- */
  --nav-h: 76px;
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the fixed navbar */
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ink-900);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Slowly breathing base gradient — 18s loop, imperceptible as movement */
  background-image:
    radial-gradient(120% 78% at 50% -12%, rgba(var(--accent-rgb), .10) 0%, transparent 58%),
    radial-gradient(90% 60% at 100% 4%, rgba(var(--accent-rgb), .05) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink-1000) 0%, var(--ink-900) 34%, var(--ink-850) 100%);
  background-attachment: fixed;
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: gradient-breathe 18s var(--ease-inout) infinite alternate;
}

@keyframes gradient-breathe {
  0% {
    background-position: 50% 0%, 100% 0%, 0 0;
  }

  100% {
    background-position: 46% 6%, 88% 8%, 0 0;
  }
}

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

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

::selection {
  background: rgba(var(--accent-rgb), .28);
  color: var(--text-hi);
}

/* Visible, on-brand focus ring — never remove the outline outright */
:focus-visible {
  outline: 1px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 2000;
  padding: .6rem 1.15rem;
  background: var(--ink-800);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-pill);
  color: var(--text-hi);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   03. AMBIENT LAYERS
   ========================================================================== */

/* --- Grain: fractal-noise SVG, very low opacity ------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Cursor-reactive radial glow (desktop only, JS-positioned) ---------- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .085) 0%, transparent 68%);
  transition: opacity 700ms var(--ease);
  will-change: transform;
}

.cursor-glow.is-on {
  opacity: 1;
}

/* --- Minimal dot cursor with slight lag (desktop only) ------------------ */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  z-index: 1900;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .8);
  transition: opacity 400ms var(--ease),
    width 320ms var(--ease),
    height 320ms var(--ease),
    margin 320ms var(--ease),
    background-color 320ms var(--ease);
  will-change: transform;
}

.cursor-dot.is-on {
  opacity: 1;
}

.cursor-dot.is-hover {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  background: rgba(var(--accent-rgb), .16);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .45);
}

/* --- Scroll progress line ---------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1600;
  pointer-events: none;
  background: rgba(255, 255, 255, .05);
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-soft));
  will-change: transform;
}


/* ==========================================================================
   04. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

.eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin-right: .85rem;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.section-title {
  margin: 0 0 var(--space-md);
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.018em;
}

.section-title--lg {
  font-size: var(--fs-h2-lg);
}

.section-title em {
  font-style: italic;
  color: var(--accent-soft);
}

.lede {
  margin: 0 0 var(--space-sm);
  color: var(--text-hi);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.62;
}

.body-copy {
  margin: 0 0 var(--space-sm);
  color: var(--text-mid);
}

.body-copy--narrow {
  max-width: 52ch;
}

.section {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
}


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

/* --- Primary: green fill, magnetic, glow bloom on hover ----------------- */
.btn-primary-lux {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.02rem 2.3rem;
  border: 1px solid rgba(var(--accent-rgb), .55);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05));
  color: var(--text-hi);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    color var(--dur-base) var(--ease),
    transform var(--dur-slow) var(--ease);
  will-change: transform;
}

.btn-primary-lux--lg {
  padding: 1.18rem 2.9rem;
  font-size: .86rem;
}

/* soft inner bloom that intensifies on hover */
.btn-primary-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.btn-primary-lux__label {
  position: relative;
  display: block;
  transition: color var(--dur-base) var(--ease);
}

.btn-primary-lux:hover,
.btn-primary-lux:focus-visible {
  border-color: transparent;
  color: var(--ink-1000);
  box-shadow: var(--shadow-glow);
}

.btn-primary-lux:hover::before,
.btn-primary-lux:focus-visible::before {
  opacity: 1;
}

.btn-primary-lux:active {
  transform: scale(.985);
}

/* --- Ghost: navbar CTA -------------------------------------------------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: .62rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text-hi);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(var(--accent-rgb), .6);
  background: rgba(var(--accent-rgb), .10);
  color: var(--accent-soft);
}

/* --- Text link with animated underline ---------------------------------- */
.btn-text {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  color: var(--text-mid);
  font-size: .84rem;
  letter-spacing: .05em;
  transition: color var(--dur-base) var(--ease);
}

.btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease);
}

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

.btn-text:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}


/* ==========================================================================
   06. NAVBAR + BRAND
   ========================================================================== */
.site-nav {
  --nav-glass: 0;
  /* 0 → 1, interpolated by JS on scroll */
  min-height: var(--nav-h);
  padding-block: .9rem;
  z-index: 1500;
  background: rgba(8, 8, 10, calc(var(--nav-glass) * .72));
  backdrop-filter: blur(calc(var(--nav-glass) * 18px)) saturate(calc(100% + var(--nav-glass) * 40%));
  -webkit-backdrop-filter: blur(calc(var(--nav-glass) * 18px)) saturate(calc(100% + var(--nav-glass) * 40%));
  border-bottom: 1px solid rgba(255, 255, 255, calc(var(--nav-glass) * .09));
  transition: padding var(--dur-slow) var(--ease);
}

.site-nav.is-scrolled {
  padding-block: .55rem;
}

.site-nav .nav-link {
  position: relative;
  padding: .5rem .1rem;
  margin-inline: .95rem;
  color: var(--text-mid);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color var(--dur-base) var(--ease);
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .18rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  color: var(--text-hi);
}

.site-nav .nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* --- Brand + shine sweep ------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
}

.brand__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .55);
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 2.5px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, transparent 0 6.5px, rgba(var(--accent-rgb), .30) 6.5px 7.5px, transparent 7.5px);
}

.brand__text {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--text-hi);
}

/* Slow light sweep across the wordmark — 6s loop, plus an on-hover pass.
   Uses background-clip:text with an animated gradient position.            */
.shine {
  background-image: linear-gradient(100deg,
      var(--text-hi) 0%,
      var(--text-hi) 38%,
      var(--accent-soft) 48%,
      #FFFFFF 52%,
      var(--accent-soft) 56%,
      var(--text-hi) 66%,
      var(--text-hi) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine-sweep 6s var(--ease-inout) infinite;
}

/* The travel MUST stay inside 0%–100%. With a 260%-wide no-repeat image,
   a position outside that range slides the image clear of part of the box,
   leaving those glyphs with no background — and transparent text fill over
   no background is invisible text, not un-highlighted text. Within the
   range the image always covers the box, and the bright band at ~50% of
   the image sweeps left-to-right across the wordmark. */
@keyframes shine-sweep {

  0%,
  62% {
    background-position: 100% 0;
  }

  92%,
  100% {
    background-position: 0% 0;
  }
}

.brand:hover .shine {
  animation-duration: 1.6s;
}

/* --- Toggler (two-bar minimal) ------------------------------------------ */
.nav-toggle {
  width: 44px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none !important;
}

.nav-toggle:focus {
  box-shadow: none;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--text-hi);
  transition: transform var(--dur-base) var(--ease),
    width var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease);
}

.nav-toggle__bar:last-child {
  width: 17px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  width: 26px;
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Mobile menu panel */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    margin-top: 1rem;
    padding: 1.25rem 1.1rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(11, 11, 14, .94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
  }

  .site-nav .nav-link {
    margin-inline: 0;
    padding-block: .7rem;
  }

  .site-nav .nav-link::after {
    display: none;
  }
}


/* ==========================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 3rem) 7rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Gradient blobs (parallax layers) */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.blob--a {
  width: 62vw;
  max-width: 820px;
  aspect-ratio: 1;
  top: -18vh;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .22) 0%, transparent 66%);
}

.blob--b {
  width: 46vw;
  max-width: 620px;
  aspect-ratio: 1;
  bottom: -14vh;
  right: -8vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .12) 0%, transparent 68%);
}

/* Pool of light on the "stage" */
.hero__stage {
  position: absolute;
  left: 50%;
  bottom: 4%;
  translate: -50% 0;
  width: min(760px, 74vw);
  aspect-ratio: 5 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .17) 0%, transparent 66%);
  filter: blur(26px);
  will-change: transform;
}

/* Line art. The soft top/bottom falloff is a CSS mask rather than an SVG
   gradient def — same result, and nothing case-sensitive to break. */
.hero__lines {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 8%, #000 52%, transparent 96%);
  will-change: transform;
}

.hero__lines svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 45%, transparent 0%, rgba(5, 5, 6, .55) 100%),
    linear-gradient(180deg, rgba(5, 5, 6, .5) 0%, transparent 22%, transparent 68%, var(--ink-900) 100%);
}

.hero__inner {
  position: relative;
}

.hero__eyebrow {
  margin-bottom: var(--space-md);
}

.hero__eyebrow::before {
  display: none;
}

/* centred layout reads cleaner without the rule */

.hero__title {
  margin: 0 0 var(--space-md);
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.028em;

  /* Held back until JS has split the words, so the headline is never painted
     once un-split and again masked. The reduced-motion block below and the
     no-JS guard in section 15 both force it back on. */
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.hero__title.is-revealed {
  opacity: 1;
}

/* Gradient key phrase.
   The gradient has to be declared on the split word-spans as well as on the
   <em> itself: background-clip:text does not reach into the inline-block
   spans main.js injects, so those glyphs would inherit the transparent fill
   with no background of their own and vanish. Declaring both covers the
   split and un-split (no-JS / reduced-motion) cases.
   The ramp is vertical on purpose — a horizontal one would visibly restart
   at every word boundary; top-to-bottom reads as one continuous treatment. */
/* Gradient key phrase.
   The gradient must be declared on the split word-spans as well as on the
   <em>: background-clip:text does not reach into the inline-block spans
   main.js injects, so those glyphs would inherit the transparent fill with
   no background of their own and vanish. The ramp is vertical so it does
   not visibly restart at each word boundary. */
.hero__title em,
.hero__title em .split-word>span {
  font-style: italic;
  background-image: linear-gradient(180deg, #C9F5DC 0%, var(--accent-soft) 52%, #0B7A43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__title em {
  display: inline-block;
}

.hero__sub {
  max-width: 58ch;
  margin: 0 auto var(--space-lg);
  color: var(--text-mid);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.68;
}

/* Meta row: date · venue · seats */
.hero__metarow {
  row-gap: .5rem;
  margin-bottom: var(--space-lg);
}

.meta-item {
  display: inline-flex;
  flex-direction: column;
  gap: .3rem;
  padding-inline: clamp(.9rem, 2.4vw, 1.9rem);
  color: var(--text-hi);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.4;
}

.meta-item__k {
  color: var(--text-low);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.meta-sep {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vh, 2.4rem);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  color: var(--text-low);
  transition: color var(--dur-base) var(--ease);
}

.scroll-cue:hover {
  color: var(--accent-soft);
}

.scroll-cue__label {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.scroll-cue__line {
  position: relative;
  display: block;
  width: 1px;
  height: 52px;
  overflow: hidden;
  background: var(--line-strong);
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: cue-travel 2.6s var(--ease-inout) infinite;
}

@keyframes cue-travel {
  0% {
    transform: translateY(-100%);
  }

  60%,
  100% {
    transform: translateY(250%);
  }
}


/* ==========================================================================
   08. ABOUT + STATS
   ========================================================================== */
.section--about {
  padding-top: clamp(4rem, 2rem + 7vw, 8rem);
}

.pillars {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.pillars__item {
  position: relative;
  padding: .68rem 0 .68rem 1.7rem;
  border-top: 1px solid var(--line);
  color: var(--text-mid);
  font-size: .95rem;
}

.pillars__item:last-child {
  border-bottom: 1px solid var(--line);
}

.pillars__item::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.32rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .7);
}

/* Vertical gradient divider between copy and stats */
.v-divider {
  display: block;
  width: 1px;
  height: 260px;
  margin-inline: clamp(.5rem, 2vw, 2rem);
  background: linear-gradient(180deg, transparent, var(--line-accent) 50%, transparent);
}

/* Stat panel — 1px gradient stroke via mask, no harsh border */
.stat-panel {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)),
    rgba(10, 10, 13, .5);
  box-shadow: var(--shadow-md);
}

.stat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
      rgba(var(--accent-rgb), .5),
      rgba(255, 255, 255, .07) 38%,
      transparent 62%,
      rgba(var(--accent-rgb), .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.stat {
  padding: clamp(1rem, .6rem + 1.4vw, 1.6rem) clamp(.5rem, 1.4vw, 1.1rem);
}

/* Hairline rules between the 2×2 cells */
.stat:nth-child(1),
.stat:nth-child(2) {
  border-bottom: 1px solid var(--line);
}

.stat:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.stat:nth-child(odd) {
  padding-left: 0;
}

.stat:nth-child(even) {
  padding-left: clamp(1rem, 2vw, 1.6rem);
}

.stat__num {
  margin: 0 0 .35rem;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.stat__num--word {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.06;
  color: var(--accent-soft);
  font-style: italic;
}

.stat__label {
  margin: 0;
  color: var(--text-low);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.5;
}


/* ==========================================================================
   09. SPEAKERS
   ========================================================================== */
.section--speakers {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .32) 22%, rgba(0, 0, 0, .32) 78%, transparent);
}

.speakers-grid {
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
}

.s-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background: linear-gradient(170deg, var(--ink-800), rgba(10, 10, 13, .72));
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    background-color var(--dur-slow) var(--ease);
  will-change: transform;
}

/* Resting hairline */
.s-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}

/* Gradient border that "traces" itself on hover: a masked 1px ring whose
   gradient sweeps around via background-position.                          */
.s-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
      transparent 0%,
      transparent 26%,
      rgba(var(--accent-rgb), .85) 44%,
      var(--accent-soft) 50%,
      rgba(var(--accent-rgb), .85) 56%,
      transparent 74%,
      transparent 100%);
  background-size: 300% 300%;
  background-position: 100% 100%;
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 320ms var(--ease), background-position 900ms var(--ease);
}

.s-card:hover,
.s-card:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg), 0 0 46px -18px rgba(var(--accent-rgb), .45);
}

.s-card:hover::before,
.s-card:focus-within::before {
  opacity: 1;
  background-position: 0% 0%;
}

.s-card:hover::after,
.s-card:focus-within::after {
  opacity: .35;
}

/* Media */
.s-card__media {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--ink-750);
}

.s-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.92);
  transform: scale(1);
  transition: transform var(--dur-slow) var(--ease),
    filter var(--dur-slow) var(--ease);
  will-change: transform;
}

.s-card:hover .s-card__media img,
.s-card:focus-within .s-card__media img {
  transform: scale(1.05);
  filter: grayscale(.15) contrast(1.02) brightness(1);
}

/* Bottom fade so the name always sits on a dark ground */
.s-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 13, .92));
  pointer-events: none;
}

/* Body */
.s-card__body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.35rem 1.4rem;
  margin-top: -2.6rem;
  /* let the copy overlap the image fade */
}

.s-card__tag {
  margin: 0 0 .55rem;
  color: var(--accent);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.s-card__name {
  margin: 0 0 .25rem;
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.s-card__role {
  margin: 0 0 1rem;
  color: var(--text-low);
  font-size: .82rem;
  line-height: 1.5;
}

.s-card__social {
  margin: auto 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
  gap: .5rem;
}

.s-card__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-low);
  transition: color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.s-card__social svg {
  width: 14px;
  height: 14px;
}

.s-card__social a:hover,
.s-card__social a:focus-visible {
  color: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .10);
  transform: translateY(-2px);
}

.speakers-note {
  margin: var(--space-lg) 0 0;
  color: var(--text-low);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}


/* ==========================================================================
   10. FORMAT / AGENDA
   ========================================================================== */
.agenda {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

.agenda__row {
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
  transition: background-color var(--dur-slow) var(--ease),
    padding-left var(--dur-slow) var(--ease);
}

.agenda__row:last-child {
  border-bottom: 1px solid var(--line);
}

.agenda__row:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .05), transparent 60%);
  padding-left: .9rem;
}

.agenda__time {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.agenda__title {
  color: var(--text-hi);
  font-size: clamp(1rem, .93rem + .4vw, 1.22rem);
  font-weight: 300;
  line-height: 1.45;
}

.agenda__note {
  color: var(--text-low);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .agenda__note {
    text-align: right;
  }
}

@media (max-width: 767.98px) {
  .agenda__note {
    margin-top: .5rem;
  }
}


/* ==========================================================================
   11. INVITE CTA
   ========================================================================== */
.section--invite {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.invite-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(1100px, 120vw);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .14) 0%, transparent 62%);
  filter: blur(48px);
  pointer-events: none;
}

.section--invite .eyebrow::before {
  display: none;
}

.section--invite .body-copy {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.invite-fine {
  margin: var(--space-md) 0 0;
  color: var(--text-low);
  font-size: .82rem;
}

.invite-fine a {
  color: var(--text-mid);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.invite-fine a:hover {
  color: var(--accent-soft);
  border-color: var(--accent);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) 0 var(--space-md);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
}

.brand--footer {
  margin-bottom: var(--space-sm);
}

.footer-copy {
  margin: 0;
  color: var(--text-low);
  font-size: .86rem;
  line-height: 1.75;
}

.footer-head {
  margin: 0 0 var(--space-xs);
  color: var(--text-hi);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li {
  margin-bottom: .55rem;
}

.footer-list a {
  color: var(--text-low);
  font-size: .86rem;
  transition: color var(--dur-base) var(--ease);
  /* Email addresses have no natural break opportunity; without this they
     refuse to wrap and widen the whole page on narrow screens. */
  overflow-wrap: anywhere;
}

.footer-list a:hover {
  color: var(--accent-soft);
}

.footer-social {
  display: flex;
  gap: .5rem;
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-low);
  transition: color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.footer-social svg {
  width: 15px;
  height: 15px;
}

.footer-social a:hover {
  color: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), .5);
  transform: translateY(-2px);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.footer-base p {
  margin: 0;
  color: var(--text-low);
  font-size: .76rem;
}

.footer-base a {
  transition: color var(--dur-base) var(--ease);
}

.footer-base a:hover {
  color: var(--accent-soft);
}


/* ==========================================================================
   13. MOTION UTILITIES
   ========================================================================== */

/* --- Hero split-text: per-word mask reveal ------------------------------ */
.split-line {
  display: block;
}

.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The reveal mask is overflow:hidden, which clips on every side. These
     hero line-heights (0.92-1.04) are far tighter than the fonts' ~1.3em
     glyph extents, so descenders, ascenders and italic overhangs were being
     cut. Padding gives the glyphs room inside the mask; the equal negative
     margin cancels it so line spacing and word spacing are untouched. */
  padding: .28em .12em;
  margin: -.28em -.12em;
}

.split-word>span {
  display: inline-block;
  /* Travel must clear the padded mask, not just the content box, or the
     word peeks out below the mask before it animates:
     travel >= height + padding-bottom. */
  transform: translateY(145%);
  transition: transform 1100ms var(--ease);
  will-change: transform;
}

.is-revealed .split-word>span {
  transform: translateY(0);
}

/* --- Generic hero entrance elements ------------------------------------- */
[data-hero-step] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: transform, opacity;
}

[data-hero-step].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Scroll reveal: fade + rise ----------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: transform, opacity;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Scroll reveal for headings: clip-path wipe + blur-to-focus ---------
   The clip lives on an inner wrapper (injected by main.js), never on the
   observed element itself: a clip-path that collapses the box to zero height
   also drives IntersectionObserver's ratio to 0, so an element clipped this
   way can never trigger its own reveal. The outer element only carries
   opacity, which does not affect intersection — so it stays observable while
   still being hidden from the first paint.
   ------------------------------------------------------------------------ */
.reveal-mask {
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.reveal-mask.is-in {
  opacity: 1;
}

.reveal-mask__inner {
  display: block;
  filter: blur(9px);
  clip-path: inset(-14% -6% 105% -6%);
  transform: translateY(14px);
  transition: filter 1100ms var(--ease),
    clip-path var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
  will-change: clip-path, filter, transform;
}

.reveal-mask.is-in .reveal-mask__inner {
  filter: blur(0);
  clip-path: inset(-14% -6% -14% -6%);
  transform: none;
}

/* --- Staggered children (delay applied inline by JS) -------------------- */
[data-stagger]>*>.s-card,
[data-stagger]>.agenda__row {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 850ms var(--ease), transform 850ms var(--ease);
  will-change: transform, opacity;
}

[data-stagger]>*>.s-card.is-in,
[data-stagger]>.agenda__row.is-in {
  opacity: 1;
  transform: none;
}

/* The stagger rule's `transform: none` outranks `.s-card:hover`, so the lift
   has to be restated at matching specificity for both hover and focus. */
[data-stagger]>*>.s-card.is-in:hover,
[data-stagger]>*>.s-card.is-in:focus-within {
  transform: translateY(-8px);
}


/* ==========================================================================
   14. RESPONSIVE REFINEMENTS
   ========================================================================== */

/* --- <=1024px ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .v-divider {
    height: 210px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --nav-h: 68px;
  }

  .hero {
    padding-block: calc(var(--nav-h) + 2.5rem) 6rem;
  }

  .stat-panel {
    margin-top: var(--space-sm);
  }

  .cursor-glow,
  .cursor-dot {
    display: none;
  }
}

/* --- <=768px ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .hero__metarow {
    flex-direction: column;
    row-gap: 1.15rem;
  }

  .meta-item {
    align-items: center;
    padding-inline: 0;
  }

  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn-primary-lux {
    width: 100%;
    max-width: 340px;
  }

  .scroll-cue__line {
    height: 38px;
  }

  .agenda__row:hover {
    padding-left: 0;
  }
}

/* --- <=375px ------------------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --section-y: 4.25rem;
  }

  .brand__text {
    font-size: .7rem;
    letter-spacing: .2em;
  }

  .hero__sub {
    font-size: 1rem;
  }

  .scroll-cue {
    display: none;
  }

  /* the fold is short; the cue crowds the CTA */

  .stat {
    padding-inline: 0;
  }

  .stat:nth-child(even) {
    padding-left: 1rem;
  }

  .stat__num {
    font-size: 2.1rem;
  }
}

/* Devices without hover (touch): disable hover-only affordances cleanly */
@media (hover: none) {
  .s-card:hover {
    transform: none;
    box-shadow: none;
  }

  .s-card::before {
    display: none;
  }

  .cursor-glow,
  .cursor-dot {
    display: none;
  }
}


/* --- No-JS guard --------------------------------------------------------
   Every hidden-then-revealed element depends on main.js. If scripting is off
   the page must still be readable, so show everything in its final state.
   (`css/no-js.css`, loaded from a <noscript> block, covers browsers that do
   not support the `scripting` media feature.)
   ------------------------------------------------------------------------ */
@media (scripting: none) {

  .reveal,
  .reveal-mask,
  .hero__title,
  [data-hero-step],
  [data-stagger]>*>.s-card,
  [data-stagger]>.agenda__row {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }

  .reveal-mask__inner {
    filter: none;
    clip-path: none;
    transform: none;
  }

  .cursor-glow,
  .cursor-dot {
    display: none;
  }
}


/* ==========================================================================
   15. REDUCED MOTION FALLBACK
   Everything non-essential is switched off; content is shown in its final
   state so nothing is left hidden behind an animation that never runs.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  body {
    animation: none;
    background-attachment: scroll;
  }

  .reveal,
  .reveal-mask,
  .hero__title,
  [data-hero-step],
  [data-stagger]>*>.s-card,
  [data-stagger]>.agenda__row {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .split-word>span {
    transform: none !important;
  }

  .reveal-mask__inner {
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  .shine {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--text-hi);
    color: var(--text-hi);
  }

  .cursor-glow,
  .cursor-dot,
  .scroll-cue__line::after {
    display: none;
  }

  .s-card:hover {
    transform: none;
  }
}



/* ==========================================================================
   PRIMARY LOGO (IIGC)
   The supplied artwork is black on transparency, so it is inverted on every
   dark ground. The intrinsic file is 666px square, so an explicit width is
   mandatory — without it the mark renders full size and shoves the navbar
   into the hero.
   ========================================================================== */
.brand__logo {
  width: clamp(30px, 2.4vw, 36px);
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
  filter: invert(1);
  opacity: .92;
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.brand:hover .brand__logo { opacity: 1; }

.site-footer .brand__logo { width: 42px; }

@media (max-width: 575.98px) {
  .brand__logo { width: 27px; }
  .site-footer .brand__logo { width: 36px; }
}