/* ════════════════════════════════════════════════════════════════════
   REKRUTEN-SCHMIEDE — Konzept C
   Helle Skin auf Memorium-Komponenten-DNA.
   Palette: Sand (bg) · Weiß (cards) · Graphit (ink/action) · Olivgrün (accent)
   Struktur, Elevation, Pills, weiche 3D-Buttons, Mono-Meta → von Memorium.
   ════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Nunito";
  src:url("assets/fonts/Nunito-Medium.ttf") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* ─────────── SURFACES (light, warm sand → white) ─────────── */
  --page:           oklch(95.5% 0.012 92);   /* sand viewport bg */
  --surface:        oklch(99.2% 0.003 92);   /* white cards */
  --surface-raised: oklch(97.6% 0.008 92);   /* hovered / nested */
  --surface-sunk:   oklch(94.2% 0.013 92);   /* recessed inputs, tracks */
  --surface-ink:    oklch(26% 0.012 250);    /* graphite panel (header/footer) */
  --surface-ink-2:  oklch(31% 0.013 250);

  /* ─────────── BORDERS ─────────── */
  --border:         oklch(89% 0.012 92);
  --border-strong:  oklch(82% 0.016 90);
  --border-divider: oklch(88% 0.012 92 / 0.7);
  --border-ink:     oklch(40% 0.013 250);

  /* ─────────── INK (graphite text) ─────────── */
  --ink:            oklch(27% 0.012 250);    /* headlines, key data */
  --ink-2:          oklch(42% 0.012 250);    /* body */
  --ink-3:          oklch(55% 0.012 250);    /* muted / caption */
  --ink-4:          oklch(68% 0.012 250);    /* disabled */
  --on-ink:         oklch(96% 0.006 92);     /* text on graphite */
  --on-ink-2:       oklch(80% 0.012 92);

  /* ─────────── OLIVE (primary accent / action) ─────────── */
  --olive:          oklch(52% 0.092 128);
  --olive-deep:     oklch(44% 0.088 128);    /* hover / pressed */
  --olive-bright:   oklch(60% 0.10 128);
  --olive-soft:     oklch(52% 0.092 128 / 0.12);
  --olive-line:     oklch(52% 0.092 128 / 0.35);
  --on-olive:       oklch(98% 0.01 120);

  /* ─────────── CATEGORY ACCENTS (muted, tactical) ─────────── */
  --c-olive:        oklch(52% 0.092 128);    /* Academy / Drill */
  --c-olive-bg:     oklch(52% 0.092 128 / 0.10);
  --c-steel:        oklch(50% 0.055 245);    /* Plan / Theorie */
  --c-steel-bg:     oklch(50% 0.055 245 / 0.10);
  --c-clay:         oklch(54% 0.10 48);      /* Shop / Ausrüstung */
  --c-clay-bg:      oklch(54% 0.10 48 / 0.10);
  --c-sand:         oklch(50% 0.045 85);     /* Checklisten / Downloads */
  --c-sand-bg:      oklch(58% 0.06 85 / 0.12);
  --c-slate:        oklch(46% 0.02 250);     /* Wiki / neutral */
  --c-slate-bg:     oklch(46% 0.02 250 / 0.09);

  /* ─────────── SEMANTIC ─────────── */
  --success:        oklch(52% 0.10 150);
  --success-bg:     oklch(52% 0.10 150 / 0.12);
  --warning:        oklch(64% 0.13 70);
  --warning-bg:     oklch(64% 0.13 70 / 0.14);
  --danger:        oklch(55% 0.18 28);
  --danger-bg:      oklch(55% 0.18 28 / 0.12);

  /* ─────────── ELEVATION (soft, light) ─────────── */
  --sh-sm:  0 1px 2px oklch(40% 0.02 90 / 0.06), 0 1px 1px oklch(40% 0.02 90 / 0.04);
  --sh-md:  0 4px 14px oklch(38% 0.02 90 / 0.08), 0 1px 3px oklch(38% 0.02 90 / 0.06),
            inset 0 1px 0 oklch(100% 0 0 / 0.7);
  --sh-lg:  0 14px 36px oklch(35% 0.02 90 / 0.12), 0 3px 8px oklch(35% 0.02 90 / 0.07),
            inset 0 1px 0 oklch(100% 0 0 / 0.8);
  --sh-xl:  0 28px 64px oklch(32% 0.02 90 / 0.18), 0 6px 14px oklch(32% 0.02 90 / 0.08),
            inset 0 1px 0 oklch(100% 0 0 / 0.85);
  --sh-inset: inset 0 1px 3px oklch(35% 0.02 90 / 0.12);
  --ring:   0 0 0 3px oklch(52% 0.092 128 / 0.30);

  /* ─────────── RADII ─────────── */
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-card:12px; --r-lg:16px; --r-pill:9999px;

  /* ─────────── SPACING ─────────── */
  --s-2xs:2px; --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px;
  --s-xl:24px; --s-2xl:32px; --s-3xl:48px; --s-4xl:72px;

  /* ─────────── MOTION ─────────── */
  --fast:150ms; --base:220ms; --slow:360ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* ─────────── TYPE ─────────── */
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --fs-cap:  clamp(.75rem,.72rem + .12vw,.8125rem);
  --fs-ui:   clamp(.875rem,.85rem + .12vw,.9375rem);
  --fs-body: clamp(.9375rem,.9rem + .16vw,1.0625rem);
  --fs-h3:   clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-h2:   clamp(1.375rem,1.2rem + .6vw,1.875rem);
  --fs-h1:   clamp(1.75rem,1.4rem + 1.4vw,2.75rem);
  --fs-disp: clamp(2.25rem,1.6rem + 3.2vw,4rem);
}

*{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
html{font-size:100%;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
  color:var(--ink);background:var(--page);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv11";
}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.18;letter-spacing:-.01em;font-weight:700;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--olive-soft);color:var(--ink);}

/* mono helpers */
.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-cap);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--olive);
}
.eyebrow.muted{color:var(--ink-3);}
.kicker-num{font-family:var(--mono);font-weight:700;}

/* ─────────── LAYOUT SHELL ─────────── */
.app{min-height:100%;display:flex;flex-direction:column;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,40px);}
.section{padding-block:clamp(40px,6vw,80px);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-lg);margin-bottom:var(--s-xl);}
.section-head h2{font-size:var(--fs-h2);}
.section-head .lead{color:var(--ink-3);font-size:var(--fs-ui);max-width:46ch;margin-top:6px;}

/* ═══════════════ HEADER / NAV ═══════════════ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:oklch(95.5% 0.012 92 / 0.82);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-in{display:flex;align-items:center;gap:var(--s-lg);height:64px;}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none;}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;position:relative;
  background:linear-gradient(155deg,var(--surface-ink),oklch(20% 0.012 250));
  box-shadow:var(--sh-sm),inset 0 1px 0 oklch(100% 0 0 / .14);
  display:grid;place-items:center;
}
.brand-mark::after{
  content:"";position:absolute;left:7px;bottom:7px;width:11px;height:11px;border-radius:3px;
  background:var(--olive-bright);box-shadow:0 0 0 2px oklch(20% 0.012 250);
}
.brand-mark b{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--on-ink);letter-spacing:-.04em;position:relative;}
.brand-name{display:flex;flex-direction:column;line-height:1;}
.brand-name strong{font-size:15px;letter-spacing:-.02em;font-weight:700;}
.brand-name span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap;}

.nav{display:flex;align-items:center;gap:2px;margin-left:var(--s-md);}
.nav a{
  font-size:var(--fs-ui);font-weight:600;color:var(--ink-2);white-space:nowrap;
  padding:8px 14px;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
  display:inline-flex;align-items:center;gap:7px;
}
.nav a:hover{background:oklch(30% 0.012 250 / .06);color:var(--ink);}
.nav a.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);}
.nav a .soon{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:1px 6px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-sm);}

/* language switch */
.lang{
  display:inline-flex;align-items:center;background:var(--surface-sunk);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:2px;box-shadow:var(--sh-inset);
}
.lang button{
  border:0;background:transparent;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--ink-3);padding:4px 9px;border-radius:var(--r-pill);cursor:pointer;letter-spacing:.04em;
  transition:all var(--fast) var(--ease);
}
.lang button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);}

/* ═══════════════ BUTTONS (soft 3D, Memorium press-sink) ═══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-ui);font-weight:700;border-radius:var(--r-md);
  padding:11px 18px;cursor:pointer;border:1px solid var(--border-strong);
  color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface-raised));
  box-shadow:var(--sh-sm),inset 0 1px 0 oklch(100% 0 0 / .7);
  transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease),
             border-color var(--base) var(--ease),background var(--base) var(--ease),filter var(--base) var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--ink-4);box-shadow:var(--sh-md);}
.btn:active{transform:translateY(1px);transition-duration:60ms;box-shadow:var(--sh-inset);}
.btn .ic{width:17px;height:17px;stroke-width:2;flex:none;}

.btn-primary{
  color:var(--on-ink);border-color:oklch(20% 0.012 250);
  background:linear-gradient(180deg,var(--surface-ink-2),var(--surface-ink));
  box-shadow:0 2px 6px oklch(26% 0.012 250 / .28),inset 0 1px 0 oklch(100% 0 0 / .14);
}
.btn-primary:hover{filter:brightness(1.12);box-shadow:0 8px 20px oklch(26% 0.012 250 / .32),inset 0 1px 0 oklch(100% 0 0 / .16);}
.btn-olive{
  color:var(--on-olive);border-color:var(--olive-deep);
  background:linear-gradient(180deg,var(--olive-bright),var(--olive));
  box-shadow:0 2px 6px var(--olive-line),inset 0 1px 0 oklch(100% 0 0 / .22);
}
.btn-olive:hover{filter:brightness(1.06);box-shadow:0 8px 22px var(--olive-line),inset 0 1px 0 oklch(100% 0 0 / .24);}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2);}
.btn-ghost:hover{background:oklch(30% 0.012 250 / .06);color:var(--ink);box-shadow:none;}
.btn-sm{padding:8px 13px;font-size:var(--fs-cap);}
.btn-lg{padding:14px 24px;font-size:var(--fs-body);}
.btn-block{width:100%;}

/* ═══════════════ BADGES / PILLS ═══════════════ */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:var(--fs-cap);font-weight:500;border:1px solid;letter-spacing:.02em;
}
.badge .dot{width:6px;height:6px;border-radius:var(--r-pill);}
.badge-olive{background:var(--c-olive-bg);color:var(--olive-deep);border-color:var(--olive-line);}
.badge-steel{background:var(--c-steel-bg);color:var(--c-steel);border-color:oklch(50% 0.055 245 / .3);}
.badge-clay{background:var(--c-clay-bg);color:var(--c-clay);border-color:oklch(54% 0.10 48 / .3);}
.badge-sand{background:var(--c-sand-bg);color:var(--c-sand);border-color:oklch(50% 0.045 85 / .3);}
.badge-slate{background:var(--c-slate-bg);color:var(--c-slate);border-color:oklch(46% 0.02 250 / .25);}
.badge-success{background:var(--success-bg);color:var(--success);border-color:oklch(52% 0.10 150 / .3);}

/* ═══════════════ CARD ═══════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--sh-md);transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);
}
.card.hoverable{cursor:pointer;}
.card.hoverable:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong);}
.card.accent{border-left:3px solid var(--olive);}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;overflow:hidden;}
.hero::before{ /* subtle sand radial wash at top */
  content:"";position:absolute;inset:0 0 auto 0;height:60%;pointer-events:none;
  background:radial-gradient(70% 80% at 70% 0%,oklch(88% 0.04 95 / .6),transparent 70%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding-block:clamp(48px,6vw,88px);}
.hero-copy{max-width:34rem;}
.hero h1{font-size:var(--fs-disp);line-height:1.02;letter-spacing:-.03em;margin:18px 0 0;}
.hero h1 .accent{color:var(--olive);}
.hero .sub{font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:var(--ink-2);margin-top:18px;max-width:32rem;line-height:1.5;}
.hero-cta{display:flex;gap:var(--s-md);margin-top:28px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:var(--s-xl);margin-top:34px;padding-top:22px;border-top:1px dashed var(--border-strong);}
.hero-stat .n{font-family:var(--mono);font-weight:700;font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);color:var(--ink);}
.hero-stat .l{font-size:var(--fs-cap);color:var(--ink-3);margin-top:2px;}

/* hero panel — a "Lagebild" status card */
.hero-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:18px;position:relative;
}
.hero-panel .hp-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border-divider);}
.hero-panel .hp-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.hp-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border-divider);}
.hp-row:last-child{border-bottom:0;}
.hp-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--c-olive-bg);color:var(--olive-deep);}
.hp-ic svg{width:19px;height:19px;stroke-width:2;}
.hp-meta{flex:1;min-width:0;}
.hp-meta .t{font-weight:700;font-size:var(--fs-ui);}
.hp-meta .d{font-size:var(--fs-cap);color:var(--ink-3);font-family:var(--mono);margin-top:2px;}
.hp-prog{height:7px;border-radius:var(--r-pill);background:var(--surface-sunk);box-shadow:var(--sh-inset);overflow:hidden;width:84px;flex:none;}
.hp-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--olive),var(--olive-bright));}

/* ═══════════════ MODUL-HUB (link hub grid) ═══════════════ */
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);}
.hub-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:18px;box-shadow:var(--sh-md);cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;min-height:148px;
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);
}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong);}
.hub-card .hub-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;}
.hub-card .hub-ic svg{width:21px;height:21px;stroke-width:1.9;}
.hub-card h3{font-size:var(--fs-h3);letter-spacing:-.01em;}
.hub-card p{font-size:var(--fs-cap);color:var(--ink-3);line-height:1.45;}
.hub-card .hub-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);}
.hub-card .hub-go svg{width:14px;height:14px;stroke-width:2.2;transition:transform var(--base) var(--ease);}
.hub-card:hover .hub-go svg{transform:translateX(4px);}
.hub-card .corner{position:absolute;top:0;right:0;width:54px;height:54px;border-radius:0 var(--r-card) 0 60%;opacity:.5;}
/* category tints for hub icon */
.t-olive .hub-ic{background:var(--c-olive-bg);color:var(--olive-deep);} .t-olive .corner{background:var(--c-olive-bg);}
.t-steel .hub-ic{background:var(--c-steel-bg);color:var(--c-steel);} .t-steel .corner{background:var(--c-steel-bg);}
.t-clay .hub-ic{background:var(--c-clay-bg);color:var(--c-clay);} .t-clay .corner{background:var(--c-clay-bg);}
.t-sand .hub-ic{background:var(--c-sand-bg);color:var(--c-sand);} .t-sand .corner{background:var(--c-sand-bg);}
.t-slate .hub-ic{background:var(--c-slate-bg);color:var(--c-slate);} .t-slate .corner{background:var(--c-slate-bg);}

/* hub card spanning / featured */
.hub-card.wide{grid-column:span 2;}
.hub-card.soon{opacity:.72;cursor:default;}
.hub-card.soon:hover{transform:none;box-shadow:var(--sh-md);border-color:var(--border);}

/* ═══════════════ VORBEREITUNGSPFAD (path) ═══════════════ */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-md);position:relative;}
.path-step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px;
  box-shadow:var(--sh-sm);position:relative;
}
.path-step .pnum{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--olive);letter-spacing:.1em;}
.path-step h4{font-size:var(--fs-ui);margin:8px 0 6px;}
.path-step p{font-size:var(--fs-cap);color:var(--ink-3);line-height:1.45;}
.path-step .pcheck{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:var(--r-pill);
  border:1.5px solid var(--border-strong);display:grid;place-items:center;}
.path-step.done .pcheck{background:var(--olive);border-color:var(--olive);}
.path-step.done .pcheck svg{width:11px;height:11px;stroke:var(--on-olive);stroke-width:3;}
.path-step.active{border-color:var(--olive-line);box-shadow:var(--sh-md),0 0 0 3px var(--olive-soft);}

/* ═══════════════ COURSE CARDS ═══════════════ */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);}
.course{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-md);cursor:pointer;display:flex;flex-direction:column;
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);
}
.course:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong);}
.course-thumb{height:128px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--surface-raised),var(--surface-sunk));}
.course-thumb .ph-ic{width:40px;height:40px;opacity:.5;stroke-width:1.5;color:var(--ink-3);}
.course-thumb .lvl{position:absolute;top:12px;left:12px;}
.course-thumb .dur{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink-2);
  background:oklch(99% 0.003 92 / .82);backdrop-filter:blur(4px);padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--border);}
.course-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.course-body h3{font-size:var(--fs-h3);}
.course-body p{font-size:var(--fs-cap);color:var(--ink-3);line-height:1.45;flex:1;}
.course-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:12px;border-top:1px solid var(--border-divider);}
.course-foot .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px;}

/* filter chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  font-family:var(--mono);font-size:var(--fs-cap);font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:6px 14px;cursor:pointer;transition:all var(--fast) var(--ease);box-shadow:var(--sh-sm);
}
.chip:hover{border-color:var(--border-strong);color:var(--ink);}
.chip.on{background:var(--surface-ink);color:var(--on-ink);border-color:var(--surface-ink);}

/* ═══════════════ 7-TAGE-PLAN ═══════════════ */
.week{display:flex;flex-direction:column;gap:10px;}
.day{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow var(--base) var(--ease);
}
.day.open{box-shadow:var(--sh-md);}
.day-head{display:flex;align-items:center;gap:16px;padding:16px 18px;cursor:pointer;}
.day-tag{width:52px;flex:none;text-align:center;}
.day-tag .dn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.day-tag .dd{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--olive);line-height:1;margin-top:2px;}
.day-main{flex:1;min-width:0;}
.day-main h4{font-size:var(--fs-h3);}
.day-main .focus{font-size:var(--fs-cap);color:var(--ink-3);margin-top:3px;}
.day-load{display:flex;gap:3px;align-items:flex-end;height:26px;flex:none;}
.day-load i{width:5px;border-radius:2px;background:var(--olive-soft);}
.day-load i.on{background:var(--olive);}
.day-chev{flex:none;color:var(--ink-3);transition:transform var(--base) var(--ease);}
.day.open .day-chev{transform:rotate(180deg);}
.day-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--slow) var(--ease);}
.day.open .day-body{grid-template-rows:1fr;}
.day-body-in{overflow:hidden;}
.day-body-pad{padding:0 18px 18px 86px;display:flex;flex-direction:column;gap:8px;}
.drill{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--r-md);}
.drill .di{width:30px;height:30px;border-radius:8px;background:var(--c-olive-bg);color:var(--olive-deep);display:grid;place-items:center;flex:none;}
.drill .di svg{width:15px;height:15px;stroke-width:2;}
.drill .dt{flex:1;font-size:var(--fs-ui);font-weight:600;}
.drill .dm{font-family:var(--mono);font-size:11px;color:var(--ink-3);}

/* ═══════════════ CHECKLIST ═══════════════ */
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-lg);}
.checklist{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-md);padding:20px;}
.checklist h3{font-size:var(--fs-h3);display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.checklist .cl-sub{font-size:var(--fs-cap);color:var(--ink-3);margin-bottom:14px;font-family:var(--mono);}
.cl-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border-divider);cursor:pointer;}
.cl-box{width:21px;height:21px;border-radius:6px;border:1.5px solid var(--border-strong);flex:none;display:grid;place-items:center;
  background:var(--surface);transition:all var(--fast) var(--ease);}
.cl-box svg{width:12px;height:12px;stroke:var(--on-olive);stroke-width:3;opacity:0;transition:opacity var(--fast);}
.cl-item.done .cl-box{background:var(--olive);border-color:var(--olive);}
.cl-item.done .cl-box svg{opacity:1;}
.cl-item.done .cl-label{color:var(--ink-4);text-decoration:line-through;}
.cl-label{font-size:var(--fs-ui);flex:1;transition:color var(--fast);}
.cl-prog{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-divider);}
.cl-bar{flex:1;height:7px;border-radius:var(--r-pill);background:var(--surface-sunk);box-shadow:var(--sh-inset);overflow:hidden;}
.cl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--olive),var(--olive-bright));border-radius:inherit;transition:width var(--slow) var(--ease);}
.cl-pct{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--olive-deep);}

/* ═══════════════ SHOP ═══════════════ */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg);}
.product{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-md);overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);}
.product:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--border-strong);}
.product-thumb{aspect-ratio:4/3;background:linear-gradient(150deg,var(--surface-raised),var(--surface-sunk));display:grid;place-items:center;position:relative;}
.product-thumb .ph-ic{width:46px;height:46px;opacity:.45;color:var(--ink-3);stroke-width:1.4;}
.product-thumb .tag{position:absolute;top:12px;left:12px;}
.product-body{padding:16px;display:flex;flex-direction:column;gap:6px;}
.product-body h3{font-size:var(--fs-ui);font-weight:700;}
.product-body .pdesc{font-size:var(--fs-cap);color:var(--ink-3);line-height:1.4;}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.product-foot .price{font-family:var(--mono);font-weight:700;color:var(--ink);}
.product-foot .out{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--olive-deep);font-weight:600;}
.product-foot .out svg{width:13px;height:13px;stroke-width:2.2;}

/* social */
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);}
.social{display:flex;align-items:center;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);cursor:pointer;transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease);}
.social:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--border-strong);}
.social .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--surface-ink);color:var(--on-ink);}
.social .si svg{width:20px;height:20px;stroke-width:1.9;}
.social .sm{min-width:0;}
.social .sm .sn{font-weight:700;font-size:var(--fs-ui);}
.social .sm .sh{font-family:var(--mono);font-size:11px;color:var(--ink-3);}

/* ═══════════════ CTA BAND ═══════════════ */
.cta-band{background:var(--surface-ink);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  position:relative;overflow:hidden;box-shadow:var(--sh-lg);}
.cta-band::after{content:"";position:absolute;right:-40px;bottom:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,var(--olive-soft),transparent 65%);}
.cta-band h2{color:var(--on-ink);font-size:var(--fs-h1);max-width:20ch;position:relative;}
.cta-band p{color:var(--on-ink-2);margin-top:12px;max-width:46ch;position:relative;}
.cta-band .cta-row{display:flex;gap:12px;margin-top:24px;position:relative;flex-wrap:wrap;}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:var(--surface-ink);color:var(--on-ink-2);margin-top:auto;}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-xl);padding-block:48px 28px;}
.foot h5{color:var(--on-ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;font-weight:600;}
.foot a{display:block;font-size:var(--fs-ui);color:var(--on-ink-2);padding:5px 0;cursor:pointer;transition:color var(--fast);}
.foot a:hover{color:var(--on-ink);}
.foot-bar{border-top:1px solid var(--border-ink);padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:oklch(62% 0.012 250);}

/* ═══════════════ VIEWS / ROUTING ═══════════════ */
.view{display:none;}
.view.active{display:block;}
.subnav{display:flex;gap:4px;background:var(--surface-sunk);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:4px;box-shadow:var(--sh-inset);width:max-content;max-width:100%;overflow:auto;}
.subnav button{border:0;background:transparent;font-family:var(--sans);font-size:var(--fs-ui);font-weight:600;color:var(--ink-2);
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:all var(--fast) var(--ease);}
.subnav button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);}

.page-head{padding-block:clamp(32px,4vw,52px) 0;}
.page-head .eyebrow{margin-bottom:12px;}
.page-head h1{font-size:var(--fs-h1);}
.page-head .lead{color:var(--ink-2);font-size:var(--fs-body);max-width:54ch;margin-top:12px;}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;}
.crumb em{font-style:normal;color:var(--ink);font-weight:500;}

/* mobile bottom tabbar (hidden on desktop) */
.tabbar{display:none;}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px){
  .hub-grid{grid-template-columns:repeat(2,1fr);}
  .hub-card.wide{grid-column:span 2;}
  .course-grid,.shop-grid{grid-template-columns:repeat(2,1fr);}
  .path{grid-template-columns:repeat(3,1fr);}
  .social-grid{grid-template-columns:repeat(2,1fr);}
  .foot-in{grid-template-columns:1fr 1fr;}
}
@media (max-width:840px){
  .hero-in{grid-template-columns:1fr;}
  .hero-panel{max-width:440px;}
  .check-grid{grid-template-columns:1fr;}
}
/* tablet/mobile nav → hide inline links, show essential */
@media (max-width:720px){
  .nav{display:none;}
  .topbar-in{height:58px;}
  .path{grid-template-columns:repeat(2,1fr);}
  .course-grid,.shop-grid{grid-template-columns:1fr;}
  .hub-grid{grid-template-columns:repeat(2,1fr);}
  .foot-in{grid-template-columns:1fr 1fr;gap:var(--s-lg);}
  .day-head{gap:12px;padding:14px;}
  .day-body-pad{padding-left:14px;padding-right:14px;}
  .hero-stats{flex-wrap:wrap;gap:var(--s-lg);}
  /* bottom tab bar */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:oklch(99% 0.003 92 / .9);backdrop-filter:blur(14px);border-top:1px solid var(--border);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0));justify-content:space-around;box-shadow:0 -4px 20px oklch(40% 0.02 90 / .08);}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:var(--r-md);
    color:var(--ink-3);cursor:pointer;font-size:10px;font-weight:700;font-family:var(--mono);letter-spacing:.04em;}
  .tabbar a svg{width:21px;height:21px;stroke-width:2;}
  .tabbar a.active{color:var(--olive-deep);}
  .app{padding-bottom:64px;}
}
@media (max-width:480px){
  .hub-grid{grid-template-columns:1fr;}
  .hub-card.wide{grid-column:span 1;}
  .social-grid{grid-template-columns:1fr;}
  .path{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr;}
  .section-head{flex-direction:column;align-items:flex-start;}
}