/* THL Theme — homepage. Ported from the approved homepage-draft-v1.html.
   Loaded only on the front page. Shell (nav/header/footer) lives in style.css. */

/* Nav sits transparent over the hero on the homepage. */
.thl-front .hero { margin-top: calc(-1 * var(--nav-h)); }

/* ============================================================ */
/* HERO                                                          */
/* ============================================================ */
.hero { position: relative; height: 92vh; min-height: 640px; max-height: 960px; overflow: hidden; display: flex; align-items: center; background: var(--ink); }
.hero-video { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; animation: heroDrift 36s ease-in-out infinite alternate; filter: saturate(0.92); }
@keyframes heroDrift { from { transform: scale(1) translateX(0); } to { transform: scale(1.06) translateX(-1.5%); } }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(10,13,21,0.78) 0%, rgba(10,13,21,0.42) 52%, rgba(10,13,21,0.18) 100%),
  linear-gradient(180deg, rgba(10,13,21,0.55) 0%, rgba(10,13,21,0) 30%, rgba(16,21,31,0.2) 70%, var(--bg) 100%); }
.hero-content { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 48px; width: 100%; }
.hero-inner { max-width: 660px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 22px; }
.hero-kicker::before { content: ''; width: 26px; height: 1px; background: var(--blue); }
.hero-headline { font-weight: 700; font-size: clamp(42px, 6.2vw, 78px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 22px; }
.hero-headline .thin { display: block; font-weight: 300; font-size: 0.62em; letter-spacing: 0.01em; color: var(--t-mid); margin-bottom: 6px; }
.hero-headline .accent { color: var(--blue); }
.hero-sub { font-size: clamp(16px, 1.3vw, 18px); font-weight: 400; line-height: 1.6; color: var(--t-mid); margin-bottom: 36px; max-width: 540px; }
.hero-cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); padding: 17px 30px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s var(--ease-out); box-shadow: 0 6px 22px rgba(122,175,201,0.25); }
.hero-cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.hero-cta:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(122,175,201,0.35); }
.hero-cta:hover svg { transform: translateX(4px); }
.hero-cta-ghost { display: inline-flex; align-items: center; gap: 10px; color: var(--t-strong); padding: 16px 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.28); font-size: 13px; font-weight: 600; transition: all 0.25s var(--ease); }
.hero-cta-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; display: flex; justify-content: center; }
.hero-scrollcue { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t-soft); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; transition: color 0.25s var(--ease); }
.hero-scrollcue:hover { color: var(--t-mid); }
.hero-scrollcue .line { width: 1px; height: 34px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45)); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(6px); opacity: 1; } }
.hero-inner > * { opacity: 0; transform: translateY(18px); animation: heroIn 0.9s var(--ease-out) forwards; }
.hero-inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.28s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.42s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.56s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (max-width: 768px) { .hero { height: 84vh; min-height: 560px; } .hero-content { padding: 0 24px; } }

/* ============================================================ */
/* STAT BAND                                                     */
/* ============================================================ */
.stats { padding: 64px 48px 56px; border-bottom: 1px solid var(--line); background: var(--bg); }
.stats-inner { max-width: 1100px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat .num { font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--t-strong); }
.stat .num small { font-size: 0.5em; font-weight: 600; vertical-align: super; margin-left: 2px; color: var(--blue); }
.stat .label { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-soft); }
.stats-note { margin-top: 40px; text-align: center; font-size: 13px; color: var(--t-soft); }
.stats-note strong { color: var(--t-mid); font-weight: 600; }
@media (max-width: 760px) { .stats { padding: 44px 24px 40px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

/* ============================================================ */
/* RAILS                                                        */
/* ============================================================ */
.rail-section { padding: 52px 0 26px; } /* anchor offset now global via html{scroll-padding-top} */
.rail-header { max-width: var(--wrap); margin: 0 auto 6px; padding: 0 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.rail-title { font-size: clamp(22px, 2.1vw, 29px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--t-strong); }
.rail-count { font-size: 10.5px; color: var(--blue-bright); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.22); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rail-blurb { font-size: 14px; color: var(--t-soft); max-width: 560px; line-height: 1.55; }
.rail-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.rail-seeall { color: var(--t-mid); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; margin-right: 6px; transition: color 0.2s var(--ease), gap 0.25s var(--ease); }
.rail-seeall:hover { color: var(--blue-bright); gap: 10px; }
.rail-seeall svg { width: 12px; height: 12px; }
.rail-chevron { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: var(--t-strong); display: flex; align-items: center; justify-content: center; transition: all 0.25s var(--ease); }
.rail-chevron svg { width: 14px; height: 14px; }
.rail-chevron:hover:not(:disabled) { background: var(--blue); color: var(--navy-deeper); border-color: var(--blue); }
.rail-chevron:disabled { opacity: 0.2; cursor: default; }
@media (max-width: 768px) { .rail-header { padding: 0 24px; } .rail-chevron { display: none; } .rail-seeall { margin-right: 0; } }

.rail-wrap { position: relative; }
/* overflow-x:auto forces overflow-y to compute to auto (CSS spec), so this
   scroller clips its children vertically. Generous top+bottom padding gives the
   hover lift + glow room inside the scroll box; the larger top is compensated by
   the smaller rail-header margin so the cards don't visually drop. */
.rail { display: flex; gap: 18px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 26px 48px 70px; scroll-padding-left: 48px; max-width: var(--wrap); margin: 0 auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 1496px) { .rail { max-width: none; padding-left: calc((100vw - 1400px) / 2 + 48px); padding-right: calc((100vw - 1400px) / 2 + 48px); scroll-padding-left: calc((100vw - 1400px) / 2 + 48px); } }
.rail-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 110px; background: linear-gradient(to right, rgba(16,21,31,0), var(--bg) 88%); pointer-events: none; z-index: 2; transition: opacity 0.3s var(--ease); }
.rail-wrap::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 110px; background: linear-gradient(to left, rgba(16,21,31,0), var(--bg) 88%); pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.3s var(--ease); }
.rail-wrap.scrolled-left::before { opacity: 1; }
.rail-wrap.at-end::after { opacity: 0; }

/* Expanded: View all turns the rail into a full wrapping grid in place. */
.rail-section.expanded .rail-chevron { display: none; }
.rail-section.expanded .rail-wrap::before, .rail-section.expanded .rail-wrap::after { opacity: 0; }
/* Full-bleed grid that uses the window width. It was capped at 1400px and
   centred, so on a 16" display the cards sat small with big side margins. Now it
   spans full width with fixed column counts per breakpoint (predictable, no
   zoom-dependent jumps) so cards stay a comfortable size at any width. */
.rail-section.expanded .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; overflow: visible; scroll-snap-type: none; max-width: none; padding: 26px 48px 16px; }
@media (max-width: 1280px) { .rail-section.expanded .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .rail-section.expanded .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: a single column. At 2-up the card gets narrow enough that the
   overhanging play button sits over the title — full-width cards give the text
   clear room. 600px keeps small tablets (portrait) at 2-up where they're fine. */
@media (max-width: 600px)  { .rail-section.expanded .rail { grid-template-columns: 1fr; gap: 26px 0; } }
@media (min-width: 1800px) { .rail-section.expanded .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 2300px) { .rail-section.expanded .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rail-section.expanded .card { flex: none; width: auto; scroll-snap-align: none; }
.rail-section.expanded .view-all { display: none; }

/* ============================================================ */
/* CARD                                                         */
/* ============================================================ */
.card { flex: 0 0 330px; scroll-snap-align: start; position: relative; display: block; transition: transform 0.4s var(--ease-out); text-align: left; }
.card-art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.35); transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.card .card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.card .card-image--empty { background: linear-gradient(150deg, var(--navy-deep), var(--navy-deeper)); }
.card-new { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-deeper); background: var(--blue-bright); padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); z-index: 5; } /* lift above the edge-fade gradients so the glow isn't clipped */
  .card:hover .card-art { box-shadow: var(--shadow-lift); border-color: rgba(122,175,201,0.35); }
  .card:hover .card-image { filter: brightness(1.07); transform: scale(1.03); }
  .card:hover .card-play-btn { background: var(--blue-bright); transform: scale(1.1); box-shadow: 0 10px 24px rgba(122,175,201,0.4), 0 0 0 4px var(--bg); }
}
@media (hover: none) { .card:active { transform: scale(0.985); transition-duration: 0.12s; } }
.card-play-btn { position: absolute; bottom: -22px; right: 18px; width: 50px; height: 50px; border-radius: 50%; background: var(--blue); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; z-index: 5; padding: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 4px var(--bg); transition: all 0.3s var(--ease-out); }
.card-play-btn svg { width: 16px; height: 16px; fill: currentColor; transform: translateX(1px); }
@media (max-width: 768px) { .card { flex: 0 0 70vw; max-width: 340px; } .rail { gap: 14px; padding: 20px 24px 60px; scroll-padding-left: 24px; } .card-play-btn { width: 48px; height: 48px; bottom: -20px; right: 16px; }
  /* Mobile peek: a clear chunk of the NEXT card must show so the rail obviously
     scrolls. 70vw cards leave ~50px+ of the next card visible after the gap. The
     edge-fade previously (36px) was WIDER than that peek and erased it — so the
     fade is dropped to a hairline here: the hard-cut partial card is the signal. */
  .rail-wrap::after, .rail-wrap::before { width: 14px; }
}
@media (max-width: 480px) { .card { flex: 0 0 72vw; } }

/* View-all tile */
.card.view-all { flex: 0 0 210px; aspect-ratio: 4 / 3; border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: none; }
@media (hover: hover) {
  .card.view-all:hover { border-color: var(--blue); background: rgba(122,175,201,0.05); transform: translateY(-6px); }
  .card.view-all:hover .view-all-circle { background: var(--blue); color: var(--navy-deeper); transform: scale(1.08); }
}
.view-all-inner { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.view-all-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--t-strong); display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease-out); border: 1px solid rgba(255,255,255,0.14); }
.view-all-circle svg { width: 16px; height: 16px; }
.view-all-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-strong); }
.view-all-sub { font-size: 11px; color: var(--t-soft); }
@media (max-width: 768px) { .card.view-all { flex: 0 0 56vw; } }

.section-divider { max-width: var(--wrap); margin: 0 auto; padding: 0 48px; }
.section-divider hr { border: 0; border-top: 1px solid var(--line); }

/* ============================================================ */
/* LEARNING PATHWAY                                             */
/* ============================================================ */
/* Flush full-bleed band like every other section. It used to float with
   margin:26px 0 10px, so the 10px gap below revealed the page bg (#10151f)
   between the pathway (#101622) and the darker speakers strip (#0c1018) — three
   shades stacked = a visible seam. Flush + one hairline (the speakers strip
   owns the lower divider) removes it. */
.pathway { margin: 0; padding: 72px 48px; background: radial-gradient(ellipse 60% 90% at 85% 20%, rgba(122,175,201,0.10) 0%, transparent 60%), linear-gradient(150deg, #16202e 0%, #101622 100%); border-top: 1px solid var(--line); }
.pathway-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.pathway-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; }
.pathway h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 18px; }
.pathway p { font-size: 15px; color: var(--t-mid); line-height: 1.65; margin-bottom: 28px; max-width: 480px; }
.pathway-cta { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-deeper); background: var(--blue); padding: 14px 26px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s var(--ease-out); }
.pathway-cta svg { width: 13px; height: 13px; }
.pathway-cta:hover { background: var(--blue-bright); transform: translateY(-2px); }
.pathway-track { display: flex; flex-direction: column; gap: 0; }
.pathway-step { display: flex; align-items: center; gap: 18px; position: relative; padding: 13px 0; }
.pathway-step .dot { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--t-mid); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); position: relative; z-index: 1; }
.pathway-step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: calc(50% + 18px); bottom: -14px; width: 1px; background: rgba(255,255,255,0.13); }
.pathway-step.lit .dot { background: rgba(122,175,201,0.16); border-color: var(--blue); color: var(--blue-bright); }
.pathway-step .lbl { font-size: 14px; font-weight: 600; color: var(--t-mid); }
.pathway-step.lit .lbl { color: var(--t-strong); }
.pathway-step .sub { font-size: 11.5px; color: var(--t-soft); display: block; font-weight: 400; }
@media (max-width: 880px) { .pathway { padding: 56px 24px; } .pathway-inner { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================ */
/* SPEAKERS STRIP                                               */
/* ============================================================ */
.speakers-strip { padding: 64px 0 56px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.speakers-strip-header { max-width: var(--wrap); margin: 0 auto 26px; padding: 0 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.speakers-strip-header .kicker2 { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 8px; }
.speakers-strip-header h2 { font-size: clamp(21px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.speakers-strip-header .blurb { font-size: 13.5px; color: var(--t-soft); margin-top: 6px; }
.speakers-strip-header .seeall { color: var(--t-mid); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; transition: color 0.2s var(--ease), gap 0.25s var(--ease); }
.speakers-strip-header .seeall:hover { color: var(--blue-bright); gap: 10px; }
.speakers-strip-header .seeall svg { width: 12px; height: 12px; }
.speaker-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 48px 24px; scroll-padding-left: 48px; max-width: var(--wrap); margin: 0 auto; scrollbar-width: none; }
.speaker-rail::-webkit-scrollbar { display: none; }
.scard { flex: 0 0 168px; scroll-snap-align: start; text-align: center; transition: transform 0.35s var(--ease-out); }
.scard img, .scard .scard-empty { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 auto 14px; border: 2px solid rgba(255,255,255,0.14); transition: border-color 0.3s var(--ease-out), filter 0.3s var(--ease-out); display: block; }
.scard .scard-empty { background: linear-gradient(150deg, var(--navy-deep), var(--navy-deeper)); }
.scard .name { font-size: 13px; font-weight: 700; color: var(--t-strong); line-height: 1.35; }
.scard .where { font-size: 11.5px; color: var(--t-soft); margin-top: 3px; }
@media (hover: hover) { .scard:hover { transform: translateY(-5px); } .scard:hover img { border-color: rgba(122,175,201,0.55); filter: brightness(1.08); } }
@media (max-width: 768px) {
  /* Stack the header: the row layout squeezed the heading + blurb against a
     shrink-protected "View all speakers" link, so the blurb wrapped raggedly
     and the link became a tiny, hard-to-hit target (the "several attempts"
     issue). Stacked, the copy gets full width and the link is a full-row,
     comfortably-tappable control of its own. */
  .speakers-strip-header { padding: 0 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Full-width, full-height tap target (stays left-aligned + discreet). The old
     row layout made this a tiny target that shifted as iOS reflowed during the
     URL-bar show/hide, so taps kept missing ("several attempts"). A stable
     full-row link is reliably hittable even mid-reflow. */
  .speakers-strip-header .seeall { display: flex; width: 100%; padding: 12px 2px; }
  .speaker-rail { padding: 8px 24px 20px; scroll-padding-left: 24px; }
  /* Speaker peek: at 168px the avatars fit ~2-up exactly, so the third sat fully
     off-screen and the rail looked static. Shrink them on mobile so 2 full
     avatars + a clear half of the third show — the half-avatar is the scroll
     cue. No edge mask here: a mask wide enough to notice would just hide the very
     peek we need. */
  .scard { flex-basis: 33vw; max-width: 150px; }
  .scard img, .scard .scard-empty { width: 96px; height: 96px; margin-bottom: 10px; }
}

/* ============================================================ */
/* MEMBERSHIP                                                   */
/* ============================================================ */
.membership { margin-top: 30px; padding: 88px 48px; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(122,175,201,0.12) 0%, transparent 55%), linear-gradient(180deg, #0e1623 0%, var(--bg-deep) 100%); border-top: 1px solid var(--line); }
.membership-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
.membership-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; }
.membership h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; }
.membership .lede { font-size: 15.5px; color: var(--t-mid); line-height: 1.65; margin-bottom: 30px; max-width: 460px; }
.member-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.member-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; color: var(--t-mid); }
.member-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--blue); }
.member-list strong { color: var(--t-strong); font-weight: 600; }
.price-card { background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(122,175,201,0.28); border-radius: 18px; padding: 38px 36px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); position: relative; overflow: hidden; }
.price-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(122,175,201,0.7), transparent); }
.price-card .plan { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.price-row .price { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price-row .per { font-size: 14px; color: var(--t-soft); font-weight: 500; }
.price-note { font-size: 12.5px; color: var(--t-soft); margin-bottom: 8px; }
.price-rise { display: inline-block; font-size: 11.5px; font-weight: 600; color: #ffd9a8; background: rgba(255,180,90,0.1); border: 1px solid rgba(255,180,90,0.25); border-radius: 999px; padding: 5px 12px; margin: 10px 0 24px; }
.price-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--blue); color: var(--navy-deeper); padding: 16px 20px; border-radius: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.3s var(--ease-out); }
.price-cta svg { width: 14px; height: 14px; }
.price-cta:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(122,175,201,0.3); }
.price-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--t-soft); }
@media (max-width: 920px) { .membership { padding: 64px 24px; } .membership-inner { grid-template-columns: 1fr; gap: 44px; } .price-card { max-width: 460px; } }

/* ============================================================ */
/* ACCREDITATION                                               */
/* ============================================================ */
.accred { padding: 72px 48px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.accred-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.accred-kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 12px; }
.accred-head h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; letter-spacing: -0.01em; }
.accred-head p { font-size: 15px; color: var(--t-soft); line-height: 1.65; margin: 0; }
.accred-pace { max-width: 880px; margin: 0 auto; display: flex; gap: 32px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; }
.accred-logo { flex-shrink: 0; background: white; border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; }
.accred-logo img { height: 84px; width: auto; }
.accred-text { font-size: 13px; color: var(--t-soft); line-height: 1.7; }
.accred-text strong { color: var(--t-mid); font-weight: 600; display: block; font-size: 14.5px; margin-bottom: 7px; }
.accred-text .meta { font-size: 12px; margin-top: 8px; }
.accred-bodies { max-width: 880px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.accred-body { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.accred-body .region { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 6px; }
.accred-body .body { font-size: 13px; color: var(--t-mid); line-height: 1.5; }
@media (max-width: 880px) { .accred-bodies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .accred { padding: 52px 24px; } .accred-pace { flex-direction: column; text-align: center; gap: 22px; padding: 24px; } }

/* ============================================================ */
/* TESTIMONIALS                                                */
/* ============================================================ */
.testimonials { padding: 80px 0 70px; background: var(--bg); border-top: 1px solid var(--line); overflow: hidden; }
.testimonials-head { text-align: center; margin-bottom: 48px; padding: 0 24px; }
.testimonials-head .kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.testimonials-head h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.02em; }
.marquee { display: flex; gap: 20px; width: max-content; padding: 4px 0; }
.marquee-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.marquee-track + .marquee-track { margin-top: 20px; }
.marquee.m1 { animation: scrollL 70s linear infinite; }
.marquee.m2 { animation: scrollR 84s linear infinite; }
/* The loop-duplicate set: contents (cards stay flex items, -50% loop seamless)
   on desktop, removed on mobile so testimonials don't appear twice. */
.marquee-dup { display: contents; }
.marquee-track:hover .marquee { animation-play-state: paused; }
@keyframes scrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tcard { width: 420px; flex-shrink: 0; background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.tcard .quote { font-size: 13.5px; color: var(--t-mid); line-height: 1.65; margin-bottom: 20px; }
.tcard .who { display: flex; align-items: center; gap: 13px; }
.tcard .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); }
.tcard .who .name { font-size: 13px; font-weight: 700; color: var(--t-strong); }
.tcard .who .where { font-size: 11.5px; color: var(--t-soft); }
@media (max-width: 700px) {
  .marquee.m1, .marquee.m2 { animation: none; }
  .marquee-dup { display: none; } /* no loop on mobile → drop the duplicate set */
  .marquee-track { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; padding: 0 20px 4px; scrollbar-width: none; }
  .marquee-track::-webkit-scrollbar { display: none; }
  .tcard { scroll-snap-align: center; }
}
@media (max-width: 600px) { .tcard { width: 320px; padding: 22px; } }

/* ============================================================ */
/* NEWSLETTER                                                  */
/* ============================================================ */
.newsletter { padding: 72px 48px; background: linear-gradient(160deg, #15202e 0%, #0f1520 100%); border-top: 1px solid var(--line); text-align: center; }
.newsletter h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.newsletter p { font-size: 14px; color: var(--t-soft); max-width: 520px; margin: 0 auto 28px; line-height: 1.65; }
.newsletter-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.newsletter-form input { flex: 1; padding: 14px 18px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: var(--t-strong); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.25s var(--ease); }
.newsletter-form input::placeholder { color: var(--t-soft); }
.newsletter-form input:focus { border-color: var(--blue); }
.newsletter-form button { padding: 14px 24px; border-radius: 8px; background: var(--blue); color: var(--navy-deeper); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: inherit; transition: background 0.25s var(--ease); }
.newsletter-form button:hover { background: var(--blue-bright); }
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }