/* STS / 3.0 — Midnight Edition
   Visual-only overrides; application, documents and administration keep the v2 logic. */
:root {
  --ink: #f5f6fa;
  --paper: #090d14;
  --lime: #a5b8ff;
  --muted: #9199ac;
  --line: rgba(213, 224, 255, .15);
  --white: #111720;
  --radius: 18px;
  --bg: #090d14;
  --surface: #101722;
  --surface-2: #151d2b;
  --text: #f5f6fa;
  --soft: #aeb6c8;
  --accent: #a5b8ff;
  --accent-ink: #0a1122;
  --edge: rgba(213, 224, 255, .14);
  --smooth: cubic-bezier(.22, 1, .36, 1);
}
html { color-scheme: dark; scroll-padding-top: 40px; }
body { background: var(--bg); color: var(--text); overflow-x: clip; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline-color: var(--accent) !important; }
.skip-link { color: #10141d; }
.container, .header { width: min(1280px, calc(100% - 104px)); }

/* One quiet navigation bar. */
.announcement { display: none; }
.header {
  min-height: 88px;
  position: relative;
  z-index: 40;
  border-color: var(--edge);
  animation: sts-header-in 1s var(--smooth) both;
}
.brand { gap: 14px; }
.brand-mark { font-size: 48px; letter-spacing: -.13em; }
.brand-t { font-weight: 600; }
.brand-dot { color: var(--accent); }
.brand-sub { border-left-color: #40485c; color: #aeb6c8; letter-spacing: .1em; }
.desktop-nav { gap: 38px; color: #c3c9d7; font-size: 13px; font-weight: 500; }
.desktop-nav a, .footer-links a { transition: color .3s, opacity .3s; }
.desktop-nav a:hover, .footer-links a:hover { opacity: 1; color: var(--accent); }
.nav-cta {
  border: 1px solid #3a4760;
  color: #f6f8ff;
  background: #151e2d;
  border-radius: 999px;
  padding: 13px 19px;
  font-size: 12px;
  font-weight: 650;
  transition: transform .55s var(--smooth), background .3s, border-color .3s;
}
.nav-cta:hover { background: #202c40; border-color: #9aabd0; transform: translateY(-3px); }
.mobile-menu-toggle { color: #f4f7ff; }
.mobile-nav { background: #121823; border-color: var(--edge); box-shadow: 0 14px 50px #0007; }
.mobile-nav a { color: #e8eaf2; }
.mobile-nav button { background: var(--accent); color: #0c1220; border-radius: 10px; }

/* Hero — the only focus is the two application choices. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(70px, 9vh, 110px);
  padding-bottom: 34px;
  min-height: min(820px, calc(100svh - 88px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero:before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 -9vw auto -9vw;
  height: 100%;
  background: radial-gradient(ellipse 44% 59% at 54% 31%, rgba(58, 74, 113, .16), transparent 75%);
  pointer-events: none;
}
.hero-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-ambient span:first-child {
  position: absolute;
  top: 3%; left: 27%; width: min(55vw, 680px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 45%, #556fa32b, #445fc70a 42%, transparent 72%);
  filter: blur(24px);
  animation: sts-ambient-drift 14s ease-in-out infinite alternate;
}
.hero-ambient span:last-child {
  position: absolute;
  width: 360px; height: 360px;
  top: 3%; right: -17%;
  border: 1px solid rgba(142, 169, 240, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 92px rgba(113, 147, 241, .022), 0 0 0 196px rgba(113, 147, 241, .015);
  animation: sts-ambient-drift 17s ease-in-out infinite alternate-reverse;
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
  padding-block: 30px 75px;
  width: 100%;
}
.hero-copy { padding: 0; align-self: center; }
.hero-kicker {
  display: flex; align-items: center; gap: 12px;
  color: #a8b7d4; font-size: 11px; font-weight: 700; letter-spacing: .17em;
  margin-bottom: 43px;
  animation: sts-float-up 1s .08s var(--smooth) both;
}
.kicker-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px #9fb8ff95; }
.kicker-sep { color: #65708b; }
.hero h1 {
  margin: 0;
  font-size: clamp(64px, 6.5vw, 105px);
  line-height: 1.03;
  letter-spacing: -.085em;
  font-weight: 750;
  color: #f3f5fa;
  animation: sts-float-up 1.16s .17s var(--smooth) both;
}
.hero h1 em {
  display: inline-block;
  color: #a9baf6;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.072em;
  font-style: italic;
  white-space: nowrap;
}
.hero-intro {
  color: #aab2c4;
  max-width: 390px;
  margin: 33px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.73;
  animation: sts-float-up 1.16s .3s var(--smooth) both;
}
.hero-actions { position: relative; align-self: center; display: grid; gap: 12px; width: 100%; }
.actions-head {
  display: flex; justify-content: space-between;
  color: #aeb9d1;
  margin-bottom: 8px;
  letter-spacing: .12em;
  font-size: 10px; font-weight: 700;
  animation: sts-float-up 1s .3s var(--smooth) both;
}
.hero-action {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  width: 100%;
  min-height: 195px;
  padding: 25px 29px 23px;
  border-radius: 21px;
  border: 1px solid rgba(191, 208, 250, .15);
  background: #171f2f;
  color: #f6f7fd;
  overflow: hidden;
  box-shadow: 0 20px 70px #0000001a;
  transition: transform .75s var(--smooth), background .5s, border-color .5s, box-shadow .75s var(--smooth);
  animation: sts-float-up 1.25s .42s var(--smooth) both;
}
.hero-action:nth-of-type(2) { animation-delay: .58s; }
.hero-action:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, #ffffff1a, transparent 43%, #ffffff0d);
  opacity: .26;
  transform: translateX(-22%);
  transition: opacity .65s, transform .75s var(--smooth);
  pointer-events: none;
}
.hero-action:hover, .hero-action:focus-visible {
  transform: translate3d(0, -10px, 0);
  border-color: #8299c3;
  box-shadow: 0 24px 80px #0007, 0 0 0 1px #a5b8ff26;
}
.hero-action:hover:before { opacity: .9; transform: translateX(0); }
.action-student { background: #a5b8ff; color: #0b1325; border-color: #a5b8ff; }
.action-student:hover { background: #becbff; border-color: #d6dfff; box-shadow: 0 25px 95px #415fae34; }
.action-teacher { background: #182131; }
.action-teacher:hover { background: #25324a; }
.action-meta { display: flex; align-items: center; gap: 13px; font-size: 10px; letter-spacing: .145em; font-weight: 750; opacity: .67; }
.action-line { width: 27px; height: 1px; background: currentColor; opacity: .6; }
.action-title { display: flex; align-items: center; justify-content: space-between; gap: 9px; font-weight: 750; font-size: clamp(26px, 2.45vw, 39px); letter-spacing: -.065em; line-height: 1.12; }
.action-arrow { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; font-size: 28px; font-weight: 400; transition: transform .7s var(--smooth), background .4s, color .4s; }
.hero-action:hover .action-arrow { transform: translate(4px, -4px) rotate(45deg); }
.action-detail { font-size: 12px; opacity: .7; line-height: 1; }
.actions-footnote { text-align: right; margin: 4px 3px 0; font-size: 11px; color: #747f97; animation: sts-float-up 1.2s .7s var(--smooth) both; }
.hero-foot { display: flex; justify-content: space-between; gap: 20px; color: #727e98; border-top: 1px solid var(--edge); font-size: 10px; padding-top: 21px; letter-spacing: .11em; font-weight: 700; }
.hero-foot a { color: #bac4d8; transition: color .2s; }
.hero-foot a:hover { color: var(--accent); }
.hero-foot a span { display: inline-block; font-size: 16px; padding-left: 9px; vertical-align: -1px; }

/* Simpler lower sections, no decorative clutter. */
.section-eyebrow { color: #a4b7e0; font-size: 11px; font-weight: 680; letter-spacing: .12em; }
.eyebrow-icon { color: #b0c0f5; }
.section-wrap, .manifesto { background: #101621; }
.manifesto { padding-block: 128px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.manifesto-inner { grid-template-columns: .8fr 2fr .25fr; align-items: start; }
.manifesto h2 { font-size: clamp(52px, 6vw, 93px); color: #f0f3fa; letter-spacing: -.075em; line-height: 1.04; }
.manifesto h2 em { color: var(--accent); }
.manifesto p { color: #b0b9cc; font-size: 17px; line-height: 1.7; margin: 27px 0 0; max-width: 560px; }
.manifesto-number { color: #748099; }
.features { padding-top: 135px; padding-bottom: 127px; }
.section-header { gap: 18px; margin-bottom: 61px; }
.section-header h2 { font-size: clamp(53px, 6.1vw, 91px); font-weight: 720; letter-spacing: -.075em; line-height: 1.05; }
.section-header h2 span { color: #8c9dbc; }
.features-grid { gap: 24px; }
.feature { border-top: 1px solid #3e485a; padding: 21px 17px 10px 0; min-height: 220px; transition: border-color .4s; }
.feature:hover { border-color: #a5b8ff; }
.feature-top { color: #8594b2; margin-bottom: 52px; }
.feature-glyph { color: #a5b8ff; transition: transform .6s var(--smooth); }
.feature:hover .feature-glyph { transform: translate(6px, -6px); }
.feature h3 { font-size: 23px; color: #eef1f8; }
.feature p { color: #a2adbf; line-height: 1.7; font-size: 14px; }

/* Reviews (both incoming via API and empty state) match the dark theme. */
.reviews-section { border-top: 1px solid var(--edge); padding-block: 122px 132px; }
.reviews-heading-grid { padding-bottom: 40px; }
.reviews-heading-grid h2 { font-size: clamp(61px, 7.2vw, 109px); }
.reviews-heading-grid h2 em { color: var(--accent); }
.reviews-heading-aside p { color: #a3aec3; font-size: 15px; }
.review-count { border-color: #354158; color: #a5b8ff; }
.reviews-filter { border-color: #303c50; padding-block: 24px 25px; }
.review-filter { color: #b0b9cd; border-color: #394760; background: #111825; }
.review-filter:hover { border-color: #97a9d1; color: #e7edff; }
.review-filter.is-active { background: #a5b8ff; border-color: #a5b8ff; color: #0d1628; }
.review-card { background: #141c2a; color: #eaf0ff; border-color: #32405a; border-radius: 19px; transition: transform .8s var(--smooth), border-color .5s, box-shadow .6s; }
.review-card:nth-child(3n+2) { background: #1c2840; color: #eaf0ff; border-color: #334966; }
.review-card:hover { transform: translateY(-9px); border-color: #8aa2d4; box-shadow: 0 22px 60px #0005; }
.review-stars { color: #bacbff; }
.review-stars>span { color: #5d6c87; }
.review-card:nth-child(3n+2) .review-stars { color: #bacbff; }
.review-ordinal { color: #8795af; }
.review-quote { color: #f0f3fc; }
.review-person, .review-card:nth-child(3n+2) .review-person { border-color: #3b4860; }
.review-person-icon { color: #0a1223; background: #a5b8ff; }
.review-person small, .review-card:nth-child(3n+2) .review-person small { color: #a2aec5; }
.review-empty { background: #111927; border: 1px dashed #34435b; border-radius: 22px; }
.empty-symbol { color: #7185b0; }
.review-empty h3 { color: #f0f2fa; }
.review-empty p { color: #9da9c0; }
.reviews-endnote { border-color: #344055; color: #a4adbf; }

/* Form panels remain fully functional, but visually darker. */
.form-section { background: #0e1420; padding-block: 90px; }
.form-topbar { color: #b7c2da; }
.back-to-main { color: #dce6ff; }
.form-brand { color: #a5b8ff; }
.form-shell { background: #151e2d; border-color: #33435a; box-shadow: 0 30px 95px #0005; border-radius: 24px; }
.form-side { background: #1c2940; border-right: 1px solid #35435e; color: #f3f6ff; }
.form-side-tag, .form-side h2 span { color: #b6c6ff; }
.form-side>p, .form-side-bottom { color: #a5b4ce; }
.side-flower { color: #9eb6ff; }
.form-body { background: #141c2a; }
.stepper { color: #a4b0c7; }
.step-track { background: #2a3549; }
.step-track span { background: #a5b8ff; transition: width .75s var(--smooth); }
.form-panel { animation: sts-float-up .7s var(--smooth) both; }
.form-panel h3 { color: #f0f2f9; }
.form-panel .panel-subtitle, .field small, .field-hint, .field-head small { color: #98a6bd; }
.field>label, .field-label { color: #e5e9f4; }
.field input, .field textarea, .field select {
  background: #1d293b; border: 1px solid #384862; color: #f3f7ff; border-radius: 11px;
  transition: border-color .32s, background .32s, box-shadow .35s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: #a5b8ff; background: #24324a; box-shadow: 0 0 0 4px #a5b8ff1e; }
.field input::placeholder, .field textarea::placeholder { color: #8290aa; }
.chip { color: #d0dcf2; background: #1d293b; border: 1px solid #384862; border-radius: 9px; transition: transform .3s var(--smooth), background .3s, border-color .3s; }
.chip:hover { border-color: #9bb0e6; background: #27354b; transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: #b3c4ff; border-color: #b3c4ff; color: #111b2f; }
.form-notice { color: #b8c7e5; border-left-color: #a5b8ff; background: #243149; border-radius: 0 10px 10px 0; }
.checkbox-line { color: #adbcd4; }
.checkbox-line a { color: #c4d0ff; }
.form-feedback { color: #ffb4ae; }
.btn-primary { background: #a5b8ff; color: #111829; border-color: #a5b8ff; transition: transform .55s var(--smooth), background .35s; }
.btn-primary:hover { background: #c0cdff; transform: translateY(-3px); }
.btn-secondary { background: #222d40; color: #e7edff; border-color: #485875; }
.form-success { color: #eef3ff; }
.upload-zone { background: #192437; border-color: #52627e; border-radius: 18px; transition: border-color .45s, background .45s, transform .65s var(--smooth); }
.upload-zone:hover, .upload-zone:focus-visible, .upload-zone.drag-on { background: #263653; border-color: #a5b8ff; transform: translateY(-5px); }
.upload-glyph { background: #293952; border-color: #536887; color: #d8e0ff; }
.optional-inline, .upload-help, .upload-privacy { color: #a0aec8; }
.upload-primary { color: #edf2ff; }
.upload-file { background: #1f2c40; border-color: #3c4d69; }
.file-badge { color: #101626; background: #a5b8ff; }
.file-meta strong { color: #ecf2ff; }
.file-meta span { color: #9aabc5; }
.file-remove { background: #36445d; color: #c7d4ef; }
.file-remove:hover { background: #744047; }

/* FAQ + last CTA */
.faq { padding-block: 126px; border-top: 1px solid var(--edge); }
.faq-list { border-color: #303d53; }
.faq details { border-color: #303d53; }
.faq summary { color: #eaf0fa; }
.faq summary span { color: #a5b8ff; }
.faq details p { color: #a2aec4; }
.text-lime { color: var(--accent); }
.closing { background: #161e2c; border-block: 1px solid #354259; padding-block: 105px; }
.closing-eyebrow { color: #b3c4ee; }
.closing h2 { color: #f4f5fa; }
.closing h2 em { color: #afc0ff; }
.closing-actions button { background: #a5b8ff; color: #111a2b; border-color: #a5b8ff; border-radius: 12px; transition: transform .6s var(--smooth), background .35s; }
.closing-actions button:hover { background: #c2ceff; transform: translateY(-4px); }
.closing-actions button:nth-child(2) { background: #27344a; color: #f2f6ff; border-color: #506484; }
.closing-actions button:nth-child(2):hover { background: #354867; }
.footer { color: #c6cedb; background: #080c12; }
.footer-top, .footer-bottom { border-color: #273147; }
.footer-brand span { color: #9faef1; }
.footer-bottom { color: #77839b; }

/* Actual scroll emergence: only hidden if JS starts IntersectionObserver. */
.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 58px, 0) scale(.982); filter: blur(7px); transition: opacity 1.05s var(--smooth), transform 1.15s var(--smooth), filter 1.05s var(--smooth); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.motion-ready .features-grid .feature:nth-child(2) { transition-delay: .12s; }
.motion-ready .features-grid .feature:nth-child(3) { transition-delay: .24s; }
@keyframes sts-float-up { from { opacity: 0; transform: translate3d(0, 46px, 0); filter: blur(8px); } to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes sts-header-in { from { opacity: 0; transform: translate3d(0,-22px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes sts-ambient-drift { from { transform: translate3d(-22px, 5px, 0) scale(.95); } to { transform: translate3d(23px, -28px, 0) scale(1.07); } }

@media (max-width: 1100px) {
  .hero-layout { grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr); gap: 30px; }
  .hero h1 { font-size: clamp(59px, 6vw, 78px); }
  .action-title { font-size: 30px; }
}
@media (max-width: 800px) {
  .container, .header { width: calc(100% - 48px); }
  .header { min-height: 76px; }
  .brand-mark { font-size: 42px; }
  .desktop-nav, .nav-cta { display: none; }
  .mobile-menu-toggle { display: block; }
  .hero { padding-top: 47px; padding-bottom: 25px; min-height: 0; }
  .hero-layout { grid-template-columns: 1fr; gap: 50px; padding: 0 0 43px; }
  .hero-kicker { margin-bottom: 25px; }
  .hero h1 { font-size: clamp(54px, 9.4vw, 80px); }
  .hero-intro { margin-top: 24px; font-size: 15px; max-width: 520px; }
  .hero-actions { max-width: none; }
  .hero-action { min-height: 153px; }
  .action-title { font-size: clamp(25px, 4vw, 37px); }
  .manifesto { padding-block: 88px; }
  .manifesto-inner { grid-template-columns: 1fr; gap: 20px; }
  .manifesto h2 { font-size: clamp(52px, 9vw, 77px); }
  .manifesto-number { display: none; }
  .features { padding-block: 96px; }
  .feature { min-height: 0; padding: 20px 0 33px; }
  .feature-top { margin-bottom: 32px; }
  .reviews-section { padding-block: 90px; }
  .form-shell { grid-template-columns: 1fr; }
  .form-side { min-height: auto; border-right: 0; border-bottom: 1px solid #35435e; }
  .form-side h2 { margin-top: 20px; }
  .faq { padding-block: 96px; }
  .closing { padding-block: 88px; }
}
@media (max-width: 520px) {
  .container, .header { width: calc(100% - 36px); }
  .header { min-height: 67px; }
  .brand-mark { font-size: 38px; }
  .brand-sub { font-size: 8px; }
  .hero { padding-top: 33px; }
  .hero-layout { gap: 36px; padding-bottom: 30px; }
  .hero-kicker { font-size: 9px; letter-spacing: .13em; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(43px, 10.5vw, 60px); line-height: 1.06; }
  .hero h1 em { white-space: normal; }
  .hero-intro { font-size: 13px; max-width: 290px; line-height: 1.6; margin-top: 19px; }
  .actions-head { font-size: 9px; }
  .hero-actions { gap: 10px; }
  .hero-action { min-height: 133px; padding: 17px 19px 17px; border-radius: 16px; }
  .action-meta { font-size: 9px; }
  .action-title { font-size: clamp(24px, 6.5vw, 29px); }
  .action-arrow { width: 36px; height: 36px; font-size: 24px; }
  .action-detail { font-size: 11px; }
  .actions-footnote { display: none; }
  .hero-foot { margin-top: 2px; font-size: 8px; }
  .manifesto { padding-block: 76px; }
  .manifesto h2 { font-size: clamp(45px, 10.5vw, 60px); }
  .manifesto p { font-size: 14px; line-height: 1.7; }
  .section-header h2 { font-size: clamp(48px, 11vw, 67px); }
  .features { padding-block: 74px; }
  .reviews-section { padding-block: 76px; }
  .reviews-heading-grid h2 { font-size: clamp(60px, 13vw, 81px); }
  .form-section { padding-block: 54px; }
  .form-shell { border-radius: 16px; }
  .form-side { padding: 28px 25px; }
  .form-body { padding: 28px 21px 32px; }
  .field-row { grid-template-columns: 1fr; }
  .upload-zone { padding: 26px 13px; }
  .faq { padding-block: 75px; }
  .closing h2 { font-size: clamp(45px, 11vw, 61px); }
  .closing-actions { max-width: none; }
  .footer-brand { font-size: 61px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* STS 4.0 — precise editorial refinements / fluid surfaces / editorial chapters */
.desktop-nav { gap: clamp(18px,2.5vw,34px); }
.header { justify-content: space-between; }
.desktop-nav { margin-left: auto; }
.mobile-nav button[data-role] { display: none; }
.hero { min-height: min(790px, calc(100svh - 88px)); }
.hero-layout { padding-bottom: 58px; }
.actions-head { justify-content: flex-end; }
.actions-footnote { display: none; }
.hero-action { isolation: isolate; transform: translateZ(0); -webkit-tap-highlight-color: transparent; transition: transform 1.05s cubic-bezier(.16,1,.3,1),box-shadow 1.05s cubic-bezier(.16,1,.3,1),border-color .8s ease,color .65s ease,background .9s ease; }
.hero-action::before { z-index: 1; background: linear-gradient(115deg, #ffffff0d,transparent 65%); opacity: .15; transform: none; }
.hero-action::after {
  content:""; position:absolute; z-index:0; inset:-1px; pointer-events:none;
  background: #ccd6ff;
  clip-path: circle(0% at var(--liquid-x, 76%) var(--liquid-y, 55%));
  transition: clip-path 1.28s cubic-bezier(.18,.75,.12,1);
  will-change: clip-path;
}
.action-student::after { background: #d3dcff; }
.action-teacher::after { background: #a9baf6; }
.hero-action:hover::after,.hero-action:focus-visible::after { clip-path: circle(155% at var(--liquid-x, 76%) var(--liquid-y, 55%)); }
.hero-action > * { position:relative; z-index:2; }
.hero-action:hover,.hero-action:focus-visible { transform: translate3d(0,-7px,0) scale(1.012); }
.action-student:hover,.action-student:focus-visible { background:#a5b8ff; color:#0b1325; }
.action-teacher:hover,.action-teacher:focus-visible { color:#111a2c; background:#182131; }
.hero-action .action-arrow { transition: transform 1.05s cubic-bezier(.16,1,.3,1), background 1s; }
.hero-action:hover .action-arrow { transform: translate(3px,-3px) rotate(45deg) scale(1.06); }
/* Narrow column on right; active circle swells, neighboring dots stay quiet. */
.section-rail { position: fixed; top: 50%; right: clamp(12px, 2vw, 34px); transform: translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:25px; z-index:29; padding:13px 9px; border-radius:40px; background:rgba(12,17,27,.47); border:1px solid rgba(169,186,235,.095); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.rail-dot { position:relative; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; }
.rail-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:#78849d; box-shadow:0 0 0 0 transparent; transition: width 1s cubic-bezier(.16,1,.3,1),height 1s cubic-bezier(.16,1,.3,1),background .9s,box-shadow 1s cubic-bezier(.16,1,.3,1); }
.rail-dot:hover::before { background:#e0e8ff; width:9px;height:9px; }
.rail-dot.is-active::before { width:17px;height:17px;background:#a8baff;box-shadow:0 0 0 5px rgba(168,186,255,.11),0 0 20px rgba(168,186,255,.23); }
.rail-dot span { position:absolute; top:50%;right:35px;transform:translate(5px,-50%); opacity:0; pointer-events:none; white-space:nowrap; border:1px solid #324055; color:#f3f5ff; background:#121b2b; padding:9px 12px;border-radius:9px;font-size:11px;transition:opacity .35s,transform .65s cubic-bezier(.16,1,.3,1); }
.rail-dot:hover span,.rail-dot:focus-visible span { opacity:1;transform:translate(0,-50%); }
body:has(#application:not([hidden])) .section-rail { opacity:0;pointer-events:none; }
/* Philosophy with real copy — no generic one-line marketing claims. */
.manifesto { padding-block:clamp(90px,10vw,160px); }
.philosophy-layout { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(50px,7vw,130px);align-items:start; }
.philosophy-heading { position:sticky;top:78px; }
.philosophy-heading h2 { margin:45px 0 0;font-size:clamp(46px,5.4vw,82px);line-height:1.06;letter-spacing:-.078em;max-width:670px; }
.philosophy-heading h2 em { display:block;color:#a9baf6;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.071em; }
.philosophy-story { padding-top:75px; }
.philosophy-story p { max-width:510px;margin:0 0 25px;font-size:clamp(15px,1.18vw,18px);line-height:1.8;color:#aeb9cb; }
.philosophy-story .story-lead { color:#eef2ff;font-size:clamp(19px,1.8vw,27px);font-weight:560;letter-spacing:-.03em;line-height:1.52; margin-bottom:26px; }
.story-rule { border-top:1px solid #364259;margin-top:49px;padding-top:22px;display:flex;flex-direction:column;gap:10px; }
.story-rule span { color:#a4b5d9;font-size:10px;font-weight:750;letter-spacing:.12em; }
.story-rule strong { font-size:22px;line-height:1.4;font-weight:550;color:#eff3ff;letter-spacing:-.035em; }
/* Process explains how things actually work; each path stands on its own. */
.features { padding-block:130px 135px; }
.how-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);gap:0 32px;align-items:end;margin-bottom:54px; }
.how-heading .section-eyebrow { grid-column:1/-1;margin-bottom:15px; }
.how-heading h2 { margin:0; }
.how-intro { color:#abb5c8;font-size:15px;line-height:1.75;max-width:375px;margin:0 0 8px; }
.process-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.process-track { background:#141c2a;border:1px solid #2f3d54;border-radius:19px;padding:clamp(24px,3vw,43px);min-width:0;display:flex;flex-direction:column;transition:border-color .65s,transform 1s cubic-bezier(.16,1,.3,1),box-shadow 1s; }
.process-track:hover { border-color:#7285af;transform:translateY(-6px);box-shadow:0 24px 60px #0003; }
.process-title { display:flex;gap:20px;align-items:center;margin-bottom:43px; }
.process-index { color:#9fb2e7;font-size:12px;font-weight:750; }
.process-title h3 { color:#f1f4fa;font-size:clamp(20px,2vw,27px);letter-spacing:-.04em;margin:0; }
.process-steps { list-style:none;padding:0;margin:0 0 35px;display:grid;gap:30px; }
.process-steps li { display:grid;grid-template-columns:32px 1fr;gap:17px; }
.process-num { font-size:11px;color:#92a0bc;font-weight:700;padding-top:5px; }
.process-steps h4 { color:#eaf0fc;font-size:16px;font-weight:620;letter-spacing:-.035em;margin:0 0 8px; }
.process-steps p { color:#9baac1;font-size:13px;line-height:1.65;margin:0;max-width:380px; }
.process-link { margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#b6c8ff;background:none;border:0;border-top:1px solid #334058;padding:23px 0 0;text-align:left;font-size:13px;font-weight:650;transition:color .3s; }
.process-link span { display:grid;place-items:center;border:1px solid #6b7da5;width:35px;height:35px;border-radius:50%;font-size:22px;transition:transform .8s cubic-bezier(.16,1,.3,1),background .5s; }
.process-link:hover { color:#f4f6ff; }
.process-link:hover span { transform:translate(3px,-3px) rotate(45deg);background:#334667; }
.faq { padding-bottom:150px; }
.faq .section-header { margin-bottom:43px; }
.faq details p { max-width:760px;line-height:1.8; }
/* All currently hidden parts stay unpainted; accessible anchors scroll to sections. */
#concept,#how,#reviews,#faq { scroll-margin-top:40px; }
@media(max-width:1150px) { .section-rail { right:8px; } .container,.header { width:min(1280px,calc(100% - 100px)); } }
@media(max-width:900px) {
  .desktop-nav { gap:18px; font-size:12px; }
  .philosophy-layout { grid-template-columns:1fr;gap:28px; }
  .philosophy-heading { position:static; }
  .philosophy-heading h2 { margin-top:28px;max-width:640px; }
  .philosophy-story { padding-top:0;max-width:620px; }
  .how-heading { grid-template-columns:1fr;gap:19px; }
  .how-intro { max-width:510px; }
  .section-rail { right:7px;padding:12px 6px;gap:18px; }
  .section-rail .rail-dot span { display:none; }
}
@media(max-width:800px) {
  .container,.header { width:calc(100% - 60px); }
  .section-rail { display:none; }
  .features { padding-block:90px; }
  .process-grid { gap:13px; }
}
@media(max-width:640px) {
  .container,.header { width:calc(100% - 36px); }
  .hero { padding-top:33px; }
  .philosophy-layout { gap:19px; }
  .philosophy-heading h2 { font-size:clamp(45px,10.6vw,64px); }
  .philosophy-story .story-lead { font-size:21px; }
  .philosophy-story p { font-size:14px; }
  .process-grid { grid-template-columns:1fr; }
  .process-track { padding:26px 25px; }
  .process-title { margin-bottom:33px; }
  .process-steps { gap:24px; }
  .faq details p { font-size:14px; }
}
@media (hover:none) { .hero-action::after { display:none; } .hero-action:active { transform:scale(.985); } }
@media (prefers-reduced-motion:reduce) {
  .hero-action::after { transition:none!important; }
  .rail-dot::before { transition:none!important; }
  .process-track { transition:none!important; }
}

/* STS 5.0 — continuous, scroll-proportional "breathing bubbles".
   CSS size is driven by frame-smoothed --bubble-scale; is-active is semantic only. */
.section-rail {
  gap: 23px;
  padding: 16px 10px;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 16px 60px rgba(1, 3, 9, .12);
}
.rail-dot {
  width: 21px;
  height: 21px;
  flex: none;
  isolation: isolate;
}
.rail-dot::before,
.rail-dot.is-active::before,
.rail-dot:hover::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: var(--bubble-light, .65);
  background: #b1c1ff;
  transform: translateZ(0) scale(var(--bubble-scale, .45));
  box-shadow: 0 0 16px rgba(154, 180, 255, .33);
  transition: none;
  will-change: transform;
}
.rail-dot::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(169, 191, 255, .48);
  opacity: var(--bubble-halo, 0);
  transform: scale(calc(var(--bubble-scale, .45) * 1.45));
  will-change: transform, opacity;
}
.rail-dot:focus-visible { outline: 1px solid #b6caff; outline-offset: 3px; }
.rail-dot:hover span,.rail-dot:focus-visible span { opacity: 1; transform: translate(0,-50%); }
.hero-ambient { transform: translate3d(0, var(--drift-scroll, 0px), 0); will-change: transform; }

/* A tiny animated learning-connection motif, not an external GIF.
   Vector art stays razor-sharp and doesn't slow down mobile loading. */
.mentor-signal { width: 214px; height: 60px; margin: 8px 0 16px; opacity: .91; }
.mentor-signal svg { width: 100%; height: 100%; overflow: visible; }
.signal-trail { stroke: rgba(174, 193, 252, .22); stroke-width: 1.5; }
.signal-flow {
  stroke: #b1c3ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 4 13;
  animation: sts-current 9s linear infinite;
}
.signal-ring { fill: none; stroke: rgba(174, 194, 255, .56); stroke-width: 1.1; transform-origin: 12px 45px; animation: sts-breathe 4.7s ease-in-out infinite; }
.signal-ring--end { transform-origin: 205px 13px; animation-delay: -2.35s; }
.signal-origin { fill: #b1c3ff; }
.signal-destination { fill: #d6deff; }
@keyframes sts-current { to { stroke-dashoffset: -136; } }
@keyframes sts-breathe { 0%,100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.34); opacity: .9; } }

/* A restrained hairline sweeps across each process card, not across body text. */
.process-track { position: relative; overflow: hidden; }
.process-track::before {
  content: '';
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 207, 255, .64), transparent);
  animation: sts-card-trace 9s ease-in-out infinite;
  pointer-events: none;
}
.process-track:nth-child(2)::before { animation-delay: -4s; }
@keyframes sts-card-trace { 0%, 10% { transform: translateX(0); opacity: 0; } 18% { opacity: .7; } 65% { opacity: .7; } 84%, 100% { transform: translateX(400%); opacity: 0; } }

@media (max-width: 800px) {
  .section-rail { display:none; }
  .mentor-signal { width: 180px; height: 51px; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-flow, .signal-ring, .process-track::before { animation: none !important; }
  .rail-dot::before, .rail-dot::after { will-change: auto; }
  .hero-ambient { transform: none !important; will-change: auto; }
}