/* ===========================
   1. Custom Properties
   =========================== */
:root {
  /* Colors — Slate + Indigo + Teal */
  --color-slate:        #1a1a2e;
  --color-slate-light:  #22223a;
  --color-slate-lighter: #2a2a45;
  --color-indigo:       #5b5ea6;
  --color-indigo-mid:   #8587c0;
  --color-indigo-tint:  #b8b9d9;
  --color-offwhite:     #f4f1eb;
  --color-teal:         #4a9e8e;
  --color-teal-dim:     #3d8576;
  --color-white:        #ffffff;
  --color-text:         #e0e0ec;
  --color-text-muted:   #9494b0;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-indigo-glow:  rgba(91, 94, 166, 0.25);
  --color-teal-glow:    rgba(74, 158, 142, 0.40);
  --color-gold:         #e8b54d;

  /* Fonts */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid type */
  --text-hero:     clamp(3rem, 7vw, 6.5rem);
  --text-hero-sub: clamp(1.15rem, 2.2vw, 1.6rem);
  --text-h2:       clamp(1.8rem, 4vw, 3.2rem);
  --text-h3:       clamp(1.15rem, 1.8vw, 1.4rem);
  --text-body:     clamp(0.95rem, 1.1vw, 1.1rem);
  --text-small:    0.85rem;
  --text-mono:     clamp(1.4rem, 3vw, 2rem);

  /* Spacing */
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* ===========================
   2. Reset / Base
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Switched on by js/main.js after load: a smooth jump on first load (e.g. straight
   to /#programme) can stall in Safari while images arrive and stay at the top */
html.smooth-scroll {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-slate);
  line-height: 1.6;
  overflow-x: hidden; /* no sideways scroll — keeps right-anchored hero book inside the viewport */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }

/* ===========================
   3. Utility
   =========================== */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad);
}

.section__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-indigo);
  margin-bottom: 1rem;
}

.section__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

/* Dark sections */
.section--dark { background: var(--color-slate); color: var(--color-text); }
.section--dark .section__title { color: var(--color-white); }

/* Light sections */
.section--light { background: var(--color-offwhite); color: #2a2a3a; }
.section--light .section__title { color: #1a1a2e; }
.section--light .section__label { color: var(--color-indigo); }
.section--warm { background: #eaf2e0; color: #2a2a3a; }
.section--warm .section__title { color: #1a1a2e; }
.section--warm .section__label { color: var(--color-indigo); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 2em;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn--indigo {
  background: var(--color-indigo);
  color: var(--color-white);
}
.btn--indigo:hover {
  background: #4e51a0;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--color-indigo-glow);
}

.btn--teal {
  background: var(--color-teal);
  color: var(--color-white);
}
.btn--teal:hover {
  background: var(--color-teal-dim);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover {
  border-color: var(--color-indigo-mid);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn--ghost-dark {
  border: 1px solid rgba(26, 26, 46, 0.2);
  color: #1a1a2e;
}
.btn--ghost-dark:hover {
  border-color: var(--color-indigo);
  color: var(--color-indigo);
  transform: translateY(-2px);
}

.btn--lg { padding: 1em 2.5em; font-size: 1rem; }
.btn--sm { padding: 0.55em 1.4em; font-size: 0.85rem; }
.btn--full { width: 100%; }

/* Registration switch. <html class="registration-closed"> hides every Register/Buy CTA
   (.reg-open; markup, CSS and JS kept for the next edition) and shows the Sold Out
   markers (.reg-closed) in their place. Remove that one class to reopen registration. */
html:not(.registration-closed) .reg-closed,
.registration-closed .reg-open { display: none !important; }

/* Price switch. <html class="prices-hidden"> hides every .price-block (the tickets section,
   the bootcamp coupon). The 2026 archive shows no prices. */
.prices-hidden .price-block { display: none !important; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   4. Navigation
   =========================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(26, 26, 46, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.nav--scrolled {
  border-bottom-color: var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding-top: 6px;
}

.nav__logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-white);
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  line-height: 1.1;
  transition: opacity 0.2s ease;
}

.nav__logo:hover {
  opacity: 0.8;
}

.nav__tagline {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-indigo-tint);
  letter-spacing: 0.02em;
  text-align: left;
  margin-top: 1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--color-white); }
.nav__links a.btn--indigo { color: var(--color-white); }  /* the Register pill read muted grey */

.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}
.nav__toggle svg { width: 24px; height: 24px; }

/* ===========================
   5. Hero
   =========================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-slate);
  overflow: hidden;
  padding-top: 90px;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(91, 94, 166, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: gridPulse 6s ease-in-out infinite alternate;
}

@keyframes gridPulse {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-indigo-mid);
  margin-bottom: 1.5rem;
}
.hero__eyebrow strong {
  color: var(--color-indigo-tint);
  font-weight: 700;
  display: inline-block;
}


.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.hero__title span {
  color: var(--color-indigo-mid);
}

@keyframes yearPulse {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.1); }
  24% { transform: scale(1); }
}

.thought-cloud {
  position: relative;
  display: inline-block;
  max-width: 100%;
  background: var(--color-indigo);
  border-radius: 12px;
  padding: 2rem 3rem;
  margin-top: 1.5rem;
  margin-bottom: 75px;
  transform: rotate(-2deg);
}

.thought-cloud::before,
.thought-cloud::after {
  content: '';
  position: absolute;
  background: var(--color-indigo);
  border-radius: 50%;
}

.thought-cloud::before {
  width: 24px;
  height: 24px;
  bottom: -18px;
  right: 3rem;
}

.thought-cloud::after {
  width: 16px;
  height: 16px;
  bottom: -30px;
  right: 2rem;
}

.thought-cloud__bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-indigo);
  border-radius: 50%;
  bottom: -40px;
  right: 1rem;
}


.hero__theme {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

.typewriter-cursor {
  color: var(--color-indigo-mid);
  font-weight: 400;
  animation: blink 0.6s step-end infinite;
}

/* #10XORG hashtag — gold, ties to the book cover; styled once typing completes */
.hero__hashtag {
  color: var(--color-gold);
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}
a.hero__hashtag:hover { opacity: 0.8; text-decoration: underline; }

/* Small-screen-only line break (after "How do we lead") so the book doesn't land on words.
   Injected into the final typed text; a <br> only breaks when not display:none. */
.hero__sm-break { display: none; }
@media (max-width: 540px) { .hero__sm-break { display: inline; } }

/* 10X ORG book cover — links to 10xorg.com, revealed the instant typing finishes.
   While typing the box sits centered. The book is absolutely anchored to the box's right
   edge (not in flow, so it never shifts the box during typing), vertically centered to the
   box, and laps ON TOP of the box's right edge — only the empty padding zone, never text.
   On reveal it pops (bahm) and the whole box nudges left = the "kick". Same mechanic at
   every width; sizes/overlap shrink on phones so it stays inside the viewport. */
/* Plain block (inherits the hero's text-align:center) so the box stays inline-block and
   shrink-wraps/wraps its text exactly as before — flex here forced it to max-content width. */
.hero__pitch {
  display: block;
}

.hero__book-wrap {
  position: absolute;
  top: 50%;
  left: 100%;                                  /* anchor at the box's right edge */
  z-index: 4;                                  /* book sits on top of the box */
  line-height: 0;
  /* pull the book back over the box edge and counter the box's -2deg tilt so it stands straight;
     the extra -10px nudges it left onto the box, -20px lifts it up */
  transform: translate(calc(-30% - 10px), calc(-50% - 10px)) rotate(2deg);
  transform-origin: left center;
}

.hero__book {
  display: block;
  width: clamp(198px, 28.6vw, 374px);   /* +10% over the original 180/26vw/340 */
  max-width: none;     /* override global img{max-width:100%}; the absolute wrap's box is ~0-wide at left:100% */
  height: auto;
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* image carries its own baked shadow; add only a faint warm glow to lift it off the dark bg */
  filter: drop-shadow(0 14px 34px rgba(232, 181, 77, 0.22));
  will-change: opacity, transform;
}

.book-in .hero__book {
  opacity: 1;
  transform: scale(1);                         /* bahm — overshoots via the spring easing */
}

.hero__book-wrap:hover .hero__book {
  filter: drop-shadow(0 20px 42px rgba(232, 181, 77, 0.4));
}

/* The kick: once the book lands, shove the whole box (and its anchored book) slightly left. */
.thought-cloud {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.book-in .thought-cloud {
  transform: translateX(-6%) rotate(-2deg);
}

/* Tablet / iPad band: book +15% and nudged 15px down (wide screens above keep base). */
@media (min-width: 541px) and (max-width: 1024px) {
  .hero__book { width: clamp(228px, 32.9vw, 430px); }
  .hero__book-wrap { transform: translate(calc(-30% - 10px), calc(-50% - 5px)) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__book { transition: opacity 0.4s ease; transform: none; }
  .book-in .hero__book { transform: none; }
  .thought-cloud, .book-in .thought-cloud { transition: none; }
}

/* Phones: the box's natural width runs off-screen, which would drag the right-anchored book
   off with it. Cap the box to the viewport so it wraps and its right edge stays visible, then
   lap the book mostly over that right edge (vertically centred), poking out just past it. */
@media (max-width: 540px) {
  .thought-cloud { max-width: calc(100vw - 2rem); padding: 1.6rem 2.25rem; }
  .book-in .thought-cloud { transform: translateX(-30px) rotate(-2deg); }  /* kick box left when book lands */
  .hero__book { width: clamp(172px, 50.6vw, 230px); }   /* +15%; laps the box's right edge */
  .hero__book-wrap { transform: translate(calc(-72% + 80px), calc(-50% - 4px)) rotate(2deg); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero__tagline {
  font-size: 1.05rem;
  color: var(--color-teal);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.hero__venue {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.4rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}
.hero__venue a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.hero__venue a:hover {
  color: var(--color-white);
  text-decoration-color: currentColor;
}

/* The 28px = pin icon (18px) + its 10px margin, so the centered address sits under the
   hotel name rather than under icon + name. */
.hero__address {
  display: block;
  padding-left: 28px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* "See you …" sticker under the venue, tilted like the thought cloud. White on #c8323c is 5.3:1. */
.hero__next {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
  background: #c8323c;
  padding: 0.55em 1.25em;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(200, 50, 60, 0.28);
  transform: rotate(-2deg);
  margin-top: 0.5rem;
}
.hero__next span { white-space: nowrap; }
.hero__next { margin-bottom: 2.5rem; }
/* "Past event" line under the title: the 2026 site is an archive (Alexey, 2026-10-23) */
.hero__when {
  margin: 0.75rem 0 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.hero__past {
  display: inline-block;
  vertical-align: 0.1em;
  margin-right: 0.6em;
  padding: 0.25em 0.65em;
  border-radius: 6px;
  background: #c8323c;
  color: var(--color-white);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The 2027 sticker is a link to the live site at / */
a.hero__next { text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.hero__next:hover, a.hero__next:focus-visible { color: var(--color-white); transform: rotate(-2deg) translateY(-2px); box-shadow: 0 14px 32px rgba(200, 50, 60, 0.4); }

.hero__tags {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.hero__tag {
  display: inline-block;
  padding: 0.5em 1.4em;
  background: none;
  border: 1px solid rgba(133, 135, 192, 0.3);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.hero__tags {
  --flash-duration: 6s;
}

.hero__tag::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(133, 135, 192, 0.25), transparent);
  animation: none;
}

.hero__tag:nth-child(1)::after { animation-delay: 0s; }
.hero__tag:nth-child(2)::after { animation-delay: 0.1s; }
.hero__tag:nth-child(3)::after { animation-delay: 0.2s; }

@keyframes tagFlash {
  0% { left: -100%; opacity: 0; }
  5% { opacity: 1; }
  20% { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

.typing-done .hero__tag::after {
  animation: tagFlash var(--flash-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
.typing-done .hero__tag:nth-child(2)::after { animation-delay: 0.1s !important; }
.typing-done .hero__tag:nth-child(3)::after { animation-delay: 0.2s !important; }


.hero__soldout {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: #c97b7b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 1rem;
}

.hero__seats {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
  min-height: 1.2em; /* reserve space so the count doesn't shift layout when it loads */
}

.hero__cta-pass {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-teal);
  padding: 0.75em 2em;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero__cta-pass:hover {
  background: var(--color-teal-dim);
  transform: translateY(-2px);
}
.hero__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-indigo-mid);
}

/* ===========================
   5b. 2026 edition divider — everything below it is last year's summit
   =========================== */
.edition {
  background: var(--color-indigo);
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.edition__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-white);
}
.edition__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-white);
  margin-top: 0.6rem;
}

/* ===========================
   6. About
   =========================== */
.about__grid {
  display: grid;
  gap: 2.5rem;
}

.about__text {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.7;
  color: #4a4a5a;
}
.about__text p + p { margin-top: 1rem; }
.about__text--dark { color: var(--color-text); margin-bottom: 2.5rem; }

.about__highlights {
  display: grid;
  gap: 1rem;
}

.highlight-card {
  background: var(--color-slate);
  border-left: 3px solid var(--color-indigo);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(26, 26, 46, 0.15);
}

.highlight-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.highlight-card p {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: #c8c8da;
  line-height: 1.65;
  font-weight: 400;
}

.about__attend {
  margin-top: 3rem;
}

/* Benefit cards */
.about__benefits {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .about__benefits {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-left: 3px solid var(--color-indigo);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.08);
}

.benefit-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  background-image: linear-gradient(rgba(26, 26, 46, 0.1), rgba(26, 26, 46, 0.1));
  background-size: 33% 1px;
  background-position: bottom left;
  background-repeat: no-repeat;
}

.benefit-card p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #55556a;
  line-height: 1.65;
  font-weight: 450;
}

/* Key questions */
.about__questions {
  margin-top: 4rem;
}

.questions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.questions__grid .highlight-card {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.5rem;
  align-items: center;
}

.questions__grid .highlight-card h3 {
  margin-bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding-right: 1.5rem;
}

@media (max-width: 768px) {
  .questions__grid .highlight-card {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .questions__grid .highlight-card h3 {
    border-right: none;
    padding-right: 0;
  }
}

/* ===========================
   6b. Format
   =========================== */
.format__grid {
  display: grid;
  gap: 2.5rem;
}

.format__text {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 680px;
}
.format__text p + p { margin-top: 1rem; }
.format__text strong { color: var(--color-white); }

.format__features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.format-card {
  background: var(--color-slate-light);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.format-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-teal);
}

.format-card__icon {
  display: block;
  margin-bottom: 0.75rem;
}

.format-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.3rem;
}

.format-card p {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ===========================
   6c. Hosts
   =========================== */
.hosts__content {
  max-width: 680px;
  font-size: var(--text-body);
  line-height: 1.7;
  color: #4a4a5a;
}
.hosts__content p + p { margin-top: 1rem; }
.hosts__content strong { color: #1a1a2e; }

/* ===========================
   7. Speakers
   =========================== */
.experts__intro {
  max-width: 720px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.7;
  color: #4a4a5a;
  margin-bottom: 2.5rem;
}

.speakers__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.speakers__gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-slate-light);
  transition: transform 0.3s ease;
}
.speakers__gallery img:hover {
  transform: translateY(-4px);
}
.speakers__tile {
  position: relative;
  display: block;
}
.speakers__tile-caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 720px) {
  .speakers__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
@media (max-width: 480px) {
  .speakers__gallery {
    grid-template-columns: 1fr;
  }
}

/* Invited-expert cards — ride the .speakers__gallery grid above (columns and
   column-gap inherited untouched). MUST stay below those rules: the two
   overrides here tie on specificity, so source order is what makes them win.
   Why row-gap and the hover cancel exist: CLAUDE.md § Invited Experts. */
.experts__grid { row-gap: 1.75rem; }
/* Experts ride the same 3-col talk-gallery grid by default; --4 bumps it to
   four per row and keeps its own step-down breakpoints so the 3-col talk
   gallery above is untouched. */
.experts__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .experts__grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .experts__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .experts__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.experts__card {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.experts__card:hover { transform: translateY(-4px); }
.experts__card img:hover { transform: none; }
.experts__name {
  display: block;
  margin-top: 0.65rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-slate);
}

/* ===========================
   8. Programme
   =========================== */
/* The id sits on the container, not the section, so /#programme skips the
   section's top padding and lands on the "Program" heading, just under the nav.
   #experience (Summit Experience) works the same way. */
#programme,
#experience {
  scroll-margin-top: 2rem;
}
.programme__timeline {
  position: relative;
  padding-left: 6rem;
}
.programme__timeline::before {
  content: '';
  position: absolute;
  left: 4.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-indigo);
  border-radius: 1px;
}

.programme__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
}
.programme__item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-indigo);
  border: 2px solid var(--color-offwhite);
  transform: translateX(-4px);
}

.programme__time {
  position: absolute;
  left: -5.5rem;
  top: 0.85rem;
  width: 4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-indigo);
  letter-spacing: 0.04em;
}

.programme__card {
  flex: 1;
  display: flex;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  gap: 0.25rem;
  align-items: flex-start;
}
.programme__speakers {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 0.75rem;
}
.programme__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.programme__avatar-wrap[data-bio] {
  cursor: pointer;
}
.programme__avatar-wrap[data-bio]:hover .programme__avatar {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.programme__avatar-wrap[data-bio]:hover .programme__avatar-name {
  color: var(--color-indigo);
  transition: color 0.2s ease;
}
.programme__avatar {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.programme__avatar-name {
  font-size: 0.75rem;
  color: #6a6a7a;
  text-align: center;
  font-family: var(--font-body);
  white-space: nowrap;
}
.programme__col-left {
  flex: 0 0 auto;
  min-width: 0;
  width: 280px;
}
.programme__col-right {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
}
.programme__col-right:empty {
  display: none;
}
.programme__col-right:empty::after {
  display: none;
}

.programme__col-left h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.25rem;
}

.programme__speaker {
  font-size: var(--text-small);
  color: #6a6a7a;
}

.programme__tag {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.programme__tag--keynote {
  background: var(--color-indigo);
  color: var(--color-white);
}
.programme__tag--talk {
  background: var(--color-teal);
  color: var(--color-white);
}
.programme__tag--workshop {
  background: var(--color-indigo-mid);
  color: var(--color-white);
}
.programme__tag--ted-talk {
  background: var(--color-teal);
  color: var(--color-white);
}
.programme__tag--panel {
  background: var(--color-indigo);
  color: var(--color-white);
}
.programme__tag--break {
  background: rgba(26, 26, 46, 0.06);
  color: #6a6a7a;
}

/* Ted-like talks: group consecutive cards without repeating the time */
.programme__item--no-time {
  margin-top: -0.75rem;
}
.programme__item--no-time .programme__time {
  visibility: hidden;
}

/* Clickable session description */
.programme__desc-link {
  color: #1a1a2e;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--color-indigo-mid);
  transition: color 0.2s ease;
}
.programme__desc-link:hover {
  color: var(--color-indigo);
}

/* Session details (right column) */
.programme__col-right {
  position: relative;
}
.programme__session-detail {
  display: block;
}
.programme__session-detail.is-open,
.programme__bio.is-open {
  cursor: pointer;
}
.programme__session-detail::before {
  content: 'Talk Abstract';
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-indigo);
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.12);
}
.programme__session-detail p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #3a3a4a;
  margin-bottom: 0.5rem;
}
.programme__session-detail p:last-child {
  margin-bottom: 0;
}

/* Session slides link (left column, under the speakers) */
.programme__slides {
  margin-top: 0.85rem;
}

/* Speaker bio toggle */
.programme__speaker-link {
  color: var(--color-indigo);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--color-indigo-mid);
  transition: color 0.2s ease;
}
.programme__speaker-link:hover {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}
.programme__bio {
  display: none;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
  animation: bioFadeIn 0.3s ease;
}
.programme__bio.is-open::before {
  content: 'Speaker Bio';
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-indigo);
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.12);
}
.programme__bio.is-open {
  display: block;
}
.programme__bio-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #3a3a4a;
}
@keyframes bioFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .programme__card {
    flex-direction: column;
    gap: 0.25rem;
  }
  .programme__col-left {
    width: auto;
    flex: 0 0 auto;
  }
  .programme__avatar {
    width: 60px;
    height: 60px;
  }
}

/* ===========================
   8b. Summit Experience (photo slider)
   =========================== */
.experience__frame {
  position: relative;
}
.experience__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 12px;
  background: var(--color-slate);
}
.experience__track::-webkit-scrollbar { display: none; }
.experience__slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.experience__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experience__arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.55);
  color: var(--color-white);
  transition: background 0.2s ease;
}
.experience__arrow:hover { background: var(--color-indigo); }
.experience__arrow--prev { left: 1rem; }
.experience__arrow--next { right: 1rem; }
.experience__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
}
.experience__dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.experience__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}
.experience__dot.is-active::before {
  background: var(--color-indigo);
  transform: scale(1.3);
}
.experience__counter {
  display: none;
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #6a6a7a;
}
/* Author display rules beat the UA's [hidden], so restate it: one photo = no controls */
.experience__arrow[hidden],
.experience__dots[hidden] { display: none; }
@media (max-width: 600px) {
  .experience__arrow { width: 36px; height: 36px; margin-top: -18px; }
  .experience__arrow--prev { left: 0.5rem; }
  .experience__arrow--next { right: 0.5rem; }
  .experience__dot { width: 16px; }  /* up to 20 dots stay on one row on a 360px phone */
}
/* 21+ photos: "n / N" instead of dots at every width. Past 20 the dots wrap into rows on
   phones, and at 84 photos they take three rows even on desktop. */
.experience--many .experience__dots { display: none; }
.experience--many .experience__counter { display: block; }

/* ===========================
   8c. Testimonials: blurbs under the hero title, cards above and below the program.
   Markup is generated from testimonials.json by scripts/testimonials.mjs.
   =========================== */
/* Book-cover blurbs. A row on wider screens, wider than the 860px hero column, and a swipe
   row on phones. Static on purpose: auto-rotating text would need a pause control (WCAG 2.2.2).
   The bottom margin keeps the row clear of the 10X ORG book, which pokes ~70px above the cloud. */
.blurbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: min(1040px, calc(100vw - 2 * var(--container-pad)));
  margin: 0 calc((100% - min(1040px, 100vw - 2 * var(--container-pad))) / 2) 4.5rem;
}
.blurbs__item {
  padding: 0.2rem 1.25rem;
}
.blurbs__item + .blurbs__item {
  border-left: 1px solid rgba(133, 135, 192, 0.25);
}
.blurbs__quote {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
}
.blurbs__by {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.blurbs__by a {
  color: var(--color-indigo-tint);
  text-decoration: underline;
  text-decoration-color: rgba(184, 185, 217, 0.35);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.blurbs__by a:hover {
  color: var(--color-white);
  text-decoration-color: currentColor;
}
/* contain: the swipe row's content must not widen the hero column (a flex item) on phones */
@media (max-width: 767px) {
  .blurbs {
    contain: inline-size;
    grid-auto-columns: 62%;
    width: auto;
    margin-bottom: 2.25rem;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    scrollbar-width: none;
  }
  .blurbs::-webkit-scrollbar { display: none; }
  .blurbs__item { scroll-snap-align: start; padding-inline: 0.9rem; }
}

/* Cards, one group above and one below the program. Four across on wide screens, 2×2 below
   1100px, a swipe row with the next card peeking on phones. */
.testimonials--above-program {
  margin-bottom: clamp(3.5rem, 7vw, 5rem);
}
.testimonials--below-program {
  margin-top: clamp(3.5rem, 7vw, 5rem);
}
.testimonials__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
}
.testimonial__quote::before {
  content: '\201C';
  display: block;
  height: 1.5rem;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-indigo);
}
.testimonial__quote p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #2a2a3a;
}
.testimonial__tr {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #6a6a7a;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1.1rem;
}
.testimonial__photo {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-indigo-tint);
}
.testimonial__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-indigo);
}
.testimonial__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a2e;
}
.testimonial__title {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6a6a7a;
}
.testimonial__link {
  align-self: flex-start;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-indigo);
  border-bottom: 1px dotted var(--color-indigo-mid);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.testimonial__link::after { content: ' \2192'; }
.testimonial__link:hover {
  color: var(--color-teal-dim);
  border-bottom-color: var(--color-teal-dim);
}
@media (max-width: 1099px) {
  .testimonials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .testimonials__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 320px);
    margin-inline: calc(-1 * var(--container-pad));
    padding: 0 var(--container-pad) 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    scrollbar-width: none;
  }
  .testimonials__list::-webkit-scrollbar { display: none; }
  .testimonial { scroll-snap-align: start; }
}

/* ===========================
   9. Tickets
   =========================== */
.tickets {
  background:
    radial-gradient(ellipse at 50% 30%, var(--color-indigo-glow), transparent 60%),
    var(--color-slate);
}

.tickets__counter {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.02em;
  margin: 0 0 2.5rem;
}
.tickets__counter-num {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-teal);
  line-height: 1;
  margin: 0 0.15em;
}

.tickets__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Side cards become quiet price-anchors — no button, dimmed status text */
.ticket-card__status {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 1rem 0 0.25rem;
}
.ticket-card--muted { opacity: 0.6; }

/* Featured (current) ticket — brighter + larger + glowing shine */
.ticket-card--featured {
  border: 3px solid var(--color-teal);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(74, 158, 142, 0.22), transparent 70%),
    var(--color-slate-lighter);
  box-shadow: 0 0 44px var(--color-teal-glow), 0 0 110px var(--color-teal-glow);
  padding-block: 3.25rem;
  animation: featuredGlow 3s ease-in-out infinite;
}
@keyframes featuredGlow {
  0%, 100% { box-shadow: 0 0 38px var(--color-teal-glow), 0 0 80px rgba(74, 158, 142, 0.22); }
  50%      { box-shadow: 0 0 56px var(--color-teal-glow), 0 0 130px rgba(74, 158, 142, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .ticket-card--featured { animation: none; }
}

/* Wide screens: force 3 equal columns in one row, featured card wider */
@media (min-width: 920px) {
  .tickets__grid { flex-wrap: nowrap; }
  .ticket-card { max-width: none; flex: 1 1 0; }
  .ticket-card--featured {
    flex-grow: 1.22;
    transform: scale(1.04);
    z-index: 2;
  }
}

.ticket-card {
  position: relative;
  background: var(--color-slate-light);
  border: 2px solid var(--color-indigo);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 50px var(--color-indigo-glow);
}

.ticket-card__badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--color-teal);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3em 1em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticket-card--sold-out,
.registration-closed .ticket-card--featured {
  opacity: 0.5;
}
.ticket-card--sold-out .ticket-card__badge,
.registration-closed .ticket-card--featured .ticket-card__badge {
  background: #c97b7b;
}
.ticket-card__badge--active {
  background: var(--color-teal);
}
.ticket-card__amount--struck {
  text-decoration: line-through;
}
.btn--outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.5);
}
.btn--disabled {
  pointer-events: none;
  cursor: default;
}

.ticket-card__tier {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.ticket-card__price {
  margin-bottom: 1.5rem;
}

.ticket-card__amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.02em;
}

.ticket-card__period {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.ticket-card__perks {
  text-align: left;
  margin-bottom: 2rem;
}

.ticket-card__perks li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.95rem;
}
.ticket-card__perks li::before {
  content: '✓';
  color: var(--color-teal);
  margin-right: 0.75rem;
  font-weight: 700;
}

.tickets__note {
  text-align: center;
  color: var(--color-white);
  margin-top: 3rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 600;
}
.tickets__note a {
  display: block;
  margin: 0.75rem auto 0;
  max-width: fit-content;
  padding: 0.75em 2em;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.3s ease, transform 0.3s ease;
}
.tickets__note a:hover {
  background: var(--color-teal-dim);
  transform: translateY(-2px);
}

/* ===========================
   9b. Bootcamp
   =========================== */
.bootcamp__image {
  margin-bottom: 2.5rem;
  border-radius: 12px;
  overflow: hidden;
}

.bootcamp__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.bootcamp__image a:hover img {
  transform: scale(1.01);
}

.bootcamp__image-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-indigo);
  transition: color 0.2s ease;
}

.bootcamp__image-link:hover {
  color: #4e51a0;
}

.bootcamp__discount {
  max-width: 680px;
  margin: 2.5rem auto 0;
  text-align: center;
  background: var(--color-slate);
  color: var(--color-white);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.bootcamp__discount code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.95em;
  letter-spacing: 0.05em;
}

.bootcamp__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ===========================
   10. Footer
   =========================== */
.footer {
  background: var(--color-slate);
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer__brand a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
}
.footer__brand p {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.footer__links {
  display: flex;
  gap: 1.5rem;
}
.footer__links a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.footer__links a:hover { color: var(--color-white); }

.footer__copy {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ===========================
   11. Animations
   =========================== */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===========================
   12. Responsive
   =========================== */
/* The nav has six items since Summit Experience was added (2026-10-16): below ~900px they
   no longer fit next to the logo, so the drawer takes over there, not only on phones */
@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    gap: 1.5rem;
    background: var(--color-slate);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 200;
  }
  .nav__links--open {
    transform: translateX(0);
  }
  .nav {
    background: var(--color-slate);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 300;
  }
  .nav__toggle {
    display: flex;
    position: relative;
    z-index: 201;
  }
}
@media (min-width: 901px) and (max-width: 1023px) {
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: 0.85rem; }
}
@media (max-width: 768px) {
  .nav__logo {
    font-size: 1.1rem;
    padding: 0.4em 0.7em;
  }
  .nav__tagline {
    font-size: 0.7rem;
  }

  .hero__title { letter-spacing: -0.025em; }

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

  .speakers__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

  .programme__timeline { padding-left: 4.5rem; }
  .programme__timeline::before { left: 3.2rem; }
  .programme__item { padding-left: 1rem; }
  .programme__item::before { left: -1rem; }
  .programme__time { left: -4.2rem; width: 3.2rem; font-size: 0.7rem; }
  .programme__card { flex-direction: column; gap: 0.75rem; }
  .programme__avatar { width: 70px; height: 70px; }

  .tickets__grid { gap: 1.5rem; }
  .ticket-card { max-width: 100%; }

  .hero__cta-pass { font-size: 0.85rem; padding: 0.65em 1.5em; }

  /* The desktop line-break is dropped on narrow screens, but the two halves must
     not weld together ("BootcampDesign" — reported from an iPhone 2026-08-09).
     Every .section__title therefore carries a space before its <br>; a trailing
     space is ignored when the break renders, and becomes the word gap when it
     does not. Keep that space if you add a new title here. */
  .section__title br { display: none; }

  .footer__inner { justify-content: center; text-align: center; }
  .footer__brand { width: 100%; }
}

@media (min-width: 769px) {
  .about__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}