/* ==========================================================================
   數聚 · 領航 2026 — Justar Group Launch Event Landing Page
   Static HTML + CSS build (no JS framework). Converted from hifi prototype.
   ========================================================================== */

:root {
  --c-bg: #060F1F;          /* Deep Navy — page background */
  --c-bg-abyss: #000A20;    /* Abyss Navy — flywheel section */
  --c-bg-section: #0A1626;  /* alt section background */
  --c-bg-card: #0d1a2c;     /* register card / dark button hover */
  --c-bg-footer: #050B16;
  --c-bg-input: #0a1626;

  --c-gold: #E8C07A;        /* Star Gold — primary accent / INLY 聲量 */
  --c-gold-light: #F6DCA3;  /* gold hover / glow highlight */
  --c-cyan: #5BB8C4;        /* Compass Cyan — Justar 流量 */
  --c-orange: #E8965B;      /* Orbit Orange — Reddoor 存量 */
  --c-purple: #A78BFA;

  --c-text: #FFFFFF;
  --c-text-secondary: rgba(240,235,225,.78);
  --c-text-tertiary: rgba(240,235,225,.50);
  --c-text-disabled: rgba(240,235,225,.25);

  --font-tc: 'Noto Sans TC', sans-serif;
  --font-en: 'Archivo', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
html {
  scroll-behavior: smooth;
  /* belt-and-braces: clip at the root too, not just body, so nothing
     (glow bleed, wide backgrounds, etc.) can ever open a second,
     horizontal scrollbar regardless of viewport width */
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-tc), var(--font-en), sans-serif;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; text-decoration: none; }
::selection { background: var(--c-gold); color: var(--c-bg); }
input, select, textarea, button { font-family: inherit; }
input::placeholder { color: rgba(240,235,225,.3); }
select:invalid { color: rgba(240,235,225,.3); }

/* film-grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjAwIDIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScxJy8+PC9zdmc+");
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: .028;
  mix-blend-mode: overlay;
}

/* ---------- Keyframes ---------- */
@keyframes nlglow {
  0%, 100% { opacity: .3; transform: translate(-50%,-50%) scale(.94); }
  50%      { opacity: .85; transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Scroll reveal ----------
   Elements marked [data-reveal] start hidden/offset; reveal.js adds
   .is-visible via IntersectionObserver as each one scrolls into view.
   If JS never runs (disabled, blocked, fails to load) this selector list
   makes sure content is still fully visible, just without the animation. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* true no-JS fallback lives in a <noscript><style> block in the HTML head */

/* ---------- Layout helpers ---------- */
.container        { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.container-narrow { max-width: 880px;  margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.container-quote  { max-width: 940px;  margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.container-agenda { max-width: 980px;  margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }

.section-header  { text-align: center; }
.section-kicker  { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: rgba(232,192,122,.75); }
.section-title   { font-family: var(--font-tc); font-weight: 700; font-size: clamp(36px,5.4vw,64px); line-height: 1.05; margin: 14px 0 0; color: var(--c-text); }
.section-title--wide { font-size: clamp(34px,5vw,58px); line-height: 1.4; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; font-family: var(--font-tc); font-weight: 700; border-radius: 999px; border: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-gold { font-size: 18px; color: var(--c-bg); background: var(--c-gold); padding: 18px 42px; box-shadow: 0 5px 20px rgba(232,192,122,.32); }
.btn-gold:hover { transform: translateY(-2px); background: var(--c-gold-light); box-shadow: 0 7px 22px rgba(232,192,122,.36); }
.btn-dark { font-size: 18px; color: var(--c-gold); background: var(--c-bg); padding: 18px 42px; letter-spacing: .02em; box-shadow: 0 8px 20px rgba(6,15,31,.22); }
.btn-dark:hover { transform: translateY(-2px); background: var(--c-bg-card); box-shadow: 0 6px 18px rgba(6,15,31,.26); }
.btn-outline-gold { font-size: 15px; color: var(--c-gold); background: transparent; border: 1px solid rgba(232,192,122,.4); border-radius: 999px; padding: 12px 24px; transition: background .2s, box-shadow .2s; }
.btn-outline-gold:hover { background: rgba(232,192,122,.1); box-shadow: 0 4px 14px rgba(232,192,122,.16); }

/* ==========================================================================
   Site nav — fixed, floats over the page content (doesn't reserve layout
   space). Solid background matching the page bg, so nothing shows through
   it. Note: mobile Safari / WebKit in-app browsers dynamically resize
   their visual viewport on scroll, which can make position:fixed bars
   visibly lag/detach from the top edge for a moment — a known trade-off
   of using fixed here (position:sticky avoids it, but overlays content
   only after an initial 83px offset instead of from pixel 0).
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 83px;
  z-index: 50;
  display: flex;
  align-items: center;
  background: var(--c-bg);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* centered container (same max-width pattern as the rest of the page);
   logo sits at the left edge, the 3 links sit together at the right edge */
.site-nav-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px,5vw,56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px,4vw,56px);
}
.site-nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-nav-logo img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(24px,4vw,56px);
}
.site-nav-link {
  font-family: var(--font-tc); font-weight: 700; font-size: 15px;
  color: rgba(255,255,255,.85); letter-spacing: .02em;
  transition: color .2s;
}
.site-nav-link:hover { color: var(--c-gold); }

[id] { scroll-margin-top: 83px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* clip locally so the glow (which intentionally bleeds off the edge at
     the tablet breakpoint) never contributes to page-level horizontal
     scroll, even as a fallback before it reaches the html/body clip */
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(6,15,31,.96) 0%, rgba(6,15,31,.72) 28%, rgba(6,15,31,.12) 52%, rgba(6,15,31,.04) 100%), url('kv.png');
  background-size: cover;
  background-position: 68% center;
}
.hero-glow {
  position: absolute;
  /* centered on kv.png's actual brightest area (measured ~66%/48% of the
     source image) — with background-position:68% center this crop keeps
     that point at roughly the same % across desktop aspect ratios */
  left: 65%; top: 47%;
  width: min(620px,62vw); height: min(620px,62vw);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,150,.55) 0%, rgba(232,192,122,.22) 34%, rgba(232,192,122,0) 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: nlglow 3s ease-in-out infinite;
}
/* .site-nav is fixed (overlays the hero, no reserved layout space), so
   this needs full clearance for the 83px bar on top. */
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 108px clamp(20px,5vw,56px) 72px; width: 100%; position: relative; z-index: 2; }
.hero-content { max-width: 480px; }

/* the page's single H1 wraps the logo image; the logo mark itself doesn't
   spell out the full title, so a visually-hidden span next to it carries
   the real heading text for SEO/screen readers without changing the
   design. Reset the h1's own box/font so it doesn't add spacing. */
.hero-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  display: block;
  width: min(520px,95%);
  height: auto;
  margin-top: 4px;
  filter: brightness(0) invert(1);
  animation: fadeUp .85s var(--ease) .06s both;
}
.hero-subtitle {
  font-family: var(--font-tc); font-weight: 500;
  font-size: clamp(13px,1.3vw,15px); line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin: 20px 0 0 5px; max-width: 400px;
  animation: fadeUp .8s var(--ease) .14s both;
}
.hero-date {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  margin: 28px 0 0 5px; width: min(520px,95%);
  animation: fadeUp .8s var(--ease) .22s both;
}
.hero-date-card {
  flex: 1 1 180px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(8px);
}
.hero-date-num { font-family: var(--font-en); font-weight: 900; font-size: clamp(32px,4.2vw,48px); line-height: 1; color: var(--c-text); letter-spacing: -.02em; flex-shrink: 0; }
.hero-date-day { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.hero-date-time { font-family: var(--font-en); font-weight: 700; font-size: clamp(13px,1.5vw,17px); color: var(--c-text); letter-spacing: .01em; margin-top: 2px; }
.hero-loc-card {
  flex: 0 1 130px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px;
  padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: rgba(255,255,255,.04); backdrop-filter: blur(8px);
}
.hero-loc-en { font-family: var(--font-en); font-weight: 900; font-size: clamp(12px,1.2vw,14px); color: var(--c-text); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.hero-loc-tc { font-family: var(--font-tc); font-weight: 700; font-size: clamp(14px,1.4vw,16px); color: var(--c-text); margin-top: 4px; line-height: 1.2; }
.hero-cta { margin: 20px 0 0 5px; animation: fadeUp .8s var(--ease) .3s both; }

/* ==========================================================================
   Quote
   ========================================================================== */
.quote-section { padding: clamp(48px,7vw,96px) 0; position: relative; text-align: center; }
.quote-mark { font-family: var(--font-en); font-weight: 900; font-size: 96px; line-height: .6; color: rgba(232,192,122,.22); margin: 30px 0 -12px; }
.quote-text { margin: 0; font-family: var(--font-tc); font-weight: 500; font-size: clamp(20px,2.8vw,34px); line-height: 1.6; color: var(--c-text); letter-spacing: .004em; text-wrap: pretty; }
.quote-highlight { color: var(--c-gold); }

/* ==========================================================================
   Flywheel
   ========================================================================== */
.flywheel-section { position: relative; overflow: hidden; background: var(--c-bg-abyss); }
.flywheel-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); min-height: clamp(528px,60vw,756px); }
.flywheel-text {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: clamp(72px,10vw,140px) clamp(24px,4vw,64px) clamp(72px,10vw,140px) max(clamp(24px,5vw,56px), calc((100vw - 1280px)/2 + clamp(24px,5vw,56px)));
  /* on very wide viewports the left padding above can grow large; min-width:0
     stops this grid item from claiming min-content width beyond its 4fr
     share and pushing the page wider than the viewport */
  min-width: 0;
}
.flywheel-title { font-family: var(--font-en); font-weight: 900; font-size: clamp(44px,5.8vw,82px); line-height: .95; letter-spacing: -.03em; margin: 0; color: var(--c-text); }
.flywheel-title span { color: var(--c-gold); }
.flywheel-desc { font-family: var(--font-tc); font-weight: 500; font-size: clamp(15px,1.6vw,18px); line-height: 1.8; color: rgba(240,235,225,.72); margin: 24px 0 0; }
.flywheel-image { position: relative; display: flex; align-items: center; justify-content: center; background: var(--c-bg-abyss); }
.flywheel-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* ==========================================================================
   08.12 Launch banner
   ========================================================================== */
.launch-section { background: var(--c-gold); padding: clamp(28px,4vw,52px) 0; }
.launch-banner { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); text-align: center; }
.launch-date { font-family: var(--font-en); font-weight: 900; font-size: clamp(40px,5.5vw,80px); line-height: .92; letter-spacing: -.03em; color: var(--c-bg); }
.launch-title { font-family: var(--font-tc); font-weight: 700; font-size: clamp(18px,2vw,24px); color: var(--c-bg); margin-top: 10px; line-height: 1.2; }
.launch-desc { font-family: var(--font-tc); font-weight: 400; font-size: clamp(13px,1.1vw,14px); color: rgba(6,15,31,.62); margin: 8px 0 0; letter-spacing: .01em; }
.launch-banner .btn-dark { margin-top: 24px; }

/* ==========================================================================
   Person grid (shared: Product Presenters + Guests)
   ========================================================================== */
.presenters-section { padding: clamp(60px,9vw,120px) 0; }
.guests-section { padding: clamp(60px,9vw,120px) 0; }

.person-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(18px,2.5vw,30px); margin-top: clamp(48px,6vw,72px); }
.person-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; background: #0c1624; transition: transform .35s var(--ease), box-shadow .35s; }
.person-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px rgba(0,0,0,.6); }
.person-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(100%); transition: filter .5s ease; }
.person-card:hover img { filter: grayscale(0%) !important; }
.person-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,20,48,.96) 0%, rgba(8,24,54,.82) 30%, rgba(10,28,60,.3) 55%, transparent 75%); pointer-events: none; }
.person-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 18px 24px; }
.person-name { font-family: var(--font-tc); font-weight: 700; font-size: clamp(15px,1.6vw,18px); color: var(--c-text); letter-spacing: .01em; line-height: 1.3; }
.person-name-en { font-family: var(--font-en); font-weight: 600; font-size: clamp(12px,1.1vw,14px); color: rgba(255,255,255,.55); margin-left: 6px; letter-spacing: .02em; }
.person-role { font-family: var(--font-tc); font-weight: 400; font-size: clamp(12px,1.1vw,13px); color: rgba(232,192,122,.85); margin-top: 6px; letter-spacing: .02em; }

/* ==========================================================================
   Partner columns (Media / Agency / Commerce)
   ========================================================================== */
.partners-section { padding: clamp(60px,9vw,120px) 0; background: var(--c-bg-section); }
.partner-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px,2vw,22px); margin-top: clamp(48px,6vw,72px); }
.partner-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  padding: 28px 26px; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
  transition: box-shadow .3s, transform .3s var(--ease);
}
.partner-card:hover { box-shadow: 0 24px 72px rgba(0,0,0,.36); transform: translateY(-6px); }
.partner-kicker { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.partner-kicker--cyan   { color: var(--c-cyan); }
.partner-kicker--gold   { color: var(--c-gold); }
.partner-kicker--orange { color: var(--c-orange); }
.partner-title { font-family: var(--font-tc); font-weight: 700; font-size: 24px; color: var(--c-text); margin-top: 12px; }
.partner-desc { font-family: var(--font-tc); font-weight: 400; font-size: 15px; line-height: 1.7; color: rgba(240,235,225,.65); margin: 12px 0 24px; flex: 1; text-wrap: pretty; }
.partner-logo { align-self: flex-start; }
.partner-logo img { height: 48px; width: auto; display: block; }

/* ==========================================================================
   Agenda
   ========================================================================== */
.agenda-section { padding: clamp(60px,9vw,120px) 0; background: var(--c-bg-section); }
.agenda-list { position: relative; margin-top: clamp(36px,5vw,60px); }
.agenda-item { display: flex; flex-wrap: wrap; gap: 6px 30px; padding: 18px 24px; position: relative; background: rgba(255,255,255,.03); border-radius: 12px; margin-bottom: 6px; }
.agenda-time { flex: 0 0 138px; font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--c-cyan); letter-spacing: .02em; padding-top: 4px; }
.agenda-body { flex: 1 1 320px; min-width: 0; }
.agenda-tag { display: inline-block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; padding: 3px 11px; border-radius: 999px; border: 1px solid currentColor; }
.agenda-tag--gold { color: var(--c-gold); }
.agenda-tag--cyan { color: var(--c-cyan); }
.agenda-en { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(232,192,122,.6); margin-top: 10px; }
.agenda-title { font-family: var(--font-tc); font-weight: 700; font-size: clamp(19px,2.4vw,24px); color: var(--c-text); margin-top: 9px; line-height: 1.3; }
.agenda-desc { font-family: var(--font-tc); font-weight: 400; font-size: 14px; line-height: 1.6; color: rgba(240,235,225,.62); margin: 8px 0 0; text-wrap: pretty; }
.agenda-speaker { font-family: var(--font-tc); font-weight: 400; font-size: 14px; color: rgba(240,235,225,.65); margin-top: 6px; }
.agenda-subs { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.agenda-sub { border-left: 2px solid; padding: 12px 20px; }
.agenda-sub--purple { border-color: var(--c-purple); }
.agenda-sub--gold   { border-color: var(--c-gold); }
.agenda-sub--cyan   { border-color: var(--c-cyan); }
.agenda-sub-head { line-height: 1.5; }
.agenda-sub-tag { font-family: var(--font-tc); font-weight: 700; font-size: 18px; }
.agenda-sub-tag--purple { color: var(--c-purple); }
.agenda-sub-tag--gold   { color: var(--c-gold); }
.agenda-sub-tag--cyan   { color: var(--c-cyan); }
.agenda-sub-en { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .08em; color: rgba(240,235,225,.4); margin-left: 12px; }
.agenda-sub-formula { font-family: var(--font-tc); font-weight: 700; font-size: 17px; color: var(--c-text); margin-top: 8px; letter-spacing: .01em; }
.agenda-sub-desc { font-family: var(--font-tc); font-weight: 400; font-size: 15px; line-height: 1.6; color: rgba(240,235,225,.62); margin: 6px 0 0; text-wrap: pretty; }
.agenda-sub-speaker { font-family: var(--font-tc); font-weight: 500; font-size: 15px; color: rgba(240,235,225,.7); margin-top: 8px; }
.agenda-break { display: flex; align-items: center; gap: 12px; color: rgba(240,235,225,.4); font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.agenda-break-line { flex: 1; height: 1px; border-top: 1px dashed rgba(255,255,255,.14); }

/* ==========================================================================
   Register
   ========================================================================== */
.register-section { padding: clamp(64px,9vw,120px) 0; }
.register-header { text-align: center; }
.register-kicker { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(232,192,122,.8); }
.register-title { font-family: var(--font-tc); font-weight: 700; font-size: clamp(36px,5.4vw,64px); line-height: 1.05; margin: 14px 0 0; color: var(--c-text); }
.register-meta { font-family: var(--font-tc); font-weight: 500; font-size: 16px; color: rgba(240,235,225,.66); margin: 12px 0 0; }
.register-card { margin-top: clamp(36px,5vw,48px); background: var(--c-bg-card); border: 1px solid rgba(232,192,122,.16); border-radius: 24px; padding: clamp(24px,4vw,48px); box-shadow: 0 30px 70px rgba(0,0,0,.35); }

.register-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field-label { font-family: var(--font-tc); font-weight: 500; font-size: 14px; color: rgba(240,235,225,.82); }
.field-required { color: var(--c-gold); }
.field input, .field select {
  background: var(--c-bg-input); border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 12px; color: var(--c-text); font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(232,192,122,.14); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg,transparent 50%,#E8C07A 50%), linear-gradient(135deg,#E8C07A 50%,transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: #FFFFFF; color: var(--c-bg); }
.field-checkbox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; grid-column: 1 / -1; cursor: pointer; }
.field-checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-gold); flex: 0 0 auto; }
.field-checkbox span { font-family: var(--font-tc); font-weight: 400; font-size: 14px; line-height: 1.5; color: rgba(240,235,225,.75); }
/* The consent text should shrink/wrap its own text in place, next to the
   checkbox, rather than the whole span dropping to a new row (which is
   what flex-wrap did by default once the span's un-wrapped width exceeded
   the row). min-width:0 lets a flex item shrink below its content size. */
.field-checkbox span:not(.field-error) { flex: 1 1 240px; min-width: 0; }
.field-checkbox a { color: var(--c-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Inline validation errors — populated by the form-validation script so
   every invalid field can show its message at once, instead of the
   browser's native one-bubble-at-a-time behaviour. Styled as a callout
   "bubble" (like the native browser prompt) so it reads as a warning
   rather than quiet helper text — solid dark card, orange accent bar on
   top, small pointer tip aimed back up at the field. Stays in normal
   document flow (not absolute) so it never overlaps other fields. */
.field-error {
  display: none;
  position: relative;
  font-family: var(--font-tc); font-weight: 600; font-size: 12.5px;
  color: #1A1A1A;
  margin-top: 10px;
}
.field-error:not(:empty) {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.field-checkbox .field-error { flex-basis: 100%; margin-top: 10px; margin-left: 30px; color: #1A1A1A; }
.has-error input, .has-error select { border-color: var(--c-orange) !important; }
.btn-submit {
  grid-column: 1 / -1; font-family: var(--font-tc); font-weight: 700; font-size: 17px;
  color: var(--c-bg); background: var(--c-gold); border: none; border-radius: 12px;
  padding: 18px; cursor: pointer; margin-top: 6px; box-shadow: 0 5px 18px rgba(232,192,122,.3);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.btn-submit:hover { transform: translateY(-2px); background: var(--c-gold-light); box-shadow: 0 7px 20px rgba(232,192,122,.34); }

/* ==========================================================================
   Event info (date & venue) — sits below the register section
   ========================================================================== */
.event-info-section { padding: 0 0 clamp(64px,9vw,120px); }
.event-info-card {
  background: var(--c-bg-card);
  border: 1px solid rgba(232,192,122,.16);
  border-radius: 24px;
  padding: clamp(28px,4vw,44px) clamp(24px,4vw,48px);
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.event-info-title { font-family: var(--font-tc); font-weight: 700; font-size: clamp(22px,2.6vw,28px); color: var(--c-text); margin: 0; }
.event-info-subtitle { font-family: var(--font-tc); font-weight: 500; font-size: 15px; color: rgba(240,235,225,.7); margin: 8px 0 0; }
.event-info-rows { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.event-info-label { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(232,192,122,.8); }
.event-info-value { font-family: var(--font-tc); font-weight: 500; font-size: 16px; color: var(--c-text); line-height: 1.7; margin-top: 6px; }

/* Split variant: info on the left, Google Map embed on the right */
.event-info-card--split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,4vw,56px);
  text-align: left;
  align-items: stretch;
}
.event-info-card--split .event-info-text { display: flex; flex-direction: column; justify-content: center; }
.event-info-map { position: relative; min-height: 280px; border-radius: 16px; overflow: hidden; background: var(--c-bg-input); }
.event-info-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Success content shared by the modal below (icon/title/desc). */
.register-success-icon { width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--c-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto; color: var(--c-gold); font-size: 30px; }
.register-success-title { font-family: var(--font-tc); font-weight: 700; font-size: 24px; color: var(--c-text); margin-top: 24px; }
.register-success-desc { font-family: var(--font-tc); font-weight: 400; font-size: 15px; line-height: 1.7; color: rgba(240,235,225,.7); margin: 12px auto 0; max-width: 420px; }

/* ==========================================================================
   Registration success modal (popup)
   Hidden by default. Backend/template layer or JS adds `.is-open` to
   #successModal to display it as an overlay on top of the page — see the
   HTML comment above #successModal for the two integration options.
   ========================================================================== */
.success-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.success-modal.is-open { display: flex; }
body.modal-open { overflow: hidden; }
.success-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,6,16,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.success-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  text-align: center;
  background: var(--c-bg-card);
  border: 1px solid rgba(232,192,122,.16);
  border-radius: 24px;
  padding: clamp(36px,5vw,48px) clamp(24px,4vw,40px);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.success-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: transparent;
  color: rgba(240,235,225,.5);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.success-modal-close:hover { color: var(--c-text); background: rgba(255,255,255,.08); }
.success-modal-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.success-modal-actions .btn-gold,
.success-modal-actions .btn-outline-gold { width: 100%; justify-content: center; }
.success-modal-actions .btn-gold { font-size: 16px; padding: 16px 32px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--c-bg-footer); padding: clamp(54px,7vw,84px) 0 36px; }
.footer-groups { display: flex; flex-direction: column; gap: 36px; }
.footer-label { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(232,192,122,.7); }
.footer-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 18px; align-items: center; }
.footer-row--tight { gap: 12px; }
.footer-org-name { font-family: var(--font-tc); font-weight: 700; font-size: 18px; color: var(--c-text); letter-spacing: .04em; white-space: nowrap; }
.footer-logo { height: 40px; width: auto; max-width: min(168px,40vw); object-fit: contain; flex-shrink: 0; }
.footer-logo--co { height: 48px; max-width: 200px; }
.footer-logo--partner { height: 36px; max-width: min(160px,38vw); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; align-items: center; }
.footer-copyright { font-family: var(--font-tc); font-size: 13px; color: rgba(240,235,225,.4); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 680px) {
  /* Tighten the nav so logo + all 3 links still fit without wrapping or
     overflowing down to ~320px-wide phones. */
  .site-nav-inner { padding: 0 16px; gap: 10px; }
  .site-nav-logo img { height: 22px; }
  .site-nav-links { gap: 14px; }
  .site-nav-link { font-size: 13px; }
  .hero {
    background-image: linear-gradient(180deg, rgba(6,15,31,0) 0%, rgba(6,15,31,.12) 40%, rgba(6,15,31,.72) 64%, rgba(6,15,31,.97) 82%, #060F1F 100%), url('kv-portrait.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    align-items: flex-end !important;
    min-height: 75svh !important;
  }
  /* padding-top must clear the fixed 83px site-nav, or its bar overlaps
     the hero title at the very top of the page. */
  .hero-inner { padding-top: 100px !important; padding-bottom: 26px !important; }
  .hero-content { max-width: 100% !important; text-align: center !important; }
  .hero-logo { margin-left: auto !important; margin-right: auto !important; margin-bottom: 120px !important; width: min(460px,84%) !important; }
  .hero-subtitle { margin-left: auto !important; margin-right: auto !important; }
  .hero-date { justify-content: center !important; gap: 8px !important; }
  /* root cause of the oversized card: flex-grow:1 (from the base rule) was
     stretching .hero-date-card to fill the whole row whenever it wrapped
     onto its own line at narrow widths (e.g. 375px), leaving a big empty
     gap on the right. Drop the growth and trim the basis/padding so both
     cards sit side-by-side and just hug their own content. */
  .hero-date-card { flex: 0 1 150px !important; padding: 12px 14px !important; }
  .hero-loc-card { flex: 0 1 112px !important; padding: 12px 14px !important; }
  .hero-cta { justify-content: center !important; }
  /* re-centered on kv-portrait.png's actual brightest area (measured ~52%/
     33% of the source image; with background-position:center top the crop
     math places it at roughly 51%/36% of the hero here). At this position
     it sits over the logo — which is fine, a white mark on a soft gold
     halo — and still clears the subtitle/date-card/CTA below it. */
  .hero-glow { left: 51% !important; top: 36% !important; width: 58vw !important; height: 58vw !important; }

  .partner-grid { grid-template-columns: 1fr !important; }

  .flywheel-grid { grid-template-columns: 1fr !important; min-height: unset !important; }
  .flywheel-grid .flywheel-image { order: 1; height: 320px; position: relative !important; }
  .flywheel-text { padding-top: 36px !important; padding-bottom: 36px !important; }

  .person-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (min-width: 681px) and (max-width: 1024px) {
  /* Kept left-aligned (same column layout as desktop) instead of centering.
     Gradient stops are fixed px distances (not %) so the dark zone always
     covers the ~536px-wide text column regardless of exactly how wide the
     tablet viewport is within this range — a %-based gradient would fade
     out before reaching the right edge of the text on narrower tablets. */
  .hero {
    background-image: linear-gradient(90deg, rgba(6,15,31,.97) 0, rgba(6,15,31,.9) 260px, rgba(6,15,31,.55) 480px, rgba(6,15,31,.16) 620px, rgba(6,15,31,.04) 100%), url('kv.png') !important;
    background-position: 60% center !important;
  }
  /* re-centered on kv.png's actual bright area. With background-position:
     60% center, the cover-crop math for typical tablet aspect ratios
     (landscape ~4:3 to portrait ~3:4) puts that bright spot at roughly
     67–74% of the container width and ~47–48% height — left:68%/top:47%
     is the middle of that range. Kept smaller than desktop's glow so it
     stays mostly clear of the left-aligned copy column. */
  .hero-glow {
    left: 68% !important;
    top: 47% !important;
    width: min(320px,38vw) !important;
    height: min(320px,38vw) !important;
  }
}

@media (max-width: 900px) {
  .person-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px !important; }
  .event-info-card--split { grid-template-columns: 1fr !important; }
  .event-info-map { min-height: 240px !important; }
}