/* =========================================================
   ASTI — New Homepage Preview  ·  asti-home.css
   Design tokens are derived from the existing ASTI logo:
   navy (#1A2380) + amber (from the orange "A" stroke).
   All component classes are prefixed `as-` so they can be
   dropped into a WordPress child theme without collisions.
   ========================================================= */

:root {
  /* Brand */
  --as-ink: #0D1240;          /* headings / darkest navy */
  --as-navy: #1A2380;         /* logo navy */
  --as-navy-600: #2A35A0;
  --as-navy-050: #EEF0FB;
  --as-amber: #F08A0C;        /* single accent (logo orange, brightened for UI) */
  --as-amber-600: #C96F00;
  --as-amber-ink: #9A5400;    /* amber text on white — AA compliant */
  --as-amber-050: #FFF4E5;

  /* Neutrals */
  --as-bg: #FFFFFF;
  --as-surface: #F5F6FA;
  --as-line: #E3E6EF;
  --as-line-strong: #CDD2E0;
  --as-text: #2B3150;
  --as-muted: #5D6482;

  /* Type */
  --as-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --as-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --as-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* Shape & depth */
  --as-r-sm: 8px;
  --as-r: 14px;
  --as-r-lg: 20px;
  --as-shadow-sm: 0 1px 2px rgba(13, 18, 64, .06);
  --as-shadow: 0 1px 2px rgba(13, 18, 64, .05), 0 8px 24px -8px rgba(13, 18, 64, .12);
  --as-shadow-lg: 0 2px 4px rgba(13, 18, 64, .04), 0 24px 48px -16px rgba(13, 18, 64, .22);

  --as-container: 1200px;
  --as-gutter: clamp(16px, 4vw, 32px);
  --as-section: clamp(72px, 9vw, 120px);
  --as-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--as-bg);
  color: var(--as-text);
  font-family: var(--as-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--as-font-display); color: var(--as-ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--as-amber); outline-offset: 3px; border-radius: 4px; }
.as-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.as-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--as-ink); color: #fff; padding: 10px 16px; border-radius: var(--as-r-sm); }
.as-skip:focus { top: 12px; }

.as-container { width: 100%; max-width: calc(var(--as-container) + var(--as-gutter) * 2); margin: 0 auto; padding: 0 var(--as-gutter); }
.as-section { padding: var(--as-section) 0; position: relative; }
.as-section--surface { background: var(--as-surface); }
.as-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Section heads ---------- */
.as-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--as-font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--as-amber-ink);
}
.as-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--as-amber); border-radius: 2px; }
.as-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.as-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.as-head--center .as-eyebrow { justify-content: center; }
.as-head h2 { font-size: clamp(30px, 4.2vw, 46px); margin-top: 14px; }
.as-head p { margin-top: 16px; font-size: clamp(17px, 1.6vw, 19px); color: var(--as-muted); }
.as-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.as-head--row > div { max-width: 680px; }

/* ---------- Buttons ---------- */
.as-btn {
  --bg: var(--as-ink); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  font-weight: 650; font-size: 16px; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .2s var(--as-ease), background-color .2s, box-shadow .2s, border-color .2s, color .2s;
}
.as-btn .as-icon { width: 18px; height: 18px; transition: transform .2s var(--as-ease); }
.as-btn:hover { transform: translateY(-1px); }
.as-btn:hover .as-icon { transform: translateX(3px); }
.as-btn--primary { --bg: var(--as-amber); --fg: var(--as-ink); box-shadow: 0 6px 18px -6px rgba(240, 138, 12, .55); }
.as-btn--primary:hover { --bg: #FF9A1F; }
.as-btn--dark { --bg: var(--as-ink); --fg: #fff; }
.as-btn--dark:hover { --bg: var(--as-navy); }
.as-btn--ghost { --bg: transparent; --fg: var(--as-ink); --bd: var(--as-line-strong); }
.as-btn--ghost:hover { --bd: var(--as-ink); }
.as-btn--light { --bg: #fff; --fg: var(--as-ink); }
.as-btn--outline-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.4); }
.as-btn--outline-light:hover { --bd: #fff; }
.as-btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.as-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--as-navy);
}
.as-link .as-icon { width: 17px; height: 17px; transition: transform .2s var(--as-ease); }
.as-link:hover .as-icon { transform: translateX(4px); }

/* ---------- Placeholder marking (review aid) ---------- */
.as-ph {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--as-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--as-amber-ink); background: var(--as-amber-050); border: 1px dashed var(--as-amber);
  padding: 3px 8px; border-radius: 6px; line-height: 1.3; white-space: nowrap;
}
.as-ph-val { position: relative; }
body.as-review [data-ph] { outline: 2px dashed var(--as-amber); outline-offset: 4px; position: relative; }
body.as-review [data-ph]::after {
  content: attr(data-ph); position: absolute; left: 0; top: -12px; transform: translateY(-100%);
  font: 600 10px/1.2 var(--as-font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--as-amber); color: var(--as-ink); padding: 4px 7px; border-radius: 4px; z-index: 5; white-space: nowrap;
  pointer-events: none;
}
.as-review-toggle {
  position: fixed; right: 16px; font-size: 12.5px !important; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--as-ink); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 16px 10px 12px; font-size: 13.5px; font-weight: 600; box-shadow: var(--as-shadow-lg);
}
.as-review-toggle .as-dot { width: 10px; height: 10px; border-radius: 50%; background: #5D6482; transition: background .2s; }
body.as-review .as-review-toggle .as-dot { background: var(--as-amber); }

/* ---------- 1. Announcement bar ---------- */
.as-announce { background: var(--as-ink); color: #DADDF2; font-size: 14px; }
.as-announce .as-container { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; position: relative; padding-right: 52px; }
.as-announce__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--as-amber); box-shadow: 0 0 0 0 rgba(240,138,12,.6); animation: as-pulse 2.2s infinite; flex: none; }
.as-announce strong { color: #fff; font-weight: 650; }
.as-announce__sep { opacity: .4; }
.as-announce a { color: var(--as-amber); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.as-announce a .as-icon { width: 15px; height: 15px; }
.as-announce__close { position: absolute; right: var(--as-gutter); top: 50%; transform: translateY(-50%); background: none; border: 0; color: #9AA0C4; padding: 6px; border-radius: 6px; display: grid; }
.as-announce__close:hover { color: #fff; }
.as-announce__close .as-icon { width: 16px; height: 16px; }
.as-announce[hidden] { display: none; }
@keyframes as-pulse { 0% { box-shadow: 0 0 0 0 rgba(240,138,12,.55); } 70% { box-shadow: 0 0 0 9px rgba(240,138,12,0); } 100% { box-shadow: 0 0 0 0 rgba(240,138,12,0); } }

/* ---------- 2. Navigation ---------- */
.as-nav { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.as-nav.is-scrolled { border-color: var(--as-line); box-shadow: 0 6px 20px -14px rgba(13,18,64,.25); }
.as-nav .as-container { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.as-logo { display: flex; align-items: center; flex: none; }
.as-logo img { height: 54px; width: auto; }
.as-nav__links { display: flex; gap: 4px; margin-left: auto; }
.as-nav__links a { padding: 10px 14px; border-radius: 999px; font-weight: 550; font-size: 15.5px; color: var(--as-text); transition: background .15s, color .15s; }
.as-nav__links a:hover { background: var(--as-surface); color: var(--as-ink); }
.as-nav__cta { margin-left: 8px; }
.as-nav__burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--as-line); background: #fff; color: var(--as-ink); place-items: center; }
.as-nav__burger .as-icon { width: 22px; height: 22px; }
.as-mnav { display: none; }

@media (max-width: 1020px) {
  .as-nav__links, .as-nav__cta { display: none; }
  .as-nav__burger { display: grid; }
  .as-nav .as-container { min-height: 66px; }
  .as-logo img { height: 40px; }
  .as-mnav { display: block; position: fixed; inset: 0; z-index: 120; background: rgba(13,18,64,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .as-mnav.is-open { opacity: 1; pointer-events: auto; }
  .as-mnav__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 88vw); background: #fff; padding: 20px 24px 28px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--as-ease); }
  .as-mnav.is-open .as-mnav__panel { transform: none; }
  .as-mnav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .as-mnav__top img { height: 36px; width: auto; }
  .as-mnav__close { width: 44px; height: 44px; border: 1px solid var(--as-line); border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--as-ink); }
  .as-mnav__links a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--as-line); font-family: var(--as-font-display); font-weight: 600; font-size: 19px; color: var(--as-ink); }
  .as-mnav__links .as-icon { color: var(--as-muted); }
  .as-mnav__foot { margin-top: auto; display: grid; gap: 10px; }
  .as-mnav__foot .as-btn { width: 100%; }
}

/* ---------- 3. Hero ---------- */
.as-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 0; }
.as-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--as-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--as-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  opacity: .7;
}
.as-hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.as-hero h1 { font-size: clamp(40px, 6vw, 70px); line-height: 1.04; letter-spacing: -.035em; margin-top: 20px; }
.as-hero h1 em { font-style: normal; color: var(--as-navy); position: relative; white-space: nowrap; }
.as-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: var(--as-amber); border-radius: 4px; z-index: -1; opacity: .85; transform-origin: left; animation: as-underline 1s .5s var(--as-ease) both; }
@keyframes as-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.as-hero__lead { font-size: clamp(17px, 1.7vw, 20px); color: var(--as-muted); margin-top: 22px; max-width: 540px; }
.as-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.as-hero__assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; font-size: 14.5px; color: var(--as-muted); }
.as-hero__assure span { display: inline-flex; align-items: center; gap: 7px; }
.as-hero__assure .as-icon { width: 16px; height: 16px; color: var(--as-amber-600); stroke-width: 2.4; }

/* Hero visual — "Career Console" */
.as-console { position: relative; padding: 24px 0 40px; }
.as-console__main {
  position: relative; z-index: 2; background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg);
  box-shadow: var(--as-shadow-lg); padding: 22px; margin-left: 28px;
}
.as-console__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--as-line); }
.as-console__dots { display: flex; gap: 6px; }
.as-console__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--as-line-strong); }
.as-console__title { font: 600 12px var(--as-font-mono); color: var(--as-muted); letter-spacing: .04em; }
.as-console__chip { margin-left: auto; font: 600 11px var(--as-font-mono); color: var(--as-navy); background: var(--as-navy-050); padding: 5px 9px; border-radius: 999px; }
.as-console h3 { font-size: 18px; margin: 18px 0 4px; }
.as-console__sub { font-size: 13.5px; color: var(--as-muted); }
.as-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; position: relative; }
.as-journey__step { position: relative; border: 1px solid var(--as-line); border-radius: 12px; padding: 12px 10px 12px; background: var(--as-surface); transition: background .4s, border-color .4s, transform .4s var(--as-ease); }
.as-journey__step b { display: block; font: 700 10.5px var(--as-font-mono); letter-spacing: .1em; color: var(--as-muted); }
.as-journey__step span { display: block; font-family: var(--as-font-display); font-weight: 650; font-size: 13.5px; color: var(--as-ink); margin-top: 6px; line-height: 1.2; }
.as-journey__step .as-icon { width: 18px; height: 18px; color: var(--as-muted); margin-bottom: 10px; }
.as-journey__step.is-done { background: var(--as-navy-050); border-color: #CFD4F3; }
.as-journey__step.is-done .as-icon { color: var(--as-navy); }
.as-journey__step.is-active { background: var(--as-ink); border-color: var(--as-ink); transform: translateY(-4px); }
.as-journey__step.is-active b { color: var(--as-amber); }
.as-journey__step.is-active span { color: #fff; }
.as-journey__step.is-active .as-icon { color: var(--as-amber); }
.as-journey__track { height: 6px; border-radius: 6px; background: var(--as-surface); margin-top: 16px; overflow: hidden; }
.as-journey__fill { height: 100%; width: 25%; background: linear-gradient(90deg, var(--as-navy), var(--as-amber)); border-radius: 6px; transition: width .8s var(--as-ease); }
.as-console__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 16px; }
.as-mini { border: 1px solid var(--as-line); border-radius: 12px; padding: 12px 14px; }
.as-mini__label { font: 600 10.5px var(--as-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--as-muted); display: flex; align-items: center; justify-content: space-between; }
.as-code { font: 12px/1.75 var(--as-font-mono); color: var(--as-text); margin-top: 8px; white-space: pre; overflow: hidden; }
.as-code .k { color: var(--as-navy-600); font-weight: 600; }
.as-code .s { color: var(--as-amber-ink); }
.as-code .c { color: #9097B5; }
.as-bars { display: flex; align-items: flex-end; gap: 7px; height: 62px; margin-top: 12px; }
.as-bars i { flex: 1; background: var(--as-navy-050); border-radius: 4px 4px 2px 2px; height: var(--h); transform-origin: bottom; animation: as-grow 1.1s var(--as-ease) both; }
.as-bars i:nth-child(5) { background: var(--as-amber); }
.as-bars i:nth-child(n+3):nth-child(-n+4) { background: #B9C0EC; }
@keyframes as-grow { from { transform: scaleY(0); } }

.as-float {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--as-line); border-radius: 14px;
  box-shadow: var(--as-shadow-lg); padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-size: 13.5px;
  animation: as-bob 6s ease-in-out infinite;
}
.as-float strong { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 14px; }
.as-float small { color: var(--as-muted); font-size: 12.5px; }
.as-float__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.as-float--a { left: -6px; bottom: 6px; }
.as-float--a .as-float__ico { background: var(--as-amber-050); color: var(--as-amber-600); }
.as-float--b { right: -12px; top: 0; animation-delay: -3s; }
.as-float--b .as-float__ico { background: var(--as-navy-050); color: var(--as-navy); }
@keyframes as-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.as-console__deco { position: absolute; z-index: 1; right: -40px; bottom: -10px; width: 70%; height: 70%; border-radius: 28px; background: radial-gradient(circle at 30% 30%, rgba(240,138,12,.16), transparent 60%), var(--as-navy-050); transform: rotate(4deg); }

/* Proof strip */
.as-proof { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--as-line); border-bottom: 1px solid var(--as-line); background: #fff; }
.as-proof ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.as-proof li { display: flex; align-items: center; gap: 14px; padding: 24px 22px; border-left: 1px solid var(--as-line); }
.as-proof li:first-child { border-left: 0; padding-left: 0; }
.as-proof__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--as-surface); color: var(--as-navy); display: grid; place-items: center; flex: none; }
.as-proof strong { display: block; font-family: var(--as-font-display); font-size: 17px; color: var(--as-ink); line-height: 1.25; }
.as-proof small { color: var(--as-muted); font-size: 13.5px; }

/* ---------- 4. Career path selector ---------- */
.as-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.as-path {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--as-r-lg);
  border: 1px solid var(--as-line); background: #fff; overflow: hidden; isolation: isolate;
  transition: transform .3s var(--as-ease), box-shadow .3s, border-color .3s, color .3s;
}
.as-path::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--as-ink); transform: translateY(101%); transition: transform .45s var(--as-ease); }
.as-path::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -60px; bottom: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(240,138,12,.35), transparent 65%); opacity: 0; transition: opacity .45s; }
.as-path__num { font: 600 12px var(--as-font-mono); color: var(--as-muted); letter-spacing: .1em; transition: color .3s; }
.as-path__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 18px 0 22px; background: var(--as-navy-050); color: var(--as-navy); transition: background .3s, color .3s, transform .4s var(--as-ease); }
.as-path__ico .as-icon { width: 26px; height: 26px; }
.as-path h3 { font-size: 21px; transition: color .3s; }
.as-path p { margin-top: 10px; color: var(--as-muted); font-size: 15.5px; transition: color .3s; }
.as-path .as-link { margin-top: auto; padding-top: 26px; font-size: 15px; transition: color .3s; }
.as-path:hover, .as-path:focus-within { transform: translateY(-6px); box-shadow: var(--as-shadow-lg); border-color: var(--as-ink); }
.as-path:hover::before, .as-path:focus-within::before { transform: none; }
.as-path:hover::after, .as-path:focus-within::after { opacity: 1; }
.as-path:hover h3, .as-path:focus-within h3 { color: #fff; }
.as-path:hover p, .as-path:focus-within p { color: #B9BEDD; }
.as-path:hover .as-path__num, .as-path:focus-within .as-path__num { color: var(--as-amber); }
.as-path:hover .as-path__ico, .as-path:focus-within .as-path__ico { background: var(--as-amber); color: var(--as-ink); transform: rotate(-6deg) scale(1.05); }
.as-path:hover .as-link, .as-path:focus-within .as-link { color: var(--as-amber); }
.as-path .as-link::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */

/* ---------- 5. Featured courses ---------- */
.as-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.as-course {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--as-r-lg); padding: 26px; transition: transform .3s var(--as-ease), box-shadow .3s, border-color .3s;
}
.as-course:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-lg); border-color: var(--as-line-strong); }
.as-course__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.as-course__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--as-ink); color: #fff; transition: background .3s, color .3s; }
.as-course__ico .as-icon { width: 24px; height: 24px; }
.as-course:hover .as-course__ico { background: var(--as-amber); color: var(--as-ink); }
.as-course__tag { font: 600 11px var(--as-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--as-navy); background: var(--as-navy-050); padding: 6px 10px; border-radius: 999px; }
.as-course h3 { font-size: 23px; margin-top: 22px; }
.as-course > p { color: var(--as-muted); font-size: 15.5px; margin-top: 10px; }
.as-tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.as-tech li { font: 500 12.5px var(--as-font-mono); color: var(--as-text); background: var(--as-surface); border: 1px solid var(--as-line); padding: 5px 9px; border-radius: 7px; }
.as-course__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: auto 0 0; padding-top: 18px; border-top: 1px dashed var(--as-line-strong); }
.as-course__meta dt { font: 600 10.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-muted); }
.as-course__meta dd { margin: 4px 0 0; font-weight: 600; font-size: 14.5px; color: var(--as-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.as-course .as-btn { margin-top: 22px; width: 100%; }
.as-course--advisor { background: var(--as-ink); border-color: var(--as-ink); color: #C9CDE8; justify-content: space-between; overflow: hidden; isolation: isolate; }
.as-course--advisor::before { content: ""; position: absolute; z-index: -1; inset: auto -80px -120px auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(240,138,12,.28), transparent 65%); }
.as-course--advisor h3 { color: #fff; margin-top: 18px; }
.as-course--advisor p { color: #B9BEDD; margin-top: 10px; font-size: 15.5px; }
.as-course--advisor .as-course__ico { background: var(--as-amber); color: var(--as-ink); }
.as-course--advisor ul.as-steps-mini { margin-top: 18px; display: grid; gap: 10px; font-size: 15px; }
.as-steps-mini li { display: flex; gap: 10px; align-items: center; }
.as-steps-mini .as-icon { width: 16px; height: 16px; color: var(--as-amber); stroke-width: 2.4; }
.as-courses__foot { margin-top: 36px; display: flex; justify-content: center; }

/* ---------- 6. Why ASTI (bento) ---------- */
.as-why { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.as-why__card {
  position: relative; grid-column: span 2; padding: 28px; border-radius: var(--as-r-lg); border: 1px solid var(--as-line);
  background: #fff; overflow: hidden; display: flex; flex-direction: column; min-height: 240px;
  transition: border-color .3s, box-shadow .3s;
}
.as-why__card:hover { border-color: var(--as-line-strong); box-shadow: var(--as-shadow); }
.as-why__num { font-family: var(--as-font-display); font-size: 15px; font-weight: 700; color: var(--as-amber-ink); display: flex; align-items: center; gap: 10px; }
.as-why__num::after { content: ""; height: 1px; flex: 1; background: var(--as-line); }
.as-why__card h3 { font-size: 22px; margin-top: auto; padding-top: 28px; }
.as-why__card p { color: var(--as-muted); font-size: 15.5px; margin-top: 10px; }
.as-why__card--wide { grid-column: span 3; }
.as-why__card--dark { background: var(--as-ink); border-color: var(--as-ink); }
.as-why__card--dark h3 { color: #fff; }
.as-why__card--dark p { color: #B9BEDD; }
.as-why__card--dark .as-why__num { color: var(--as-amber); }
.as-why__card--dark .as-why__num::after { background: rgba(255,255,255,.14); }
.as-why__card--full { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--as-surface); }
.as-why__card--full h3 { padding-top: 18px; margin-top: 0; }
.as-why__full-copy { flex: 1 1 360px; }
.as-why__card--tint { background: var(--as-amber-050); border-color: #F8DDB6; }
.as-why__card--tint .as-why__num::after { background: #F3D3A6; }
/* little visuals inside why cards */
.as-prep { display: grid; gap: 8px; }
.as-prep span { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--as-ink); padding: 8px 12px; border: 1px solid var(--as-line); border-radius: 10px; }
.as-prep span i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--as-navy); color: #fff; flex: none; }
.as-prep span i .as-icon { width: 12px; height: 12px; stroke-width: 3; }
.as-prep span.is-next i { background: var(--as-amber-050); border: 1.5px dashed var(--as-amber); }
.as-why__vis { margin-top: 22px; }
.as-curr { display: flex; flex-wrap: wrap; gap: 6px; }
.as-curr span { font: 500 12px var(--as-font-mono); padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,.08); color: #DADDF2; border: 1px solid rgba(255,255,255,.12); }
.as-curr span.is-hot { background: var(--as-amber); color: var(--as-ink); border-color: var(--as-amber); }
.as-doing { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.as-doing i { aspect-ratio: 1; border-radius: 4px; background: var(--as-surface); border: 1px solid var(--as-line); }
.as-doing i.on { background: var(--as-navy); border-color: var(--as-navy); }
.as-doing i.on2 { background: #8C95DA; border-color: #8C95DA; }
.as-doing i.am { background: var(--as-amber); border-color: var(--as-amber); }
.as-mentor { display: flex; align-items: center; }
.as-mentor span { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; font: 700 13px var(--as-font-display); color: #fff; margin-left: -10px; }
.as-mentor span:first-child { margin-left: 0; }
.as-mentor em { font-style: normal; margin-left: 14px; font-size: 13.5px; color: var(--as-muted); }
.as-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.as-modes span { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid #F3D3A6; color: var(--as-ink); }
.as-modes .as-icon { width: 16px; height: 16px; color: var(--as-amber-600); }

/* ---------- 7. ASTI Ascent Method ---------- */
.as-method { background: var(--as-ink); color: #C9CDE8; overflow: hidden; isolation: isolate; }
.as-method::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.as-method .as-head h2 { color: #fff; }
.as-method .as-head p { color: #B9BEDD; }
.as-method .as-eyebrow { color: var(--as-amber); }
.as-ascent { position: relative; padding-top: 20px; }
.as-ascent__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; margin: 0; padding: 0; list-style: none; }
.as-ascent__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; }
.as-ascent__rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--as-amber), #FFC069); border-radius: 2px; transition: width 1.6s var(--as-ease); }
.as-ascent.is-in .as-ascent__rail i { width: 100%; }
.as-step {
  position: relative; padding: 24px 22px 28px; border-radius: var(--as-r-lg) var(--as-r-lg) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); border-bottom: 0;
  min-height: calc(220px + var(--i) * 44px);
  display: flex; flex-direction: column;
  transition: background .3s, border-color .3s, transform .3s var(--as-ease);
}
.as-step:hover { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border-color: rgba(240,138,12,.5); }
.as-step__n { font: 600 13px var(--as-font-mono); color: var(--as-amber); letter-spacing: .1em; }
.as-step__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; margin-top: 16px; }
.as-step__ico .as-icon { width: 24px; height: 24px; }
.as-step h3 { color: #fff; font-size: 22px; letter-spacing: .06em; margin-top: auto; padding-top: 20px; }
.as-step p { font-size: 15px; margin-top: 8px; color: #B9BEDD; }
.as-step--last { background: linear-gradient(180deg, rgba(240,138,12,.22), rgba(240,138,12,.04)); border-color: rgba(240,138,12,.45); }
.as-step--last .as-step__ico { background: var(--as-amber); color: var(--as-ink); }
.as-step__dot { position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--as-ink); border: 2px solid var(--as-amber); z-index: 2; }
.as-method__note { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--as-r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.as-method__note p { color: #DADDF2; font-size: 16px; }
.as-method__note strong { color: #fff; }

/* ---------- 8. Projects ---------- */
.as-projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.as-project { border-radius: var(--as-r-lg); border: 1px solid var(--as-line); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--as-ease), box-shadow .3s; }
.as-project:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-lg); }
.as-project__stage { position: relative; background: var(--as-surface); padding: 28px 28px 0; height: 270px; overflow: hidden; border-bottom: 1px solid var(--as-line); }
.as-project__body { padding: 22px 26px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.as-project__kicker { font: 600 11.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-amber-ink); }
.as-project h3 { font-size: 21px; margin-top: 6px; }
.as-project__body p { color: var(--as-muted); font-size: 15px; margin-top: 6px; }
.as-project__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--as-line-strong); display: grid; place-items: center; flex: none; color: var(--as-ink); transition: background .2s, color .2s, border-color .2s; }
.as-project:hover .as-project__arrow { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }

/* shared window chrome for mockups */
.as-win { background: #fff; border: 1px solid var(--as-line); border-radius: 12px 12px 0 0; box-shadow: var(--as-shadow); height: 100%; overflow: hidden; transition: transform .5s var(--as-ease); }
.as-project:hover .as-win { transform: translateY(-6px); }
.as-win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--as-line); font: 600 11px var(--as-font-mono); color: var(--as-muted); }
.as-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--as-line-strong); }
.as-win__bar span { margin-left: 8px; }
.as-win--dark { background: #0F1435; border-color: #1E2552; }
.as-win--dark .as-win__bar { border-color: #1E2552; color: #8188B5; }
.as-win--dark .as-win__bar i { background: #2A3266; }
/* BI dashboard */
.as-bi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.as-kpi { border: 1px solid var(--as-line); border-radius: 10px; padding: 10px 12px; }
.as-kpi small { display: block; font: 600 9.5px var(--as-font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--as-muted); }
.as-kpi b { display: block; height: 10px; border-radius: 4px; background: var(--as-ink); width: var(--w); margin-top: 8px; }
.as-kpi em { display: block; height: 6px; border-radius: 4px; background: var(--as-line); width: 60%; margin-top: 6px; }
.as-bi__chart { grid-column: span 2; border: 1px solid var(--as-line); border-radius: 10px; padding: 12px; }
.as-bi__chart svg { width: 100%; height: 100px; }
.as-bi__donut { border: 1px solid var(--as-line); border-radius: 10px; display: grid; place-items: center; padding: 10px; }
.as-bi__donut svg { width: 92px; height: 92px; }
/* Terminal */
.as-term { padding: 14px 16px; font: 12.5px/1.7 var(--as-font-mono); color: #C9CDE8; white-space: pre; }
.as-term .p { color: var(--as-amber); }
.as-term .k { color: #9AA6FF; }
.as-term .s { color: #FFC069; }
.as-term .ok { color: #7BE3B0; }
.as-term .c { color: #5F678F; }
.as-term .cur { display: inline-block; width: 8px; height: 14px; background: var(--as-amber); vertical-align: -2px; animation: as-blink 1s steps(1) infinite; }
@keyframes as-blink { 50% { opacity: 0; } }
/* Security */
.as-sec { padding: 12px 14px; display: grid; grid-template-columns: 1fr 112px; gap: 12px; }
.as-sec table { width: 100%; border-collapse: collapse; font: 11.5px var(--as-font-mono); }
.as-sec td { padding: 7px 6px; border-bottom: 1px solid var(--as-line); color: var(--as-text); white-space: nowrap; }
.as-sev { display: inline-block; padding: 2px 7px; border-radius: 5px; font-weight: 600; font-size: 10px; }
.as-sev--h { background: #FDE6E3; color: #A3261A; }
.as-sev--m { background: var(--as-amber-050); color: var(--as-amber-ink); }
.as-sev--l { background: var(--as-navy-050); color: var(--as-navy); }
.as-sec__radar { border: 1px solid var(--as-line); border-radius: 10px; display: grid; place-items: center; position: relative; }
.as-sec__radar svg { width: 92px; height: 92px; }
.as-sec__sweep { transform-origin: 50px 50px; animation: as-spin 4s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }
/* Web app */
.as-web { display: grid; grid-template-columns: 96px 1fr; height: calc(100% - 37px); }
.as-web__side { border-right: 1px solid var(--as-line); padding: 12px 10px; display: grid; align-content: start; gap: 8px; }
.as-web__side i { height: 8px; border-radius: 4px; background: var(--as-line); }
.as-web__side i.on { background: var(--as-navy); width: 80%; }
.as-web__main { padding: 14px; display: grid; gap: 10px; align-content: start; }
.as-web__hdr { display: flex; justify-content: space-between; align-items: center; }
.as-web__hdr b { height: 12px; width: 120px; border-radius: 4px; background: var(--as-ink); }
.as-web__hdr span { white-space: nowrap; font: 600 10px var(--as-font-mono); background: var(--as-amber); color: var(--as-ink); padding: 5px 9px; border-radius: 6px; }
.as-web__rows { display: grid; gap: 6px; }
.as-web__row { display: grid; grid-template-columns: 18px 1fr 60px 52px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--as-line); border-radius: 8px; }
.as-web__row i { width: 18px; height: 18px; border-radius: 5px; background: var(--as-navy-050); }
.as-web__row b { height: 7px; border-radius: 4px; background: var(--as-line-strong); width: var(--w); }
.as-web__row em { height: 7px; border-radius: 4px; background: var(--as-line); }
.as-web__row span { font: 600 9.5px var(--as-font-mono); text-align: center; padding: 3px 0; border-radius: 5px; background: #E3F6EC; color: #1C7A4A; }
.as-web__api { position: absolute; right: 18px; bottom: 18px; background: #0F1435; color: #C9CDE8; border-radius: 10px; padding: 10px 12px; font: 11px/1.6 var(--as-font-mono); box-shadow: var(--as-shadow-lg); white-space: pre; }
.as-web__api .k { color: #FFC069; }
.as-projects__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.as-projects__foot p { color: var(--as-muted); font-size: 14.5px; }

/* ---------- 9. Career support ---------- */
.as-support { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; counter-reset: sup; }
.as-support__item { position: relative; padding: 0 14px; text-align: center; }
.as-support__item::before { content: ""; position: absolute; top: 36px; left: 50%; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--as-line-strong) 0 6px, transparent 6px 12px); z-index: 0; }
.as-support__item:last-child::before { display: none; }
.as-support__ico { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto; border-radius: 20px; background: #fff; border: 1px solid var(--as-line); display: grid; place-items: center; color: var(--as-navy); box-shadow: var(--as-shadow-sm); transition: transform .3s var(--as-ease), background .3s, color .3s, border-color .3s; }
.as-support__ico .as-icon { width: 28px; height: 28px; }
.as-support__item:hover .as-support__ico { transform: translateY(-4px); background: var(--as-ink); color: var(--as-amber); border-color: var(--as-ink); }
.as-support__item:last-child .as-support__ico { background: var(--as-amber); border-color: var(--as-amber); color: var(--as-ink); }
.as-support__n { display: block; font: 600 11px var(--as-font-mono); letter-spacing: .1em; color: var(--as-muted); margin-top: 18px; }
.as-support h3 { font-size: 17px; margin-top: 6px; }
.as-support p { font-size: 14.5px; color: var(--as-muted); margin-top: 8px; }
.as-support__note { margin-top: 44px; display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: var(--as-r); background: #fff; border: 1px solid var(--as-line); font-size: 14.5px; color: var(--as-muted); max-width: 820px; margin-left: auto; margin-right: auto; }
.as-support__note .as-icon { color: var(--as-navy); margin-top: 2px; }

/* ---------- 10. Metrics ---------- */
.as-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--as-line); border-radius: var(--as-r-lg); overflow: hidden; background: #fff; }
.as-metric { padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px); border-left: 1px solid var(--as-line); position: relative; }
.as-metric:first-child { border-left: 0; }
.as-metric::before { content: ""; position: absolute; top: 0; left: clamp(20px, 2.5vw, 32px); width: 36px; height: 3px; background: var(--as-amber); border-radius: 0 0 3px 3px; }
.as-metric__val { font-family: var(--as-font-display); font-weight: 700; font-size: clamp(44px, 5.4vw, 68px); letter-spacing: -.04em; color: var(--as-ink); line-height: 1; }
.as-metric__val sup { font-size: .5em; color: var(--as-amber-600); vertical-align: top; position: relative; top: .1em; margin-left: 2px; }
.as-metric__label { margin-top: 14px; font-weight: 600; color: var(--as-ink); font-size: 16px; }
.as-metric .as-ph { margin-top: 12px; }

/* ---------- 11. Partners ---------- */
.as-partners-wrap { margin-top: clamp(64px, 8vw, 104px); }
.as-partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.as-partner { height: 88px; border-radius: var(--as-r); border: 1px solid var(--as-line); background: #fff; display: grid; place-items: center; transition: border-color .2s, box-shadow .2s; }
.as-partner:hover { border-color: var(--as-line-strong); box-shadow: var(--as-shadow); }
.as-partner__ph { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #A3A9C2; }
.as-partner__ph svg { width: 26px; height: 26px; }
.as-partner__ph span { font: 600 10px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.as-partner img { max-width: 70%; max-height: 40px; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.as-partner:hover img { filter: none; opacity: 1; }
.as-partners__foot { display: flex; justify-content: center; margin-top: 30px; }

/* ---------- 12. Testimonials ---------- */
.as-tst__controls { display: flex; gap: 10px; }
.as-tst__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--as-line-strong); background: #fff; color: var(--as-ink); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.as-tst__btn:hover:not(:disabled) { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.as-tst__btn:disabled { opacity: .35; cursor: default; }
.as-tst__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.as-tst__track::-webkit-scrollbar { display: none; }
.as-tst { scroll-snap-align: start; background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg); padding: 28px; display: flex; flex-direction: column; position: relative; }
.as-tst__q { width: 34px; height: 34px; color: var(--as-amber); }
.as-tst blockquote { margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--as-text); flex: 1; }
.as-tst__who { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--as-line); }
.as-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 16px var(--as-font-display); color: #fff; background: var(--as-navy); position: relative; }
.as-avatar::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px dashed var(--as-amber); }
.as-tst__who strong { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 16px; }
.as-tst__who small { display: block; color: var(--as-muted); font-size: 13.5px; }
.as-tst__course { position: absolute; top: 28px; right: 28px; font: 600 10.5px var(--as-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--as-navy); background: var(--as-navy-050); padding: 5px 9px; border-radius: 999px; }
.as-tst__progress { height: 3px; background: var(--as-line); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.as-tst__progress i { display: block; height: 100%; width: 33%; background: var(--as-ink); border-radius: 3px; transition: transform .3s var(--as-ease), width .3s; }
.as-tst__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.as-tst__foot p { font-size: 14px; color: var(--as-muted); }

/* ---------- 13. Learning modes ---------- */
.as-modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; position: relative; }
.as-mode { position: relative; border-radius: var(--as-r-lg); padding: clamp(28px, 3.5vw, 44px); border: 1px solid var(--as-line); background: #fff; overflow: hidden; isolation: isolate; }
.as-mode--online { background: var(--as-ink); border-color: var(--as-ink); color: #C9CDE8; }
.as-mode__top { display: flex; align-items: center; justify-content: space-between; }
.as-mode__ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--as-navy-050); color: var(--as-navy); }
.as-mode__ico .as-icon { width: 28px; height: 28px; }
.as-mode--online .as-mode__ico { background: var(--as-amber); color: var(--as-ink); }
.as-mode__label { font: 600 12px var(--as-font-mono); letter-spacing: .14em; color: var(--as-muted); }
.as-mode--online .as-mode__label { color: var(--as-amber); }
.as-mode h3 { font-size: clamp(26px, 3vw, 34px); margin-top: 28px; letter-spacing: .02em; }
.as-mode--online h3 { color: #fff; }
.as-mode > p { margin-top: 8px; color: var(--as-muted); }
.as-mode--online > p { color: #B9BEDD; }
.as-mode ul { margin-top: 26px; display: grid; gap: 14px; }
.as-mode li { display: flex; align-items: center; gap: 12px; font-weight: 550; font-size: 16.5px; color: var(--as-ink); }
.as-mode--online li { color: #fff; }
.as-mode li .as-check { width: 26px; height: 26px; border-radius: 8px; background: var(--as-navy-050); color: var(--as-navy); display: grid; place-items: center; flex: none; }
.as-mode--online li .as-check { background: rgba(255,255,255,.1); color: var(--as-amber); }
.as-mode li .as-icon { width: 15px; height: 15px; stroke-width: 2.6; }
.as-mode__deco { position: absolute; z-index: -1; right: -30px; bottom: -30px; width: 200px; height: 200px; color: var(--as-surface); }
.as-mode--online .as-mode__deco { color: rgba(255,255,255,.04); }
.as-modes-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--as-line); display: grid; place-items: center; font: 700 13px var(--as-font-mono); color: var(--as-ink); z-index: 2; box-shadow: var(--as-shadow); }
.as-modes__foot { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.as-modes__foot p { color: var(--as-muted); }

/* ---------- 14. About ---------- */
.as-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.as-about__media { position: relative; border-radius: var(--as-r-lg); aspect-ratio: 5 / 4.2; overflow: hidden; background: var(--as-navy-050); border: 1px solid var(--as-line); }
.as-about__media svg.as-about__scene { width: 100%; height: 100%; }
.as-about__media .as-ph { position: absolute; left: 16px; top: 16px; }
.as-about__badge { position: absolute; right: 18px; bottom: 18px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--as-shadow-lg); display: flex; gap: 12px; align-items: center; max-width: 260px; }
.as-about__badge .as-icon { color: var(--as-amber-600); width: 24px; height: 24px; }
.as-about__badge strong { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 15px; }
.as-about__badge small { color: var(--as-muted); font-size: 13px; }
.as-about__body h2 { font-size: clamp(30px, 4vw, 44px); margin-top: 14px; }
.as-about__body > p { margin-top: 18px; color: var(--as-muted); font-size: 17.5px; }
.as-pillars { display: grid; gap: 12px; margin: 28px 0 32px; }
.as-pillar { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--as-r); border: 1px solid var(--as-line); transition: border-color .2s, background .2s; }
.as-pillar:hover { border-color: var(--as-line-strong); background: var(--as-surface); }
.as-pillar__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--as-ink); color: var(--as-amber); display: grid; place-items: center; flex: none; }
.as-pillar strong { font-family: var(--as-font-display); color: var(--as-ink); font-size: 17px; display: block; }
.as-pillar span { color: var(--as-muted); font-size: 15px; }

/* ---------- 15. FAQ ---------- */
.as-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.as-faq-aside { position: sticky; top: 110px; }
.as-faq-aside h2 { font-size: clamp(30px, 4vw, 44px); margin-top: 14px; }
.as-faq-aside p { color: var(--as-muted); margin-top: 16px; }
.as-faq-aside .as-btn { margin-top: 26px; }
.as-faq { display: grid; gap: 12px; }
.as-faq details { background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r); transition: border-color .2s, box-shadow .2s; }
.as-faq details[open] { border-color: var(--as-line-strong); box-shadow: var(--as-shadow); }
.as-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; font-family: var(--as-font-display); font-weight: 600; font-size: 17px; color: var(--as-ink); }
.as-faq summary::-webkit-details-marker { display: none; }
.as-faq__pm { width: 32px; height: 32px; border-radius: 50%; background: var(--as-surface); display: grid; place-items: center; flex: none; transition: transform .3s var(--as-ease), background .2s, color .2s; color: var(--as-ink); }
.as-faq__pm .as-icon { width: 16px; height: 16px; }
.as-faq details[open] .as-faq__pm { transform: rotate(45deg); background: var(--as-amber); }
.as-faq__a { padding: 0 22px 22px; color: var(--as-muted); font-size: 16px; max-width: 640px; }
.as-faq__a a { color: var(--as-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 16. Final CTA ---------- */
.as-final { padding: var(--as-section) 0; }
.as-final__panel {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  background: var(--as-amber); color: var(--as-ink);
  padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.as-final__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255,214,150,.75), transparent 60%), radial-gradient(ellipse 50% 70% at 0% 100%, rgba(201,111,0,.5), transparent 60%); }
.as-final h2 { font-size: clamp(32px, 4.8vw, 56px); letter-spacing: -.035em; line-height: 1.05; }
.as-final p { font-size: clamp(17px, 1.7vw, 20px); margin-top: 18px; color: #3A2A10; max-width: 520px; }
.as-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.as-final .as-btn--dark { box-shadow: 0 10px 24px -10px rgba(13,18,64,.6); }
.as-final .as-btn--ghost { --bd: rgba(13,18,64,.35); }
.as-final .as-btn--ghost:hover { --bd: var(--as-ink); --bg: rgba(255,255,255,.25); }
.as-final__stairs { width: 100%; height: auto; max-width: 420px; justify-self: end; }
.as-final__contact { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-weight: 600; font-size: 15px; }
.as-final__contact a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1.5px solid rgba(13,18,64,.25); padding-bottom: 2px; }
.as-final__contact a:hover { border-color: var(--as-ink); }
.as-final__contact .as-icon { width: 17px; height: 17px; }

/* ---------- 17. Footer ---------- */
.as-footer { background: var(--as-ink); color: #B9BEDD; padding: clamp(56px, 7vw, 88px) 0 28px; font-size: 15px; }
.as-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.as-footer__brand .as-footer__logo { display: inline-flex; background: #fff; border-radius: 12px; padding: 8px 12px; }
.as-footer__brand .as-footer__logo img { height: 40px; width: auto; }
.as-footer__brand p { margin-top: 18px; max-width: 340px; line-height: 1.65; }
.as-footer__contact { margin-top: 22px; display: grid; gap: 10px; }
.as-footer__contact a, .as-footer__contact span { display: flex; gap: 10px; align-items: flex-start; color: #DADDF2; }
.as-footer__contact a:hover { color: #fff; }
.as-footer__contact .as-icon { width: 17px; height: 17px; color: var(--as-amber); margin-top: 3px; }
.as-footer h4 { color: #fff; font-size: 13px; font-family: var(--as-font-mono); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.as-footer__col ul { display: grid; gap: 11px; }
.as-footer__col a { transition: color .15s; }
.as-footer__col a:hover { color: var(--as-amber); }
.as-footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.as-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.as-footer__legal a:hover { color: #fff; }
.as-social { display: flex; gap: 8px; }
.as-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #DADDF2; transition: background .2s, color .2s, border-color .2s; }
.as-social a:hover { background: var(--as-amber); color: var(--as-ink); border-color: var(--as-amber); }
.as-social .as-icon { width: 17px; height: 17px; }
.as-social .as-icon--fill { fill: currentColor; stroke: none; }

/* ---------- Advisor dialog ---------- */
.as-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; padding: 0; border-radius: 22px; box-shadow: 0 40px 80px -20px rgba(13,18,64,.5); color: var(--as-text); }
.as-dialog::backdrop { background: rgba(13,18,64,.55); backdrop-filter: blur(3px); }
.as-dialog[open] { animation: as-pop .3s var(--as-ease); }
@keyframes as-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.as-dialog__head { background: var(--as-ink); color: #C9CDE8; padding: 26px 28px; position: relative; }
.as-dialog__head h2 { color: #fff; font-size: 24px; padding-right: 48px; }
.as-dialog__head p { margin-top: 6px; font-size: 15px; }
.as-dialog__close { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; display: grid; place-items: center; }
.as-form { padding: 24px 28px 28px; display: grid; gap: 14px; }
.as-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.as-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--as-ink); margin-bottom: 6px; }
.as-field input, .as-field select { width: 100%; height: 48px; border: 1px solid var(--as-line-strong); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15.5px; color: var(--as-ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
.as-field input:focus, .as-field select:focus { outline: none; border-color: var(--as-navy); box-shadow: 0 0 0 4px var(--as-navy-050); }
.as-form .as-btn { width: 100%; margin-top: 6px; }
.as-form__note { font-size: 12.5px; color: var(--as-muted); text-align: center; }
.as-form__done { padding: 40px 28px; text-align: center; display: none; }
.as-form__done .as-icon { width: 48px; height: 48px; margin: 0 auto 14px; color: #1C7A4A; }
.as-dialog.is-done .as-form { display: none; }
.as-dialog.is-done .as-form__done { display: block; }

/* ---------- Scroll reveal ---------- */
.as-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--as-ease), transform .7s var(--as-ease); transition-delay: var(--d, 0s); }
.as-reveal.is-in { opacity: 1; transform: none; }


/* =========================================================
   v2 — Proof sections (real logos, videos, Ascent testimonials,
   Google reviews, ASTI success stories)
   ========================================================= */

/* Source attribution chip (used on every proof section) */
.as-source { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--as-muted); }
.as-source .as-icon { width: 16px; height: 16px; color: var(--as-navy); }
.as-source a { color: var(--as-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--as-line-strong); text-underline-offset: 3px; }
.as-source a:hover { text-decoration-color: var(--as-amber); }
.as-source--dark { color: #9AA0C4; margin-top: 28px; }
.as-source--dark .as-icon { color: var(--as-amber); }
.as-source--dark a { color: #fff; text-decoration-color: rgba(255,255,255,.3); }
.as-section--tight { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }

/* 11. Real partner logos — same white-card wall, centred last row */
.as-partners--real { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.as-partners--real .as-partner { flex: 0 0 calc((100% - 60px) / 6); height: 104px; padding: 10px 14px; }
.as-partners--real .as-partner img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; mix-blend-mode: multiply; transition: filter .25s, opacity .25s, transform .25s var(--as-ease); }
.as-partners--real .as-partner:hover img { filter: none; opacity: 1; transform: scale(1.03); }
.as-partners__foot { flex-direction: column; align-items: center; gap: 18px; }

/* 12. Videos */
.as-videos { background: var(--as-ink); color: #C9CDE8; }
.as-videos .as-head h2 { color: #fff; }
.as-videos .as-head p { color: #B9BEDD; }
.as-videos .as-eyebrow { color: var(--as-amber); }
.as-link--light { color: #fff; }
.as-link--light:hover { color: var(--as-amber); }
.as-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 228px; gap: 16px; }
.as-video { position: relative; border-radius: var(--as-r-lg); overflow: hidden; background: #0A0E33; border: 1px solid rgba(255,255,255,.08); isolation: isolate; }
.as-video--featured { grid-column: span 2; grid-row: span 2; }
.as-video__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; display: block; }
.as-video__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--as-ease), opacity .3s; opacity: .9; }
.as-video__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,18,64,0) 35%, rgba(13,18,64,.92) 100%); pointer-events: none; }
.as-video:hover .as-video__btn img { transform: scale(1.04); opacity: 1; }
/* YouTube hqdefault thumbnails of 16:9 videos are letterboxed (black bars) — zoom past the bars */
.as-video--lb .as-video__btn img { transform: scale(1.34); }
.as-video--lb:hover .as-video__btn img { transform: scale(1.38); }
.as-video__play { position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: var(--as-amber); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); transition: transform .3s var(--as-ease); }
.as-video__play svg { width: 24px; height: 24px; fill: var(--as-ink); margin-left: 3px; }
.as-video--featured .as-video__play { width: 76px; height: 76px; }
.as-video--featured .as-video__play svg { width: 30px; height: 30px; }
.as-video__btn:hover .as-video__play, .as-video__btn:focus-visible .as-video__play { transform: translate(-50%, -50%) scale(1.08); }
.as-video__dur { position: absolute; z-index: 2; right: 12px; top: 12px; font: 600 11.5px var(--as-font-mono); color: #fff; background: rgba(13,18,64,.75); padding: 4px 8px; border-radius: 6px; }
.as-video__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 16px 18px; pointer-events: none; }
.as-video__kicker { font: 600 10.5px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-amber); }
.as-video h3 { color: #fff; font-size: 15.5px; margin-top: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-video--featured h3 { -webkit-line-clamp: 3; }
.as-video--featured .as-video__meta { padding: 24px 26px; }
.as-video--featured h3 { font-size: clamp(20px, 2.2vw, 26px); }
.as-video--featured p { color: #C9CDE8; font-size: 15px; margin-top: 8px; max-width: 520px; }

.as-vdialog { border: 0; padding: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
.as-vdialog::backdrop { background: rgba(5,8,30,.86); }
.as-vdialog__frame { width: min(92vw, 1040px); aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.as-vdialog.is-portrait .as-vdialog__frame { width: auto; height: min(86vh, 760px); aspect-ratio: 9 / 16; }
.as-vdialog__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.as-vdialog__close { position: absolute; right: -6px; top: -54px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(13,18,64,.6); color: #fff; display: grid; place-items: center; }

/* 13. Testimonials — additions to the existing card */
.as-tst blockquote { flex: 0 1 auto; }
.as-tst .as-more { margin-top: 10px; align-self: flex-start; }
.as-tst__outcome { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 16px; font-size: 13.5px; font-weight: 650; color: #1C6B45; background: #E7F6EE; border: 1px solid #C5E9D5; padding: 6px 10px; border-radius: 8px; }
.as-tst__outcome .as-icon { width: 15px; height: 15px; }
.as-tst__who { margin-top: auto; }
.as-tst > blockquote, .as-tst > .as-more, .as-tst > .as-tst__outcome { margin-bottom: 0; }
.as-tst > .as-tst__outcome + .as-tst__who, .as-tst > blockquote + .as-tst__who, .as-tst > .as-more + .as-tst__who { margin-top: auto; }
.as-tst__who { padding-top: 20px; }
.as-tst > *:nth-last-child(2) { margin-bottom: 24px; }
.as-more { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 650; color: var(--as-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--as-line-strong); }
.as-more:hover { text-decoration-color: var(--as-amber); }

/* 14. Google reviews */
.as-greviews { display: grid; grid-template-columns: .85fr 1.6fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.as-greviews__summary { position: sticky; top: 110px; }
.as-gbadge { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--as-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--as-ink); background: #fff; border: 1px solid var(--as-line-strong); padding: 7px 12px; border-radius: 999px; }
.as-gbadge .as-stars svg { width: 13px; height: 13px; }
.as-greviews__summary h2 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 18px; }
.as-greviews__summary > p { color: var(--as-muted); margin-top: 16px; font-size: 15.5px; }
.as-grating { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--as-line); border-radius: var(--as-r); background: var(--as-surface); }
.as-grating__val { font-family: var(--as-font-display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--as-ink); letter-spacing: -.03em; }
.as-grating small { display: block; color: var(--as-muted); font-size: 13.5px; margin-top: 6px; }
.as-greviews__ctas { margin-top: 24px; }
.as-stars { display: inline-flex; gap: 2px; color: #FBBC04; }
.as-stars svg { width: 16px; height: 16px; fill: currentColor; }
.as-stars--lg svg { width: 22px; height: 22px; }
.as-stars--half svg:last-child { fill: url(#as-half); }
.as-greviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.as-greview { background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg); padding: 22px; display: flex; flex-direction: column; transition: box-shadow .25s, border-color .25s; }
.as-greview:hover { box-shadow: var(--as-shadow); border-color: var(--as-line-strong); }
.as-greview__top { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.as-greview__top strong { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 15px; }
.as-greview__top small { color: var(--as-muted); font-size: 12.5px; }
.as-greview__top .as-stars { grid-column: 1 / -1; margin-top: 14px; }
.as-greview blockquote { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--as-text); }
.as-greview .as-more { margin-top: 10px; align-self: flex-start; }
.as-avatar--sm { width: 42px; height: 42px; font-size: 14px; }
.as-avatar--sm::after { inset: -2px; }

/* 15. Success stories (compact) */
.as-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.as-story { background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.as-story__role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-bottom: 14px; border-bottom: 1px dashed var(--as-line-strong); }
.as-story__role strong { font-family: var(--as-font-display); font-size: 18px; color: var(--as-ink); }
.as-story__role span { font: 600 12px var(--as-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--as-amber-ink); background: var(--as-amber-050); padding: 4px 8px; border-radius: 6px; }
.as-story p { color: var(--as-text); font-size: 15px; flex: 1; }
.as-story__who { display: flex; gap: 12px; align-items: center; }
.as-story__who strong { display: block; font-family: var(--as-font-display); color: var(--as-ink); font-size: 15px; }
.as-story__who small { color: var(--as-muted); font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .as-paths { grid-template-columns: repeat(2, 1fr); }
  .as-courses { grid-template-columns: repeat(2, 1fr); }
  .as-tst__track { grid-auto-columns: calc((100% - 20px) / 2); }
  .as-support { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .as-support__item:nth-child(3)::before { display: none; }
  .as-partners { grid-template-columns: repeat(4, 1fr); }
  .as-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .as-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .as-hero__grid { grid-template-columns: 1fr; }
  .as-console { max-width: 600px; }
  .as-proof ul { grid-template-columns: repeat(2, 1fr); }
  .as-proof li:nth-child(3) { border-left: 0; padding-left: 0; }
  .as-proof li:nth-child(n+3) { border-top: 1px solid var(--as-line); }
  .as-why { grid-template-columns: repeat(2, 1fr); }
  .as-why__card, .as-why__card--wide { grid-column: span 1; }
  .as-why__card--full { grid-column: 1 / -1; }
  .as-ascent { padding-left: 34px; padding-top: 0; }
  .as-ascent__list { grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
  .as-ascent__rail { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .as-ascent__rail i { width: 100% !important; height: 0; transition: height 1.6s var(--as-ease); }
  .as-ascent.is-in .as-ascent__rail i { height: 100%; }
  .as-step { min-height: 0; border-radius: var(--as-r-lg); border-bottom: 1px solid rgba(255,255,255,.1); margin-left: calc(var(--i) * 0px); display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 20px; }
  .as-step__ico { margin-top: 0; grid-row: span 3; }
  .as-step__n { grid-column: 2; }
  .as-step h3 { padding-top: 4px; grid-column: 2; font-size: 19px; }
  .as-step p { grid-column: 2; }
  .as-step__dot { left: -32px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .as-step--last { border-bottom-color: rgba(240,138,12,.45); }
  .as-projects { grid-template-columns: 1fr; }
  .as-metrics { grid-template-columns: repeat(2, 1fr); }
  .as-metric:nth-child(3) { border-left: 0; }
  .as-metric:nth-child(n+3) { border-top: 1px solid var(--as-line); }
  .as-modes-grid { grid-template-columns: 1fr; }
  .as-modes-vs { display: none; }
  .as-about { grid-template-columns: 1fr; }
  .as-faq-grid { grid-template-columns: 1fr; }
  .as-faq-aside { position: static; }
  .as-final__panel { grid-template-columns: 1fr; }
  .as-final__stairs { justify-self: start; max-width: 300px; order: -1; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .as-announce { font-size: 13px; }
  .as-announce__txt-extra, .as-announce__sep { display: none; }
  .as-hero__ctas .as-btn { flex: 1 1 100%; }
  .as-console__main { margin-left: 0; padding: 16px; }
  .as-journey { grid-template-columns: repeat(2, 1fr); }
  .as-console__row { grid-template-columns: 1fr; }
  .as-float--b { right: -4px; top: -18px; }
  .as-console__title { display: none; }
  .as-console__chip { margin-left: 0; }
  .as-float--a { left: 8px; bottom: 0; }
  .as-console__deco { display: none; }
  .as-proof ul { grid-template-columns: 1fr; }
  .as-proof li, .as-proof li:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--as-line); }
  .as-proof li:first-child { border-top: 0; }
  .as-paths, .as-courses, .as-why { grid-template-columns: 1fr; }
  .as-tst__track { grid-auto-columns: 88%; }
  .as-support { grid-template-columns: 1fr; text-align: left; row-gap: 0; }
  .as-support__item { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; text-align: left; padding: 0 0 26px; }
  .as-support__item::before { top: 64px; left: 31px; width: 2px; height: calc(100% - 64px); background: repeating-linear-gradient(180deg, var(--as-line-strong) 0 6px, transparent 6px 12px); display: block !important; }
  .as-support__item:last-child::before { display: none !important; }
  .as-support__ico { width: 64px; height: 64px; margin: 0; grid-row: span 3; }
  .as-support__n { margin-top: 4px; }
  .as-metrics { grid-template-columns: 1fr 1fr; }
  .as-partners { grid-template-columns: repeat(3, 1fr); }
  .as-partner { height: 72px; }
  .as-project__stage { height: 230px; padding: 18px 18px 0; }
  .as-sec { grid-template-columns: 1fr; }
  .as-sec__radar { display: none; }
  .as-web__api { display: none; }
  .as-form__row { grid-template-columns: 1fr; }
  .as-footer__grid { grid-template-columns: 1fr 1fr; }
  .as-footer__bottom { flex-direction: column; align-items: flex-start; }
  .as-head--row { align-items: flex-start; }
}
@media (max-width: 360px) {
  .as-metrics { grid-template-columns: 1fr; }
  .as-metric { border-left: 0 !important; border-top: 1px solid var(--as-line); }
  .as-metric:first-child { border-top: 0; }
  .as-partners { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 1100px) {
  .as-partners--real .as-partner { flex-basis: calc((100% - 36px) / 4); }
  .as-greviews { grid-template-columns: 1fr; }
  .as-greviews__summary { position: static; }
  .as-video-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .as-video--featured { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 960px) {
  .as-stories { grid-template-columns: repeat(2, 1fr); }
  .as-greviews__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .as-greview { scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .as-partners--real .as-partner { flex-basis: calc((100% - 12px) / 2); height: 84px; }
  .as-video-grid { grid-auto-rows: 190px; gap: 12px; }
  .as-video--featured { grid-row: span 2; }
  .as-video--featured p { display: none; }
  .as-video h3 { font-size: 14px; }
  .as-video__meta { padding: 12px 14px; }
  .as-stories { grid-template-columns: 1fr; }
  .as-greviews__list { grid-auto-columns: 88%; }
  .as-vdialog__close { top: -52px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .as-reveal { opacity: 1; transform: none; }
}

/* ---------- WordPress integration ---------- */
.admin-bar .as-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .as-nav { top: 46px; } }
.as-wpf-bridge { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.as-form__error { font-size: 13.5px; color: #A3261A; background: #FDE6E3; border-radius: 10px; padding: 10px 12px; text-align: center; }
.as-form .as-btn[disabled] { opacity: .7; cursor: progress; }