/* AgentKit Build Sprint — landing page (v5 Cinematic Full) */
:root {
  --ink: #05090D;
  --paper: #F4F2EE;
  --sand: #E9E4DA;
  --mint: #9FE8C1;
  --mint-deep: #0F2A22;
  --amber: #FFB547;
  --rust: #E58A5C;
  --error: #B5532C;
  --line: #D6D2CA;
  --line-soft: #E6E2DA;
  --line-dark: #1C2630;
  --pill-dark: #2A3640;
  --card-dark: #0E161D;
  --card-dark-2: #121A22;
  --text-2: #3B444D;
  --muted: #5E6B78;
  --muted-2: #6E7A86;
  --dim: #8C98A4;
  --slate: #AEB8C2;
  --fog: #C9D1D8;
  --mist: #E6EBEF;
  --font: 'Be Vietnam Pro', system-ui, sans-serif;
  --pad: 120px;
  /* side gutter: 120px at 1440, content capped at 1200px on wider screens */
  --gx: max(var(--pad), calc((100vw - 1200px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.page { overflow-x: clip; }

/* ---------- type ---------- */
.h2 { font-weight: 300; font-size: clamp(40px, 4.72vw, 68px); line-height: 1.05; letter-spacing: -.045em; }
.h2--72 { font-size: clamp(40px, 5vw, 72px); line-height: 1.06; }
.h2--88 { font-size: clamp(46px, 6.11vw, 88px); line-height: 1.02; letter-spacing: -.05em; }
.h2--64 { font-size: clamp(38px, 4.44vw, 64px); }
.h-44 { font-weight: 300; font-size: clamp(30px, 3.06vw, 44px); line-height: 1.1; letter-spacing: -.035em; }
.h-52 { font-weight: 300; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.h3 { font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
/* Headings: balance line lengths so no word ends up alone on the last line
   ("khám / phá.", "lập trình / viên."). Paragraphs: avoid a one-word last line. */
h1, h2, h3, .h2, .h-44, .h-52, .h3, .hero__title { text-wrap: balance; }
p { text-wrap: pretty; }
.h2--fade {
  background: linear-gradient(90deg, #5E6B78 0%, #AEB8C2 45%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- buttons & tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 999px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: opacity .15s, background-color .15s;
}
.btn:hover { opacity: .88; }
.btn:focus-visible, .seg__btn:focus-visible, .ind-tab:focus-visible, .phase-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.btn--white { background: #fff; color: var(--ink); }
.btn--outline { border: 2px solid rgba(255, 255, 255, .9); color: #fff; }
.btn--outline-ink { border: 2px solid var(--ink); color: var(--ink); }
.btn--hero { height: 62px; padding: 0 30px; font-size: 18px; }
.btn--play { padding: 0 28px 0 18px; }
.btn--md { flex: none; padding: 18px 30px; font-size: 17px; }
.btn--lg { padding: 20px 32px; font-size: 18px; }
.btn--sm { padding: 14px 24px; font-size: 15px; border-width: 1.5px; align-self: flex-start; }
.btn--ticket { align-self: flex-start; padding: 16px 28px; font-size: 17px; }
.play {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
}
.tag { display: inline-block; border-radius: 999px; font-size: 12px; line-height: 1.2; }
.tag--mint { padding: 4px 10px; background: var(--mint); color: var(--ink); font-weight: 500; }
.tag--line { padding: 3px 10px; border: 1px solid var(--pill-dark); color: var(--fog); font-weight: 400; }
.tag--lg { padding: 6px 14px; font-size: 13px; }

/* ---------- media placeholders ---------- */
.media { position: relative; overflow: hidden; }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media:has(> img, > video) .ph { display: none; }
.ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-size: 13px; line-height: 1.4; color: rgba(127, 127, 127, .9);
  background-image: repeating-linear-gradient(135deg, rgba(127,127,127,.06) 0 1px, transparent 1px 12px);
}

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--pad) var(--gx); display: flex; flex-direction: column; gap: 56px; }
.sec--light { background: var(--paper); color: var(--ink); }
.sec--dark { background: var(--ink); color: #fff; }
.sec--round { border-radius: 40px 40px 0 0; }
.sec--lift { border-radius: 40px 40px 0 0; margin-top: -40px; }
.sec--gap64 { gap: 64px; }
.sec--gap48 { gap: 48px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.sec-head__aside { font-weight: 300; font-size: 19px; line-height: 1.5; color: var(--text-2); }
.sec-head__aside--dim { font-size: 17px; color: var(--dim); }
.sec-head__aside--slate { line-height: 1.55; color: var(--slate); }
.sec-head__aside--sm { font-size: 17px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--13-1 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.grid--14-1 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.grid--135-1 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.grid--gap80 { gap: 80px; }
.grid--start { align-items: start; }
.grid--end { align-items: end; }
.grid--center { align-items: center; }
.grid--stretch { align-items: stretch; }

.card { border-radius: 28px; padding: 44px; display: flex; flex-direction: column; }
.card--ink { background: var(--ink); color: #fff; }
.card--white { background: #fff; color: var(--ink); }

/* ---------- 01 hero ---------- */
.hero { position: relative; height: 880px; overflow: hidden; background: var(--ink); color: #fff; }
.hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 82% 50%, var(--mint-deep) 0%, var(--ink) 70%); }
.hero__bg svg { width: 100%; height: 100%; display: block; }
/* Wide screens (2K/4K): the diagram is drawn for 1440×880. buildHeroBg switches the
   SVG to "meet" here, so it stays 1:1 and centred like the 1200px content column
   instead of scaling with the viewport (it grew ~1.8–2.7× and got cropped top/bottom).
   Centring inside the SVG, not with CSS margin: Chrome skips painting the mascot's
   foreignObject in a margin-offset SVG. Dots + glow fill the full width here. */
@media (min-width: 1441px) {
  .hero__bg {
    background:
      radial-gradient(circle, #1E2A33 1px, transparent 1.2px) 0 0 / 28px 28px,
      radial-gradient(ellipse 720px 528px at calc(50% + 461px) 50%, var(--mint-deep) 0%, var(--ink) 70%);
  }
  .hero__bg svg .hb-dots { display: none; }
  .hero__fade { background: linear-gradient(90deg, rgba(5,9,13,.92) 0%, rgba(5,9,13,.5) calc(50% - 144px), rgba(5,9,13,0) calc(50% + 173px)); }
}
.hero__fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,9,13,.92) 0%, rgba(5,9,13,.5) 40%, rgba(5,9,13,0) 62%); }
/* sticky top bar: transparent over the hero, dark glass once the page scrolls */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gx);
  border-bottom: 1px solid transparent;
  transition: padding .45s var(--ease-out, ease), background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.nav.is-solid {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(5, 9, 13, .72); border-bottom-color: rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
[id] { scroll-margin-top: 76px; }
.nav__left { display: flex; align-items: center; gap: 44px; }
.brand { font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.brand span { font-weight: 300; }
.nav__links { display: flex; gap: 30px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.nav__links a:hover { color: #fff; }
.nav__cta { padding: 13px 24px; font-size: 16px; }
.hero__content { position: absolute; left: var(--gx); bottom: 170px; z-index: 1; display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.hero__eyebrow { align-self: flex-start; padding: 8px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 14px; color: var(--fog); }
.hero__title { font-weight: 300; font-size: clamp(44px, 5.56vw, 80px); line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.hero__lead { font-weight: 300; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.45; color: #fff; }
.hero__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero__facts {
  position: absolute; left: var(--gx); right: var(--gx); bottom: 48px; z-index: 1;
  display: flex; gap: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 300; font-size: 15px; color: var(--slate);
}
.hero__facts strong { font-weight: 500; color: #fff; }

/* ---------- 02 audience ---------- */
.ind-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.ind-tab { padding: 15px 26px; border-radius: 999px; font-weight: 500; font-size: 17px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); transition: background-color .15s, color .15s; }
.ind-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.media--ind { height: 460px; border-radius: 28px; background: #E2DED6; }
.ind-card { justify-content: space-between; gap: 24px; }
.ind-card__label { font-weight: 500; font-size: 15px; color: var(--mint); }
.ind-card__pain { font-weight: 300; font-size: 32px; line-height: 1.3; letter-spacing: -.02em; }
.ind-card__gain { font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--slate); }
.fit-card { padding: 32px 36px; border: 1.5px solid var(--line); border-radius: 24px; display: flex; flex-direction: column; gap: 8px; }
.fit-card__q { font-size: 22px; }
.fit-card__a { font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--text-2); }

/* ---------- 03 problems ---------- */
.pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pains__col { display: flex; flex-direction: column; gap: 12px; padding-top: var(--offset, 0); }
.pains__label { font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); padding: 0 4px 6px; }
.bubble { background: var(--card-dark-2); border-radius: 24px 24px 24px 6px; padding: 20px 22px; font-weight: 300; font-size: 18px; line-height: 1.45; color: var(--mist); }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.cta-row__text { font-weight: 300; font-size: 30px; line-height: 1.35; letter-spacing: -.02em; color: #fff; max-width: 820px; }

/* free tool: one quiet line in section 03 (full block lives on tro-ly.html) */
.tool-line { font-weight: 300; font-size: 15px; color: var(--dim); margin-top: -24px; }
.tool-line a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
/* free tool block (also used on tro-ly.html) */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 44px; border-radius: 28px; background: linear-gradient(135deg, #0F2A22 0%, var(--card-dark) 60%); border: 1px solid rgba(159, 232, 193, .18); }
.tool__copy { display: flex; flex-direction: column; gap: 16px; }
.tool__title { font-weight: 300; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.tool__text { font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--slate); }
.tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.btn--mint { background: var(--mint); color: var(--ink); }
.tool__soon { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--pill-dark); font-size: 14px; color: var(--dim); }
.tool__note { font-weight: 300; font-size: 13px; color: var(--muted-2); }
.tool__brief { display: flex; flex-direction: column; gap: 4px; padding: 26px 28px; border-radius: 20px; background: var(--paper); color: var(--ink); font-family: ui-monospace, Menlo, monospace; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.tool__brief-head { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #1E7A4F; padding-bottom: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.tool__brief-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.tool__brief-row:last-child { border-bottom: 0; }
.tool__brief-row span { font-size: 11.5px; color: var(--muted); }
.tool__brief-row strong { font-family: var(--font); font-weight: 400; font-size: 15px; line-height: 1.4; }
.field .note a { color: var(--ink); text-decoration: underline; }

/* ---------- 04 solution ---------- */
.role-card { gap: 22px; }
.role-card__label { font-weight: 500; font-size: 15px; color: var(--muted); }
.role-card__label--mint { color: var(--mint); }
.role-card__list { display: flex; flex-direction: column; gap: 14px; font-weight: 300; font-size: 24px; line-height: 1.35; }
.takeaways { display: flex; flex-direction: column; gap: 24px; }
.numlist { border-top: 1px solid var(--line); }
.numlist li { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 300; font-size: 19px; }
.numlist li span:last-child { color: var(--muted); }
.criteria { gap: 6px; }
.criteria__title { padding-bottom: 14px; }
.criteria__list li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-dark); font-weight: 300; font-size: 18px; line-height: 1.4; }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--ink); font-weight: 600; font-size: 13px; line-height: 26px; text-align: center; }
.criteria__note { padding-top: 14px; font-weight: 300; font-size: 14px; color: var(--dim); }

/* ---------- 05 method ---------- */
.media--build { height: 440px; border-radius: 28px; background: var(--card-dark-2); }
.feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { background: var(--card-dark); border-radius: 24px; padding: 18px 18px 26px; display: flex; flex-direction: column; gap: 6px; }
.feature__head, .feature__body { padding: 0 8px; }
.feature__viz { position: relative; margin-bottom: 14px; border-radius: 16px; background: #0A1016; border: 1px solid var(--line-dark); padding: 10px 8px 6px; }

/* ---------- section 05 diagrams (stages driven by main.js: [data-s] gets .on, [data-x] gets .x) ---------- */
.dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg text { font-family: var(--font); fill: var(--fog); }
.dg .t-9 { font-size: 9.5px; fill: var(--dim); }
.dg .t-10 { font-size: 10.5px; }
.dg .t-11 { font-size: 11.5px; }
.dg .t-12 { font-size: 12.5px; }
.dg .t-13 { font-size: 13.5px; }
.dg .t-cap { font-size: 9px; font-weight: 500; letter-spacing: .1em; fill: var(--mint); }
.dg .t-mid { text-anchor: middle; }
.dg .t-hi { fill: var(--mist); }
.dg .t-mint { fill: var(--mint); }
.dg .t-ink { fill: var(--ink); }
.dg .t-ink2 { fill: var(--text-2); }
.dg .t-b { font-weight: 600; }
.dg .pill, .dg .pill-sq, .dg .opt, .dg .node { fill: var(--card-dark-2); stroke: var(--pill-dark); stroke-width: 1; }
.dg .card-m { fill: var(--mint-deep); stroke: rgba(159, 232, 193, .5); stroke-width: 1; }
.dg .doc { fill: var(--paper); }
.dg .docline { fill: #C9CFC9; }
.dg .badge { fill: var(--mint); }
.dg .glyph { fill: var(--dim); }
.dg .glyph-ink { fill: var(--ink); }
.dg .ln-mint { fill: none; stroke: var(--mint); stroke-width: 1.4; stroke-opacity: .75; }
.dg .ln-dim { fill: none; stroke: var(--pill-dark); stroke-width: 1.4; }
.dg .ln-thick { stroke-width: 2.2; stroke-opacity: 1; }
.dg .ln-edge { fill: none; stroke: var(--line-dark); stroke-width: 1.2; }
.dg .ln-div { stroke: var(--line-dark); stroke-dasharray: 3 4; }
.dg .flow { fill: none; stroke: #fff; stroke-opacity: 0; stroke-width: 1.6; stroke-dasharray: 2 10; }
.dg .ring-pulse { fill: none; stroke: var(--mint); stroke-width: 1.2; stroke-opacity: .16; transform-box: fill-box; transform-origin: center; }
/* ambient motion only while a diagram is playing; at rest the picture is still */
.dg.is-playing .flow { stroke-opacity: .55; animation: dgFlow 1.1s linear infinite; }
.dg.is-playing .ring-pulse { animation: dgPulse 2.6s ease-out infinite; }
@keyframes dgFlow { to { stroke-dashoffset: -24; } }
@keyframes dgPulse { 0% { transform: scale(.94); stroke-opacity: .55; } 100% { transform: scale(1.14); stroke-opacity: 0; } }

/* replay hint, shown after the first play */
.feature__viz::after {
  content: '↻ Xem lại'; position: absolute; right: 12px; top: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; color: var(--dim); border: 1px solid var(--line-dark); background: rgba(10, 16, 22, .85);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.feature.dg-done { cursor: pointer; }
.feature.dg-done:hover .feature__viz::after { opacity: 1; }
@media (hover: none) { .feature.dg-done .feature__viz::after { opacity: .8; } }

/* stage states */
.dg [data-s] { opacity: 0; transition: opacity .55s ease, transform .7s var(--ease-out, ease), stroke-dashoffset .9s ease; }
.dg [data-s].on { opacity: 1; }
.dg .rise { transform-box: fill-box; transform: translate3d(0, 6px, 0); }
.dg .pop { transform-box: fill-box; transform-origin: center; transform: scale(.4); transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.dg .rise.on, .dg .pop.on { transform: none; }
.dg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dg .draw.on { stroke-dashoffset: 0; }
.dg .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.dg .grow.on { transform: none; }
.dg .opt, .dg .node, .dg .dimB { transition: fill .5s ease, stroke .5s ease, opacity .5s ease; }
.dg .optA.x, .dg .asker.x { stroke: var(--mint); }
.dg .step.x { fill: var(--mint); stroke: var(--mint); }
.dg .dimB.x { opacity: .35; }
.dg.is-fading [data-s] { opacity: 0; transition: opacity .6s ease; }
.feature__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feature__title { font-size: 19px; }
.feature__body { font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--dim); }
.session-parts { display: flex; flex-direction: column; gap: 20px; }
.session-parts__label { font-size: 15px; color: var(--mint); }
.session-parts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.part { padding: 28px 32px 0; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--line-dark); }
.part:first-child { padding-left: 0; border-left: 0; }
.part:last-child { padding-right: 0; }
.part__n { font-weight: 200; font-size: 64px; line-height: 1; }
.part__t { font-size: 22px; }
.part__d { font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--slate); }

/* ---------- 06 team ---------- */
.team { background: var(--ink); color: #fff; padding: 40px 0 var(--pad) var(--gx); display: flex; flex-direction: column; gap: 56px; border-top: 1px solid var(--line-dark); }
.team__head { padding: 80px var(--gx) 0 0; }
.team__head .h2 { color: #fff; }
.team__row {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-right: var(--gx); padding-bottom: 8px; scroll-padding-left: 0;
  scrollbar-width: thin; scrollbar-color: var(--text-2) transparent;
}
.team__row:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.team__progress { display: none; }
/* pinned mode: section sticks, row is moved by main.js as the page scrolls */
#doi-ngu { scroll-margin-top: 0; }
.team-pin.is-pinned .team { position: sticky; top: 0; min-height: 100vh; justify-content: center; padding-top: 72px; padding-bottom: 56px; }
.team-pin.is-pinned .team__head { padding-top: 0; }
.team-pin.is-pinned .team { gap: clamp(28px, 5vh, 56px); }
.team-pin.is-pinned .member { width: clamp(220px, 34vh, 300px); }
.team-pin.is-pinned .team__row { overflow: visible; scroll-snap-type: none; will-change: transform; }
.team-pin.is-pinned .team__progress { display: block; height: 2px; margin-right: var(--gx); background: var(--line-dark); border-radius: 1px; overflow: hidden; }
.team-pin.is-pinned .team__progress span { display: block; height: 100%; width: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.member { flex: none; width: 300px; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: start; }
.media--member { aspect-ratio: 1; border-radius: 24px; background: var(--card-dark-2); }
/* one shared treatment so six different photo backdrops sit together; full colour on hover */
.media--member > img { filter: saturate(.8) brightness(.9) contrast(1.04); transition: filter .5s ease, transform 2.2s var(--ease-out, ease); }
.member:hover .media--member > img { filter: none; }
.member__lens { align-self: flex-start; padding: 5px 12px; border: 1px solid var(--pill-dark); border-radius: 999px; font-size: 13px; color: var(--mint); }
.member__info { display: flex; flex-direction: column; gap: 4px; }
.member__name { font-weight: 500; font-size: 19px; color: #fff; }
.member__cred { font-weight: 300; font-size: 15px; line-height: 1.45; color: var(--dim); }

/* ---------- 07 curriculum ---------- */
.phase-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.phase-tab {
  display: flex; flex-direction: column; gap: 6px; padding: 0 24px 22px 0; margin-bottom: -1px; text-align: left;
  border-bottom: 2px solid transparent; opacity: .45; transition: opacity .2s;
}
.phase-tab:hover { opacity: .75; }
.phase-tab[aria-selected="true"] { border-bottom-color: var(--ink); opacity: 1; }
.phase-tab__meta { font-size: 14px; color: var(--muted); }
.phase-tab__title { font-weight: 300; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.sessions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.session { background: #fff; color: var(--ink); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 18px; min-height: 340px; --tag: var(--muted); --rule: var(--line-soft); }
.session--gate { background: var(--ink); color: #fff; --tag: var(--mint); --rule: var(--line-dark); }
.session__kind { font-size: 14px; color: var(--tag); }
.session__title { font-weight: 300; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }
.session__out { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.session__out-label { font-size: 13px; color: var(--tag); }
.session__out-text { font-weight: 300; font-size: 17px; line-height: 1.5; }
.curr-note { font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- 08 commitment ---------- */
.commit-head { display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.eyebrow-mint { font-size: 16px; color: var(--mint); }
.commit-head__lead { font-weight: 300; font-size: 21px; line-height: 1.5; color: var(--slate); max-width: 840px; }
.commit-card { padding: 40px; gap: 6px; }
.commit-card__title { font-weight: 400; font-size: 24px; padding-bottom: 12px; }
.commit-card li { padding: 14px 0; border-top: 1px solid var(--rule); font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--li); }
.commit-card--dark { background: var(--card-dark); color: #fff; --rule: var(--line-dark); --li: var(--fog); }
.commit-card--light { background: var(--paper); color: var(--ink); --rule: var(--line); --li: var(--text-2); }
.notfit { display: flex; flex-direction: column; gap: 18px; }
.notfit__label { font-size: 15px; color: var(--rust); }
.notfit__list { display: flex; flex-wrap: wrap; gap: 10px; }
.notfit__list li { padding: 13px 20px; border: 1px solid #3B2A22; border-radius: 999px; font-weight: 300; font-size: 16px; color: var(--fog); }

/* ---------- 09 pricing ---------- */
.calc { display: flex; flex-direction: column; gap: 24px; }
.calc__inputs { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.range { display: flex; flex-direction: column; gap: 10px; }
.range__row { display: flex; justify-content: space-between; font-size: 16px; color: var(--text-2); }
.range__row output { color: var(--ink); font-weight: 500; }
input[type=range] { width: 100%; margin: 0; accent-color: var(--ink); cursor: pointer; }
.warn-pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 16px 22px; background: var(--ink); border-radius: 999px; }
.warn-pill span:first-child { font-weight: 300; font-size: 18px; line-height: 1.3; color: #fff; letter-spacing: -.01em; }
.warn-pill__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,181,71,.18); animation: warnBlink 2.4s ease-in-out infinite; }
@keyframes warnBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(255,181,71,.22); }
  50% { opacity: .25; box-shadow: 0 0 0 0 rgba(255,181,71,0); }
}
.calc-out { border-radius: 32px; padding: 48px; gap: 28px; }
.calc-out__big { display: flex; flex-direction: column; gap: 6px; }
.calc-out__label { font-size: 16px; color: var(--dim); }
.calc-out__num { font-weight: 200; font-size: clamp(64px, 7.2vw, 104px); line-height: 1; letter-spacing: -.05em; }
.calc-out__unit { font-size: 40px; letter-spacing: -.02em; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bars__row { display: flex; justify-content: space-between; font-size: 15px; color: var(--slate); }
.bars__row--mint { color: var(--mint); }
.bar { height: 10px; border-radius: 5px; background: var(--line-dark); }
.bar--full { background: var(--muted); }
.bar__fill { height: 100%; border-radius: 5px; background: var(--mint); transition: width .25s; }
.calc-out__note { font-weight: 300; font-size: 13px; line-height: 1.5; color: var(--muted-2); }

.price-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.seg { display: flex; padding: 5px; background: var(--line-soft); border-radius: 999px; }
.seg__btn { padding: 12px 22px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--text-2); transition: background-color .15s, color .15s; }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ticket { border-radius: 32px; gap: 20px; }
.ticket__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ticket__name { font-weight: 500; font-size: 20px; }
.ticket__price { display: flex; align-items: baseline; gap: 14px; }
.ticket__price span { font-weight: 200; font-size: clamp(52px, 5vw, 72px); line-height: 1; letter-spacing: -.04em; }
.ticket__price s { font-weight: 300; font-size: 20px; color: var(--dim); }
.card--ink .ticket__price s { color: var(--muted-2); }
.ticket__desc { font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.card--ink .ticket__desc { color: var(--slate); }

.paths { display: flex; flex-direction: column; gap: 28px; padding-top: 24px; }
.options { border: 1.5px solid var(--line); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 6px; }
.options__row { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.options__row--head { padding: 0 0 10px; border-top: 0; font-size: 14px; color: var(--muted); }
.options__name { font-size: 18px; }
.options__when { font-weight: 300; font-size: 16px; line-height: 1.45; }
.options__cost { font-weight: 300; font-size: 15px; color: var(--muted); }
.options__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--muted); }
.fitwhen { padding: 36px; gap: 18px; }
.fitwhen__label { font-size: 15px; color: var(--mint); }
.fitwhen__text { font-weight: 300; font-size: 22px; line-height: 1.35; letter-spacing: -.01em; }
.fitwhen__price { display: flex; flex-direction: column; gap: 4px; }
.fitwhen__num { font-weight: 200; font-size: 48px; line-height: 1; letter-spacing: -.04em; }
.fitwhen__sub { font-weight: 300; font-size: 15px; color: var(--slate); }
.fitwhen__list { display: flex; flex-direction: column; gap: 10px; font-weight: 300; font-size: 16px; line-height: 1.45; color: var(--mist); }

/* ---------- 09b register ---------- */
.register { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.register__side { display: flex; flex-direction: column; gap: 36px; position: sticky; top: 100px; }
.steps { border-top: 1px solid var(--line-dark); }
.steps li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.steps li > div { display: flex; flex-direction: column; gap: 4px; }
.steps__n { flex: none; width: 28px; font-weight: 200; font-size: 40px; line-height: 1; color: var(--muted); }
.steps__n--on { color: var(--mint); }
.steps__t { font-size: 19px; }
.steps__d { font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--dim); }
.summary { display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; background: var(--card-dark); border-radius: 22px; }
.summary__label { font-size: 14px; color: var(--dim); }
.summary__ticket { font-size: 20px; }
.summary__lines { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
.summary__line { display: flex; justify-content: space-between; gap: 16px; font-weight: 300; font-size: 14px; color: var(--slate); }
.summary__line > span:last-child { color: #fff; }
.summary__tax { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.summary__total { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
.summary__amount { font-weight: 200; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; color: var(--mint); white-space: nowrap; }
.summary__note { font-weight: 300; font-size: 13px; color: var(--muted-2); }

.done { background: var(--paper); color: var(--ink); border-radius: 32px; padding: 56px; display: flex; flex-direction: column; gap: 18px; min-height: 480px; justify-content: center; }
.done__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--mint); font-weight: 500; font-size: 24px; line-height: 56px; text-align: center; }
.done__title { font-weight: 300; font-size: 44px; line-height: 1.1; letter-spacing: -.035em; }
.done__text { font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.pay-qr { width: 260px; max-width: 100%; border-radius: 16px; background: #fff; padding: 10px; border: 1px solid var(--line); }

.form { background: var(--paper); color: var(--ink); border-radius: 32px; padding: 44px; display: flex; flex-direction: column; gap: 26px; }
.field-group { display: flex; flex-direction: column; gap: 12px; }
.field-group > legend { margin-bottom: 12px; }
.field-group--tight > legend { margin-bottom: 10px; }
.label { font-weight: 500; font-size: 14px; }
.label--sm, .label--13 { font-size: 13px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.input {
  width: 100%; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
  font: 400 16px var(--font); color: var(--ink); outline: none; transition: border-color .15s;
}
.input::placeholder { color: #9AA3AB; }
.input:focus { border-color: var(--ink); }
.input--sm { padding: 13px 16px; border-radius: 12px; background: #F9F8F5; font-size: 15px; }
.input--area { padding: 16px 18px; border-radius: 16px; line-height: 1.55; resize: vertical; }
.form.is-tried .input.is-missing { border-color: var(--error); }
.note { font-weight: 300; font-size: 13px; color: var(--muted-2); }
.form__reassure { font-size: 14px; line-height: 1.55; color: var(--text-2); padding: 14px 18px; border-radius: 14px; background: var(--line-soft); }

.ticket-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket-opt { cursor: pointer; padding: 18px 20px; border-radius: 18px; background: #fff; color: var(--ink); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; transition: background-color .15s, color .15s; }
.ticket-opt input, .chip input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ticket-opt:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.ticket-opt:has(input:focus-visible), .chip:has(input:focus-visible), .check:has(input:focus-visible) .check__box { outline: 2px solid var(--mint); outline-offset: 2px; }
.ticket-opt__name { font-weight: 500; font-size: 16px; }
.ticket-opt__price { font-weight: 300; font-size: 14px; opacity: .75; }

.emps { display: flex; flex-direction: column; gap: 12px; }
.emps__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.emps__hint { font-weight: 300; font-size: 13px; color: var(--muted); }
.emps__list { display: flex; flex-direction: column; gap: 12px; }
.emp { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); }
.emp--included { border-color: var(--ink); }
.emp__head { display: flex; align-items: center; gap: 10px; }
.emp__n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 500; font-size: 13px; line-height: 28px; text-align: center; }
.emp__title { flex: 1; font-weight: 500; font-size: 15px; }
.emp__tag { padding: 5px 12px; border-radius: 999px; font-weight: 500; font-size: 12px; background: var(--paper); color: var(--ink); white-space: nowrap; }
.emp--included .emp__tag { background: var(--mint); }
.emp__remove { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 300; font-size: 18px; line-height: 1; color: var(--muted); }
.emp__remove:hover { border-color: var(--ink); color: var(--ink); }
.emp--included .emp__remove { display: none; }
.emp__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.emps__add { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-radius: 20px; border: 1.5px dashed #B9B4AA; text-align: left; }
.emps__add:hover { border-color: var(--ink); }
.emps__add-l { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.emps__plus { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 18px; line-height: 1; }
.emps__add-r { font-size: 14px; color: var(--muted); white-space: nowrap; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { cursor: pointer; position: relative; }
.chip span { display: block; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 15px; transition: background-color .15s, color .15s; }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }

.vat { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line-soft); }
.vat__note { font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.vat__note strong { font-weight: 500; color: var(--ink); }
.vat__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 4px; }
.vat__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vat__contact[hidden] { display: none; }
.rep { display: flex; gap: 8px; }
.rep__title { flex: none; width: 76px; padding-inline: 10px; cursor: pointer; }
.label__opt { font-weight: 300; color: var(--text-2); }
.vat__hold { font-weight: 300; font-size: 13.5px; line-height: 1.55; color: var(--text-2); padding: 10px 14px; border-radius: 12px; background: #F9F8F5; border: 1px dashed var(--line); }
.vat__hold strong { font-weight: 500; color: var(--ink); }
.vat__fields[hidden] { display: none; }
.check { cursor: pointer; position: relative; display: flex; align-items: center; gap: 12px; font-size: 16px; }
.check__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--ink); background: #fff; color: #fff; font-weight: 600; font-size: 14px; line-height: 22px; text-align: center; }
.check input:checked + .check__box { background: var(--ink); }
.check input:checked + .check__box::before { content: '✓'; }
.check--commit { align-items: flex-start; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.check--commit .check__box { margin-top: 1px; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.form__hint { font-weight: 300; font-size: 13px; color: var(--muted-2); }
.form__hint.is-error { color: var(--error); }
.btn--submit { flex: none; padding: 19px 40px; background: var(--muted); color: #fff; font-size: 18px; }
.btn--submit.is-ready { background: var(--ink); }
.btn--submit:disabled { cursor: progress; opacity: .6; }

/* ---------- 10 FAQ ---------- */
.faq { position: relative; background: var(--paper); color: var(--ink); padding: 40px var(--gx) 160px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 80px; border-radius: 40px 40px 0 0; margin-top: -40px; }
.faq__head { display: flex; flex-direction: column; gap: 14px; padding-top: 80px; }
.faq__head p { font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--muted); }
.faq__list { border-top: 1px solid var(--line); margin-top: 80px; align-self: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 19px; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq .plus { flex: none; font-weight: 200; font-size: 30px; line-height: 1; transition: transform .2s; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { padding: 0 60px 24px 0; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--text-2); }

/* ---------- 11 final CTA ---------- */
.final { position: relative; height: 620px; overflow: hidden; border-radius: 40px 40px 0 0; margin-top: -40px; background: var(--card-dark-2); }
.media--final { position: absolute; inset: 0; }
.media--final .ph { align-items: flex-start; padding-top: 56px; }
.final__fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5,9,13,.85) 0%, rgba(5,9,13,.2) 70%); }
.final__content { position: absolute; left: var(--gx); right: var(--gx); bottom: 100px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.final__title { font-weight: 300; font-size: clamp(40px, 5.56vw, 80px); line-height: 1.04; letter-spacing: -.045em; color: #fff; max-width: 820px; }
.final__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; flex: none; }
.final__cta > span { font-weight: 300; font-size: 14px; color: rgba(255,255,255,.85); }

/* ---------- mobile fixed CTA ---------- */
.mcta { display: none; }
@keyframes mctaTint { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes mctaGlow { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(159, 232, 193, .55), 0 0 0 1px rgba(255,255,255,.35) inset; } 50% { box-shadow: 0 10px 34px -6px rgba(127, 214, 224, .6), 0 0 0 1px rgba(255,255,255,.35) inset; } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  :root { --pad: 80px; }
  .hero__facts { gap: 32px; flex-wrap: wrap; }
  .grid--gap80, .faq { gap: 56px; }
}

@media (max-width: 1024px) {
  :root { --pad: 56px; }
  .nav__links { display: none; }
  .hero { height: auto; min-height: 820px; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gx) 48px; }
  .hero__bg svg { opacity: .35; }
  .hero__fade { background: linear-gradient(0deg, rgba(5,9,13,.95) 0%, rgba(5,9,13,.7) 55%, rgba(5,9,13,.35) 100%); }
  .hero__content { position: relative; left: auto; bottom: auto; margin-bottom: 56px; }
  .hero__facts { position: relative; left: auto; right: auto; bottom: auto; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .grid--2, .grid--13-1, .grid--14-1, .grid--135-1 { grid-template-columns: minmax(0, 1fr); }
  .grid--gap80 { gap: 40px; }
  .pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pains__col { padding-top: 0; }
  .sessions { grid-template-columns: minmax(0, 1fr); }
  .tool { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .session { min-height: 0; }
  .register { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .register__side { position: static; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq__list { margin-top: 40px; }
  .final__content { flex-direction: column; align-items: flex-start; }
  .final__cta { align-items: flex-start; }
}

@media (max-width: 720px) {
  :root { --pad: 16px; }
  .sec, .faq { padding-top: 88px; padding-bottom: 88px; gap: 40px; }
  .sec--gap64 { gap: 48px; }
  .sec--round, .sec--lift, .faq, .final { border-radius: 28px 28px 0 0; }
  .sec--lift, .faq, .final { margin-top: -28px; }
  .hero { min-height: 760px; padding-top: 96px; }
  .hero__content { gap: 22px; }
  .hero__actions .btn--hero { height: 54px; font-size: 16px; }
  .hero__facts { flex-direction: column; gap: 10px; font-size: 14px; }
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav.is-solid { padding-top: 10px; padding-bottom: 10px; }
  .brand { font-size: 18px; }
  .nav__cta { padding: 11px 18px; font-size: 15px; }
  .card { padding: 28px; border-radius: 24px; }
  .ind-tab { padding: 12px 18px; font-size: 15px; }
  .media--ind { height: 280px; }
  .ind-card__pain { font-size: 24px; }
  .pains { grid-template-columns: minmax(0, 1fr); }
  .bubble { font-size: 16px; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tool { padding: 24px; }
  .tool__brief { padding: 20px; }
  .cta-row__text { font-size: 24px; }
  .role-card__list { font-size: 20px; }
  .h3 { font-size: 24px; }
  .media--build { height: 260px; }
  .feature-row { grid-template-columns: minmax(0, 1fr); }
  .session-parts__grid { grid-template-columns: minmax(0, 1fr); }
  .part, .part:first-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
  .part__n { font-size: 48px; }
  .team { padding-top: 24px; padding-bottom: 88px; gap: 40px; }
  .team__head { padding-top: 64px; }
  .member { width: 260px; }
  .phase-tabs { grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .phase-tab { padding-right: 16px; }
  .phase-tab__title { font-size: 18px; }
  .session { padding: 28px; }
  .session__title { font-size: 22px; }
  .commit-head__lead { font-size: 18px; }
  .commit-card { padding: 28px; }
  .notfit__list li { font-size: 15px; border-radius: 20px; }
  .warn-pill { border-radius: 24px; }
  .warn-pill span:first-child { font-size: 16px; }
  .calc-out { padding: 28px; }
  .calc-out__unit { font-size: 28px; }
  .seg { width: 100%; }
  .seg__btn { flex: 1; padding: 12px 10px; font-size: 14px; }
  .options { padding: 24px; }
  .options__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .options__row--head { display: none; }
  .fitwhen { padding: 28px; }
  .form, .done { padding: 24px; border-radius: 24px; }
  .done__title { font-size: 32px; }
  .fields, .emp__fields, .vat__fields { grid-template-columns: minmax(0, 1fr); }
  .ticket-opts { grid-template-columns: minmax(0, 1fr); }
  .emp { padding: 18px; }
  .emps__head, .emps__add { flex-wrap: wrap; }
  .form__foot { flex-direction: column-reverse; align-items: stretch; }
  .btn--submit { width: 100%; }
  .summary { padding: 22px; }
  .summary__amount { font-size: 30px; }
  .faq__head { padding-top: 0; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; font-size: 16px; }
  .final { height: auto; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gx) 64px; }
  .final__content { position: relative; left: auto; right: auto; bottom: auto; }
}

/* ---------- reveal effects ---------- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* hero intro (plays on load) */
@keyframes rvUp { from { opacity: 0; transform: translate3d(0, 32px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rvBg { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes rvLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js-reveal .hero__bg { animation: rvBg 2.4s var(--ease-out) both; }
.js-reveal .nav { animation: rvFade 1.2s .2s ease both; }
.js-reveal .hero__eyebrow { animation: rvUp 1.1s .35s var(--ease-out) both; }
.js-reveal .hero__title { animation: rvUp 1.3s .5s var(--ease-out) both; }
.js-reveal .hero__lead { animation: rvUp 1.2s .75s var(--ease-out) both; }
.js-reveal .hero__actions { animation: rvUp 1.2s .9s var(--ease-out) both; }
.js-reveal .hero__facts { animation: rvFade 1.4s 1.15s ease both; }

/* scroll reveal (main.js tags targets with data-reveal and sets --d for stagger) */
.js-reveal [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px);
  transition: opacity .9s var(--ease-out) var(--d, 0ms), transform 1.1s var(--ease-out) var(--d, 0ms), filter .9s var(--ease-out) var(--d, 0ms);
}
.js-reveal [data-reveal="title"] { transform: translate3d(0, 40px, 0); filter: blur(10px); transition-duration: 1.2s, 1.4s, 1.2s; }
.js-reveal [data-reveal="media"] { transform: none; filter: none; transition: opacity 1.2s var(--ease-out) var(--d, 0ms); }
.js-reveal [data-reveal="media"] > img { transform: scale(1.12); transition: transform 2.2s var(--ease-out) var(--d, 0ms); }
.js-reveal [data-reveal="line"] { opacity: 1; filter: none; transform: none; }
.js-reveal [data-reveal="line"]::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: currentColor; opacity: .14;
  transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-out) var(--d, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js-reveal [data-reveal="media"].is-in > img { transform: none; }
.js-reveal [data-reveal="line"].is-in::before { transform: scaleX(1); }

/* tab content swaps */
@keyframes rvSwap { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.js-reveal .session { animation: rvSwap .8s var(--ease-out) both; }
.js-reveal .session:nth-child(2) { animation-delay: .08s; }
.js-reveal .session:nth-child(3) { animation-delay: .16s; }
.js-reveal .ind-card.is-swapping > span { animation: rvSwap .7s var(--ease-out) both; }
.js-reveal .ind-card.is-swapping > span:nth-child(2) { animation-delay: .06s; }
.js-reveal .ind-card.is-swapping > span:nth-child(3) { animation-delay: .12s; }
.js-reveal #ind-media > img { animation: rvFade .9s ease both; }

@media (max-width: 720px) {
  .mcta {
    display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
    transform: translate3d(0, 140%, 0); opacity: 0; pointer-events: none;
    transition: transform .6s var(--ease-out, ease), opacity .4s ease;
  }
  .mcta.is-shown { transform: none; opacity: 1; pointer-events: auto; }
  .mcta__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 14px 14px 14px 24px; border-radius: 999px; color: var(--ink);
    /* slow-shifting tint: mint → aqua → pale lime → mint */
    background: linear-gradient(110deg, #9FE8C1 0%, #8EDBD9 30%, #C6F0B0 60%, #9FE8C1 100%);
    background-size: 280% 100%;
    animation: mctaTint 9s ease-in-out infinite, mctaGlow 4.5s ease-in-out infinite;
  }
  .mcta__txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
  .mcta__txt strong { font-weight: 600; font-size: 16px; }
  .mcta__txt span { font-weight: 400; font-size: 12px; opacity: .7; }
  .mcta__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
  .final { padding-bottom: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mcta__btn { animation: none; }
  .warn-pill__dot { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}
.js-reveal [data-reveal="line"] { border-top-color: transparent; }
.js-reveal .media--member[data-reveal] > img { transition: filter .5s ease, transform 2.2s var(--ease-out) var(--d, 0ms); }

/* Dewee perk under the tickets */
.perk { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 18px 24px; border-radius: 20px; background: linear-gradient(100deg, #EEE8FF 0%, #F4F2EE 70%); border: 1px solid #D9CEFF; }
.perk__mascot { flex: none; width: 64px; }
.perk__text { font-size: 16px; line-height: 1.5; color: var(--ink); }
.perk__text strong { font-weight: 600; }
@media (max-width: 640px) { .perk { padding: 16px; gap: 14px; } .perk__mascot { width: 48px; } .perk__text { font-size: 15px; } }

/* Early Bird urgency (register summary + above submit) */
.eb { display: flex; flex-direction: column; gap: 4px; margin: -4px -8px 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(110deg, rgba(255,184,77,.16), rgba(255,122,69,.10)); border: 1px solid rgba(255,184,77,.45); }
.eb__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FFC46B; }
.eb__save { font-size: 18px; color: #fff; }
.eb__save strong { font-weight: 600; color: #FFC46B; }
.eb__rule { font-weight: 300; font-size: 13px; color: var(--slate); }
.eb__cd { font-size: 14px; color: #FFC46B; font-variant-numeric: tabular-nums; }
/* Early Bird countdown under the pricing head (ends 23:59 20/10, see intent.md) */
.cd { display: inline-flex; align-items: center; gap: 10px; width: fit-content; justify-self: start; align-self: flex-start; margin-top: 20px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--fog); font-size: 15px; }
.cd__clock { color: #FFC46B; font-weight: 500; font-variant-numeric: tabular-nums; }
.eb__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #FF8A3D; box-shadow: 0 0 0 0 rgba(255,138,61,.6); animation: ebPulse 1.8s ease-out infinite; }
@keyframes ebPulse { 0% { box-shadow: 0 0 0 0 rgba(255,138,61,.6); } 70% { box-shadow: 0 0 0 9px rgba(255,138,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,138,61,0); } }
.eb-cta { display: flex; align-items: center; gap: 10px; margin: -10px 0 -6px; font-size: 14px; font-weight: 500; color: #C2571B; }
.eb-cta[hidden], .eb[hidden] { display: none; }
.eb-cta__clock { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .eb__dot { animation: none; } }

/* Hero AI-assistant chat — phones/tablets only (desktop shows the diagram) */
.hchat { display: none; }
@media (max-width: 1024px) {
  .hchat { display: flex; flex-direction: column; gap: 10px; max-width: 420px; min-height: 232px; padding: 14px 14px 16px; border-radius: 22px; background: rgba(21,18,48,.78); border: 1px solid rgba(185,164,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hchat__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px 6px; border-bottom: 1px solid rgba(185,164,255,.18); }
  .hchat__ch { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #B9A4FF; }
  .hchat__name { font-size: 12px; color: #E4DCFF; }
  .hchat__msg { font-size: 14px; line-height: 1.4; padding: 9px 13px; border-radius: 16px; }
  .hchat__msg--me { align-self: flex-end; max-width: 80%; background: #9FE8C1; color: #05090D; border-bottom-right-radius: 5px; }
  .hchat__msg--bot { background: #F4F2EE; color: #05090D; border-bottom-left-radius: 5px; }
  .hchat__row { display: flex; align-items: flex-end; gap: 8px; }
  .hchat__mascot { flex: none; width: 40px; }
  .hchat__bot { display: flex; flex-direction: column; gap: 8px; max-width: 82%; }
  .hchat__acts { display: flex; gap: 8px; }
  .hchat__btn { font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; }
  .hchat__btn--ok { background: #7A4DF0; border-color: #7A4DF0; }
  .hchat__typing { display: none; gap: 4px; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: #F4F2EE; width: max-content; }
  .hchat__typing.on { display: flex; }
  .hchat__typing i { width: 6px; height: 6px; border-radius: 50%; background: #5E6B78; animation: hcDot 1s infinite ease-in-out; }
  .hchat__typing i:nth-child(2) { animation-delay: .15s; } .hchat__typing i:nth-child(3) { animation-delay: .3s; }
  [data-hc]:not(.on) { display: none; }
  [data-hc].on { animation: hcIn .45s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes hcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hcDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-hc].on { animation: none; } }

/* Sale-price pattern (e-commerce): current price bold, original struck + muted, % off badge */
.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; }
.off { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #FF8A3D; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; text-decoration: none; }
.off--lg { font-size: 13px; padding: 2px 9px; }
.ticket-opt__price { opacity: 1; display: flex; flex-direction: column; gap: 4px; }
.ticket-opt__price .was { display: flex; align-items: center; gap: 8px; }
.ticket-opt__price b { font-weight: 600; }
.ticket-opt__price s { opacity: .55; font-size: 13px; white-space: nowrap; }
.ticket-opt__price .was { flex-wrap: wrap; row-gap: 4px; }
.ticket-opt__price .off { white-space: nowrap; }
.ticket-opt__price .ref-off { font-size: 12px; font-weight: 500; color: #FF8A3D; }
.summary__was { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 300; color: var(--muted-2); }
.summary__was[hidden] { display: none; }
.summary__was-line { display: block; color: var(--muted-2); font-weight: 300; font-size: 13px; }
.summary__line > span:last-child { text-align: right; }

/* Payment panel: centred */
#reg-pay { align-items: center; text-align: center; }
#reg-pay .pay-qr { margin-inline: auto; }

/* Bank transfer details under the QR (for buyers forwarding to an accountant) */
.bank { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.bank[hidden] { display: none; }
.bank__lead { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.bank__list { width: 100%; margin: 0; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: left; }
.bank__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 12px 16px; }
.bank__row + .bank__row { border-top: 1px solid var(--line); }
.bank__row dt { font-size: 13px; color: var(--text-2); }
.bank__row dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink); }
.bank__val { word-break: break-all; }
.bank__val--memo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: .02em; }
.bank__copy { flex: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.bank__copy:hover { border-color: var(--ink); }
.bank__copy.is-done, #bank-copy-all.is-done { background: var(--mint); border-color: var(--mint); }
.bank__note { font-size: 13px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 480px) { .bank__row { grid-template-columns: 1fr; gap: 4px; } }
#bank-copy-all { align-self: center; margin-inline: auto; }
.acct { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--ink); text-align: left; }
.acct[hidden] { display: none; }
.acct__lead { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.acct__lead strong { font-weight: 600; color: var(--ink); }
.acct__btns { display: flex; flex-wrap: wrap; gap: 8px; }
#acct-copy.is-done { background: var(--mint); border-color: var(--mint); }
.bank__warn { width: 100%; padding: 10px 14px; border-radius: 12px; background: #FFF4E5; border: 1px solid #FFD39A; font-size: 13.5px; line-height: 1.5; color: #7A3D00; text-align: left; }
.bank__warn strong { font-weight: 600; }
.bank__val--memo { word-break: normal; overflow-wrap: anywhere; }

/* cost note under ticket cards → opens FAQ #chi-phi */
.price-extra { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.price-extra a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }