/* ══════════════════════════════════════════════════════════════════
   Unitech — homepage.
   Section order matches the source design top to bottom:
   hero · pressures · quote · principles · axes · industries ·
   roles · model · academy · assessment · next step
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero { position: relative; }

/* Three industrial frames cross-fade behind the headline. Everything in
   the stage is decoration, so the photos are background images: a file
   that has not been dropped in yet degrades to the wash, never to a
   broken-image glyph. */
.hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* the frame itself is declared on the element: a url() in a custom
   property would resolve against this stylesheet, not the page */
.hero__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease, transform 14s linear;
}
.hero__shot.is-on { opacity: 1; transform: scale(1.06); }

/* the colour field that keeps the headline readable over the frames */
.hero__wash {
  position: absolute;
  inset: 0;
  background: var(--heroVeil);
}
/* graph paper, faded out toward the edges */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--heroGridLine) 1px, transparent 1px),
    linear-gradient(270deg, var(--heroGridLine) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 66% at 50% 42%, #000 0%, #0000 78%);
  mask-image: radial-gradient(72% 66% at 50% 42%, #000 0%, #0000 78%);
}
/* the point cloud, under the bloom that softens its centre */
.hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* the bloom that lifts the centre of the frame */
.hero__bloom {
  position: absolute;
  inset: 0;
  background: var(--heroBloom);
}

.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  display: flex;
  gap: 6px;
}
.hero__dots span {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--ring);
  transition: width .4s ease, background .4s ease;
}
.hero__dots span.is-on { width: 18px; background: var(--red); }

.hero__body {
  position: relative;
  max-width: var(--shell-hero);
  margin: 0 auto;
  padding: 84px var(--gutter) 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pillBg);
  border: 1px solid var(--pillBd);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  animation: ut-rise .8s var(--ease) both;
}
.hero__pill span:last-child {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--txs);
}
.hero__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: ut-pulse 2.6s ease-in-out infinite;
}

.hero__title {
  margin-top: 26px;
  max-width: 880px;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--fw-black);
  color: var(--txs);
  letter-spacing: var(--tracking-hero);
  text-wrap: balance;
  animation: ut-rise .9s var(--ease) .1s both;
}
.hero__title span { color: var(--red); }

.hero__lead {
  margin-top: 22px;
  width: 100%;
  max-width: 660px;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--tx);
  text-wrap: pretty;
  animation: ut-rise .9s var(--ease) .22s both;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  animation: ut-rise .9s var(--ease) .34s both;
}

/* the label, then the codes the work is measured against */
.hero__standards {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--bd);
  width: 100%;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 34px;
  flex-wrap: wrap;
  animation: ut-rise .9s var(--ease) .46s both;
}
.hero__standards-label {
  font-size: var(--fs-mono);
  font-weight: var(--fw-semibold);
  color: var(--txm);
}
.hero__standard {
  font-family: var(--font-mono);
  unicode-bidi: isolate;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--nvy);
}
.hero__standards-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ring);
}

/* ══════════════════════════════════════════════════════════════════
   01 · PRESSURES — the case for change
   ══════════════════════════════════════════════════════════════════ */
/* the first band after the hero carries a little more air than the rest */
.why__inner { padding-top: 76px; padding-bottom: 80px; }

.pressures__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 56px;
  margin-top: 24px;
  align-items: start;
}
.pressures__lead { margin-top: 20px; }
.pressures__note { margin-top: 16px; }

/* A ledger rather than cards: four rows, and a red rail on the outer
   edge that deepens as the pressures compound. */
.plist { border-top: 1px solid var(--bd2); }
.plist__row {
  display: grid;
  grid-template-columns: 70px minmax(0, 0.9fr) minmax(0, 1.4fr) 3px;
  align-items: start;
  gap: 20px;
  padding: 24px 0 22px;
  border-bottom: 1px solid var(--bdw);
  transition: background .25s ease;
}
.plist__row:hover { background: var(--cardh); }
.plist__row--last { border-bottom-color: var(--bd2); }
.plist__num {
  padding-top: 2px;
  font-size: 22px;
  font-weight: var(--fw-black);
  line-height: 1.5;
  letter-spacing: -.01em;
  padding-left: 8px;
  color: var(--ring);
}
.plist__row--last .plist__num { color: var(--eyebrow); }
.plist__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--txs);
}
.plist__body {
  margin: 0;
  padding-top: 2px;
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--tx);
}
.plist__rail {
  align-self: stretch;
  border-radius: 2px;
  background: var(--red);
  opacity: var(--rail, 100%);
}

/* ══════════════════════════════════════════════════════════════════
   QUOTE STRIP — the sentence the whole model rests on
   ══════════════════════════════════════════════════════════════════ */
.quote-strip { background: var(--navy-ink); }
[data-theme="dark"] .quote-strip { background: var(--ink-800); }
.quote-strip__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 46px var(--gutter) 48px;
}
.quote-strip__bar {
  flex-shrink: 0;
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red), #E31F2600);
}
.quote-strip__text {
  flex: 1;
  margin: 0;
  font-size: 24px;
  line-height: 1.75;
  font-weight: var(--fw-bold);
  color: var(--white);
  text-wrap: pretty;
}
.quote-strip__by {
  flex-shrink: 0;
  max-width: 190px;
  padding-right: 22px;
  border-right: 1px solid var(--deepBd);
  font-size: var(--fs-meta);
  line-height: 1.9;
  color: #8FB4DA;
}

/* ══════════════════════════════════════════════════════════════════
   02 · PRINCIPLES — the five rules of engagement
   ══════════════════════════════════════════════════════════════════ */
.principles__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-top: 24px;
}
.principles__head .sec-lead { margin-top: 16px; }

.principles__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px;
  margin-top: 34px;
}
.principle {
  overflow: hidden;
  padding: 22px 20px 20px;
}
.principle__head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.principle__head > div:first-child { flex: 1; min-width: 0; }
.principle .card__en { font-size: 11px; }
.principle__title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--txs);
}
.principle__body {
  margin-top: 11px;
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--tx);
}

/* ══════════════════════════════════════════════════════════════════
   03 · AXES — the five strategic axes, as one split card:
   the rail of five on the right, the detail of whichever is picked
   on the left. Every panel is rendered; the rail only toggles them.
   ══════════════════════════════════════════════════════════════════ */
.axes {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--radius-18);
  box-shadow: var(--cardShadow);
  overflow: hidden;
}

.axes__rail {
  border-left: 1px solid var(--bdw);
  background: var(--s2);
}
.axes__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  font-family: inherit;
  padding: 20px 22px 20px 18px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bdw);
  transition: background .25s ease;
}
.axes__row:last-child { border-bottom: 0; }
.axes__row.is-active { background: var(--cardh); }
.axes__rail-mark {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 3px;
  background: transparent;
  transition: background .25s ease;
}
.axes__row.is-active .axes__rail-mark { background: var(--red); }
.axes__num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: var(--fw-black);
  background: var(--chip);
  color: var(--txm);
  transition: background .25s ease, color .25s ease;
}
.axes__row.is-active .axes__num { background: var(--red); color: var(--white); }
.axes__row-text { flex: 1; min-width: 0; }
.axes__row-title {
  display: block;
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.55;
  color: var(--tx);
  transition: color .25s ease;
}
.axes__row.is-active .axes__row-title { color: var(--txs); }
.axes__row-en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--txm);
  transition: color .25s ease;
}
.axes__row.is-active .axes__row-en { color: var(--nvy); }
.axes__arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--ring);
  transform: translateX(6px);
  transition: color .25s ease, transform .25s ease;
}
.axes__row.is-active .axes__arrow { color: var(--red); transform: none; }

.axes__detail {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 372px;
  padding: 34px 36px 30px;
}
.axes__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.axes__en {
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  color: var(--eyebrow);
}
.axes__title {
  margin: 10px 0 0;
  font-size: 26px;
  line-height: 1.45;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--txs);
}
.axes__body {
  margin: 14px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--tx);
  text-wrap: pretty;
}
.axes__tech { margin-top: 24px; }
.axes__tech-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--txm);
}
.axes__tech-list {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.axes__tech-list span {
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 11px;
  border-radius: var(--radius-7);
  padding: 7px 12px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-bd);
  color: var(--badge-tx);
}
.axes__foot {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px dashed var(--bd2);
}
.axes__foot .qlink { padding-top: 14px; }
.axes__value-label {
  padding-top: 14px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--txm);
}
.axes__value {
  margin-top: 6px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--txs);
}

.sec-lead--780 { max-width: 780px; }

/* ══════════════════════════════════════════════════════════════════
   04 · INDUSTRIES — a scroll-snapped rail of four
   The arrows drive it, but a finger or a trackpad works on its own,
   and the meter underneath reports where the rail has got to.
   ══════════════════════════════════════════════════════════════════ */
.ind__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.ind__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.ind__btn {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  background: var(--cardh);
  border: 1px solid var(--bd2);
  color: var(--txs);
  box-shadow: var(--cardShadow);
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.ind__btn:hover { border-color: var(--red); color: var(--red); }
.ind__btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--bd);
  color: var(--txm);
}

.ind__track {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ind__track::-webkit-scrollbar { display: none; }
/* The rail is scrolled by script, so the glide is a property of this
   element, not of the page — the override has to live beside the rule it
   overrides, since home.css is loaded after main.css. */
@media (prefers-reduced-motion: reduce) {
  .ind__track { scroll-behavior: auto; }
}

.ind__card {
  flex: 0 0 auto;
  width: min(580px, 84vw);
  scroll-snap-align: start;
  padding: 0;
  overflow: hidden;
}
/* The photo is painted on the element (see .hero__shot) over a navy
   ground, so a file that is missing reads as a deliberate colour block
   rather than a broken image. */
.ind__shot {
  position: relative;
  height: 210px;
  background-color: var(--navy-ink);
  background-size: cover;
  background-position: center;
}
.ind__shot-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0A254000 40%, #0A2540C7 100%);
}
.ind__name {
  position: absolute;
  right: 24px; left: 24px; bottom: 20px;
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  font-weight: var(--fw-black);
  color: var(--white);
  text-shadow: 0 2px 14px #0a254080;
}

.ind__body { padding: 22px 24px 24px; }
.ind__focus {
  margin: 0;
  font-size: var(--fs-card);
  line-height: 1.9;
  color: var(--tx);
}
.ind__sols {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.ind__sol {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 11px;
  align-items: baseline;
}
.ind__sol::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--red);
}
.ind__sol span {
  font-size: 13px;
  line-height: 1.8;
  color: var(--txs);
}
.ind__tags {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bdw);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ind__meter {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.ind__meter-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--bd);
  overflow: hidden;
}
.ind__meter-fill {
  height: 100%;
  width: 25%;
  border-radius: 2px;
  background: linear-gradient(270deg, var(--red), var(--navy));
  transition: width .4s var(--ease);
}
.ind__count {
  font-size: 12px;
  color: var(--txm);
  white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════
   05 · ROLES — three doors into the same offer
   ══════════════════════════════════════════════════════════════════ */
.roles__lead { max-width: 720px; margin: 0 0 30px; }

.roles__tabs {
  display: flex;
  gap: 8px;
}
.roles__tab {
  position: relative;
  border-radius: var(--radius-12) var(--radius-12) 0 0;
  padding: 14px 24px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--txm);
  border: 1px solid transparent;
  margin-bottom: -1px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.roles__tab:hover { color: var(--txs); }
.roles__tab.is-active {
  background: var(--card);
  border-color: var(--bd2);
  border-bottom-color: transparent;
  font-weight: var(--fw-bold);
  color: var(--txs);
  box-shadow: 0 -2px 0 0 var(--red) inset;
}

.roles__panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--card);
  border: 1px solid var(--bd2);
  border-top: 0;
  border-radius: 0 0 var(--radius-16) var(--radius-16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
/* the divider belongs between the cells, so it hangs off the leading
   two — which in RTL means their physical left edge */
.roles__cell {
  padding: 30px 32px;
  border-left: 1px solid var(--bdw);
}
.roles__cell:last-child {
  border-left: 0;
  background: var(--rolesDoc);
}
.roles__cell-label {
  font-size: var(--fs-mono);
  font-weight: var(--fw-bold);
  color: var(--nvy);
}
/* the concern is the one cell the design marks in red */
.roles__cell:first-child .roles__cell-label { color: var(--eyebrow); }
.roles__cell-body {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-card);
  color: var(--tx);
}
.roles__cell:last-child .roles__cell-body {
  color: var(--txs);
  font-weight: var(--fw-semibold);
}

/* ══════════════════════════════════════════════════════════════════
   06 · ASSESSMENT — the seven-question self-check
   ══════════════════════════════════════════════════════════════════ */
/* full-bleed: the design gives this band no container, only gutters */
.assess__inner { padding: 40px var(--gutter); }
.assess__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  margin-top: 26px;
  align-items: start;
}
.assess__title {
  font-size: 40px;
  line-height: 1.32;
  color: var(--deepTxs);
}
.assess__lead {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: var(--lh-card);
  color: var(--deepTx);
  text-wrap: pretty;
}
/* ── Quiz card ────────────────────────────────────────────────────── */
.quiz {
  background: var(--quizCard);
  border-radius: 20px;
  padding: 28px 32px 26px;
  box-shadow: 0 24px 54px #00000038;
}
/* the navy band carries the card in light; in dark it needs an edge */
[data-theme="dark"] .quiz { border: 1px solid var(--quizBd); }
.quiz__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.quiz__head-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--quizTxs);
}
.quiz__count {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--quizTx);
  white-space: nowrap;
}
.quiz__track {
  margin-top: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--quizBd);
  overflow: hidden;
}
.quiz__fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(270deg, var(--red), var(--navy));
  transition: width .45s var(--ease);
}

/* One question at a time. The stage keeps a floor height so the card
   does not jump as the questions change length. */
.quiz__stage {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quiz__step {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--eyebrow);
}
.quiz__q {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  color: var(--quizTxs);
  text-wrap: pretty;
}

.quiz__answers {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz__btn {
  border-radius: var(--radius-9);
  padding: 14px 0;
  line-height: normal;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  background: var(--btn-idle-bg);
  border: 1px solid var(--btn-idle-bd);
  color: var(--btn-idle-tx);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.quiz__btn--yes,
.quiz__btn--no { flex: 1; }
.quiz__btn--yes {
  background: var(--btn-yes-soft-bg);
  border-color: var(--btn-yes-soft-bd);
  color: var(--btn-yes-soft-tx);
}
.quiz__btn--yes:hover {
  background: var(--btn-yes-bg);
  border-color: var(--btn-yes-bd);
  color: var(--btn-yes-tx);
}
.quiz__btn--no {
  background: var(--btn-no-bg);
  border-color: var(--btn-no-bd);
  color: var(--btn-no-tx);
}
.quiz__btn--no:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.quiz__btn--back {
  width: 78px;
  flex-shrink: 0;
  font-size: 13px;
}
.quiz__btn--back[disabled] { opacity: .5; cursor: not-allowed; }
/* ── Quiz result ──────────────────────────────────────────────────── */
.quiz__reset {
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--quizTx);
}
.quiz__reset:hover { color: var(--red); }

.quiz__score-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.quiz__score {
  font-family: var(--font-fa);
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 34px;
  font-weight: var(--fw-black);
  color: var(--quizTxs);
  line-height: 1;
}
.quiz__level {
  font-size: 16.5px;
  font-weight: var(--fw-bold);
  color: var(--quizTxs);
}
.quiz__level-sub {
  margin-top: 3px;
  font-size: var(--fs-meta);
  color: var(--quizTx);
}

.quiz__ladder {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.quiz__rung-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--quizBd);
  transition: background .3s ease;
}
.quiz__rung.is-on .quiz__rung-bar { background: var(--ladder-on); }
.quiz__rung-name {
  margin-top: 7px;
  font-size: 10px;
  color: var(--quizTx);
  text-align: center;
}

.quiz__risks {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--quizBd);
}
.quiz__risks-title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--quizTxs);
}
.quiz__risk-list {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
.quiz__risk {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  align-items: baseline;
}
.quiz__risk::before {
  content: "AA";
  font-size: 11px;
  line-height: 1;
  color: var(--eyebrow);
}
.quiz__risk p {
  font-size: var(--fs-meta);
  line-height: 1.8;
  color: var(--quizTx);
}

.quiz__cta {
  margin-top: 18px;
  display: block;
  text-align: center;
  background: var(--ctaBg);
  color: var(--ctaFg);
  border-radius: 8px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  transition: opacity .2s ease;
}
.quiz__cta:hover { opacity: .9; }

/* ══════════════════════════════════════════════════════════════════
   07 · MODEL — the five-stage transformation rail
   ══════════════════════════════════════════════════════════════════ */
.model__anchor { scroll-margin-top: 120px; }

.model__title {
  margin: 20px 0 0;
  font-size: 40px;
  line-height: 1.32;
}
.model__lead {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.9;
}

.model__quote {
  margin: 22px 0 0;
  border-right: 3px solid var(--red);
  padding-right: 20px;
  max-width: 940px;
}
/* The source sets the quote's own width wider than the box that holds it,
   so the sentence runs past the rule on one line instead of wrapping.
   That overhang is the design; below the design's own minimum it is let
   go rather than pushed off the page. */
.model__quote-text {
  display: block;
  width: 1100px;
  font-size: 20px;
  line-height: 1.75;
  font-weight: var(--fw-bold);
  color: var(--txs);
  text-wrap: pretty;
}

.model__inner { padding-top: 68px; padding-bottom: 72px; }

.rail {
  position: relative;
  margin-top: 42px;
}
/* the hairline the stage dots sit on, and the gradient that fills it */
.rail__track,
.rail__fill {
  position: absolute;
  top: 18px;
  height: 2px;
}
.rail__track { right: 0; left: 0; background: var(--bd); }
.rail__fill {
  right: 0;
  width: 0;
  border-radius: 2px;
  background: var(--lineGrad);
  transition: width .55s var(--ease);
}

.rail__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
/* the card fills its grid row, so all five end level however long the
   copy runs, and the body takes up the slack so every "خروجی" line
   settles onto the same baseline */
.step {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
}
.step__dot-row { display: flex; justify-content: center; }
.step__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--fw-bold);
  background: var(--chip);
  color: var(--txm);
  border: 1px solid var(--bd2);
  box-shadow: 0 0 0 6px var(--step-ring);
  transition: transform .35s var(--ease), background .3s ease,
              color .3s ease, border-color .3s ease;
}
.step__card {
  margin-top: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 18px 16px 20px;
  background: var(--card);
  border: 1px solid var(--bd);
  transition: transform .35s var(--ease), background .3s ease,
              border-color .3s ease, box-shadow .3s ease;
}
.step__en {
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  color: var(--txm);
  transition: color .3s ease;
}
.step__title {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--txs);
}
.step__body {
  margin-top: 10px;
  flex: 1;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--tx);
}
.step__out {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--bd2);
  font-size: var(--fs-mono);
  line-height: 1.8;
  color: var(--txm);
}

/* stages already passed lift slightly */
.step.is-past .step__card { transform: translateY(-2px); }
.step.is-past .step__dot {
  background: var(--badge-bg);
  color: var(--badge-tx);
  border-color: var(--badge-bd);
}
/* the stage under the pointer */
.step.is-active .step__card {
  background: var(--cardh);
  border-color: var(--step-active-bd);
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.step.is-active .step__dot {
  transform: scale(1.16);
  background: linear-gradient(160deg, var(--red-bright) 0%, var(--red) 55%, var(--red-deep) 100%);
  color: var(--white);
  border-color: transparent;
}
.step.is-active .step__en { color: var(--eyebrow); }

.rail__caption {
  position: relative;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.rail__caption-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.rail__stage {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--eyebrow);
  white-space: nowrap;
}
.rail__rule {
  font-size: var(--fs-card);
  line-height: 1.9;
  color: var(--tx);
}
.rail__hint {
  font-size: var(--fs-mono);
  color: var(--txm);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   ACADEMY — the knowledge arm, beside its own frame
   ══════════════════════════════════════════════════════════════════ */
.academy__inner {
  padding-top: 68px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.academy__title {
  margin-top: 20px;
  font-size: 38px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.academy__kicker {
  margin-top: 12px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--nvy);
}
.academy__lead {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--tx);
}
.academy__tags {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.academy__tag {
  font-size: var(--fs-meta);
  background: var(--chip);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  color: var(--txs);
}
.academy__cta {
  margin-top: 26px;
  padding: 15px 26px;
  font-size: var(--fs-body-sm);
}
/* same fallback contract as the industry cards */
.academy__shot {
  height: 380px;
  border-radius: 20px;
  border: 1px solid var(--bd);
  background-color: var(--navy-ink);
  background-size: cover;
  background-position: center;
}

/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  :root { --fs-hero: 44px; }

  .principles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pressures__grid,
  .assess__grid  { grid-template-columns: 1fr; gap: 34px; }
  /* the design's 40px band is tight once the two columns stack */
  .assess__inner { padding: 56px var(--gutter) 60px; }

  /* the split axis card stacks: rail on top, detail underneath */
  .axes { grid-template-columns: 1fr; }
  .axes__rail   { border-left: 0; border-bottom: 1px solid var(--bdw); }
  .axes__detail { min-height: 0; padding: 28px 26px 26px; }

  .academy__inner { grid-template-columns: 1fr; gap: 32px; }
  .academy__shot  { height: 300px; }

  /* the rail turns into a stacked list — the connecting line makes no
     sense once the stages are no longer side by side */
  .rail__track, .rail__fill { display: none; }
  .rail__steps { grid-template-columns: 1fr 1fr; gap: 20px; }

  .model__quote-text { width: auto; }
}

@media (max-width: 860px) {
  :root { --fs-hero: 34px; --fs-lead: 16px; --fs-body: 15.5px; }

  .hero__body { padding: 56px var(--gutter) 60px; }
  .hero__standards { gap: 12px 18px; }
  .hero__dots { display: none; }

  .principles__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ind__head        { flex-direction: column; align-items: flex-start; gap: 18px; }

  .principles__grid,
  .rail__steps { grid-template-columns: 1fr; }

  /* the ledger folds: number and rail keep their columns, the copy
     stacks under the title */
  .plist__row   { grid-template-columns: 44px minmax(0, 1fr) 3px; gap: 8px 16px; }
  .plist__num   { grid-row: 1 / 3; }
  .plist__title,
  .plist__body  { grid-column: 2 / 3; }
  .plist__rail  { grid-column: 3 / 4; grid-row: 1 / 3; }

  .quote-strip__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .quote-strip__text  { font-size: 19px; }
  .quote-strip__by    { max-width: none; padding-right: 0; border-right: 0; }

  .academy__shot { height: 240px; }

  /* Tabs cannot wrap gracefully at three long Persian labels, so on a
     phone they become one grouped chooser — the same shape as the axis
     rail in section 03 — sitting above the panel instead of joined to it. */
  .roles__tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 16px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--radius-12);
    overflow: hidden;
  }
  .roles__tab {
    width: 100%;
    text-align: right;
    margin-bottom: 0;
    padding: 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--bdw);
    border-radius: 0;
    background: transparent;
  }
  .roles__tab:last-child { border-bottom: 0; }
  .roles__tab.is-active {
    background: var(--cardh);
    border-color: var(--bdw);
    /* a negative x inset draws the rail on the right edge, as in RTL */
    box-shadow: -3px 0 0 0 var(--red) inset;
  }
  .roles__panel {
    grid-template-columns: 1fr;
    /* the panel is a box of its own down here, not joined to the tabs */
    border-top: 1px solid var(--bd2);
    border-radius: var(--radius-16);
  }
  .roles__cell {
    border-left: 0;
    border-bottom: 1px solid var(--bdw);
  }
  .roles__cell:last-child { border-bottom: 0; }

  /* ── 5b · the stage list, stacked ──────────────────────────────────
     The dot moves alongside the card instead of onto a row of its own,
     which was costing a whole line of height per stage. And with the
     connecting line and the caption both out of play down here, the
     stages stop being interactive: a tap used to rewrite a caption far
     below the fold, where nobody could see it react. */
  .step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    cursor: default;
  }
  .step__dot-row { justify-content: flex-start; }
  .step__card { margin-top: 0; }
  .step.is-active .step__card,
  .step.is-past .step__card {
    transform: none;
    background: var(--card);
    border-color: var(--bd);
    box-shadow: var(--cardShadow);
  }

  .rail__caption { flex-direction: column; gap: 12px; }
  .rail__caption-main { flex-direction: column; gap: 8px; }
  .rail__hint { display: none; }

  .quiz { padding: 22px 20px 20px; }
  .quiz__stage { min-height: 108px; }
  .quiz__q { font-size: 17px; }

}

@media (max-width: 620px) {
  .axes__row { padding: 16px 16px 16px 12px; gap: 11px; }

  .quiz__ladder { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .quiz__rung-name { font-size: 9px; }
  .quiz__score { font-size: 38px; }
}