:root {
  --navy: #02153e;
  --navy-deep: #010c26;
  --blue: #006bbd;
  --blue-bright: #008fd8;
  --cyan: #31dcff;
  --cyan-soft: #b9f5ff;
  --yellow: #ffe456;
  --yellow-deep: #dcae11;
  --paper: #f5fcff;
  --paper-blue: #e4f6ff;
  --ink: #071b48;
  --quiet: #4e6b91;
  --line: rgba(7, 27, 72, 0.18);
  --display: "Archivo Black", "IBM Plex Sans Thai", sans-serif;
  --body: "IBM Plex Sans Thai", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--body); }
body.has-modal { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }

.hero-inner,
.section-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }

.hero {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  padding: 20px 0 0;
  color: var(--paper);
  background-color: var(--blue);
  background-image:
    linear-gradient(107deg, rgba(0, 22, 83, 0.94) 0%, rgba(0, 58, 137, 0.6) 47%, rgba(0, 133, 197, 0.72) 100%),
    linear-gradient(180deg, #0068b6 0%, #004f9a 100%);
  isolation: isolate;
}
.hero::before {
  position: absolute;
  inset: 104px -6% 0 42%;
  z-index: -1;
  content: "";
  opacity: 0.9;
  background-image:
    linear-gradient(90deg, rgba(94, 238, 255, 0.24) 1px, transparent 1px),
    linear-gradient(rgba(94, 238, 255, 0.2) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(117, 242, 255, 0.2) 49% 51%, transparent 52% 100%);
  background-size: 52px 52px, 52px 52px, 260px 260px;
  transform: perspective(650px) rotateX(61deg) scale(1.25);
  transform-origin: center bottom;
}
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image:
    linear-gradient(90deg, rgba(0, 9, 46, 0.44) 0 1px, transparent 1px),
    linear-gradient(rgba(0, 9, 46, 0.35) 0 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.28;
}
.hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 0 49.8%, rgba(209, 255, 255, 0.32) 50%, transparent 50.2%); opacity: 0.18; }
.hero-inner { position: relative; min-height: 770px; }

.brand-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(207, 253, 255, 0.36);
}
.powered-by,
.hosted-by { display: grid; gap: 2px; color: var(--paper); font-family: var(--body); font-size: 0.75rem; line-height: 1.1; }
.powered-by span,
.hosted-by { color: rgba(245, 252, 255, 0.9); font-weight: 600; }
.powered-by strong { color: var(--paper); font-family: var(--display); font-size: 1.55rem; line-height: 0.9; }
.powered-by small { color: rgba(188, 247, 255, 0.82); font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.14em; }
.club-wordmark { margin: 0; color: var(--paper); font-family: var(--body); font-size: clamp(1.05rem, 2.25vw, 1.85rem); font-weight: 500; letter-spacing: 0.42em; text-align: center; white-space: nowrap; }
.hosted-by { justify-items: end; text-align: right; }
.hosted-by b { color: var(--paper); font-family: var(--display); font-size: 1.42rem; line-height: 0.88; }
.hosted-by small { color: rgba(204, 250, 255, 0.9); font-size: 0.58rem; }

.hero-copy { position: relative; z-index: 3; width: min(770px, 68%); padding: 74px 0 64px; }
.eyebrow,
.section-label { margin: 0 0 14px; color: var(--yellow); font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.hero h1 { max-width: 860px; margin: 0; font-family: var(--body); font-size: 4.55rem; font-weight: 500; line-height: 0.92; }
.hero h1 span { display: block; }
.hero-thai { color: var(--paper); font-size: 0.66em; line-height: 1.1; }
.hero-glow {
  margin-top: 6px;
  color: #fff;
  font-family: var(--body);
  font-size: 1em;
  font-weight: 600;
  text-shadow: 0 0 4px #fff, 0 0 15px rgba(108, 234, 255, 0.95), 0 0 36px rgba(68, 215, 255, 0.7);
}
.hero-ai { margin-top: 6px; color: var(--paper); font-size: 0.72em; line-height: 1; }
.hero-ai i { color: var(--yellow); font-family: "Libre Baskerville", Georgia, serif; font-style: italic; font-weight: 700; text-shadow: 0 0 16px rgba(255, 228, 86, 0.72); }
.hero-lead { max-width: 575px; margin: 26px 0 0; color: rgba(245, 252, 255, 0.92); font-size: 1.08rem; line-height: 1.65; }

.event-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  width: fit-content;
  max-width: 100%;
  margin-top: 28px;
  border: 1px solid rgba(90, 239, 255, 0.72);
  border-radius: 8px;
  background: rgba(0, 17, 70, 0.54);
  box-shadow: inset 0 0 20px rgba(36, 209, 255, 0.13), 0 0 18px rgba(29, 216, 255, 0.12);
}
.event-strip > span,
.event-strip button { display: inline-flex; align-items: center; min-height: 49px; padding: 11px 16px; color: var(--paper); background: transparent; font-family: var(--body); font-size: 0.86rem; font-weight: 600; }
.event-strip > span + span,
.event-strip button { border-left: 1px solid rgba(154, 248, 255, 0.28); }
.event-strip b { margin-right: 7px; color: var(--yellow); font-family: var(--display); font-size: 1rem; }
.event-strip button { cursor: pointer; }
.event-strip button:hover { color: var(--cyan-soft); }
.event-strip em { margin-left: 9px; color: var(--yellow); font-family: var(--body); font-size: 0.78rem; font-style: normal; font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 14px 18px; border: 1px solid transparent; border-radius: 7px; font-weight: 800; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.button:hover { transform: translateY(-2px); }
.button-coral { color: var(--navy); border-color: #ffe95e; background: var(--yellow); box-shadow: 0 0 0 1px rgba(0, 24, 84, 0.25), 0 0 22px rgba(255, 228, 86, 0.28); }
.button-dark { color: var(--paper); border-color: rgba(119, 242, 255, 0.55); background: var(--navy); }
.text-link { padding-bottom: 4px; border-bottom: 1px solid rgba(245, 252, 255, 0.55); color: var(--paper); font-weight: 700; }
.text-link span { color: var(--cyan); }

.hero-output {
  position: absolute;
  z-index: 4;
  top: 146px;
  right: 0;
  width: 242px;
  overflow: hidden;
  border: 1px solid rgba(76, 242, 255, 0.9);
  border-radius: 8px;
  background: rgba(0, 20, 72, 0.77);
  box-shadow: inset 0 0 22px rgba(29, 219, 255, 0.15), 0 0 22px rgba(17, 211, 255, 0.33);
}
.tech-corners { position: absolute; inset: 8px; border: 1px solid rgba(107, 242, 255, 0.28); pointer-events: none; }
.tech-corners::before,
.tech-corners::after { position: absolute; width: 26px; height: 26px; content: ""; border-color: var(--cyan); border-style: solid; }
.tech-corners::before { top: -4px; left: -4px; border-width: 2px 0 0 2px; }
.tech-corners::after { right: -4px; bottom: -4px; border-width: 0 2px 2px 0; }
.window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(103, 242, 255, 0.28); background: rgba(2, 13, 47, 0.62); }
.window-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.window-bar span:nth-child(2) { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.window-bar span:nth-child(3) { background: #8dffab; box-shadow: 0 0 8px #8dffab; }
.window-bar code { margin-left: 6px; color: var(--cyan-soft); font-family: var(--mono); font-size: 0.58rem; }
.output-content { min-height: 184px; padding: 24px 20px; background: linear-gradient(145deg, rgba(0, 106, 189, 0.38), transparent 72%); }
.output-content p { margin: 0; color: var(--paper); font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.02; }.output-content p b { color: var(--yellow); }
.demo-cta { display: inline-flex; margin-top: 20px; padding: 8px 10px; border: 1px solid rgba(46, 221, 255, 0.75); color: var(--cyan-soft); background: rgba(0, 11, 46, 0.5); font-family: var(--mono); font-size: 0.59rem; }
.output-caption { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(103, 242, 255, 0.22); color: rgba(233, 253, 255, 0.78); font-family: var(--mono); font-size: 0.55rem; }.output-caption strong { color: var(--yellow); font-weight: 500; }

.speaker-hero { position: absolute; z-index: 2; right: 74px; bottom: 0; width: min(420px, 37vw); margin: 0; pointer-events: none; }
.speaker-hero img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(-18px 7px 26px rgba(0, 14, 60, 0.42)); }
.speaker-aura { position: absolute; right: 10%; bottom: 7%; z-index: 1; width: 80%; height: 64%; border: 1px solid rgba(47, 233, 255, 0.5); background-image: linear-gradient(90deg, rgba(37, 229, 255, 0.18) 1px, transparent 1px), linear-gradient(rgba(37, 229, 255, 0.16) 1px, transparent 1px); background-size: 30px 30px; box-shadow: 0 0 28px rgba(21, 220, 255, 0.24); transform: skewY(-7deg); }
.speaker-hero figcaption { position: absolute; z-index: 3; left: -5px; bottom: 34px; display: grid; gap: 4px; max-width: 270px; padding: 13px 16px; border: 1px solid rgba(71, 239, 255, 0.72); border-radius: 7px; color: var(--paper); background: rgba(1, 19, 67, 0.8); box-shadow: inset 0 0 16px rgba(29, 213, 255, 0.16); }
.speaker-hero figcaption span { color: var(--yellow); font-family: var(--mono); font-size: 0.62rem; }.speaker-hero figcaption strong { font-family: var(--display); font-size: 1rem; line-height: 1.1; }.speaker-hero figcaption small { color: rgba(233, 253, 255, 0.82); font-size: 0.68rem; line-height: 1.35; }
.hero-index { position: absolute; right: 32px; bottom: 18px; z-index: 5; margin: 0; color: rgba(202, 252, 255, 0.56); font-family: var(--mono); font-size: 0.66rem; }

.reason-section { position: relative; padding: 112px 0; overflow: hidden; background: var(--paper-blue); }
.reason-section::before { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; content: ""; opacity: 0.32; background-image: linear-gradient(90deg, rgba(0, 92, 174, 0.15) 1px, transparent 1px), linear-gradient(rgba(0, 92, 174, 0.15) 1px, transparent 1px); background-size: 30px 30px; }
.reason-layout { position: relative; display: grid; grid-template-columns: 2fr 7fr; gap: 50px; }.reason-section h2 { max-width: 940px; margin: 0; font-family: var(--display); font-size: 4.2rem; line-height: 0.98; }.reason-section h2 i { color: var(--blue); font-family: "Libre Baskerville", Georgia, serif; }.section-lead { max-width: 670px; margin: 31px 0 0; color: #365b85; font-size: 1.12rem; line-height: 1.7; }

.program-section { position: relative; padding: 94px 0; overflow: hidden; color: var(--paper); background: var(--navy); }.program-section::after { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: 0.22; background-image: linear-gradient(90deg, rgba(87, 238, 255, 0.2) 1px, transparent 1px), linear-gradient(rgba(87, 238, 255, 0.16) 1px, transparent 1px); background-size: 72px 72px; }.program-section .section-inner { position: relative; z-index: 1; }.section-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(177, 249, 255, 0.4); color: rgba(235, 254, 255, 0.8); font-family: var(--mono); font-size: 0.72rem; }.program-section .section-label, .brief-section .section-label, .ticket-section .section-label { color: var(--yellow); }.program-section h2 { max-width: 950px; margin: 38px 0 0; font-family: var(--display); font-size: 4.1rem; line-height: 0.98; }.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 54px; }.program-step { min-height: 250px; padding: 24px; border: 1px solid rgba(122, 243, 255, 0.46); border-radius: 7px; background: rgba(2, 37, 92, 0.76); box-shadow: inset 0 0 20px rgba(29, 210, 255, 0.1); }.program-step span { color: var(--yellow); font-family: var(--mono); font-size: 0.75rem; }.program-step h3 { margin: 45px 0 14px; color: var(--cyan-soft); font-family: var(--display); font-size: 1.4rem; line-height: 1.16; }.program-step p { margin: 0; color: rgba(239, 254, 255, 0.82); font-size: 0.98rem; line-height: 1.6; }

.brief-section { padding: 110px 0; color: var(--paper); background: #005cae; }.brief-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: center; }.brief-copy h2 { margin: 0; font-family: var(--display); font-size: 4rem; line-height: 0.98; }.brief-copy h2 i { color: var(--yellow); font-family: "Libre Baskerville", Georgia, serif; }.brief-copy > p { max-width: 590px; margin: 26px 0 0; color: #e8faff; font-size: 1.12rem; line-height: 1.65; }.brief-rule { display: grid; gap: 6px; max-width: 560px; margin-top: 31px; padding: 18px 0; border-top: 2px solid var(--yellow); border-bottom: 1px solid rgba(198, 250, 255, 0.58); }.brief-rule strong { color: var(--yellow); font-size: 1rem; }.brief-rule span { color: #e8faff; line-height: 1.55; }.brief-fields { display: grid; gap: 8px; }.brief-fields div { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 105px; padding: 21px; border: 1px solid rgba(100, 244, 255, 0.66); border-radius: 7px; background: rgba(1, 30, 87, 0.56); box-shadow: inset 0 0 18px rgba(36, 214, 255, 0.11); }.brief-fields span { color: var(--yellow); font-family: var(--mono); font-size: 0.72rem; }.brief-fields p { margin: 0; color: var(--paper); font-family: var(--display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; }

.ticket-section { padding: 92px 0; color: var(--paper); background: var(--navy-deep); }.ticket-layout { display: grid; grid-template-columns: 1fr 0.83fr; gap: 72px; align-items: end; }.ticket-section h2 { margin: 0; font-family: var(--display); font-size: 4rem; line-height: 0.98; }.ticket-note { max-width: 490px; margin: 30px 0 0; color: #d9f8ff; font-size: 1.12rem; line-height: 1.6; }.ticket-card { position: relative; overflow: hidden; padding: 25px; border: 2px solid var(--cyan); border-radius: 8px; color: var(--paper); background: linear-gradient(135deg, rgba(0, 102, 183, 0.72), rgba(5, 30, 90, 0.94)); box-shadow: inset 0 0 24px rgba(42, 221, 255, 0.21), 0 0 24px rgba(30, 218, 255, 0.2); }.ticket-card::before { position: absolute; top: -110px; right: -110px; width: 240px; height: 240px; border: 1px solid rgba(255, 228, 86, 0.55); border-radius: 50%; content: ""; }.ticket-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(176, 247, 255, 0.34); color: var(--cyan-soft); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; }.ticket-head b { color: var(--yellow); font-weight: 500; }.ticket-name { position: relative; z-index: 1; margin: 28px 0 10px; color: var(--paper); font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.18; }.ticket-price { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 14px; }.ticket-price del { padding-bottom: 9px; color: rgba(238, 252, 255, 0.65); font-family: var(--mono); font-size: 0.88rem; }.ticket-price strong { color: var(--yellow); font-family: var(--display); font-size: 4.15rem; line-height: 0.9; text-shadow: 0 0 16px rgba(255, 228, 86, 0.28); }.ticket-price small { font-family: var(--mono); font-size: 1rem; }.ticket-card > p { position: relative; z-index: 1; margin: 18px 0 28px; color: #e8fbff; font-size: 0.92rem; line-height: 1.55; }

.register-section { padding: 110px 0; background: var(--paper-blue); }.register-heading { max-width: 860px; margin-bottom: 54px; }.register-heading h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 4.2rem; line-height: 0.98; }.register-heading h2 i { color: var(--blue); font-family: "Libre Baskerville", Georgia, serif; }.register-heading > p:last-child { max-width: 650px; margin: 24px 0 0; color: #476889; font-size: 1.1rem; line-height: 1.65; }.registration-form { overflow: hidden; border: 1px solid rgba(22, 125, 186, 0.35); border-top: 4px solid var(--blue); border-radius: 8px; background: var(--paper); box-shadow: 0 14px 34px rgba(0, 67, 132, 0.1); }.registration-form.is-closed { border-top-color: #597189; }.registration-form.is-closed .form-section:not(.final-section) { opacity: 0.62; }.registration-form.is-closed input:disabled, .registration-form.is-closed select:disabled, .registration-form.is-closed textarea:disabled { cursor: not-allowed; background: #edf2f6; }.form-section { padding: 38px; border-bottom: 1px solid var(--line); }.form-section:last-child { border-bottom: 0; }.form-section-title { display: grid; grid-template-columns: 45px 1fr; gap: 14px; margin-bottom: 30px; }.form-section-title > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--cyan); border-radius: 6px; color: var(--paper); background: var(--navy); font-family: var(--mono); font-size: 0.72rem; box-shadow: 0 0 10px rgba(17, 207, 255, 0.22); }.form-section-title h3 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 1.65rem; line-height: 1.1; }.form-section-title p { margin: 4px 0 0; color: var(--quiet); font-family: var(--mono); font-size: 0.72rem; }.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }.field { display: grid; gap: 8px; }.field.full { grid-column: 1 / -1; }.field > span, .business-mode legend { color: #112b57; font-size: 0.93rem; font-weight: 700; }.field b, .business-mode b { color: var(--yellow-deep); }.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 13px; border: 1px solid rgba(20, 101, 165, 0.33); border-radius: 5px; outline: none; color: var(--ink); background: #fff; transition: border-color 0.16s ease, box-shadow 0.16s ease; }.field textarea { min-height: auto; resize: vertical; line-height: 1.55; }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 209, 255, 0.18); }.field input::placeholder, .field textarea::placeholder { color: #8296ae; }.field-check { align-content: start; }.checkline { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 13px; border: 1px solid rgba(20, 101, 165, 0.18); border-radius: 5px; background: #eaf8ff; }.checkline input, .consent input { width: 18px; min-height: 18px; accent-color: var(--blue); }.business-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 24px; padding: 0; border: 0; }.business-mode legend { grid-column: 1 / -1; margin-bottom: 3px; }.business-mode label { display: flex; align-items: flex-start; gap: 10px; min-height: 76px; padding: 13px; border: 1px solid rgba(14, 95, 163, 0.26); border-radius: 6px; background: #f7fcff; cursor: pointer; }.business-mode input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--blue); }.business-mode span { display: grid; gap: 4px; }.business-mode small { color: var(--quiet); line-height: 1.35; }.meal-note { display: flex; justify-content: space-between; gap: 18px; margin: -5px 0 24px; color: var(--quiet); font-family: var(--mono); font-size: 0.7rem; }.final-section { display: grid; gap: 22px; }.ticket-confirmation { display: flex; justify-content: space-between; gap: 24px; padding: 22px; border: 1px solid rgba(40, 225, 255, 0.72); border-radius: 7px; color: var(--paper); background: var(--navy); box-shadow: inset 0 0 20px rgba(22, 208, 255, 0.15); }.ticket-confirmation div { display: grid; gap: 5px; }.ticket-confirmation span { color: var(--yellow); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; }.ticket-confirmation strong { color: var(--cyan-soft); font-family: var(--display); font-size: 2.5rem; line-height: 0.96; }.ticket-confirmation small { color: rgba(228, 252, 255, 0.7); font-size: 0.76rem; }.ticket-confirmation p { align-self: end; max-width: 360px; margin: 0; color: rgba(235, 253, 255, 0.86); font-size: 0.9rem; line-height: 1.5; }.consent { display: flex; align-items: flex-start; gap: 12px; color: #405e80; font-size: 0.92rem; line-height: 1.55; }.form-submit { width: 100%; min-height: 62px; padding: 16px 20px; font-size: 1.08rem; }.form-submit strong { font-size: 1.4rem; }.form-status { min-height: 24px; margin: -7px 0 0; color: #ae234c; font-weight: 700; }.form-status[data-state="success"] { color: #087f65; }.form-status[data-state="info"] { color: #405e80; }

.prepare-section { padding: 30px 0; color: var(--paper); background: var(--navy-deep); }.prepare-layout { display: flex; justify-content: space-between; gap: 20px; align-items: center; }.prepare-section .section-label { margin: 0; color: var(--cyan); }.prepare-layout > p { margin: 0; font-family: var(--mono); font-size: 0.75rem; }.prepare-layout > p span { color: var(--yellow); }

.map-modal[hidden] { display: none; }
.map-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 28px; }
.map-backdrop { position: absolute; inset: 0; background: rgba(0, 9, 38, 0.76); }
.map-window { position: relative; width: min(920px, 100%); max-height: min(760px, calc(100vh - 56px)); padding: 24px; border: 1px solid var(--cyan); border-radius: 8px; overflow: auto; background: var(--paper); box-shadow: 0 28px 80px rgba(0, 14, 45, 0.42); }
.map-copy { padding-right: 48px; }
.map-copy .section-label { margin-bottom: 8px; color: #0967b5; font-weight: 800; letter-spacing: 0.08em; }
.map-window h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 2.15rem; line-height: 1.08; }
.map-copy > p:last-child { margin: 8px 0 18px; color: #425f82; font-weight: 750; }
.map-close { position: absolute; top: 14px; right: 14px; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan); border-radius: 6px; color: var(--paper); background: var(--navy); font-size: 1.75rem; font-weight: 700; line-height: 1; cursor: pointer; }
.map-frame { width: 100%; min-height: 360px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #c7d9eb; border-radius: 7px; background: #dcebf7; }
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 1120px) {
  .hero { min-height: 750px; }.hero-inner { min-height: 730px; }.hero h1 { font-size: 3.95rem; }.hero-copy { width: 64%; }.hero-output { top: 136px; width: 240px; }.speaker-hero { width: 410px; }.reason-section h2, .register-heading h2 { font-size: 3.6rem; }.program-section h2, .brief-copy h2, .ticket-section h2 { font-size: 3.5rem; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 0; }.hero-inner { display: grid; min-height: 0; }.hero-copy { width: 100%; padding: 68px 0 42px; }.hero-output { position: relative; top: auto; right: auto; width: min(360px, 76%); margin: 0 0 -62px auto; }.speaker-hero { position: relative; right: auto; bottom: auto; width: min(470px, 82%); margin: 0 -25px 0 auto; }.speaker-hero figcaption { left: 0; bottom: 34px; }.hero-index { display: none; }.reason-layout, .brief-layout, .ticket-layout { grid-template-columns: 1fr; gap: 36px; }.program-grid { grid-template-columns: 1fr; }.program-step { min-height: 0; }.ticket-card { max-width: 560px; }.prepare-layout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .hero-inner, .section-inner { width: min(100% - 32px, 1180px); }.hero { padding-top: 14px; }.brand-row { grid-template-columns: 1fr auto; gap: 10px; min-height: 56px; }.powered-by { font-size: 0.59rem; }.powered-by strong { font-size: 1.05rem; }.powered-by small { font-size: 0.38rem; }.club-wordmark { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: 0.88rem; letter-spacing: 0.3em; }.hosted-by { font-size: 0.59rem; }.hosted-by b { font-size: 0.92rem; }.hosted-by small { font-size: 0.46rem; }.hero-copy { padding: 48px 0 36px; }.hero h1 { font-size: 3rem; line-height: 0.96; }.hero-thai { font-size: 0.7em; }.hero-ai { font-size: 0.76em; }.hero-lead { margin-top: 21px; font-size: 0.98rem; }.event-strip { display: grid; grid-template-columns: 1fr; width: 100%; }.event-strip > span, .event-strip button { min-height: 46px; }.event-strip > span + span, .event-strip button { border-top: 1px solid rgba(154, 248, 255, 0.28); border-left: 0; }.hero-actions { display: grid; gap: 17px; margin-top: 24px; }.button { width: 100%; }.text-link { width: max-content; }.hero-output { width: 100%; margin: 0 0 -42px 0; }.speaker-hero { width: min(440px, 108%); margin: 0 -18px 0 auto; }.speaker-hero figcaption { bottom: 20px; max-width: 225px; padding: 10px 12px; }.speaker-hero figcaption strong { font-size: 0.84rem; }.speaker-hero figcaption small { font-size: 0.6rem; }.reason-section, .brief-section, .register-section { padding: 76px 0; }.program-section, .ticket-section { padding: 70px 0; }.reason-layout { gap: 24px; }.reason-section h2, .program-section h2, .brief-copy h2, .ticket-section h2, .register-heading h2 { font-size: 2.65rem; line-height: 1.02; }.section-lead { margin-top: 22px; font-size: 1rem; }.section-topline { align-items: flex-start; flex-direction: column; }.program-section h2 { margin-top: 28px; }.program-grid { margin-top: 38px; }.program-step { padding: 22px; }.program-step h3 { margin-top: 25px; font-size: 1.27rem; }.brief-layout { gap: 36px; }.brief-fields div { min-height: 90px; padding: 17px; }.brief-fields p { font-size: 1.04rem; }.ticket-layout { gap: 36px; }.ticket-price strong { font-size: 3.45rem; }.register-heading { margin-bottom: 34px; }.form-section { padding: 27px 19px; }.form-section-title { grid-template-columns: 38px 1fr; }.form-section-title h3 { font-size: 1.38rem; }.field-grid, .business-mode { grid-template-columns: 1fr; }.field.full { grid-column: auto; }.business-mode legend { grid-column: auto; }.meal-note, .ticket-confirmation { align-items: flex-start; flex-direction: column; }.ticket-confirmation { gap: 16px; }.ticket-confirmation p { align-self: auto; }.prepare-layout > p { line-height: 1.7; }.map-window { padding: 28px 22px; }.map-window h2 { font-size: 2.2rem; }
}

/* EC7 poster-derived composition */
.robot-hand { position: absolute; top: 88px; left: -52px; z-index: 1; width: 180px; opacity: 0.88; pointer-events: none; transform: rotate(-6deg); filter: drop-shadow(0 0 18px rgba(44, 221, 255, 0.3)); }
.brand-row { grid-template-columns: 170px 1fr 145px; min-height: 88px; padding-bottom: 17px; }
.powered-logo { display: block; width: 164px; height: auto; }
.hosted-logo { display: block; justify-self: end; width: 132px; height: auto; }
.club-wordmark { font-family: var(--body); font-size: clamp(1.08rem, 2vw, 1.74rem); font-weight: 500; letter-spacing: 0.38em; }
.hero-copy { width: min(560px, 49%); margin-left: 350px; padding: 88px 0 54px; }
.hero h1 { max-width: 590px; font-size: 3.72rem; }
.hero-lead { max-width: 580px; color: rgba(239, 252, 255, 0.9); }
.hero-lead strong { color: var(--cyan-soft); font-weight: 700; }
.hero-output { top: 180px; right: 0; width: 228px; }
.output-content { min-height: 168px; padding: 22px 18px; }
.output-caption { justify-content: center; }
.speaker-hero { right: auto; left: -54px; width: min(420px, 35vw); }
.speaker-hero img { filter: drop-shadow(0 16px 22px rgba(0, 12, 51, 0.62)); }
.speaker-aura { right: auto; left: 10%; }
.speaker-hero figcaption { left: 46px; bottom: 20px; width: 285px; max-width: none; min-height: 126px; padding: 29px 29px 20px; border: 0; border-radius: 0; background: url('/assets/ec7-hud-frame.png') center / 100% 100% no-repeat; box-shadow: none; }
.speaker-hero figcaption strong { font-size: 1.08rem; }

.reason-section { color: var(--paper); background: linear-gradient(130deg, #02194f 0%, #005eb3 58%, #0789c7 100%); }
.reason-section::before { width: 54%; opacity: 0.7; background-image: linear-gradient(90deg, rgba(109, 244, 255, 0.22) 1px, transparent 1px), linear-gradient(rgba(109, 244, 255, 0.19) 1px, transparent 1px); background-size: 52px 52px; }
.reason-section .section-label { color: var(--yellow); }
.reason-section h2 { color: var(--paper); }
.reason-section h2 strong { color: var(--yellow); font-family: var(--display); font-weight: 700; }
.section-lead { color: rgba(239, 252, 255, 0.9); }

.brief-section { position: relative; overflow: hidden; background: linear-gradient(118deg, #002865 0%, #0067b7 70%, #008dd2 100%); }
.brief-section::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: 0.24; background-image: linear-gradient(90deg, rgba(187, 252, 255, 0.26) 1px, transparent 1px), linear-gradient(rgba(187, 252, 255, 0.26) 1px, transparent 1px); background-size: 58px 58px; }
.brief-section .section-inner { position: relative; z-index: 1; }
.brief-copy h2 strong { color: var(--yellow); font-family: var(--display); font-style: normal; }
.brief-fields div { border-color: rgba(96, 242, 255, 0.76); background: rgba(1, 29, 89, 0.72); }

.register-section { color: var(--paper); background: linear-gradient(145deg, #001d58 0%, #005fab 57%, #0b8fd0 100%); }
.register-section .section-inner { position: relative; }
.register-section .section-inner::before { position: absolute; inset: -64px -42px auto auto; width: 45%; height: 390px; content: ''; opacity: 0.18; pointer-events: none; background-image: linear-gradient(90deg, rgba(128, 245, 255, 0.48) 1px, transparent 1px), linear-gradient(rgba(128, 245, 255, 0.48) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(520px) rotateY(-12deg); }
.register-heading { position: relative; z-index: 1; }
.register-heading h2 { color: var(--paper); }
.register-heading h2 strong { color: var(--yellow); font-family: var(--display); font-style: normal; }
.register-heading > p:last-child { color: rgba(233, 252, 255, 0.86); }
.registration-form { position: relative; z-index: 1; border: 1px solid rgba(89, 235, 255, 0.7); border-top: 4px solid var(--cyan); background: rgba(2, 23, 72, 0.88); box-shadow: inset 0 0 40px rgba(12, 199, 255, 0.1), 0 18px 44px rgba(0, 7, 43, 0.28); }
.form-section { border-color: rgba(109, 236, 255, 0.23); }
.form-section-title h3 { color: var(--paper); }
.form-section-title p { color: var(--cyan-soft); }
.field > span, .business-mode legend { color: rgba(242, 253, 255, 0.96); }
.field b, .business-mode b { color: var(--yellow); }
.field input, .field select, .field textarea { border-color: rgba(115, 235, 255, 0.5); color: #092450; background: rgba(248, 253, 255, 0.98); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 227, 82, 0.2); }
.checkline { border-color: rgba(91, 234, 255, 0.34); color: var(--paper); background: rgba(0, 94, 174, 0.55); }
.checkline input, .consent input { accent-color: var(--yellow); }
.business-mode label { border-color: rgba(82, 233, 255, 0.35); color: var(--paper); background: rgba(0, 91, 169, 0.44); }
.business-mode small { color: rgba(225, 251, 255, 0.76); }
.meal-note { color: var(--cyan-soft); }
.consent { color: rgba(237, 252, 255, 0.88); }
.form-status { color: #ff98af; }.form-status[data-state='success'] { color: #8cffca; }

.chatgpt-plus-note { display: grid; grid-template-columns: 122px 1fr; gap: 16px; align-items: center; padding: 17px; border: 1px solid rgba(255, 226, 81, 0.72); border-radius: 7px; background: linear-gradient(115deg, rgba(0, 109, 184, 0.56), rgba(2, 29, 87, 0.8)); box-shadow: inset 0 0 22px rgba(59, 228, 255, 0.11); }
.plus-plan-image { display: block; width: 122px; max-height: 170px; border: 1px solid rgba(93, 240, 255, 0.74); border-radius: 5px; background: #fff; object-fit: cover; object-position: top; box-shadow: 0 0 16px rgba(38, 221, 255, 0.18); }
.chatgpt-plus-note > div:last-child { display: grid; gap: 5px; }
.chatgpt-plus-note span { color: var(--yellow); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; }
.chatgpt-plus-note strong { color: var(--paper); font-size: 1rem; line-height: 1.35; }
.chatgpt-plus-note p { margin: 0; color: rgba(229, 250, 255, 0.82); font-size: 0.84rem; line-height: 1.5; }

@media (max-width: 1120px) {
  .hero-copy { width: min(530px, 49%); margin-left: 310px; }
  .hero h1 { font-size: 3.34rem; }
  .speaker-hero { left: -36px; width: 370px; }
  .hero-output { width: 212px; }
}

@media (max-width: 900px) {
  .robot-hand { display: none; }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "copy"
      "speaker"
      "output";
    gap: 0;
  }
  .brand-row { grid-area: brand; }
  .hero-copy { grid-area: copy; width: 100%; margin-left: 0; }
  .hero-output {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-area: output;
    z-index: 1;
    width: min(360px, 76%);
    margin: 24px 0 34px auto !important;
    transform: none !important;
  }
  .speaker-hero {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-area: speaker;
    z-index: 2;
    width: min(430px, 82%);
    margin: 0 auto !important;
    transform: none !important;
  }
  .speaker-hero figcaption { left: 18px; }
}

@media (max-width: 620px) {
  .brand-row { grid-template-columns: 118px 1fr 84px; min-height: 66px; gap: 8px; padding-bottom: 11px; }
  .powered-logo { width: 112px; }.hosted-logo { width: 78px; }
  .club-wordmark { font-size: 0.77rem; letter-spacing: 0.24em; }
  .hero-copy { padding-top: 47px; }.hero h1 { font-size: 2.84rem; }
  .hero-lead { font-size: 0.95rem; line-height: 1.56; }
  .hero-output { width: 100%; margin: 20px 0 28px !important; }
  .speaker-hero { width: min(390px, 100%); margin: 0 auto !important; }
  .speaker-hero figcaption { left: 12px; width: 270px; min-height: 119px; padding: 27px 27px 17px; }
  .reason-section, .brief-section, .register-section { padding: 70px 0; }
  .chatgpt-plus-note { grid-template-columns: 90px 1fr; gap: 12px; padding: 14px; }
  .plus-plan-image { width: 90px; max-height: 136px; }
  .map-modal { padding: 14px; }
  .map-window { max-height: calc(100vh - 28px); padding: 18px; }
  .map-copy { padding-right: 46px; }
  .map-window h2 { font-size: 1.45rem; line-height: 1.2; }
  .map-frame { min-height: 360px; aspect-ratio: 4 / 5; }
}

/* EC7 pricing and payment journey */
.ticket-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ticket-pricing .ticket-card { min-height: 100%; padding: 22px; }
.ticket-card-member { border-color: rgba(120, 255, 185, 0.88); background: linear-gradient(135deg, rgba(0, 117, 135, 0.76), rgba(3, 45, 89, 0.98)); box-shadow: inset 0 0 24px rgba(89, 255, 190, 0.15), 0 0 24px rgba(50, 238, 177, 0.18); }
.ticket-card-member::before { border-color: rgba(120, 255, 185, 0.6); }
.ticket-card-member .ticket-head b,
.ticket-card-member .ticket-price strong { color: #9affc4; text-shadow: 0 0 16px rgba(114, 255, 188, 0.24); }
.ticket-card-member .ticket-price del { color: rgba(229, 255, 241, 0.68); }
.ticket-action { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.ticket-confirmation small { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ticket-confirmation small del { color: rgba(234, 252, 255, 0.58); }

.ec7pay-body { min-height: 100vh; color: var(--paper); background: #001540; }
.ec7pay-body::before { position: fixed; z-index: 0; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(90deg, rgba(74, 230, 255, 0.11) 1px, transparent 1px), linear-gradient(rgba(74, 230, 255, 0.09) 1px, transparent 1px), linear-gradient(120deg, #00113d 0%, #004e9e 54%, #057ba5 100%); background-size: 52px 52px, 52px 52px, 100% 100%; }
.ec7pay-page { position: relative; z-index: 1; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 74px 0; }
.ec7-preview-banner { display: inline-flex; margin: 0 0 20px; padding: 9px 12px; border: 1px solid rgba(255, 228, 86, 0.72); border-radius: 5px; color: var(--yellow); background: rgba(1, 25, 76, 0.72); font-family: var(--mono); font-size: 0.72rem; }
.ec7pay-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 38px; align-items: end; margin-bottom: 28px; }
.ec7pay-hero .section-label, .ec7-bank-panel .section-label, .payment-form-heading .section-label, .ec7thankyou-panel .section-label { color: var(--yellow); }
.ec7pay-hero h1, .ec7thankyou-panel h1 { margin: 0; color: var(--paper); font-family: var(--display); font-size: clamp(3rem, 7vw, 5.3rem); line-height: 0.89; }
.ec7pay-hero h1 span, .ec7thankyou-panel h1 span { color: var(--yellow); }
.ec7pay-hero > div > p:last-child { max-width: 640px; margin: 22px 0 0; color: rgba(232, 252, 255, 0.88); font-size: 1.06rem; line-height: 1.65; }
.ec7-payment-ticket { padding: 25px; border: 1px solid rgba(255, 226, 84, 0.95); border-radius: 8px; color: var(--navy); background: linear-gradient(135deg, #ffe96a 0%, #f6bf31 100%); box-shadow: 0 10px 28px rgba(0, 13, 51, 0.28); }
.ec7-payment-ticket span, .ec7-payment-ticket small { display: block; font-weight: 800; }
.ec7-payment-ticket span { font-family: var(--mono); font-size: 0.73rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ec7-payment-ticket strong { display: block; margin: 11px 0 8px; font-family: var(--display); font-size: clamp(3rem, 5vw, 4.2rem); line-height: 0.86; }
.ec7-payment-ticket small { color: rgba(0, 23, 72, 0.76); line-height: 1.5; }
.ec7pay-layout { display: grid; grid-template-columns: minmax(300px, 0.84fr) minmax(0, 1.16fr); gap: 24px; align-items: start; }
.ec7-bank-panel, .ec7-payment-form { border-radius: 8px; }
.ec7-bank-panel { padding: 30px; border: 1px solid rgba(88, 238, 255, 0.66); background: rgba(1, 25, 76, 0.86); box-shadow: inset 0 0 30px rgba(10, 198, 255, 0.12); }
.ec7-bank-panel h2 { margin: 0 0 23px; font-family: var(--display); font-size: 2rem; line-height: 1.02; }
.ec7-bank-panel dl { display: grid; gap: 12px; margin: 0; }
.ec7-bank-panel dl div { padding: 16px; border: 1px solid rgba(158, 244, 255, 0.22); border-radius: 5px; background: rgba(255, 255, 255, 0.06); }
.ec7-bank-panel dt { color: var(--yellow); font-family: var(--mono); font-size: 0.69rem; }
.ec7-bank-panel dd { margin: 7px 0 0; color: var(--paper); font-size: 1.04rem; font-weight: 700; line-height: 1.45; }
.ec7-payment-form { display: grid; gap: 20px; padding: 32px; border: 1px solid rgba(81, 234, 255, 0.8); background: rgba(244, 252, 255, 0.98); box-shadow: 0 14px 34px rgba(0, 9, 51, 0.3); }
.payment-form-heading { padding-bottom: 20px; border-bottom: 1px solid rgba(8, 90, 157, 0.2); }
.payment-form-heading h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 2rem; line-height: 1; }
.payment-form-heading > p:last-child { margin: 10px 0 0; color: #466483; line-height: 1.55; }
.ec7-payment-form .field > span { color: #112b57; }
.ec7-payment-form .field em { color: #5f7691; font-style: normal; font-weight: 600; }
.ec7-payment-form .field small { color: #506b87; font-size: 0.8rem; line-height: 1.4; }
.ec7-payment-form input[type="number"] { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; }
.ec7-payment-submit { width: 100%; min-height: 62px; margin-top: 4px; font-size: 1.04rem; }
.ec7-payment-submit:disabled { cursor: progress; opacity: 0.68; }
.ec7-payment-form .form-status { min-height: 24px; margin: -8px 0 0; color: #a62042; }
.ec7-payment-form .form-status[data-state="success"] { color: #087f65; }
.field[hidden] { display: none !important; }
.ec7thankyou-page { position: relative; z-index: 1; display: grid; min-height: 100vh; place-items: center; width: min(100% - 32px, 720px); margin: 0 auto; }
.ec7thankyou-panel { width: 100%; padding: clamp(32px, 7vw, 72px); border: 1px solid rgba(78, 238, 255, 0.74); border-radius: 8px; background: rgba(1, 24, 74, 0.9); box-shadow: inset 0 0 36px rgba(15, 202, 255, 0.14), 0 16px 44px rgba(0, 6, 42, 0.42); }
.ec7thankyou-panel > p:not(.section-label):not(.ec7-registration-id) { max-width: 530px; margin: 26px 0 0; color: rgba(234, 252, 255, 0.88); font-size: 1.04rem; line-height: 1.7; }
.ec7thankyou-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 30px; }
.ec7thankyou-actions .button { width: auto; }
.ec7-registration-id { margin: 28px 0 0; color: rgba(159, 245, 255, 0.7); font-family: var(--mono); font-size: 0.72rem; }

@media (max-width: 760px) {
  .ticket-pricing { grid-template-columns: 1fr; }
  .ticket-action { width: 100%; }
  .ec7pay-page { width: min(100% - 32px, 1120px); padding: 42px 0; }
  .ec7pay-hero, .ec7pay-layout { grid-template-columns: 1fr; gap: 22px; }
  .ec7pay-hero h1 { font-size: 3.25rem; }
  .ec7-bank-panel, .ec7-payment-form { padding: 23px 18px; }
  .ec7-bank-panel h2, .payment-form-heading h2 { font-size: 1.65rem; }
  .ec7thankyou-actions { display: grid; }
  .ec7thankyou-actions .button, .ec7thankyou-actions .text-link { width: 100%; }
}