@charset "UTF-8";
/* ================================================================
   Thailand Secure Edge AI Summit 2026
   Minimal, premium design. Deep navy + white, blue CTAs.
   ================================================================ */

/* --- Fonts --- */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../assets/fonts/noto-sans-thai-thai.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0E01-0E5B; }
@font-face { font-family: 'Noto Sans Thai'; src: url('../assets/fonts/noto-sans-thai-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF; }

/* --- Custom Properties --- */
:root {
  --navy: #0A1628;
  --white: #FFFFFF;
  --gray: #F5F7FA;
  --blue: #0066B3;
  --blue-hover: #004F8A;
  --red: #DF3336;
  --text: #1A1A2E;
  --text-sec: #6B7280;
  --font: 'Inter', 'Noto Sans Thai', system-ui, sans-serif;
  --max-w: 1120px;
  --radius: 8px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
body { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* --- Utilities --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

/* --- Reveal Animation --- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }


/* ================================================================
   NAV
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__brand-img { height: 40px; width: auto; display: block; }

.nav__links { display: flex; gap: 2rem; }
.nav__link {
  color: rgba(255,255,255,0.7); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.01em; transition: color 0.2s;
}
.nav__link:hover { color: var(--white); }

.nav__right { display: flex; align-items: center; gap: 1rem; }

.lang-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 2px; }
.lang-toggle__btn {
  padding: 4px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 4px;
  color: rgba(255,255,255,0.5); transition: all 0.2s;
}
.lang-toggle__btn.active { background: var(--white); color: var(--navy); }

.nav__hamburger { display: none; width: 24px; height: 24px; flex-direction: column; justify-content: center; gap: 5px; }
.nav__hamburger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 1px; transition: 0.3s; }

/* Mobile nav overlay */
.mobile-nav {
  display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: var(--navy); z-index: 99;
  flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
}
.mobile-nav.open { display: flex; }
.mobile-nav__link { color: var(--white); font-size: 1.25rem; font-weight: 500; }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}


/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-block; padding: 0.75rem 2rem;
  background: var(--blue); color: var(--white);
  font-weight: 600; font-size: 0.9375rem; border-radius: var(--radius);
  transition: background 0.2s, transform 0.15s;
  text-align: center;
}
.btn:hover { background: var(--blue-hover); transform: translateY(-1px); }
.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.8125rem; }
.btn--lg { padding: 1rem 2.5rem; font-size: 1rem; }
.btn--hero { padding: 1rem 3rem; font-size: 1.0625rem; letter-spacing: 0.02em; }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.25); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); transform: none; }


/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,0.82) 0%, rgba(10,22,40,0.92) 100%);
}
.hero__content {
  position: relative; z-index: 1; text-align: center;
  padding: 8rem 1.5rem 6rem; max-width: 800px;
}
.hero__emblem {
  display: block; margin: 0 auto 1.75rem;
  width: 112px; height: 112px;
  filter: drop-shadow(0 0 24px rgba(16, 185, 129, 0.25));
}
.hero__emblem img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero__eyebrow {
  color: rgba(255,255,255,0.6); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero__title {
  color: var(--white); font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.hero__gradient-secure {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__gradient-edgeai {
  background: linear-gradient(135deg, #38BDF8, #818CF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__tagline {
  color: rgba(255,255,255,0.7); font-size: 1.125rem; font-weight: 400;
  line-height: 1.6; max-width: 640px; margin: 0 auto 1rem;
}
.hero__sub {
  color: rgba(255,255,255,0.55); font-size: 1rem; font-weight: 400;
  margin-bottom: 2.5rem;
}
.hero__logos {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 3.5rem;
}
.hero__logos img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: 0.5; }
.hero__logos-x { color: rgba(255,255,255,0.3); font-size: 1.25rem; }


/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding: 7rem 0; }
.section--dark { background: var(--navy); color: var(--white); position: relative; }

.section__title {
  font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 1rem;
}
.section__lead {
  text-align: center; max-width: 640px; margin: 0 auto 4rem;
  color: var(--text-sec); font-size: 1.0625rem; line-height: 1.7;
}
.section--dark .section__lead { color: rgba(255,255,255,0.55); }


/* ================================================================
   ABOUT PILLARS (alternating image + text)
   ================================================================ */
.pillar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center; margin-bottom: 6rem;
}
.pillar:last-child { margin-bottom: 0; }
.pillar--reverse .pillar__img { order: 2; }
.pillar--reverse .pillar__text { order: 1; }

.pillar__img { border-radius: var(--radius); overflow: hidden; }
.pillar__img img { width: 100%; height: auto; display: block; }

.pillar__text h3 {
  font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.01em;
}
.pillar__text p { color: var(--text-sec); font-size: 1rem; line-height: 1.75; }

@media (max-width: 768px) {
  .pillar { grid-template-columns: 1fr; gap: 2rem; }
  .pillar--reverse .pillar__img { order: 0; }
  .pillar--reverse .pillar__text { order: 0; }
}


/* ================================================================
   SPEAKERS
   ================================================================ */
.speakers__bg {
  position: absolute; inset: 0; z-index: 0;
}
.speakers__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }
.speakers__inner { position: relative; z-index: 1; }

.tag {
  padding: 0.5rem 1.25rem; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px; font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.8); transition: border-color 0.2s;
}
.tag:hover { border-color: rgba(255,255,255,0.5); }

/* Speaker Showcase — 3-zone layout */
.spk-showcase {
  display: grid;
  /* Three columns:
     - List 640px so each of its 2 inner columns gets ~240px of text after
       avatar + gap + padding. Combined with text-wrap: balance on
       .spk-item__name, long Thai names like 'ศาสตราจารย์ ดร.สมปอง
       คล้ายหนองสรวง' and 'ศาสตราจารย์ ดร. ยศชนัน วงศ์สวัสดิ์' break to
       2 evenly balanced lines instead of leaving a single trailing
       syllable orphaned on a third line.
     - Photo 1fr / detail 1.5fr — featured portrait has max-width: 380px so
       photo doesn't need an even share; extra width goes to detail where
       Thai role + topic + abstract previously wrapped 3+ lines and made
       the centre photo visually shift each time the user clicked a
       different speaker. */
  grid-template-columns: 640px 1fr 1.5fr;
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}
/* Speakers section opts into a wider container with tighter side padding
   than the global 1120/1.5rem defaults so the three-column showcase has
   room without squeezing the detail panel. Tighter padding also limits
   horizontal jitter when different-length names re-flow the layout. */
#speakers .container { max-width: 1280px; padding-left: 1rem; padding-right: 1rem; }

/* Left: Speaker list (fixed 2 columns × 5 rows grid) */
.spk-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 4px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.spk-list::-webkit-scrollbar { width: 3px; }
.spk-list::-webkit-scrollbar-track { background: transparent; }
.spk-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.spk-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: none; background: transparent;
  border-radius: var(--radius);
  cursor: pointer; text-align: left;
  transition: background 0.2s;
  width: 100%;
  font-family: var(--font);
}
.spk-item:hover { background: rgba(255,255,255,0.06); }
.spk-item.active {
  background: rgba(0,102,179,0.15);
  border-left: 3px solid var(--blue);
}

.spk-item__img {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  object-position: var(--spk-focal, 50% 50%);
  border: 2px solid transparent;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}
.spk-item.active .spk-item__img {
  border-color: var(--blue);
}
.spk-item__name {
  font-size: 0.8125rem; font-weight: 600;
  color: var(--white); line-height: 1.3;
  /* Balance line lengths so Thai compound words like 'คล้ายหนองสรวง'
     don't end up with a single trailing syllable on its own line. */
  text-wrap: balance;
}
.spk-item__role {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
}

/* Center: Featured photo */
.spk-photo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.spk-photo img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: var(--spk-focal, 50% 50%);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  transition: opacity 0.3s ease;
}

/* Right: Speaker details */
.spk-detail { padding-top: 0.25rem; }
.spk-detail__name {
  font-size: 1.5rem; font-weight: 700;
  color: var(--white); line-height: 1.2;
  margin-bottom: 0.5rem;
}
.spk-detail__role {
  font-size: 0.9375rem; font-weight: 500;
  color: var(--blue); line-height: 1.4;
  margin-bottom: 0.25rem;
}
.spk-detail__org {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.75rem;
}
.spk-detail__divider {
  width: 48px; height: 2px;
  background: var(--blue); opacity: 0.5;
  margin: 1rem 0;
}
.spk-detail__topic-label {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.25rem;
}
.spk-detail__topic {
  font-size: 1rem; font-weight: 600;
  color: var(--white); line-height: 1.4;
  margin-bottom: 0;
}
.spk-detail__abstract {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-top: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .spk-showcase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .spk-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    max-height: none;
    gap: 0.5rem;
    padding-right: 0;
    overflow-x: auto;
  }
  /* Let mobile layout auto-flow; ignore inline col/row from JS. */
  .spk-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .spk-item {
    flex-direction: column;
    text-align: center;
    gap: 0.375rem;
    padding: 0.5rem;
  }
  .spk-item.active { border-left: none; border-bottom: 3px solid var(--blue); }
  .spk-photo img { max-width: 320px; margin: 0 auto; }
}


/* ================================================================
   SCHEDULE TIMELINE
   ================================================================ */
/* Agenda Tabs */
.agenda-tabs {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.agenda-tab {
  padding: 0.625rem 1.5rem; border-radius: 100px;
  font-family: var(--font); font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  background: transparent; color: var(--text-sec);
  border: 1.5px solid rgba(0,0,0,0.12);
}
.agenda-tab:hover { border-color: var(--blue); color: var(--blue); }
.agenda-tab.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

.tl-badge--all { background: rgba(100,116,139,0.1); color: #64748B; }
.tl-note { font-size: 0.8125rem; color: var(--red); font-weight: 500; margin-top: 0.25rem; }
/* Hide empty duration notes on the public page so the editor can blank out
   a value (e.g. "10 mins") without leaving an awkward gap. The editor
   injects its own CSS override below to make these still editable in
   /editor's iframe view. */
.tl-note:empty { display: none; }

.timeline { max-width: 720px; margin: 0 auto; }

.tl-item {
  display: grid; grid-template-columns: 80px 1fr; gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tl-item:last-child { border-bottom: none; }

.tl-time {
  font-size: 1.125rem; font-weight: 700; color: var(--blue);
  padding-top: 0.15rem;
}
.tl-body h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.25rem; }
.tl-speaker { color: var(--text-sec); font-size: 0.875rem; }

.tl-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.625rem; border-radius: 100px;
  background: rgba(0, 102, 179, 0.08); color: var(--blue);
  margin-bottom: 0.5rem;
}
.tl-badge--tech { background: rgba(16, 185, 129, 0.08); color: #059669; }
.tl-badge--workshop { background: rgba(223, 51, 54, 0.08); color: var(--red); }
.tl-badge--demo { background: rgba(245, 158, 11, 0.10); color: #D97706; }
.tl-badge--network { background: rgba(124, 58, 237, 0.10); color: #7C3AED; }

/* Multi-speaker session list (e.g. the combined 11:45–12:45 panel
   discussion where four presenters share a single agenda block). One
   bullet per name keeps the layout readable without forcing four
   separate <p class="tl-speaker"> blocks that read as separate sessions. */
.tl-speakers-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.tl-speakers-list li { font-size: 0.875rem; color: var(--text-sec); padding-left: 1rem; position: relative; line-height: 1.55; }
.tl-speakers-list li::before { content: '\2022'; color: var(--blue); position: absolute; left: 0; font-weight: 700; }
/* Inline-bold names share the row's gray colour — bold is just weight-only
   emphasis so the speaker line stays visually subordinate to the session
   title (h4). Applied to both single-speaker rows (.tl-speaker) and the
   multi-speaker bullet list so every keynote name renders consistently. */
.tl-speaker strong,
.tl-speakers-list li strong { font-weight: 600; color: inherit; }

@media (max-width: 480px) {
  .tl-item { grid-template-columns: 60px 1fr; gap: 1rem; }
  .tl-speakers-list li { font-size: 0.875rem; }
}


/* ================================================================
   REGISTRATION FORM
   ================================================================ */
.reg-card {
  max-width: 640px; margin: 0 auto;
  background: var(--white); border-radius: 12px;
  padding: 2.5rem; color: var(--text);
}

/* Progress */
.form-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 2.5rem;
}
.form-progress__step { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.form-progress__dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700;
  border: 2px solid #D1D5DB; color: #9CA3AF;
  transition: 0.3s;
}
.form-progress__dot.active { border-color: var(--blue); background: var(--blue); color: var(--white); }
.form-progress__dot.completed { border-color: var(--blue); background: var(--blue); color: var(--white); }
.form-progress__label { font-size: 0.75rem; color: var(--text-sec); font-weight: 500; }
.form-progress__line {
  width: 60px; height: 2px; background: #D1D5DB; margin: 0 0.75rem;
  align-self: flex-start; margin-top: 18px; transition: background 0.3s;
}
.form-progress__line.completed { background: var(--blue); }

/* Steps */
.form-step { display: none; }
.form-step.active { display: block; }
.form-step__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.form-step__desc { color: var(--text-sec); font-size: 0.875rem; margin-bottom: 2rem; }

/* Form fields */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-row--single { grid-template-columns: 1fr; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.form-label .required { color: var(--red); }

.form-input, .form-select {
  padding: 0.625rem 0.875rem; border: 1px solid #D1D5DB; border-radius: 6px;
  font-size: 0.9375rem; font-family: var(--font); color: var(--text);
  background: var(--white); transition: border-color 0.2s;
  width: 100%;
}
.form-input:focus, .form-select:focus { outline: none; border-color: var(--blue); }
.form-input.error, .form-select.error { border-color: var(--red); }

.form-error {
  font-size: 0.75rem; color: var(--red); display: none;
}
.form-error.show { display: block; }

.form-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2rem; gap: 1rem;
}

/* Consent */
.privacy-summary {
  background: var(--gray); border-radius: var(--radius); padding: 1.25rem;
  font-size: 0.8125rem; color: var(--text-sec); line-height: 1.7; margin-bottom: 1.5rem;
}
.privacy-summary a { color: var(--blue); text-decoration: underline; }

.consent-group { display: flex; flex-direction: column; gap: 1rem; }
.consent-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.consent-item--required { background: rgba(0,102,179,0.04); padding: 1rem; border-radius: var(--radius); }
.consent-checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.consent-label { font-size: 0.8125rem; line-height: 1.6; color: var(--text-sec); cursor: pointer; }
.required-tag {
  display: inline-block; font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--red); border: 1px solid var(--red); border-radius: 3px;
  padding: 1px 5px; margin-left: 0.375rem; vertical-align: middle;
}

/* Workshop Highlight (Step 2) */
.workshop-highlight {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(244, 114, 182, 0.04);
  border: 1px solid rgba(244, 114, 182, 0.2);
  border-left: 4px solid #F472B6;
  border-radius: var(--radius);
}
.workshop-highlight__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F472B6;
  background: rgba(244, 114, 182, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}
.workshop-highlight__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.375rem;
}
.workshop-highlight__desc {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-sec);
  margin-bottom: 0.75rem;
}
.workshop-highlight .consent-item {
  background: rgba(244, 114, 182, 0.06);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

/* Event Gifts & Compliance Notice (Step 3) — amber, prominent
   Required by Infineon ABC compliance for events involving public officials. */
.gift-notice {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-left: 4px solid #D97706;
  border-radius: var(--radius);
}
.gift-notice__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #D97706;
}
.gift-notice__icon svg { width: 24px; height: 24px; }
.gift-notice__body { flex: 1; min-width: 0; }
.gift-notice__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #92400E;
  margin: 0 0 0.5rem;
}
.gift-notice__intro {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 0.75rem;
}
.gift-notice__list {
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text);
}
.gift-notice__list li { margin-bottom: 0.375rem; }
.gift-notice__list li strong { color: #92400E; }
.gift-notice__clause {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-sec);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px dashed #FCD34D;
}
.gift-notice__clause strong { color: var(--text); }

/* Success */
.registration__success {
  display: none; text-align: center; padding: 3rem 1rem;
}
.success-icon { margin-bottom: 1.5rem; }
.success-icon svg { width: 56px; height: 56px; stroke: #10B981; }
.success-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.success-regid {
  font-family: monospace; font-size: 1rem; color: var(--blue);
  background: var(--gray); display: inline-block; padding: 0.375rem 1rem;
  border-radius: var(--radius); margin-bottom: 1rem;
}
.success-message { color: var(--text-sec); font-size: 0.9375rem; }
.success-updated {
  margin-top: 1rem; padding: 0.75rem 1rem;
  background: rgba(16, 185, 129, 0.08); color: #047857;
  border-radius: var(--radius); font-size: 0.875rem;
  display: inline-block; text-align: left;
}

/* Registration success modal — native <dialog> used so the browser
   handles focus trap, Esc-to-close, and inert background for us.
   Centering is set explicitly because Safari iOS doesn't always honour
   the UA-default `margin: auto`; dvh keeps the modal in view when the
   iOS Safari address bar collapses. */
.reg-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  max-width: 480px; width: calc(100% - 2rem);
  border: none; padding: 0; background: transparent;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.12);
  color: var(--text);
  overflow: hidden;
}
.reg-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.reg-modal[open] {
  animation: regModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.reg-modal[open]::backdrop {
  animation: regModalFade 0.22s ease-out;
}
@keyframes regModalPop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes regModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reg-modal__inner {
  background: var(--white);
  border-radius: 16px;
  padding: 2.25rem 1.75rem 1.75rem;
  /* Honour iPhone home-indicator + notch when the modal hugs the viewport edge
     (only matters in landscape on small heights). */
  padding-bottom: max(1.75rem, env(safe-area-inset-bottom));
  text-align: center;
  /* Scroll inside the modal when content exceeds viewport (e.g. mobile landscape).
     The dialog itself stays centered; only the inner panel scrolls. */
  max-height: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.reg-modal__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  display: flex; align-items: center; justify-content: center;
}
.reg-modal__icon svg { width: 36px; height: 36px; stroke: #10B981; }
.reg-modal__title {
  font-size: 1.375rem; font-weight: 700;
  margin-bottom: 0.5rem; color: var(--text);
}
.reg-modal__regid {
  font-family: monospace; font-size: 0.9375rem; color: var(--blue);
  background: var(--gray); display: inline-block;
  padding: 0.375rem 1rem; border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.reg-modal__message {
  color: var(--text-sec); font-size: 0.9375rem;
  margin-bottom: 0.75rem; line-height: 1.5;
}
.reg-modal__email-line {
  font-size: 0.875rem; color: var(--text);
  background: rgba(0, 102, 179, 0.06);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.875rem;
  word-break: break-all;
}
.reg-modal__email-label { color: var(--text-sec); margin-right: 0.25rem; }
.reg-modal__email-value { font-weight: 600; color: var(--blue); }
.reg-modal__notice {
  display: flex; align-items: flex-start; gap: 0.5rem;
  text-align: left;
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem; color: #92400E;
  margin-bottom: 1.25rem;
}
.reg-modal__notice svg {
  flex-shrink: 0; width: 16px; height: 16px; stroke: #B45309;
  margin-top: 1px;
}
.reg-modal__actions {
  display: flex; gap: 0.625rem; justify-content: center;
  flex-wrap: wrap;
}
.reg-modal__actions .btn { min-width: 130px; }
.reg-modal__resend {
  background: transparent; color: var(--blue);
  border: 1px solid var(--blue);
}
.reg-modal__resend:hover {
  background: rgba(0, 102, 179, 0.08); transform: none;
}
.reg-modal__resend:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.reg-modal__resend-status {
  margin-top: 0.875rem; font-size: 0.8125rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius);
}
.reg-modal__resend-status--ok {
  background: rgba(16, 185, 129, 0.1); color: #047857;
}
.reg-modal__resend-status--err {
  background: rgba(220, 38, 38, 0.1); color: #B91C1C;
}
@media (max-width: 480px) {
  .reg-modal {
    /* Narrower side margin on phones so the card uses more of the screen. */
    width: calc(100% - 1.5rem);
  }
  .reg-modal__inner {
    padding: 1.75rem 1.25rem 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .reg-modal__title { font-size: 1.1875rem; }
  .reg-modal__actions { flex-direction: column-reverse; gap: 0.5rem; }
  .reg-modal__actions .btn { flex: 1; min-width: 0; width: 100%; }
}
/* Mobile landscape — viewport height becomes very small (≤480px). Pin the
   modal a bit higher and let the inner panel scroll. */
@media (max-height: 480px) {
  .reg-modal { max-height: calc(100dvh - 1rem); }
  .reg-modal__inner { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .reg-modal__icon { width: 48px; height: 48px; margin-bottom: 0.5rem; }
  .reg-modal__icon svg { width: 28px; height: 28px; }
}

/* Resend confirmation email — collapsible <details> disclosure placed ABOVE
   the registration card so returning users (who never received their
   original confirmation email) find this option before they start filling
   out the form. Collapsed by default so first-time registrants see a
   single-line hint and ignore it. Lives inside .section--dark so the summary
   tone matches the navy background; the expanded panel is a white card. */
.resend-disclosure {
  max-width: 720px; margin: 0 auto 1.5rem;
}
.resend-disclosure__summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
}
/* Hide the native triangle on Chrome/Safari/Edge; Firefox uses list-style. */
.resend-disclosure__summary::-webkit-details-marker { display: none; }
.resend-disclosure__summary::before {
  content: '▶';
  font-size: 0.625rem;
  color: rgba(255,255,255,0.45);
  transition: transform 0.2s;
  flex: 0 0 auto;
}
.resend-disclosure[open] .resend-disclosure__summary::before { transform: rotate(90deg); }
.resend-disclosure__summary:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
}
.resend-disclosure__summary:hover .resend-disclosure__cta { text-decoration: underline; }
.resend-disclosure__label { flex: 1 1 auto; }
.resend-disclosure__cta {
  color: #00D4FF;
  font-weight: 600;
  flex: 0 0 auto;
}
.resend-disclosure__panel {
  margin-top: 0.625rem; padding: 1.25rem 1.5rem;
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.resend-disclosure__lead {
  font-size: 0.875rem; color: var(--text-sec);
  margin: 0 0 1rem 0;
}
.resend-disclosure__form {
  display: flex; gap: 0.625rem; align-items: stretch; flex-wrap: wrap;
}
.resend-disclosure__input {
  flex: 1 1 240px; min-width: 200px;
  padding: 0.625rem 0.875rem; font-family: inherit; font-size: 0.9375rem;
  border: 1px solid #D1D5DB; border-radius: var(--radius);
  background: var(--white); color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.resend-disclosure__input::placeholder { color: var(--text-sec); opacity: 0.8; }
.resend-disclosure__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,102,179,0.12); }
.resend-disclosure__btn {
  flex: 0 0 auto; white-space: nowrap;
  padding: 0.625rem 1.25rem; font-size: 0.875rem;
}
.resend-disclosure__btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.resend-disclosure__status {
  margin: 0.75rem 0 0 0; font-size: 0.875rem;
  /* Stays in the DOM even when empty so the panel height doesn't jump when a message appears. */
  min-height: 1.25rem;
}
.resend-card__status--ok, .resend-disclosure__status--ok { color: #047857; }
.resend-card__status--err, .resend-disclosure__status--err { color: var(--red); }
@media (max-width: 540px) {
  .resend-disclosure__form { flex-direction: column; }
  .resend-disclosure__btn { width: 100%; }
  .resend-disclosure__summary { font-size: 0.8125rem; }
}

/* Spinner */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: var(--white);
  border-radius: 50%; animation: spin 0.6s linear infinite;
  vertical-align: middle; margin-right: 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ================================================================
   VENUE
   ================================================================ */
.venue {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: stretch;
}
.venue__img { border-radius: var(--radius); overflow: hidden; }
/* Image drives the column height (aspect-ratio 3/4); right column stretches
   to match via grid align-items:stretch + flex on .venue__details, with the
   map taking the remaining vertical space so both bottoms align. */
.venue__img img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }

.venue__details { display: flex; flex-direction: column; }
.venue__name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.venue__dl { margin-bottom: 2rem; }
.venue__dl dt { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sec); margin-top: 1.25rem; }
.venue__dl dt:first-child { margin-top: 0; }
.venue__dl dd { font-size: 1rem; margin-top: 0.25rem; }
.venue__map { border-radius: var(--radius); overflow: hidden; flex: 1; min-height: 280px; }
.venue__map iframe { display: block; width: 100%; height: 100%; }

@media (max-width: 768px) {
  .venue { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .venue__img img { height: auto; }
  .venue__map { flex: none; min-height: 0; }
  .venue__map iframe { height: 200px; }
}


/* ================================================================
   FOOTER
   ================================================================ */
.footer { background: var(--navy); color: rgba(255,255,255,0.6); padding: 4rem 0 2rem; }

.footer__top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logos { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer__logo { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.7; }
.footer__x { color: rgba(255,255,255,0.3); font-size: 1rem; }
.footer__desc { font-size: 0.875rem; line-height: 1.7; max-width: 320px; }

.footer__col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__col h4 { color: var(--white); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.footer__col a { font-size: 0.875rem; transition: color 0.2s; }
.footer__col a:hover { color: var(--white); }

.footer__supporters {
  display: flex; align-items: center; gap: 1.5rem; padding: 2rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8125rem; flex-wrap: wrap;
}
.footer__supporters > span { font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; }
.footer__sponsor-logo { height: 47px; width: auto; }
.footer__supporter-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.footer__supporter-tags span {
  padding: 0.3rem 0.875rem; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px; font-size: 0.75rem; font-weight: 500;
}

.footer__bottom { padding-top: 2rem; font-size: 0.75rem; color: rgba(255,255,255,0.3); }

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


/* ================================================================
   COOKIE BANNER
   ================================================================ */
.cookie-banner {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--white); border-top: 1px solid rgba(0,0,0,0.08);
  padding: 1.25rem 0; box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}
.cookie-banner.show { display: block; }
.cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cookie-banner__title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.cookie-banner__desc { font-size: 0.8125rem; color: var(--text-sec); }
.cookie-banner__desc a { color: var(--blue); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.cookie-manage-btn { background: transparent; color: var(--text); border: 1px solid #D1D5DB; }
.cookie-manage-btn:hover { background: var(--gray); transform: none; }
.cookie-reject-btn { background: transparent; color: var(--text); border: 1px solid #D1D5DB; }
.cookie-reject-btn:hover { background: var(--gray); transform: none; }

.cookie-prefs { display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
.cookie-prefs.show { display: block; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.cookie-category__name { font-weight: 600; font-size: 0.875rem; }
.cookie-category__desc { font-size: 0.75rem; color: var(--text-sec); }

.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider {
  position: absolute; inset: 0; background: #D1D5DB; border-radius: 12px;
  cursor: pointer; transition: 0.3s;
}
.toggle__slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white);
  left: 3px; top: 3px; transition: 0.3s;
}
.toggle input:checked + .toggle__slider { background: var(--blue); }
.toggle input:checked + .toggle__slider::before { transform: translateX(20px); }
.toggle input:disabled + .toggle__slider { opacity: 0.5; cursor: not-allowed; }

.cookie-settings-btn {
  display: none; position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 199;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  align-items: center; justify-content: center;
}
.cookie-settings-btn.show { display: flex; }
.cookie-settings-btn svg { width: 20px; height: 20px; stroke: var(--text-sec); }


/* ================================================================
   RESPONSIVE — TABLET (481px – 768px)
   ================================================================ */
@media (max-width: 768px) {
  /* Sections */
  .section { padding: 5rem 0; }

  /* Hero */
  .hero__content { padding: 6rem 1.5rem 4rem; }

  /* Schedule */
  .tl-item { grid-template-columns: 70px 1fr; gap: 1.25rem; }
  .tl-time { font-size: 1rem; }
  .tl-body h4 { font-size: 1rem; }

  /* Registration */
  .reg-card { padding: 2rem; }

  /* Footer */
  .footer { padding: 3rem 0 1.5rem; }

  /* Cookie banner */
  .cookie-banner__actions { gap: 0.375rem; }
}


/* ================================================================
   RESPONSIVE — MOBILE (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {
  /* Nav */
  .nav__inner { height: 56px; }
  .nav__brand-img { height: 30px; }
  .btn--sm { padding: 0.4rem 1rem; font-size: 0.75rem; }

  /* Sections */
  .section { padding: 3.5rem 0; }
  .section__title { font-size: 1.75rem; margin-bottom: 0.75rem; }
  .section__lead { font-size: 0.9375rem; margin: 0 auto 2.5rem; }

  /* Hero */
  .hero__content { padding: 4rem 1rem 3rem; }
  .hero__emblem { width: 80px; height: 80px; margin-bottom: 1.25rem; }
  .hero__eyebrow { font-size: 0.8125rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
  .hero__tagline { font-size: 0.975rem; }
  .hero__sub { font-size: 0.875rem; margin-bottom: 1.5rem; }
  .hero__logos { gap: 0.5rem; margin-top: 2rem; }
  .hero__logos img { height: 22px; }
  .btn--hero { padding: 0.75rem 2rem; font-size: 0.9375rem; }

  /* Pillars */
  .pillar { gap: 1.5rem; margin-bottom: 3.5rem; }
  .pillar__text h3 { font-size: 1.35rem; }
  .pillar__text p { font-size: 0.9375rem; }

  /* Speaker showcase */
  .spk-showcase { gap: 1.25rem; }
  .spk-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
  }
  .spk-item { padding: 0.375rem; gap: 0.25rem; }
  .spk-item__img { width: 36px; height: 36px; }
  .spk-item__name { font-size: 0.6875rem; }
  .spk-item__role { font-size: 0.5625rem; }
  .spk-photo img { max-width: 100%; }
  .spk-detail__name { font-size: 1.25rem; }
  .spk-detail__role { font-size: 0.8125rem; }
  .spk-detail__org { font-size: 0.8125rem; }
  .spk-detail__topic { font-size: 0.9375rem; }
  .spk-detail__abstract { font-size: 0.75rem; }

  /* Schedule */
  .agenda-tabs { gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .agenda-tab { padding: 0.5rem 1rem; font-size: 0.8125rem; }
  .tl-item { grid-template-columns: 50px 1fr; gap: 0.75rem; padding: 1.25rem 0; }
  .tl-time { font-size: 0.875rem; }
  .tl-body h4 { font-size: 0.9375rem; }
  .tl-speaker { font-size: 0.75rem; }
  .tl-badge { font-size: 0.625rem; padding: 0.15rem 0.5rem; }

  /* Registration */
  .reg-card { padding: 1.5rem; }
  .form-progress { margin-bottom: 1.5rem; }
  .form-progress__dot { width: 28px; height: 28px; font-size: 0.75rem; }
  .form-progress__label { font-size: 0.625rem; }
  .form-progress__line { width: 30px; margin: 14px 0.375rem; }
  .form-step__title { font-size: 1.0625rem; }
  .form-step__desc { font-size: 0.8125rem; margin-bottom: 1.5rem; }
  .form-input, .form-select { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
  .consent-checkbox { width: 20px; height: 20px; }
  .consent-label { font-size: 0.75rem; }
  .workshop-highlight { padding: 1rem; }
  .workshop-highlight__title { font-size: 0.9375rem; }
  .workshop-highlight__desc { font-size: 0.75rem; }
  .privacy-summary { padding: 1rem; font-size: 0.75rem; }
  .gift-notice { padding: 1rem; gap: 0.75rem; }
  .gift-notice__icon { width: 24px; height: 24px; }
  .gift-notice__icon svg { width: 20px; height: 20px; }
  .gift-notice__title { font-size: 0.875rem; }
  .gift-notice__intro,
  .gift-notice__list { font-size: 0.75rem; }
  .gift-notice__clause { font-size: 0.6875rem; }
  .form-actions { flex-direction: column; gap: 0.5rem; }
  .form-actions button { width: 100%; }
  .success-icon svg { width: 48px; height: 48px; }
  .success-title { font-size: 1.25rem; }

  /* Venue */
  .venue { gap: 1.5rem; }
  .venue__name { font-size: 1.25rem; margin-bottom: 1rem; }
  .venue__dl dt { font-size: 0.75rem; }
  .venue__dl dd { font-size: 0.9375rem; }
  .venue__map iframe { height: 200px; }

  /* Footer */
  .footer { padding: 2rem 0 1rem; }
  .footer__top { gap: 1.5rem; padding-bottom: 1.5rem; }
  .footer__logo { height: 22px; }
  .footer__desc { font-size: 0.8125rem; max-width: 100%; }
  .footer__col h4 { font-size: 0.75rem; }
  .footer__col a { font-size: 0.8125rem; }
  .footer__supporters { gap: 0.75rem; padding: 1.25rem 0; flex-direction: column; align-items: flex-start; }
  .footer__sponsor-logo { height: 36px; }
  .footer__bottom { font-size: 0.6875rem; padding-top: 1rem; }

  /* Cookie banner — with safe area for iPhone notch */
  .cookie-banner { padding: 1rem 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__inner { gap: 1rem; flex-direction: column; align-items: flex-start; }
  .cookie-banner__title { font-size: 0.875rem; }
  .cookie-banner__desc { font-size: 0.75rem; }
  .cookie-banner__actions { width: 100%; flex-direction: column; gap: 0.375rem; }
  .cookie-banner__actions .btn--sm { width: 100%; }
  .cookie-category__name { font-size: 0.8125rem; }
  .cookie-category__desc { font-size: 0.6875rem; }

  /* iOS: prevent auto-zoom on input focus (font-size must be >= 16px) */
  .form-input, .form-select { font-size: 16px; }
}