/*
 * Belajar page — Peta Kerja Material
 * Visual system from terasai-belajar-preview/client/src/index.css
 * Header/footer stay on production site-nav. Do not target bare `nav`.
 * Fonts are loaded from belajar.html (Manrope + Cormorant + Instrument Sans).
 */

.be-page {
  --nav-max: 1380px;
  --nav-inset: 36px;
  --nav-pad: 0px;
  --nav-height: 76px;
  /* Production chrome (--ink = cream text). Page surface is --surface. */
  --bg: #10100f;
  --bg-raised: #161614;
  --surface: #10100f;
  --ink: #F2EEE4;
  --ink-soft: #A69F90;
  --ink-faint: #847C6E;
  --accent: #E8A33D;
  --accent-ink: #0B0A08;
  --amber: #e4a33c;
  --amber-soft: #f1ba63;
  --paper: #f3eee4;
  --muted: #9e9b94;
  --line: rgba(237, 227, 212, 0.15);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-page: "Manrope", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  background: var(--surface);
  color: var(--paper);
  font-family: var(--font-page);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.be-page [hidden] { display: none !important; }

body.be-page > nav .nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 500;
}
body.be-page > nav .nav-links a { color: var(--ink-soft); }
body.be-page > nav .nav-links a:hover,
body.be-page > nav .nav-links a.is-active { color: var(--ink); }

.be-page a { color: inherit; text-decoration: none; }
.be-page button { font: inherit; cursor: pointer; color: inherit; }
.be-page a.primary-button,
.be-page a.primary-button:visited,
.be-page a.primary-button span,
.be-page a.primary-button svg {
  color: #111 !important;
}
.be-page h1, .be-page h2, .be-page h3, .be-page p { margin-top: 0; }

body.be-page > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(16, 16, 15, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
body.be-page > nav .nav-in { height: 76px; }

.section-frame { width: min(1380px, calc(100% - 72px)); margin: 0 auto; }

/* Desktop page rhythm: one long, calm learning surface. */
@media (min-width: 1100px) {
  .be-page { --page-pad: clamp(36px, 5.2vw, 88px); }
  body.be-page > nav { --nav-max: 100%; --nav-inset: var(--page-pad); }
  .be-page .section-frame,
  .be-page .hero-grid,
  .be-page .hero-bottom-line { width: calc(100% - (2 * var(--page-pad))); max-width: none; }
  .be-page .hero-section { min-height: min(790px, calc(100dvh - 76px)); }
  .be-page .journey-strip { margin-top: 0; }
  .be-page .path-section,
  .be-page .use-case-section,
  .be-page .curriculum-section,
  .be-page .pro-section,
  .be-page .faq-section { padding-top: 112px; padding-bottom: 112px; }
}

.be-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  color: var(--amber-soft);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.19em;
  margin: 0 0 19px;
  white-space: nowrap;
}
.be-eyebrow > span:first-child {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.be-page h1 {
  max-width: 730px;
  margin-bottom: 22px;
  color: var(--paper);
  font-size: clamp(46px, 5.12vw, 78px);
  line-height: 0.99;
  letter-spacing: -0.062em;
  font-weight: 700;
}
.be-page h2 {
  margin-bottom: 0;
  font-size: clamp(35px, 4vw, 59px);
  line-height: 1.04;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.be-page h1 em,
.be-page h2 em {
  color: var(--amber-soft);
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.04em;
}

.ico { width: 1em; height: 1em; flex: none; display: block; }
.ico-sm { width: 15px; height: 15px; }
.ico-md { width: 17px; height: 17px; }
.ico-lg { width: 18px; height: 18px; }

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--amber);
  color: #111;
  font-weight: 800;
  font-size: 13px;
  padding: 13px 19px;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.primary-button:active { transform: scale(0.97); }
.primary-button.compact { padding: 12px 17px; }
.primary-button.light {
  margin-top: 33px;
  border-color: var(--amber);
  background: var(--amber);
  color: #111;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid rgba(228, 163, 60, 0.53);
  color: var(--paper);
  background: transparent;
  padding: 9px 0 8px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 0;
}

.outlined-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(28, 22, 15, 0.35);
  background: transparent;
  border-radius: 99px;
  padding: 12px 15px;
  color: #251d13;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover {
    background: var(--amber-soft);
    box-shadow: 0 12px 28px rgba(228, 163, 60, 0.16);
    transform: translateY(-2px);
  }
  .text-button:hover { color: var(--amber-soft); }
  .outlined-button:hover {
    background: #221a10;
    color: #f7f1e7;
    transform: translateY(-2px);
  }
}

/* ---------- hero ---------- */
.hero-section {
  min-height: 711px;
  position: relative;
  isolation: isolate;
  padding-top: 76px;
  overflow: hidden;
}
.hero-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #10100f 0%, rgba(16, 16, 15, 0.97) 31%, rgba(16, 16, 15, 0.54) 59%, #10100f 100%),
    linear-gradient(0deg, #10100f 0%, transparent 32%);
}
.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
  display: block;
  max-width: none;
}
.hero-section::before {
  content: "";
  width: 48vw;
  height: 48vw;
  max-width: 650px;
  max-height: 650px;
  border: 1px solid rgba(228, 163, 60, 0.16);
  border-radius: 50%;
  position: absolute;
  right: -13vw;
  top: -26vw;
  z-index: -1;
}
.hero-grid {
  width: min(1380px, calc(100% - 72px));
  margin: 0 auto;
  min-height: 645px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  position: relative;
}
.hero-copy { max-width: 700px; padding: 88px 0 84px; }
.hero-lead { max-width: 600px; color: #c5c1ba; font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 29px; }
.hero-proof { display: flex; gap: 25px; flex-wrap: wrap; margin-top: 26px; color: #a09c95; font-size: 11px; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { color: var(--amber); }
.hero-pins { height: 100%; position: relative; min-height: 520px; }
.floating-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(19, 19, 18, 0.78);
  border: 1px solid rgba(239, 229, 213, 0.20);
  backdrop-filter: blur(12px);
  color: #efebe4;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.21);
}
.floating-tag span { color: var(--amber); font-size: 9px; letter-spacing: 0.08em; }
.tag-top { top: 24%; left: 22%; }
.tag-prompt { top: 34%; left: 43%; }
.tag-usecase { top: 49%; left: 42%; }
.tag-tools { top: 62%; left: 21%; }
.tag-right { top: 46%; right: 6%; }
.tag-agentic { top: 64%; right: 10%; }
.tag-bottom { right: 30%; bottom: 17%; }
.hero-orbit {
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(228, 163, 60, 0.13);
  border-radius: 50%;
  right: 10%;
  bottom: 8%;
  animation: be-soft-turn 16s linear infinite;
}
.orbit-dot {
  width: 7px;
  height: 7px;
  position: absolute;
  background: var(--amber);
  border-radius: 100%;
  top: 9%;
  left: 14%;
  box-shadow: 0 0 18px rgba(228, 163, 60, 0.83);
}
.orbit-dot.second { width: 5px; height: 5px; top: auto; left: auto; bottom: 11%; right: 17%; }
.hero-bottom-line {
  height: 1px;
  width: min(1380px, calc(100% - 72px));
  margin: auto;
  background: linear-gradient(90deg, transparent, var(--line) 16%, var(--line) 84%, transparent);
}

/* ---------- journey strip ---------- */
.journey-strip { background: #151513; border-bottom: 1px solid var(--line); }
.journey-strip .section-frame {
  min-height: 150px;
  display: grid;
  align-items: center;
  grid-template-columns: 230px 1fr;
  gap: 35px;
}
.journey-intro .be-eyebrow { margin-bottom: 8px; }
.journey-intro p:last-child { margin: 0; color: #a7a39c; font-size: 11px; line-height: 1.55; }
.journey-track {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--line);
}
.stage-button {
  min-width: 0;
  height: 86px;
  padding: 0 12px 0 15px;
  display: grid;
  align-content: center;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #77746f;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
  position: relative;
}
.stage-button::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: #4b4843;
  position: absolute;
  top: -2px;
  left: 16px;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.stage-button:hover,
.stage-button.is-active { background: rgba(228, 163, 60, 0.06); color: #e8e2da; }
.stage-button.is-active::before { background: var(--amber); transform: scale(1.8); }
.stage-number { font-size: 9px; color: var(--amber); letter-spacing: 0.12em; margin-bottom: 6px; }
.stage-name { display: block; font-size: 11px; font-weight: 800; line-height: 1.25; }
.stage-type { font-size: 8px; letter-spacing: 0.12em; margin-top: 6px; opacity: 0.65; }

/* ---------- path ---------- */
.path-section { padding: 142px 0; }
.section-heading { display: flex; justify-content: space-between; gap: 60px; }
.split-heading > div { max-width: 650px; }
.split-heading > p { max-width: 330px; margin: 48px 0 0; color: #a6a29a; font-size: 13px; line-height: 1.82; }
.path-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
  gap: 32px;
  margin-top: 68px;
  align-items: stretch;
  min-height: 526px;
}
.stage-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  min-height: 100%;
}
.stage-row {
  width: 100%;
  flex: 1 1 auto;
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px 24px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  color: #9e9b94;
  opacity: 0.78;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  text-align: left;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out), opacity 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.stage-row:hover,
.stage-row.is-active {
  color: var(--paper);
  opacity: 1;
  background: linear-gradient(90deg, rgba(228, 163, 60, 0.09), transparent 76%);
}
.stage-row.is-active {
  border-left-color: var(--amber);
}
.stage-row.is-active .stage-row-index,
.stage-row.is-active > svg.ico-lg { color: var(--amber); }
.stage-row-index { color: var(--amber); font-size: 10px; font-weight: 700; }
.stage-row strong { display: block; font-size: 13px; }
.stage-row small { display: block; color: #77736d; font-size: 10px; margin-top: 3px; }
.stage-row .row-go {
  justify-self: end;
  color: var(--amber);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.stage-row.is-active .row-go { opacity: 1; transform: translate(0, 0); }
.stage-feature {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #1c1b19;
  border: 1px solid rgba(238, 228, 210, 0.18);
  padding: 37px 38px;
  min-height: 526px;
}
.stage-feature[hidden] { display: none !important; }
.stage-feature::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -120px;
  bottom: -180px;
  border-radius: 50%;
  border: 1px solid rgba(228, 163, 60, 0.12);
}
.feature-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: #a5a19a;
  font-size: 10px;
}
.access-pill {
  padding: 6px 9px;
  border-radius: 99px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.12em;
  font-weight: 800;
  border: 1px solid currentColor;
}
.access-pill.gratis { color: #c7c7c4; }
.access-pill.bundle { color: var(--amber-soft); }
.access-pill.pro { color: #efcf94; }
.feature-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin: 61px 0 20px;
  color: var(--amber);
  border: 1px solid rgba(228, 163, 60, 0.33);
}
.stage-feature h3 {
  width: min(420px, 68%);
  color: var(--paper);
  font-size: clamp(25px, 2.55vw, 38px);
  line-height: 1.11;
  letter-spacing: -0.045em;
}
.stage-feature > p { max-width: 440px; color: #ada9a2; font-size: 13px; line-height: 1.75; }
.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--amber-soft);
  border: 0;
  border-bottom: 1px solid rgba(228, 163, 60, 0.4);
  padding: 7px 0;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  margin-top: 9px;
}
.feature-image {
  position: absolute;
  z-index: -1;
  right: -6px;
  bottom: -13px;
  width: 52%;
  height: 62%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0%, black 44%);
  max-width: none;
}

/* ---------- use cases ---------- */
.use-case-section { padding: 122px 0 138px; background: #e7e0d5; color: #1b1712; }
.usecase-heading { align-items: end; }
.usecase-heading > div { max-width: 780px; }
.usecase-heading .be-eyebrow { color: #95661f; }
.usecase-heading h2 { max-width: 800px; }
.usecase-heading h2 em { color: #9d6920; }
.usecase-route {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 37px;
  color: #9a6720;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
}
.usecase-route i {
  display: block;
  height: 1px;
  width: min(8vw, 92px);
  flex: 1 0 20px;
  background: linear-gradient(90deg, rgba(157, 105, 32, 0.72), rgba(157, 105, 32, 0.12));
}
.use-case-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr 0.82fr;
  grid-template-rows: 255px 255px;
  gap: 14px;
  margin-top: 22px;
}
.use-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(46, 36, 21, 0.2);
  padding: 25px;
  background: #efe9de;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .use-case-card:hover { transform: translateY(-6px); box-shadow: 0 17px 32px rgba(48, 37, 20, 0.12); }
}
.card-1 { grid-row: span 2; background: #211a11; color: #f2ece1; padding: 34px; }
.card-4 { grid-column: span 2; }
.case-route-index {
  position: absolute;
  top: 19px;
  right: 20px;
  color: #ad782a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.card-1 .case-route-index { color: var(--amber-soft); }
.card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  color: #9a6720;
}
.card-1 .card-icon { color: var(--amber-soft); }
.use-case-card .card-label {
  margin: auto 0 10px;
  color: #916323;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.card-1 .card-label { color: var(--amber-soft); }
.use-case-card h3 {
  max-width: 310px;
  margin-bottom: 11px;
  font-size: 22px;
  line-height: 1.13;
  letter-spacing: -0.04em;
}
.card-1 h3 { font-size: 31px; color: #f2ece1; }
.use-case-card > p:not(.card-label) {
  margin-bottom: 18px;
  color: #716c63;
  font-size: 11px;
  line-height: 1.65;
  max-width: 318px;
}
.card-1 > p:not(.card-label) { color: #b7afa2; }
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  color: #9d6920;
  font-size: 10px;
  font-weight: 800;
}
.card-1 .card-footer { color: var(--amber-soft); }

/* ---------- curriculum / plans ---------- */
.curriculum-section {
  padding: 144px 0;
  display: grid;
  grid-template-columns: 0.77fr 1.23fr;
  gap: clamp(54px, 8vw, 135px);
}
.curriculum-intro h2 { max-width: 540px; }
.curriculum-intro > p:last-child {
  max-width: 390px;
  margin: 28px 0 0;
  color: #9f9b94;
  font-size: 13px;
  line-height: 1.8;
}
.plan-stack { display: grid; gap: 13px; }
.plan-card {
  min-height: 198px;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) minmax(0, 1.16fr) 176px;
  gap: 20px 24px;
  align-items: start;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #151513;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { transform: translateX(7px); border-color: rgba(228, 163, 60, 0.48); }
}
.plan-card.bundle { background: #1b1915; }
.plan-card.pro { background: linear-gradient(90deg, #1d1a14, #171614); }
.plan-index {
  color: #918c84;
  font-size: 9px;
  letter-spacing: 0.13em;
  font-weight: 800;
  align-self: start;
}
.plan-card.bundle .plan-index,
.plan-card.pro .plan-index { color: var(--amber-soft); }
.plan-card h3 {
  max-width: 200px;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.plan-price { color: #f1ba63; margin: 0; font-size: 16px; font-weight: 800; }
.plan-price small { color: #918b82; font-size: 9px; font-weight: 500; }
.plan-note { margin: 7px 0 0; color: #918b82; font-size: 9px; line-height: 1.4; }
.plan-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.plan-card li { display: flex; gap: 7px; align-items: flex-start; color: #aaa59e; font-size: 10px; line-height: 1.45; }
.plan-card li svg { color: var(--amber); flex: 0 0 auto; margin-top: 1px; }
.plan-cta,
.plan-cta > [data-price-owned-hide] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.plan-card .plan-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 0;
  color: var(--paper);
  border: 0;
  background: transparent;
  border-bottom: 1px solid rgba(228, 163, 60, 0.45);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.plan-card .plan-buy {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  color: #111;
  box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
  .plan-card .plan-link:hover { color: var(--amber-soft); }
}
.plan-card.is-owned {
  border-color: rgba(127, 184, 154, 0.38);
  grid-template-columns: 106px minmax(0, 1fr) 176px;
  align-items: center;
}
.plan-card.is-owned ul,
.plan-card.is-owned .plan-note { display: none !important; }
.plan-card.is-owned .plan-price {
  color: #7fb89a;
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
}
.plan-card.is-owned .plan-cta { justify-content: center; }

/* ---------- pro ---------- */
.pro-section {
  position: relative;
  overflow: hidden;
  padding: 122px 0;
  background: #161614;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pro-section::before {
  content: "";
  position: absolute;
  right: -23vw;
  top: -19vw;
  width: 61vw;
  height: 61vw;
  border: 1px solid rgba(228, 163, 60, 0.09);
  border-radius: 50%;
}
.pro-section::after {
  content: "";
  position: absolute;
  right: 4vw;
  bottom: -6px;
  width: 44vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 163, 60, 0.6), transparent);
}
.pro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 84px;
  position: relative;
  z-index: 1;
}
.pro-copy h2 { max-width: 620px; }
.pro-copy > p:not(.be-eyebrow) {
  max-width: 560px;
  color: #a8a49d;
  font-size: 13px;
  line-height: 1.82;
  margin: 28px 0;
}
.pro-topics { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 31px; }
.pro-topics span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: #c5c0b8;
  font-size: 10px;
}
.pro-topics svg { color: var(--amber); }
.pro-visual { position: relative; min-height: 430px; isolation: isolate; overflow: hidden; }
.pro-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -21% -17%;
  background: radial-gradient(ellipse at 53% 55%, rgba(228, 163, 60, 0.15) 0%, rgba(228, 163, 60, 0.065) 21%, transparent 62%);
  filter: blur(9px);
}
.pro-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 8%;
  top: 10%;
  width: 73%;
  height: 73%;
  border: 1px solid rgba(228, 163, 60, 0.15);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(228, 163, 60, 0.018), 0 0 0 112px rgba(228, 163, 60, 0.010);
}
.pro-visual img {
  position: absolute;
  inset: -5% -5% -8%;
  width: 110%;
  height: 113%;
  object-fit: contain;
  filter: saturate(0.73) contrast(1.1) brightness(0.77);
  mix-blend-mode: screen;
  opacity: 0.82;
  mask-image: radial-gradient(ellipse at 56% 55%, #000 25%, rgba(0, 0, 0, 0.84) 48%, transparent 75%);
  max-width: none;
}
.visual-caption {
  position: absolute;
  right: 1%;
  bottom: 8%;
  display: grid;
  gap: 5px;
  padding: 0 0 0 11px;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(228, 163, 60, 0.72);
  text-shadow: 0 2px 12px #0d0d0c;
}
.visual-caption span { color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; }
.visual-caption strong { color: #d9d4cb; font-size: 11px; font-weight: 600; }

/* ---------- faq ---------- */
.faq-section {
  position: relative;
  padding: 144px 0;
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 88px;
}
.faq-section::before,
.faq-section::after { display: none; }
.faq-side h2 { max-width: 400px; }
.faq-side > p:last-child {
  max-width: 355px;
  color: #a6a199;
  font-size: 12px;
  line-height: 1.8;
  margin: 28px 0 0;
}
.faq-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.faq-list details {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  appearance: none;
}
.faq-list details:first-child { border-top: 1px solid var(--line) !important; }
.faq-list details[open] { background: transparent !important; }
.faq-list summary {
  list-style: none;
  padding: 20px 4px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  color: #ede7dc;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: var(--amber); transition: transform 180ms var(--ease-out); flex: none; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list details p {
  max-width: 680px;
  color: #a5a099;
  font-size: 13px;
  line-height: 1.8;
  padding: 0 36px 20px 0;
}

/* ---------- closing ---------- */
.closing-cta {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background: linear-gradient(90deg, #181612 0%, #211b11 48%, #181612 100%);
  color: var(--paper);
  border-top: 1px solid rgba(228, 163, 60, 0.38);
  border-bottom: 1px solid rgba(228, 163, 60, 0.24);
}
.closing-cta::before {
  content: "";
  position: absolute;
  width: 72vw;
  height: 1px;
  top: 32px;
  left: 0;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.closing-cta::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 28px;
  left: 50%;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(228, 163, 60, 0.12), 0 0 26px rgba(228, 163, 60, 0.52);
}
.closing-inner { position: relative; text-align: center; }
.closing-inner .be-eyebrow {
  display: flex;
  justify-content: center;
  color: var(--amber-soft);
  margin-bottom: 17px;
}
.closing-inner h2 { color: var(--paper); font-size: clamp(35px, 4.2vw, 61px); }
.closing-inner h2 em { color: var(--amber-soft); }

.reveal-up { animation: be-reveal-up 650ms var(--ease-out) both; animation-delay: var(--delay, 0ms); }
@keyframes be-reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes be-soft-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reveal-up { animation: none; }
  .hero-orbit { animation: none; }
  .stage-button,
  .stage-row,
  .use-case-card,
  .plan-card,
  .primary-button,
  .outlined-button,
  .text-button { transition: none; }
}

/* ---------- mid desktop ---------- */
@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .journey-strip .section-frame { grid-template-columns: 190px 1fr; }
  .stage-button { padding-inline: 9px; }
  .path-detail { grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr); gap: 24px; }
  .plan-card { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.1fr) 156px; gap: 14px; }
  .plan-card.is-owned { grid-template-columns: 88px minmax(0, 1fr) 156px; }
  .pro-grid, .faq-section { gap: 55px; }
}

/* ---------- tablet / phone shared ---------- */
@media (max-width: 820px) {
  .section-frame, .hero-grid, .hero-bottom-line { width: min(100% - 40px, 620px); }
  .hero-section, .hero-grid { min-height: 0; }
  .hero-grid { display: block; }
  .hero-copy { padding-top: 78px; padding-bottom: 42px; }
  .hero-backdrop img { object-position: 67% center; opacity: 0.58; }
  .hero-backdrop::after {
    background:
      linear-gradient(90deg, #10100f 0%, rgba(16, 16, 15, 0.9) 57%, rgba(16, 16, 15, 0.31) 100%),
      linear-gradient(0deg, #10100f 0%, transparent 35%);
  }
  .hero-pins,
  .journey-strip { display: none; }
  .path-section, .curriculum-section, .faq-section { padding: 88px 0; }
  .section-heading, .usecase-heading, .pro-grid, .faq-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .split-heading > p { margin: 0; }
  .path-detail { grid-template-columns: 1fr; margin-top: 42px; }
  .stage-feature { min-height: 470px; }
  .use-case-section { padding: 86px 0; }
  .usecase-heading { align-items: start; }
  .outlined-button { justify-self: start; }
  .usecase-route { margin-top: 26px; }
  .use-case-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-top: 19px;
  }
  .use-case-card, .card-1, .card-4 {
    grid-column: auto;
    grid-row: auto;
    min-height: 268px;
    padding: 25px;
  }
  .card-1 h3 { font-size: 26px; }
  .curriculum-section { display: block; }
  .plan-stack { margin-top: 44px; }
  .plan-card,
  .plan-card.is-owned {
    align-items: start;
    grid-template-columns: 1fr;
    row-gap: 14px;
    gap: 14px;
  }
  .plan-card ul,
  .plan-cta { grid-column: 1; width: 100%; }
  .plan-cta .plan-link,
  .plan-cta .plan-buy { width: 100%; }
  .pro-visual { min-height: 340px; }
  .faq-section { gap: 50px; }
  .faq-section::before, .faq-section::after { display: none; }
}

@media (max-width: 520px) {
  .be-page h1 { font-size: 43px; }
  .hero-lead { font-size: 13px; line-height: 1.75; }
  .hero-actions { display: grid; justify-items: start; gap: 13px; }
  .hero-proof { gap: 11px; flex-direction: column; }
  .path-section { padding: 70px 0 74px; }
  .path-detail { margin-top: 27px; }
  .stage-row { min-height: 64px; padding: 12px 12px 12px 10px; }
  .stage-feature { min-height: 440px; padding: 27px 23px; }
  .use-case-section { padding: 70px 0 74px; }
  .usecase-route { flex-wrap: wrap; row-gap: 6px; white-space: normal; font-size: 7px; }
  .usecase-route i { width: 17px; max-width: 17px; flex: 0 0 17px; }
  .use-case-grid { grid-template-columns: 1fr; margin-top: 15px; gap: 10px; }
  .use-case-card, .card-1, .card-4 { min-height: 230px; }
  .curriculum-section { padding: 70px 0; }
  .plan-card { padding: 19px 14px; grid-template-columns: 1fr; }
  .plan-card .plan-index { font-size: 8px; }
  .plan-card h3 { font-size: 18px; }
  .plan-card ul { padding-top: 3px; }
  .plan-cta .plan-link,
  .plan-cta .plan-buy { width: 100%; }
  .pro-topics { display: grid; grid-template-columns: 1fr 1fr; }
  .pro-topics span { font-size: 9px; }
  .faq-list summary { font-size: 12px; }
}

/* Desktop readability pass: preserve the editorial system while making the
   learning map, cards, plans, and CTAs comfortable at normal monitor distance. */
@media (min-width: 1100px) {
  .be-page .primary-button { font-size: 15px; padding: 15px 23px; }
  .be-page .primary-button.compact { font-size: 13px; padding: 13px 19px; }
  .be-page .text-button { font-size: 15px; }

  .be-page .journey-intro p:last-child { font-size: 13px; }
  .be-page .stage-number { font-size: 11px; }
  .be-page .stage-name { font-size: 14px; }
  .be-page .stage-type { font-size: 10px; }

  .be-page .split-heading > p { font-size: 16px; }
  .be-page .stage-row-index { font-size: 11px; }
  .be-page .stage-row strong { font-size: 16px; }
  .be-page .stage-row small { color: #aaa59b; font-size: 12px; }
  .be-page .feature-topline { font-size: 13px; }
  .be-page .access-pill { font-size: 10px; }
  .be-page .stage-feature h3 { font-size: clamp(32px, 2.7vw, 44px); }
  .be-page .stage-feature > p { color: #c2bdb4; font-size: 15px; }
  .be-page .feature-link { font-size: 13px; }

  .be-page .usecase-route { font-size: 10px; }
  .be-page .case-route-index { font-size: 11px; }
  .be-page .use-case-card .card-label { font-size: 11px; }
  .be-page .use-case-card h3 { font-size: 25px; }
  .be-page .use-case-card .card-1 h3,
  .be-page .card-1 h3 { font-size: 36px; }
  .be-page .use-case-card > p:not(.card-label) { color: #817a70; font-size: 13px; }
  .be-page .card-1 > p:not(.card-label) { color: #c5bbae; }
  .be-page .card-footer { font-size: 12px; }

  .be-page .plan-index { font-size: 11px; }
  .be-page .plan-card h3 { font-size: 24px; }
  .be-page .plan-price { font-size: 18px; }
  .be-page .plan-price small { font-size: 11px; }
  .be-page .plan-note { font-size: 11px; }
  .be-page .plan-card li { font-size: 12px; }
  .be-page .plan-card .plan-link,
  .be-page .plan-card .plan-buy { font-size: 12px; }

  .be-page .pro-copy > p:not(.be-eyebrow) { font-size: 15px; }
  .be-page .pro-topics span { font-size: 11px; }
  .be-page .visual-caption span { font-size: 11px; }
  .be-page .visual-caption strong { font-size: 13px; }
}