/* =====================================================================
   ITSB — landing page sections
   ===================================================================== */

/* ---- Section headings ----
   One measure for every band heading on a landing surface, rather than an inline
   `max-width` chosen per heading. Those were set against the English wording and
   a Russian heading of the same meaning runs about a third longer, which is how
   a two-line heading turns into three lines with one word on the last. `balance`
   spreads whatever is left over evenly instead of leaving an orphan. */
.h-band { margin-top: 1rem; max-width: 30ch; text-wrap: balance; }
.h-band.is-narrow { max-width: 24ch; }
.h-band + .lede { max-width: 62ch; }

/* ---- Hero ---- */
.hero { padding-block: 4.5rem 4rem; }
.hero h1 { text-wrap: balance; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 4rem; align-items: center; }
.hero h1 { margin-top: 1.1rem; }
.hero .lede { max-width: 46ch; margin-top: .7rem; }
.hero-cta { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
/* Three joined facts whose length varies by language; `balance` keeps a Russian or
   Spanish translation from wrapping to a one-word second line. */
.hero-cta-note { flex-basis: 100%; margin-top: .15rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.hero-trust { display: flex; align-items: center; gap: .75rem; margin-top: 2.1rem; font-size: var(--fs-sm); color: var(--muted); }
.hero-trust .r { width: 34px; height: 1px; background: var(--brass); opacity: .8; flex: none; }

/* ---- Certificate artifact ---- */
.cert-frame {
  background: var(--paper-warm); border: 1px solid var(--brass);
  padding: 11px; border-radius: 3px;
  box-shadow: 0 34px 64px -28px rgba(8,38,42,.45), 0 6px 16px -10px rgba(8,38,42,.25);
}
.cert { position: relative; border: 1px solid rgba(156,122,60,.55); padding: 2.1rem 1.9rem 1.6rem; text-align: center; overflow: hidden; }
.cert .guilloche { height: 30px; margin: -.4rem -.4rem 1rem; opacity: .5; }
.cert .org { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-deep); }
.cert .seal { margin: .7rem auto .2rem; }
.cert .conf { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--muted); margin-top: .6rem; }
.cert .name { font-family: var(--font-display); font-size: 2rem; color: var(--ink-2); line-height: 1.1; margin: .15rem 0; }
.cert .for { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm); color: var(--muted); }
.cert .track { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); color: var(--ink-2); margin-top: .2rem; }
.cert .lvrow { display: inline-flex; align-items: center; gap: .6rem; margin-top: .7rem; }
.cert .diamond { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1.05rem 0 .9rem; }
.cert .diamond::before, .cert .diamond::after { content: ""; height: 1px; width: 64px; background: var(--brass); opacity: .55; }
.cert .diamond span { width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); }
/* Equal thirds broke the register number across two lines: eighteen monospace characters
   with letter-spacing need more than a third of the card, and the date beside them needs
   far less. The outer cells take the width their text asks for and the signature keeps the
   rest. */
.cert .foot { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: end; }
.cert .foot .cell { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cert .foot .cell:last-child { text-align: right; }
.cert .foot .cell .v { display: block; color: var(--ink-2); font-size: .73rem; margin-top: .3rem; white-space: nowrap; }
.cert .foot .sign { display: block; font-family: var(--font-script); font-size: 1.55rem; color: #1B3A80; line-height: 1; text-transform: none; letter-spacing: 0; margin-bottom: .1rem; }
.cert .foot .sigline { height: 1px; background: var(--line-2); margin: .15rem auto .5rem; }
.cert .ribbon {
  position: absolute; top: 14px; right: -34px; transform: rotate(45deg);
  background: var(--brass); color: #fff;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35em 2.6em;
}

/* ---- Credential ribbon (facts) ---- */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fact { padding: 1.7rem 1.4rem; text-align: center; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact .n { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-2); line-height: 1; }
.fact .n .u { color: var(--brass); }
.fact .l { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .55rem; }

/* ---- Why (editorial, rule-led, no icons) ---- */
.why-head { max-width: 54ch; }
/* Label, heading and body each get a shared row, so a heading that wraps to two lines in
   one column does not push its own paragraph below the other two. Spacing between the
   three parts comes from their margins, hence `row-gap: 0`. */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; column-gap: 2.4rem; row-gap: 0; margin-top: 3rem; }
.why-col { padding-top: 1.2rem; border-top: 2px solid var(--brass); display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.why-col .lbl { font-family: var(--font-mono); font-size: .73rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); }
.why-col h4 { margin: .7rem 0 .5rem; font-size: var(--fs-lg); }
.why-col p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* ---- Certifications ---- */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.8rem; }
.track-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.5rem 1.4rem; transition: transform var(--tr), box-shadow var(--tr); }
.track-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(8,38,42,.45); }
.track-card.is-open { border-top: 3px solid var(--brass); }
.track-card .code { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.track-card h4 { margin: .5rem 0 0; font-size: var(--fs-md); line-height: 1.18; }
.track-card .status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .7rem; }
.track-card .status.open { color: var(--accent-700); }
.track-card .status.closed { color: var(--faint); }
.track-card .status .d { width: .5rem; height: .5rem; border-radius: 50%; }
.track-card .status.open .d { background: var(--accent); }
.track-card .status.closed .d { background: var(--line-2); }
.track-card .status.soon { color: var(--brass); }
.track-card .status.soon .d { background: var(--brass-2); }
.track-card .desc { font-size: var(--fs-sm); color: var(--muted); margin: .9rem 0 1.2rem; }
.track-card .scale-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.track-card .cta { margin-top: 1.15rem; }
.tracks-more { text-align: center; margin-top: 2rem; font-size: var(--fs-sm); color: var(--muted); }

/* ---- Levels — calibrated ruler ---- */
.ruler-wrap { margin-top: 3.2rem; }
.ruler-bars { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; column-gap: 1rem; }
.ruler-bars .b { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.ruler-bars .b .num { font-family: var(--font-mono); font-size: .95rem; color: var(--ink-2); }
.ruler-bars .b .stem { width: 2px; background: var(--brass); position: relative; }
.ruler-bars .b .stem::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.ruler-bars .b:nth-child(1) .stem { height: 18px; }
.ruler-bars .b:nth-child(2) .stem { height: 32px; }
.ruler-bars .b:nth-child(3) .stem { height: 46px; }
.ruler-bars .b:nth-child(4) .stem { height: 60px; }
.ruler-bars .b:nth-child(5) .stem { height: 74px; }
.ruler-base { height: 2px; background: var(--brass); }
/* Two shared rows rather than five independent stacks: a level name that wraps to two
   lines (it does in Russian and Spanish) otherwise pushes its own description down and
   the five descriptions start at five different heights. Subgrid gives every column the
   same name row, so the descriptions keep one baseline. */
.ruler-labels { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto; column-gap: 1rem; margin-top: 1rem; }
.ruler-labels .l { min-width: 0; text-align: center; display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.ruler-labels .l .nm { font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink-2); }
.ruler-labels .l .ds { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; }

/* ---- Testimonials ---- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 3rem; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.quote { padding: 2.4rem 2.2rem; }
.quote + .quote { border-left: 1px solid var(--line); }
.quote p { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.42; margin: 0 0 1.5rem; }
.quote .by { display: flex; align-items: center; gap: .85rem; }
.quote .mono-circ { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-deep); display: grid; place-items: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; flex: none; }
.quote .by .nm { font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.quote .by .rl { font-size: var(--fs-xs); color: var(--muted); margin-top: .1rem; }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.4rem; align-items: center; }
.about-seal { display: flex; justify-content: center; }
.about-seal .seal { filter: drop-shadow(0 18px 30px rgba(8,38,42,.16)); }
.about blockquote { margin: 1.4rem 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.42; border-left: 2px solid var(--brass); padding-left: 1.3rem; }

/* ---- CTA band ---- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 3.4rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: 0 30px 60px -30px rgba(8,38,42,.7); }
.cta-band h3 { color: #fff; margin: .5rem 0 .4rem; font-size: var(--fs-2xl); }
.cta-band p { color: var(--on-dark-muted); margin: 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.cta-band .gl { position: absolute; inset: auto -20px -30px auto; width: 340px; opacity: .12; }
.cta-band > * { position: relative; }

/* ---- Entrance motion ---- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .75s cubic-bezier(.2,.7,.3,1) both; }
.rise.d1 { animation-delay: .09s; }
.rise.d2 { animation-delay: .18s; }
.rise.d3 { animation-delay: .27s; }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .hero-grid, .about-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  /* Stacked, so the shared rows are no longer wanted: each column becomes its own block. */
  .why-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.6rem; }
  .why-col { padding-top: 1rem; display: block; grid-row: auto; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .facts .grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quote + .quote { border-left: 0; border-top: 1px solid var(--line); }
  .ruler-labels .l .ds { display: none; }
}
@media (max-width: 560px) {
  .cert-grid { grid-template-columns: 1fr; }
  .facts .grid { grid-template-columns: 1fr 1fr; }
  .cert .name { font-size: 1.7rem; }
  .ruler-bars { column-gap: .4rem; }
  .ruler-labels { column-gap: .4rem; }
  .ruler-labels .l .nm {
    font-size: .72rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .cert { padding: 1.7rem 1.3rem 1.3rem; }
  .cert .foot { gap: .5rem; }
  .cert .foot .cell { font-size: .6rem; }
  .cert .foot .cell .v { font-size: .62rem; letter-spacing: -.01em; }
  .cert .foot .sign { font-size: 1.3rem; }
}
@media (max-width: 380px) {
  .ruler-labels .l .nm { font-size: .64rem; }
  .cert .foot .cell .v { font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }