:root {
  /* neutrals */
  --ae-n-0:#FFFFFF; --ae-n-50:#F7F8FA; --ae-n-100:#EEF0F4; --ae-n-200:#DCE1E8;
  --ae-n-300:#C5CDD8; --ae-n-400:#9AA6B5; --ae-n-500:#6B7788; --ae-n-600:#4A5565;
  --ae-n-700:#334155; --ae-n-800:#1E293B; --ae-n-900:#0F172A; --ae-n-950:#080D18;
  /* accent — steel blue */
  --ae-a-50:#F0F5FA; --ae-a-100:#D9E6F2; --ae-a-200:#B3CDE5; --ae-a-300:#7FA9CF;
  --ae-a-400:#4F86B8; --ae-a-500:#2F6A9E; --ae-a-600:#245682; --ae-a-700:#1B4266;
  --ae-a-800:#142F4A; --ae-a-900:#0C1D30;
  /* semantic */
  --ae-bg:var(--ae-n-0); --ae-bg-subtle:var(--ae-n-50); --ae-bg-muted:var(--ae-n-100);
  --ae-border:var(--ae-n-200); --ae-border-strong:var(--ae-n-300);
  --ae-text:var(--ae-n-900); --ae-text-2:var(--ae-n-600); --ae-text-muted:var(--ae-n-500);
  --ae-text-inv:var(--ae-n-0); --ae-link:var(--ae-a-600); --ae-link-hover:var(--ae-a-700);
  --ae-success:#1F6F54; --ae-success-bg:#E8F5EF; --ae-warning:#8A6A1F; --ae-warning-bg:#F8F1DD;
  --ae-danger:#9B2C2C; --ae-danger-bg:#F8E8E8;
  /* radius */
  --ae-r-sm:0.25rem; --ae-r-md:0.375rem; --ae-r-lg:0.5rem; --ae-r-xl:0.75rem;
  /* shadow */
  --ae-sh-xs:0 1px 2px rgba(15,23,42,.04);
  --ae-sh-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --ae-sh-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --ae-sh-lg:0 12px 32px rgba(15,23,42,.10),0 4px 8px rgba(15,23,42,.04);
  --ae-focus:0 0 0 3px rgba(47,106,158,.35);
  --ae-font:"IBM Plex Sans","Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--ae-font); color:var(--ae-text);
  background:var(--ae-bg); line-height:1.5; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--ae-link); text-decoration:none; }
a:hover { color:var(--ae-link-hover); text-decoration:underline; }
h1,h2,h3,h4 { color:var(--ae-text); letter-spacing:-0.015em; line-height:1.15; margin:0 0 .5rem; }
p { margin:0 0 1rem; }
.container { max-width:1080px; margin:0 auto; padding:0 1.5rem; }
.container-narrow { max-width:620px; margin:0 auto; padding:0 1.5rem; }

/* ---- top bar ---- */
.topbar {
  position:sticky; top:0; z-index:200; background:var(--ae-bg);
  border-bottom:1px solid var(--ae-border); height:60px; display:flex; align-items:center;
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; width:100%; }
.navlinks { display:flex; align-items:center; gap:1.25rem; }
.navlinks a { color:var(--ae-text-2); font-size:.875rem; font-weight:500; }
.navlinks a:hover { color:var(--ae-text); text-decoration:none; }

/* ---- wordmark lockup ---- */
.wordmark { display:inline-flex; align-items:baseline; gap:.4ch; white-space:nowrap; }
.wordmark:hover { text-decoration:none; }
.wordmark .wm-primary { font-size:1.25rem; font-weight:600; letter-spacing:-0.012em; color:var(--ae-n-900); }
.wordmark .wm-credit { font-size:.875rem; font-weight:400; color:var(--ae-text-2); }
.topbar .wordmark .wm-primary { color:var(--ae-n-900); }

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.9375rem; font-weight:500; line-height:1; cursor:pointer;
  padding:.65rem 1.1rem; border-radius:var(--ae-r-md); border:1px solid transparent;
  text-decoration:none; transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:none; box-shadow:var(--ae-focus); }
.btn-primary { background:var(--ae-a-600); color:var(--ae-text-inv); }
.btn-primary:hover { background:var(--ae-a-700); color:var(--ae-text-inv); }
.btn-secondary { background:var(--ae-bg); border-color:var(--ae-border-strong); color:var(--ae-text); }
.btn-secondary:hover { background:var(--ae-bg-subtle); color:var(--ae-text); }
.btn-ghost { background:transparent; color:var(--ae-text-2); }
.btn-ghost:hover { background:var(--ae-bg-subtle); color:var(--ae-text); }
.btn-lg { padding:.85rem 1.5rem; font-size:1rem; }
.btn-sm { padding:.45rem .8rem; font-size:.8125rem; }
.btn-block { width:100%; }
.btn[disabled], .btn.is-disabled { opacity:.4; pointer-events:none; }

/* ---- hero / mati ---- */
.hero { background:linear-gradient(180deg,var(--ae-a-50) 0%, var(--ae-bg) 70%); padding:3.5rem 0 3rem; text-align:center; }
.mati-wrap { display:flex; justify-content:center; margin-bottom:1.75rem; }
.hero h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:600; letter-spacing:-0.025em; max-width:18ch; margin:0 auto 1rem; line-height:1.1; }
.hero .lede { font-size:1.125rem; color:var(--ae-text-2); max-width:56ch; margin:0 auto 2rem; }
.hero-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.hero-note { margin-top:1rem; font-size:.8125rem; color:var(--ae-text-muted); }

/* ---- sections ---- */
.section { padding:3.5rem 0; }
.section-subtle { background:var(--ae-bg-subtle); border-top:1px solid var(--ae-border); border-bottom:1px solid var(--ae-border); }
.section-head { text-align:center; margin-bottom:2.25rem; }
.section-head h2 { font-size:1.75rem; font-weight:600; }
.section-head p { color:var(--ae-text-2); max-width:54ch; margin:.25rem auto 0; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; font-weight:600; color:var(--ae-a-600); margin-bottom:.5rem; }

/* ---- exam grid ---- */
.system-block { margin-bottom:2.5rem; }
.system-block > h3 { font-size:1.25rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:860px){ .grid { grid-template-columns:1fr; } }

.card {
  background:var(--ae-bg); border:1px solid var(--ae-border); border-radius:var(--ae-r-lg);
  box-shadow:var(--ae-sh-sm); padding:1.5rem; display:flex; flex-direction:column;
}
.card h4 { font-size:1.0625rem; font-weight:600; margin-bottom:.25rem; }
.card .summary { color:var(--ae-text-2); font-size:.9375rem; flex:1; margin-bottom:1.25rem; }
.card .card-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.badge { display:inline-flex; align-items:center; font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:var(--ae-r-sm); letter-spacing:.01em; }
.badge-free { background:var(--ae-success-bg); color:var(--ae-success); }
.badge-paid { background:var(--ae-a-50); color:var(--ae-a-700); }
.price { font-size:.9375rem; font-weight:600; color:var(--ae-text); }
.price small { font-weight:400; color:var(--ae-text-muted); }

/* ---- forms ---- */
.panel {
  background:var(--ae-bg); border:1px solid var(--ae-border); border-radius:var(--ae-r-lg);
  box-shadow:var(--ae-sh-sm); padding:2rem;
}
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.35rem; }
.field input, .field select {
  width:100%; height:42px; padding:0 .75rem; font-size:1rem; font-family:inherit;
  color:var(--ae-text); background:var(--ae-bg);
  border:1px solid var(--ae-border-strong); border-radius:var(--ae-r-md);
}
.field input:focus { outline:none; border-color:var(--ae-a-500); box-shadow:var(--ae-focus); }
.form-foot { margin-top:1.25rem; }
.alt-line { margin-top:1rem; font-size:.875rem; color:var(--ae-text-2); text-align:center; }

/* ---- banners ---- */
.banner { padding:.85rem 1rem; border-radius:var(--ae-r-md); font-size:.9375rem; margin-bottom:1.25rem; border:1px solid transparent; }
.banner-error { background:var(--ae-danger-bg); color:var(--ae-danger); border-color:#E7C3C3; }
.banner-success { background:var(--ae-success-bg); color:var(--ae-success); border-color:#C3E3D4; }
.banner-info { background:var(--ae-a-50); color:var(--ae-a-700); border-color:var(--ae-a-100); }
.banner-warning { background:var(--ae-warning-bg); color:var(--ae-warning); border-color:#E8D9A8; }

/* ---- exam runner ---- */
.question { border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:1.25rem 1.5rem; margin-bottom:1.25rem; background:var(--ae-bg); }
.question .qnum { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ae-text-muted); margin-bottom:.4rem; }
.question .qtext { font-weight:600; font-size:1.0625rem; margin-bottom:.9rem; }
.option { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .75rem; border:1px solid var(--ae-border); border-radius:var(--ae-r-md); margin-bottom:.5rem; cursor:pointer; }
.option:hover { background:var(--ae-bg-subtle); }
.option input { margin-top:.2rem; accent-color:var(--ae-a-500); }

/* ---- certificate ---- */
.cert {
  border:2px solid var(--ae-a-600); border-radius:var(--ae-r-lg); padding:2.5rem;
  background:linear-gradient(180deg,var(--ae-a-50),var(--ae-bg)); text-align:center;
}
.cert .cert-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--ae-a-700); font-weight:600; }
.cert .cert-name { font-size:1.75rem; font-weight:600; margin:.75rem 0 .25rem; }
.cert .cert-exam { font-size:1.125rem; color:var(--ae-text); }
.cert .cert-meta { margin-top:1.25rem; color:var(--ae-text-2); font-size:.875rem; }
.cert .cert-seal { width:64px; height:64px; margin:0 auto 1rem; }

/* ---- tables (admin) ---- */
.table-wrap { overflow-x:auto; border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); }
table { width:100%; border-collapse:collapse; font-size:.9375rem; }
th, td { text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--ae-border); }
th { background:var(--ae-bg-subtle); font-weight:600; font-size:.8125rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ae-text-2); }
tr:last-child td { border-bottom:none; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
@media (max-width:700px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat { background:var(--ae-bg); border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:1.25rem; }
.stat .num { font-size:2rem; font-weight:600; color:var(--ae-a-700); }
.stat .lbl { font-size:.8125rem; color:var(--ae-text-2); text-transform:uppercase; letter-spacing:.04em; }

/* ---- profile ---- */
.profile-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:700px){ .profile-grid { grid-template-columns:1fr; } }
.muted { color:var(--ae-text-muted); }
.stack-sm > * + * { margin-top:.5rem; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mt-2 { margin-top:2rem; } .mb-1 { margin-bottom:1rem; } .mb-2 { margin-bottom:2rem; }

/* ---- footer ---- */
.footer { border-top:1px solid var(--ae-border); background:var(--ae-bg-subtle); padding:2.5rem 0; margin-top:3rem; }
.footer .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer .legal { font-size:.8125rem; color:var(--ae-text-muted); }

/* ---- lang switch ---- */
.langswitch { display:inline-flex; align-items:center; gap:.3rem; font-size:.8125rem; color:var(--ae-text-muted); }
.langswitch a { color:var(--ae-text-muted); font-weight:500; }
.langswitch a.on { color:var(--ae-a-600); text-decoration:underline; }
.langswitch .sep { color:var(--ae-border-strong); }

/* ---- grids / layout helpers ---- */
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .grid-3, .grid-2 { grid-template-columns:1fr; } }
.row-left { display:flex; align-items:center; gap:.9rem; }
.mt-1 { margin-top:1rem; }
.hero-figure { margin-top:2.5rem; }
.hero-figure img { width:100%; max-width:960px; height:auto; border:1px solid var(--ae-border); border-radius:var(--ae-r-xl); box-shadow:var(--ae-sh-md); }
.hierarchy { text-align:center; color:var(--ae-text-2); font-size:1rem; margin:0 0 2rem; }
.hierarchy strong { color:var(--ae-a-700); }
.meta-line { font-size:.8125rem; margin-bottom:1rem; }

/* ---- path cards ---- */
.path-card { text-decoration:none; color:inherit; transition:box-shadow .12s ease, border-color .12s ease; }
.path-card:hover { text-decoration:none; box-shadow:var(--ae-sh-md); border-color:var(--ae-border-strong); }
.link-more { color:var(--ae-a-600); font-weight:600; font-size:.875rem; margin-top:auto; }

/* ---- champion featured ---- */
.champion-feature { border:2px solid var(--ae-a-600); border-radius:var(--ae-r-xl); overflow:hidden; margin-bottom:2.5rem; box-shadow:var(--ae-sh-md); }
.champion-band { height:8px; background:linear-gradient(90deg,var(--ae-a-700),var(--ae-a-400)); }
.champion-body { padding:1.75rem; }
.champion-body h3 { font-size:1.5rem; }

/* ---- chips / badges ---- */
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.chip { display:inline-flex; align-items:center; font-size:.75rem; font-weight:500; padding:.2rem .55rem; border-radius:var(--ae-r-sm); background:var(--ae-a-50); color:var(--ae-a-700); border:1px solid var(--ae-a-100); }
.chip-champion { background:var(--ae-a-600); color:#fff; border-color:var(--ae-a-700); letter-spacing:.03em; }

/* ---- avatars ---- */
.avatar { border-radius:50%; object-fit:cover; background:var(--ae-a-50); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.avatar-initials { color:var(--ae-a-700); font-weight:600; border:1px solid var(--ae-a-100); }

/* ---- experts ---- */
.search-row { display:flex; gap:.6rem; margin-bottom:2rem; }
.search-row input { flex:1; height:42px; padding:0 .75rem; font-size:1rem; font-family:inherit; border:1px solid var(--ae-border-strong); border-radius:var(--ae-r-md); background:var(--ae-bg); }
.expert-card { text-decoration:none; color:inherit; }
.expert-card:hover { text-decoration:none; box-shadow:var(--ae-sh-md); }
.profile-head { display:flex; align-items:center; gap:1.25rem; margin-bottom:1rem; }
.b2b-caption { color:var(--ae-text-2); font-style:italic; margin-bottom:1.5rem; }

/* ---- forms extra ---- */
.consent { display:flex; align-items:flex-start; gap:.5rem; font-size:.875rem; color:var(--ae-text-2); margin-bottom:1rem; }
.stack-form .field { margin-bottom:.9rem; }
textarea { width:100%; padding:.6rem .75rem; font-size:1rem; font-family:inherit; color:var(--ae-text); background:var(--ae-bg); border:1px solid var(--ae-border-strong); border-radius:var(--ae-r-md); resize:vertical; }
textarea:focus, .search-row input:focus { outline:none; border-color:var(--ae-a-500); box-shadow:var(--ae-focus); }

/* ---- tabs ---- */
.tabs { display:flex; gap:1.5rem; border-bottom:1px solid var(--ae-border); margin-bottom:1.5rem; }
.tab { padding:.6rem 0; font-weight:500; color:var(--ae-text-2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { text-decoration:none; color:var(--ae-text); }
.tab.on { color:var(--ae-a-700); border-bottom-color:var(--ae-a-600); }

/* ---- community feed ---- */
.composer { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; align-items:flex-end; }
.composer textarea { width:100%; }
.feed { display:flex; flex-direction:column; gap:1rem; }
.post { border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:1.1rem 1.25rem; background:var(--ae-bg); }
.post p { margin:.5rem 0 .75rem; }
.replies { display:flex; flex-direction:column; gap:.4rem; margin:.5rem 0; padding-left:.9rem; border-left:2px solid var(--ae-border); }
.reply { font-size:.9375rem; color:var(--ae-text-2); }
.reply strong { color:var(--ae-text); }
.reply-form { display:flex; gap:.5rem; margin-top:.5rem; }
.reply-form input { flex:1; height:36px; padding:0 .6rem; border:1px solid var(--ae-border-strong); border-radius:var(--ae-r-md); font-family:inherit; }

/* ---- community messages ---- */
.messages-layout { display:grid; grid-template-columns:240px 1fr; gap:1.25rem; }
@media (max-width:760px){ .messages-layout { grid-template-columns:1fr; } }
.member-list { display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:.5rem; max-height:480px; overflow:auto; }
.member { display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem; border-radius:var(--ae-r-md); color:var(--ae-text); font-size:.9375rem; }
.member:hover { background:var(--ae-bg-subtle); text-decoration:none; }
.member.on { background:var(--ae-a-50); color:var(--ae-a-700); }
.thread { border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:1.25rem; display:flex; flex-direction:column; }
.thread-msgs { display:flex; flex-direction:column; gap:.5rem; margin:1rem 0; min-height:160px; }
.bubble { align-self:flex-start; max-width:75%; background:var(--ae-bg-muted); padding:.5rem .75rem; border-radius:var(--ae-r-md); font-size:.9375rem; }
.bubble.mine { align-self:flex-end; background:var(--ae-a-500); color:#fff; }
.msg-form { display:flex; gap:.5rem; margin-top:auto; }
.msg-form input { flex:1; height:40px; padding:0 .7rem; border:1px solid var(--ae-border-strong); border-radius:var(--ae-r-md); font-family:inherit; }
.msg-item { border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); padding:1rem 1.1rem; margin-bottom:.9rem; background:var(--ae-bg); }
.msg-item p { margin:.4rem 0 0; }
.community-card .summary { margin-bottom:1rem; }

/* ---- exam question images ---- */
.qimage { margin:0 0 .9rem; }
.qimage img { width:100%; max-width:560px; height:auto; border:1px solid var(--ae-border); border-radius:var(--ae-r-md); background:var(--ae-bg); display:block; }

/* ---- OAuth buttons ---- */
.oauth-list { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem; }
.oauth-btn { gap:.6rem; }
.oauth-ic { width:18px; height:18px; flex:0 0 auto; }
.oauth-divider { display:flex; align-items:center; text-align:center; color:var(--ae-text-muted); font-size:.8125rem; margin:0 0 1.1rem; }
.oauth-divider::before, .oauth-divider::after { content:""; flex:1; height:1px; background:var(--ae-border); }
.oauth-divider span { padding:0 .75rem; }

/* ---- brand asset bands / media ---- */
.brand-band { margin:0 0 2rem; }
.brand-band img { width:100%; height:auto; border:1px solid var(--ae-border); border-radius:var(--ae-r-lg); box-shadow:var(--ae-sh-sm); display:block; }
.champion-feature .featured-band-img { width:100%; height:auto; display:block; }
.cert-badge { width:96px; height:96px; margin:0 auto 1rem; display:block; }

/* =====================================================================
   v1 landing — icons, dark hero, live certificate, ladder, practice question
   Palette stays inside brand tokens (steel blue + neutrals). Tier tints:
   beginner = success green, power = accent 400, builder = accent 600, champion = gold.
   ===================================================================== */
:root { --ae-gold:#B88A2E; --ae-gold-2:#E2C27A; --ae-gold-bg:#FAF3E2; }
.ic { display:inline-block; vertical-align:-0.2em; flex:0 0 auto; }
.tier-beginner { --tc:#1F6F54; --tc-bg:#E8F5EF; }
.tier-power    { --tc:#2F6A9E; --tc-bg:#E7F0F8; }
.tier-builder  { --tc:#1B4266; --tc-bg:#DFE8F2; }
.tier-champion { --tc:#8A6420; --tc-bg:var(--ae-gold-bg); }

/* header over the dark hero */
.home .topbar { background:rgba(8,13,24,.82); border-bottom-color:rgba(255,255,255,.08); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); }
.home .topbar .wordmark .wm-primary { color:#fff; }
.home .topbar .wordmark .wm-credit, .home .navlinks a, .home .langswitch a { color:#AFC3D9; }
.home .navlinks a:hover { color:#fff; }
.home .langswitch a.on { color:#fff; }
.home .navlinks .btn-primary { background:#fff; color:var(--ae-n-900); }
.home .navlinks .btn-primary:hover { background:var(--ae-a-50); color:var(--ae-n-900); }
.home .navlinks .btn-secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.home .footer { margin-top:0; }

/* hero */
.hx { position:relative; overflow:hidden; color:#E6EEF7; background:radial-gradient(1200px 600px at 85% -10%, #1B4266 0%, rgba(27,66,102,0) 60%), linear-gradient(180deg,#080D18 0%, #0C1D30 100%); padding:4.5rem 0 5rem; }
.hx-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(127,169,207,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,169,207,.07) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 80%); }
.hx-glow { position:absolute; width:520px; height:520px; right:-120px; top:40px; background:radial-gradient(circle, rgba(79,134,184,.35), transparent 65%); filter:blur(20px); animation:hxfloat 12s ease-in-out infinite alternate; }
@keyframes hxfloat { to { transform:translate(-60px,40px); } }
.hx-inner { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center; }
@media (max-width:920px){ .hx-inner { grid-template-columns:1fr; gap:2.5rem; } .hx { padding:3rem 0 3.5rem; } }
.hx-mark { display:flex; align-items:center; gap:.9rem; margin-bottom:1.4rem; }
.mati-live { width:64px; height:auto; filter:drop-shadow(0 4px 18px rgba(79,134,184,.45)); }
.mati-pupil { transition:transform .25s ease-out; }
.hx-eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:600; color:#7FA9CF; }
.hx h1 { color:#fff; font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:600; letter-spacing:-.03em; line-height:1.05; max-width:16ch; margin-bottom:1.25rem; }
.hx-lede { font-size:1.1875rem; color:#AFC3D9; max-width:46ch; margin-bottom:2rem; }
.hx-cta { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem; }
.btn-hx { background:#fff; color:var(--ae-n-900); box-shadow:0 8px 30px rgba(79,134,184,.35); }
.btn-hx:hover { background:var(--ae-a-50); color:var(--ae-n-900); transform:translateY(-1px); }
.btn-hx-ghost { background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-hx-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.btn { transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.hx-trust { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.875rem; color:#AFC3D9; }
.hx-trust li { display:inline-flex; align-items:center; gap:.45rem; }
.hx-trust .ic { color:#7FA9CF; }

/* live certificate preview */
.certp { display:flex; flex-direction:column; gap:1rem; }
.certp-card { position:relative; overflow:hidden; border-radius:14px; padding:1.75rem 1.75rem 1.4rem; color:var(--ae-n-900);
  background:linear-gradient(160deg,#FFFFFF 0%, #F0F5FA 100%); border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(127,169,207,.25); transition:transform .2s ease-out; transform-style:preserve-3d; text-align:center; }
.certp-card::before { content:""; position:absolute; inset:10px; border:1px solid var(--ae-a-200); border-radius:9px; pointer-events:none; }
.certp-sheen { position:absolute; inset:0; pointer-events:none; background:radial-gradient(400px circle at var(--sx,30%) var(--sy,20%), rgba(255,255,255,.75), transparent 45%); mix-blend-mode:soft-light; }
.certp-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; position:relative; }
.certp-wm { font-weight:600; font-size:.9375rem; letter-spacing:-.01em; } .certp-wm span { font-weight:400; color:var(--ae-text-2); font-size:.8125rem; }
.certp-sample { font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ae-text-muted); border:1px dashed var(--ae-border-strong); padding:.15rem .45rem; border-radius:4px; }
.certp-seal { width:68px; height:68px; margin:0 auto .9rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--tc); background:var(--tc-bg); box-shadow:0 0 0 6px #fff, 0 0 0 7px var(--tc); transition:all .3s ease; }
.certp-seal.tier-champion { background:linear-gradient(135deg,#FAF3E2,#E2C27A); }
.certp-eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.6875rem; font-weight:600; color:var(--ae-a-700); }
.certp-name { font-size:1.65rem; font-weight:600; letter-spacing:-.02em; margin:.5rem 0 .2rem; color:var(--ae-n-400); min-height:2.1rem; word-break:break-word; }
.certp-name.filled { color:var(--ae-n-900); }
.certp-exam { color:var(--ae-text-2); font-size:.9375rem; }
.certp-exam strong { color:var(--ae-n-900); }
.certp-foot { display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem 1rem; margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--ae-border); font-size:.75rem; color:var(--ae-text-2); }
.certp-foot span { display:inline-flex; align-items:center; gap:.3rem; } .certp-foot .ic { color:var(--ae-a-500); }
.certp-controls { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1rem; }
.certp-label { display:flex; align-items:center; gap:.4rem; font-size:.8125rem; color:#AFC3D9; margin-bottom:.5rem; }
.certp-controls input { width:100%; height:42px; padding:0 .8rem; font:inherit; color:#fff; background:rgba(8,13,24,.6); border:1px solid rgba(127,169,207,.3); border-radius:8px; }
.certp-controls input::placeholder { color:#6B7F96; }
.certp-controls input:focus { outline:none; border-color:#7FA9CF; box-shadow:0 0 0 3px rgba(127,169,207,.25); }
.certp-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.6rem; }
.certp-tiers button { display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.5rem .25rem; font:inherit; font-size:.6875rem; color:#AFC3D9; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:8px; cursor:pointer; transition:all .15s ease; }
.certp-tiers button:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.certp-tiers button.on { color:#fff; background:rgba(79,134,184,.25); border-color:#7FA9CF; }
.certp-tiers button:focus-visible, .lad-tab:focus-visible, .quiz-opt:focus-visible { outline:none; box-shadow:var(--ae-focus); }

/* fact strip */
.strip { background:#fff; border-bottom:1px solid var(--ae-border); }
.strip-inner { display:grid; grid-template-columns:repeat(4,1fr); }
.strip-inner > div { padding:1.4rem 1rem; display:flex; flex-direction:column; align-items:center; text-align:center; border-right:1px solid var(--ae-border); }
.strip-inner > div:last-child { border-right:none; }
.strip strong { font-size:1.75rem; font-weight:600; letter-spacing:-.02em; color:var(--ae-a-700); line-height:1.1; }
.strip span { font-size:.8125rem; color:var(--ae-text-2); }
@media (max-width:700px){ .strip-inner { grid-template-columns:repeat(2,1fr); } .strip-inner > div:nth-child(2) { border-right:none; } .strip-inner > div:nth-child(-n+2) { border-bottom:1px solid var(--ae-border); } }

/* ladder */
.ladder { max-width:920px; margin:0 auto; }
.lad-track { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:1.75rem; }
.lad-line { position:absolute; top:28px; left:16.67%; right:16.67%; height:2px; background:var(--ae-border); }
.lad-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,#1F6F54,#2F6A9E,#B88A2E); transition:width .45s ease; }
.lad-tab { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; background:none; border:0; padding:0 .25rem; font:inherit; cursor:pointer; color:var(--ae-text-2); }
.lad-dot { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid var(--ae-border-strong); color:var(--ae-n-500); transition:all .25s ease; }
.lad-tab:hover .lad-dot { border-color:var(--ae-a-400); color:var(--ae-a-600); }
.lad-tab.past .lad-dot { border-color:var(--ae-a-400); color:var(--ae-a-600); background:var(--ae-a-50); }
.lad-tab.on .lad-dot { background:var(--ae-a-600); border-color:var(--ae-a-600); color:#fff; transform:scale(1.08); box-shadow:0 8px 24px rgba(36,86,130,.35); }
.lad-tab[data-tier="champion"].on .lad-dot { background:linear-gradient(135deg,#B88A2E,#8A6420); border-color:#8A6420; box-shadow:0 8px 24px rgba(184,138,46,.4); }
.lad-name { font-weight:600; font-size:.9375rem; color:var(--ae-text); }
.lad-price { font-size:.8125rem; color:var(--ae-text-muted); }
.lad-panel { display:grid; grid-template-columns:1.4fr 1fr; gap:1.5rem; background:#fff; border:1px solid var(--ae-border); border-radius:14px; box-shadow:var(--ae-sh-md); padding:1.75rem; border-top:3px solid var(--tc); animation:ladin .3s ease; }
.lad-panel[hidden] { display:none; }
@keyframes ladin { from { opacity:0; transform:translateY(6px); } }
@media (max-width:760px){ .lad-panel { grid-template-columns:1fr; } .lad-name { font-size:.8125rem; } .lad-dot { width:46px; height:46px; } .lad-line { top:23px; } }
.lad-panel-main { display:flex; gap:1.1rem; align-items:flex-start; }
.lad-badge { width:64px; height:64px; flex:0 0 auto; border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--tc); background:var(--tc-bg); }
.lad-panel h3 { font-size:1.5rem; font-weight:600; }
.lad-summary { color:var(--ae-text-2); }
.lad-proves { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.lad-proves li { display:flex; gap:.5rem; align-items:flex-start; font-size:.9375rem; } .lad-proves .ic { color:var(--tc); margin-top:.2rem; }
.lad-facts { display:flex; flex-direction:column; gap:.55rem; background:var(--ae-bg-subtle); border-radius:10px; padding:1.1rem; }
.fact { display:flex; align-items:center; gap:.6rem; font-size:.9375rem; color:var(--ae-text-2); } .fact .ic { color:var(--ae-a-500); } .fact strong { color:var(--ae-text); }
.lad-cta { margin-top:auto; padding-top:.8rem; border-top:1px solid var(--ae-border); display:flex; flex-direction:column; gap:.6rem; }
.lad-cta-price { font-weight:600; }

/* practice question */
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
@media (max-width:860px){ .split { grid-template-columns:1fr; gap:2rem; } }
.split-copy h2 { font-size:1.75rem; font-weight:600; }
.muted-2 { color:var(--ae-text-2); }
.ticks { list-style:none; padding:0; margin:1.25rem 0 0; display:flex; flex-direction:column; gap:.55rem; }
.ticks li { display:flex; align-items:center; gap:.55rem; } .ticks .ic { color:var(--ae-success); }
.quiz { background:#fff; border:1px solid var(--ae-border); border-radius:14px; box-shadow:var(--ae-sh-lg); padding:1.5rem; }
.quiz-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
.quiz-head .chip { gap:.35rem; } .quiz-time { display:inline-flex; align-items:center; gap:.3rem; font-size:.8125rem; }
.quiz-q { font-weight:600; font-size:1.0625rem; }
.quiz-opts { display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt { display:flex; align-items:center; gap:.75rem; text-align:left; width:100%; font:inherit; font-size:.9375rem; color:var(--ae-text); background:#fff; border:1px solid var(--ae-border-strong); border-radius:10px; padding:.7rem .85rem; cursor:pointer; transition:all .15s ease; }
.quiz-opt:hover:not(:disabled) { border-color:var(--ae-a-400); background:var(--ae-a-50); transform:translateX(2px); }
.quiz-key { width:28px; height:28px; flex:0 0 auto; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8125rem; background:var(--ae-bg-muted); color:var(--ae-text-2); }
.quiz-txt { flex:1; } .quiz-mark { width:20px; height:20px; flex:0 0 auto; }
.quiz-opt:disabled { cursor:default; opacity:.55; }
.quiz-opt.right { opacity:1; border-color:var(--ae-success); background:var(--ae-success-bg); }
.quiz-opt.right .quiz-key { background:var(--ae-success); color:#fff; }
.quiz-opt.wrong { opacity:1; border-color:#D9A3A3; background:var(--ae-danger-bg); }
.quiz-opt.wrong .quiz-key { background:var(--ae-danger); color:#fff; }
.quiz-fb { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--ae-border); animation:ladin .3s ease; }
.quiz-fb p { font-size:.9375rem; color:var(--ae-text-2); }
.quiz.ok .quiz-fb-no, .quiz.no .quiz-fb-ok { display:none; }
.quiz.ok .quiz-fb-ok strong { color:var(--ae-success); } .quiz.no .quiz-fb-no strong { color:var(--ae-danger); }

/* icon cards & exam cards */
.icard-ic, .tier-ic { display:inline-flex; align-items:center; justify-content:center; border-radius:12px; }
.icard-ic { width:46px; height:46px; margin-bottom:1rem; color:var(--ae-a-600); background:var(--ae-a-50); border:1px solid var(--ae-a-100); transition:all .2s ease; }
.icard:hover .icard-ic { background:var(--ae-a-600); color:#fff; border-color:var(--ae-a-600); }
.link-more { display:inline-flex; align-items:center; gap:.3rem; } .icard:hover .link-more .ic { transform:translateX(3px); } .link-more .ic { transition:transform .15s ease; }
.path-card, .exam-card { transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.path-card:hover, .exam-card:hover { transform:translateY(-3px); }
.exam-card { border-top:3px solid var(--tc); }
.exam-card:hover { box-shadow:var(--ae-sh-md); }
.tier-ic { width:34px; height:34px; color:var(--tc); background:var(--tc-bg); border-radius:9px; }
.exam-card h4 { margin:0; }
.meta-icons { display:flex; flex-wrap:wrap; gap:.35rem .9rem; } .meta-icons span { display:inline-flex; align-items:center; gap:.3rem; }
.chip-champion { gap:.35rem; background:linear-gradient(135deg,#B88A2E,#8A6420); border-color:#8A6420; }
.champion-feature { border-color:#B88A2E; display:grid; grid-template-columns:120px 1fr; }
.champion-band-v1 { display:flex; align-items:center; justify-content:center; color:#FAF3E2; background:radial-gradient(circle at 30% 20%, #E2C27A, #8A6420 75%); }
.champion-feature .btn-primary { background:linear-gradient(135deg,#B88A2E,#8A6420); }
.champion-feature .btn-primary:hover { background:#7A5818; }
@media (max-width:640px){ .champion-feature { grid-template-columns:1fr; } .champion-band-v1 { height:72px; } }

/* steps */
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; counter-reset:s; position:relative; }
.steps::before { content:""; position:absolute; top:28px; left:16%; right:16%; border-top:2px dashed var(--ae-border-strong); }
@media (max-width:860px){ .steps { grid-template-columns:1fr; } .steps::before { display:none; } }
.step { text-align:center; position:relative; }
.step-ic { position:relative; width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--ae-a-600); border:2px solid var(--ae-a-200); }
.step-n { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--ae-a-600); color:#fff; font-size:.75rem; font-weight:600; display:flex; align-items:center; justify-content:center; }
.step h4 { font-size:1.0625rem; font-weight:600; } .step p { color:var(--ae-text-2); font-size:.9375rem; max-width:32ch; margin:0 auto; }

/* final band */
.final { background:linear-gradient(120deg,#0C1D30,#1B4266); color:#fff; padding:3.5rem 0; }
.final-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.final h2 { color:#fff; font-size:1.75rem; font-weight:600; max-width:24ch; } .final p { color:#AFC3D9; margin:0; }

html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:60px; }

/* reveal */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } .hx-glow { animation:none; } * { transition-duration:0s !important; } }
@media (max-width:560px){ .navlinks { gap:.75rem; } .navlinks > a:not(.btn) { display:none; } .lad-panel-main { flex-direction:column; } .lad-badge { width:52px; height:52px; } .lad-panel { padding:1.25rem; } .certp-tiers span { display:none; } .certp-tiers button { padding:.6rem .25rem; } }