/* ============================================================================
   Landing page only. Loaded after hub.css, reuses its tokens.
   ========================================================================== */

.hero{
  padding:clamp(56px,9vw,104px) 0 clamp(36px,5vw,56px);
  max-width:820px}
.hero h1{
  font-size:clamp(2.2rem,1.5rem + 3.2vw,3.6rem);line-height:1.06;
  letter-spacing:-.038em;margin:0 0 20px;font-weight:820}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--brand-l),#8b5cf6 55%,#ec4899);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(1.05rem,1rem + .35vw,1.28rem);line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:64ch}
.hero .hero-note{font-size:var(--step--1);color:var(--ink-3);max-width:66ch}

.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-stats .st{
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
  padding:10px 16px;min-width:96px}
.hero-stats .st b{display:block;font-size:1.35rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-stats .st span{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ---------- section headers ---------- */

.sec{margin:0 0 clamp(48px,6vw,76px)}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--border)}
.sec-head h2{margin:0;font-size:var(--step-3);letter-spacing:-.026em;font-weight:750;
  scroll-margin-top:calc(var(--header-h) + 18px)}
.sec-head .count{font-size:var(--step--1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sec-head p{margin:6px 0 0;flex-basis:100%;color:var(--ink-2);max-width:74ch;font-size:var(--step-0)}

/* ---------- concept cards ---------- */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

.card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:20px 20px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2.5px;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:0;transition:opacity .16s ease}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow-3);transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card:focus-visible{border-color:var(--accent)}

.card .num{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.08em}
.card h3{margin:0;font-size:var(--step-1);line-height:1.28;letter-spacing:-.018em;font-weight:700}
.card p{margin:0;font-size:.945rem;line-height:1.55;color:var(--ink-2);flex:1}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.card .tag{
  font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 8px;border-radius:99px;
  background:var(--surface-3);color:var(--ink-3);border:1px solid var(--border)}
.card .tag.v{background:color-mix(in srgb,var(--ok) 12%,transparent);
  color:var(--ok);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.card .tag.p{background:color-mix(in srgb,var(--info) 12%,transparent);
  color:var(--info);border-color:color-mix(in srgb,var(--info) 28%,transparent)}

/* Not-yet-written entries stay visible so the curriculum is legible, but are
   inert rather than dead links. */
.card.pending{opacity:.62;cursor:default;border-style:dashed}
.card.pending:hover{transform:none;box-shadow:none;border-color:var(--border)}
.card.pending::before{display:none}
.card.pending .go{color:var(--ink-3)}

.card .go{display:inline-flex;align-items:center;gap:5px;font-size:var(--step--1);
  font-weight:650;color:var(--accent);margin-top:2px}
.card .go svg{width:13px;height:13px;transition:transform .16s ease}
.card:hover .go svg{transform:translateX(3px)}

/* Accent stripe by track */
.cards.hard .card::before{background:linear-gradient(90deg,var(--bad),transparent)}
.cards.hard .card:hover{border-color:var(--bad)}
.cards.hard .card .go{color:var(--bad)}
.cards.ess .card::before{background:linear-gradient(90deg,var(--info),transparent)}
.cards.ess .card:hover{border-color:var(--info)}
.cards.ess .card .go{color:var(--info)}

/* ---------- how-to-read strip ---------- */

.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  margin:0 0 clamp(48px,6vw,72px);padding:24px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface-2)}
.howto div h3{margin:0 0 5px;font-size:var(--step-0);font-weight:680;display:flex;align-items:center;gap:7px}
.howto div h3 svg{width:15px;height:15px;flex:none;color:var(--accent)}
.howto div p{margin:0;font-size:.925rem;color:var(--ink-2);line-height:1.55}