/* =====================================================================
   EXAM HUB — HUB PAGE (index.html)
   A bright landing page: soft turquoise shapes, the paper and the new
   tools in the hero, stream cards with the student's own progress,
   features, levels, teachers and the term timeline.
   ===================================================================== */
.hub-links{display:flex;gap:.25rem;margin-right:.5rem}
.hub-links a{padding:.5rem .8rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:800;color:var(--fg-2);text-decoration:none}
.hub-links a:hover{background:var(--teal-tint);color:var(--teal-ink)}
@media (max-width:980px){.hub-links{display:none}}

.hub-in{width:100%;max-width:calc(var(--page-max) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.hub-sec{padding-block:clamp(2.5rem,1.8rem + 3vw,4.5rem)}
.hub-soft{background:linear-gradient(180deg,var(--bg-soft),#fff)}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(1.25rem,1rem + 1vw,2rem);max-width:56rem}
.sec-head h2{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#FFFFFF 0%,#F3FCFB 45%,#E2F7F4 100%);border-bottom:1px solid var(--line)}
.hero-shapes{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-in{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center;padding-block:clamp(2.25rem,1.5rem + 4vw,5rem) clamp(2.5rem,1.5rem + 4vw,5rem);width:100%;max-width:calc(var(--page-max) + 2*var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
@media (min-width:1050px){.hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero-copy{display:grid;gap:1.2rem;justify-items:start;animation:eh-rise .7s cubic-bezier(.2,.8,.2,1) both}
.hero h1{font-size:clamp(2.6rem,1.6rem + 4.2vw,5.2rem);color:var(--ink)}
.hero h1 em{display:block;color:var(--teal-deep)}
.hero .lede{font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.hero .ar.always{max-width:56ch;justify-self:stretch;font-size:1.05rem}
@media (min-width:1050px){.hero .ar.always{justify-self:start}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.3rem}
.hero-note{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:700;color:var(--fg-3)}
.hero-note .i{color:var(--ok)}

/* The illustration: the paper, a gap, the dashboard ring, stars, the medal */
.hero-art{position:relative;min-height:28rem;margin-bottom:4.5rem;display:grid;place-items:center;animation:eh-rise .8s .1s cubic-bezier(.2,.8,.2,1) both}
.ha-paper{position:relative;width:min(100%,27rem);margin:0;padding:1.6rem 1.6rem 1.4rem;border-radius:22px;background:#fff;transform:rotate(-2deg);box-shadow:0 0 0 1px var(--line),0 40px 70px -36px rgba(0,70,80,.55),0 10px 22px -12px rgba(0,70,80,.25)}
.ha-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;white-space:nowrap;font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.ha-top b{padding:.25rem .7rem;border-radius:999px;color:var(--gels-ink);background:linear-gradient(180deg,var(--gels-t),var(--gels-b));box-shadow:0 2px 0 var(--gels-lip);letter-spacing:.06em}
.ha-title{margin:.8rem 0 1.1rem;font-size:1.7rem;font-weight:900;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.ha-title em{display:block;font-style:normal;color:var(--teal-deep)}
.ha-parts{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ha-parts li{display:grid;grid-template-columns:3.6rem 6.2rem 1fr 1.8rem;align-items:center;gap:.6rem;font-size:.88rem}
.ha-parts span{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.ha-parts b{font-weight:800;color:var(--fg)}
.ha-parts i{height:.6rem;border-radius:999px;background:linear-gradient(90deg,var(--gel-t),var(--gel-b)) 0 0/var(--w) 100% no-repeat,var(--bg-sunken)}
.ha-parts em{font-style:normal;font-weight:900;color:var(--ink);text-align:right}
.ha-gap{position:absolute;left:-2.5rem;bottom:-4.4rem;max-width:23rem;padding:.75rem 1rem;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow-3);font-family:var(--font-read);font-size:1rem;line-height:2.1;color:var(--paper-fg);transform:rotate(1.5deg)}
.ha-gap .mz{display:inline-flex;align-items:center;gap:.2rem;padding:.15rem;border-radius:11px;background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--font-ui);font-size:.8rem;font-weight:700;line-height:1.2;vertical-align:middle}
.ha-gap .mz-n{width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b))}
.ha-gap .mz-o{padding:.25rem .5rem;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 0 var(--gelw-lip);color:var(--fg-2)}
.ha-gap .mz-o i{font-style:normal;font-weight:900;color:var(--teal-ink)}
.ha-gap .mz-o.is-on{color:var(--gelg-ink);background:linear-gradient(180deg,var(--gelg-t),var(--gelg-b));box-shadow:0 2px 0 var(--gelg-lip)}
.ha-gap .mz-o.is-on i{color:var(--gelg-ink)}
.ha-chip,.ha-medal{position:absolute;display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow-3)}
.ha-chip b,.ha-medal b{display:block;font-weight:900;color:var(--ink);line-height:1.2}
.ha-chip span span,.ha-medal span span{display:block;font-size:.8rem;color:var(--fg-3)}
.ha-ring{right:0;top:1.2rem;transform:rotate(2deg);animation:ha-float 6s ease-in-out infinite}
.ha-stars{right:-.5rem;top:47%;transform:rotate(-3deg);animation:ha-float 7s .6s ease-in-out infinite}
.ha-stars .stars svg{width:1.4rem;height:1.4rem}
.stars .on{fill:#FFC43D;stroke:#D99A00}
.ha-medal{right:8%;bottom:-.5rem;background:linear-gradient(160deg,#FFF9E6,#FFEDB8);box-shadow:0 0 0 1px #F5DE9E,var(--shadow-3);animation:ha-float 8s 1.2s ease-in-out infinite}
@keyframes ha-float{50%{translate:0 -8px}}
@media (max-width:640px){
  .hero-art{min-height:0;margin-bottom:0;gap:1rem;padding-top:3.5rem}
  .ha-gap{position:relative;left:auto;bottom:auto;max-width:none;font-size:.92rem;transform:none}
  .ha-ring{top:0;right:0}
  .ha-stars,.ha-medal{display:none}
  .ha-parts li{grid-template-columns:3.3rem 5.4rem 1fr 1.6rem;font-size:.82rem}
}

/* ---------- Streams ---------- */
.stream-grid{display:grid;gap:1.5rem}
@media (min-width:900px){.stream-grid{grid-template-columns:1fr 1fr}}
.stream{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-2);text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.stream:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.stream-top{
  position:relative;overflow:hidden;isolation:isolate;display:grid;gap:.9rem;padding:1.5rem 1.6rem 1.4rem;color:var(--gel-ink);
  background:radial-gradient(22rem 12rem at 100% 0%,rgba(255,255,255,.45),transparent 60%),linear-gradient(160deg,#7AEDE3 0%,#18BDB3 55%,#0A948C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.stream-top::after{content:"";position:absolute;z-index:-1;right:-3rem;bottom:-6rem;width:14rem;height:14rem;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:0 0 0 2.5rem rgba(255,255,255,.07)}
.stream-top::before{content:"";position:absolute;z-index:-1;right:6rem;top:-4rem;width:8rem;height:8rem;border-radius:50%;background:rgba(255,255,255,.22)}
.who{display:grid;gap:.3rem;justify-items:start}
.who span:first-child{font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#05434A}
.who b{font-size:clamp(2rem,1.6rem + 1.4vw,2.7rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:#03282D}
.who .cefr{background:#fff;box-shadow:0 2px 0 rgba(3,40,45,.25)}
.stream-themes{font-size:1.15rem;font-weight:800;color:#03282D}
.stream-body{display:flex;flex-direction:column;gap:1.1rem;padding:1.35rem 1.6rem 1.5rem;flex:1}
.facts{display:grid;margin:0}
.facts>div{display:grid;grid-template-columns:6.2rem 1fr;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.facts>div:first-child{border-top:0}
.facts dt{font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);padding-top:.15rem}
.facts dd{margin:0;color:var(--fg-2);line-height:1.5}
.stream-go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:auto}
.stream-prog{font-size:var(--fs-sm);color:var(--fg-3);font-weight:700}
.stream.has-progress .stream-prog{color:var(--fg)}
.stream-prog b{color:var(--teal-ink)}
.sp-cert{color:var(--sun-ink)!important}

/* ---------- Features ---------- */
.features{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.feature{display:grid;gap:.55rem;align-content:start;padding:1.3rem 1.35rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 3px 0 var(--gelw-lip)}
.feature b{font-size:1.12rem;font-weight:900;color:var(--ink)}
.feature p{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.f-ic{width:2.8rem;height:2.8rem;border-radius:.95rem;display:grid;place-items:center;color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--gel-lip)}
.f-ic .i{width:1.35rem;height:1.35rem}

/* ---------- Levels ---------- */
.levels{display:grid;gap:1rem}
@media (min-width:860px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{position:relative;display:grid;gap:.6rem;align-content:start;text-align:left;padding:1.4rem 1.45rem 1.5rem;border-radius:var(--r-xl);background:#fff;box-shadow:0 0 0 1px var(--line),0 3px 0 var(--gelw-lip);transition:transform .2s,box-shadow .2s}
.level:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--teal),0 3px 0 var(--gelw-lip)}
.level[aria-pressed="true"]{background:linear-gradient(160deg,#fff 40%,var(--teal-tint));box-shadow:0 0 0 2.5px var(--teal),0 4px 0 var(--gel-lip),var(--shadow-2)}
.level .lv-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.level .lv-name{font-size:var(--fs-lg);font-weight:900;color:var(--ink)}
.level .lv-ar{font-family:var(--font-ar);font-size:1rem;color:var(--fg-3)}
.level .tick{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:transparent;transition:all .2s}
.level[aria-pressed="true"] .tick{color:var(--gel-ink);background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:0 2px 0 var(--gel-lip)}
.level .tick .i{width:1rem;height:1rem;stroke-width:2.8}
.level ul{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:var(--fs-sm);color:var(--fg-2)}
.level li{display:flex;gap:.5rem;align-items:flex-start;line-height:1.45}
.level li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--teal);flex:none;margin-top:.5em}

/* ---------- Teachers ---------- */
.teach{display:grid;gap:2rem;padding:clamp(1.5rem,1rem + 2.5vw,3rem);border-radius:var(--r-xl);background:linear-gradient(140deg,#fff 30%,var(--teal-tint));border:1px solid var(--line);box-shadow:var(--shadow-2)}
@media (min-width:980px){.teach{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.teach h2{color:var(--ink)}
.teach-list{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.teach-item{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;align-items:start}
.teach-item .f-ic{grid-row:span 2;width:2.5rem;height:2.5rem}
.teach-item b{font-size:var(--fs-base);font-weight:900;color:var(--ink)}
.teach-item span{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5}

/* ---------- Terms timeline ---------- */
.terms{display:grid;gap:0;position:relative;list-style:none;margin:0;padding:0}
.term{position:relative;display:grid;gap:.4rem;align-content:start;justify-items:start;padding:0 0 1.75rem 2.4rem}
.term::before{content:"";position:absolute;left:.6rem;top:1.5rem;bottom:0;width:3px;border-radius:3px;background:var(--line)}
.term:last-child::before{display:none}
.term .node{position:absolute;left:0;top:.15rem;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2.5px var(--line-strong)}
.term.live .node{background:linear-gradient(180deg,var(--gel-t),var(--gel-b));box-shadow:0 0 0 5px var(--teal-soft);animation:eh-pulse 2s ease infinite}
.term.archive .node{background:var(--fg-3);box-shadow:none}
.term .yr{font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.term b{font-size:1.2rem;font-weight:900;color:var(--ink)}
.term p{font-size:var(--fs-sm);color:var(--fg-2)}
.term a{font-weight:800;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:.35rem}
@media (min-width:900px){
  .terms{grid-template-columns:repeat(4,1fr);gap:1.25rem}
  .term{padding:2.4rem 1rem 0 0}
  .term::before{left:1.6rem;right:-1.25rem;top:.55rem;bottom:auto;width:auto;height:3px}
  .term:last-child::before{display:none}
  .term .node{top:0}
}
.status{display:inline-flex;align-items:center;gap:.35rem;width:fit-content;padding:.18rem .6rem;border-radius:var(--r-pill);font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.status.live{background:var(--teal-soft);color:var(--teal-ink)}
.status.archive{background:var(--bg-sunken);color:var(--fg-3)}
.status.soon{box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--fg-3)}