/* ============================================================
   Craigs AI — "Cyber-Logic" design system (per DESIGN.md)
   Midnight Navy canvas · Slate Blue surfaces · Glow Cyan actions
   · soft gold milestones · Hanken Grotesk + Geist.
   Variable names kept from v1 so templates keep working:
     --paper = background, --card/--paper-2 = surfaces,
     --green = primary cyan, --amber = gold accent.
   ============================================================ */

:root {
  /* canvas & surfaces */
  --paper:      #0F172A;                 /* Midnight Navy — Level 0 */
  --paper-2:    #1E293B;                 /* Slate Blue — Level 1 */
  --card:       #1E293B;
  --card-hi:    #273449;                 /* Level 2 */
  --well:       #0B1120;                 /* sunken areas, code */

  /* content */
  --ink:        #F8FAFC;                 /* Cloud Gray */
  --ink-soft:   #CBD5E1;
  --ink-faint:  #8FA0B5;
  --line:       rgba(255,255,255,.10);   /* 1px 10% white edges */

  /* primary — Glow Cyan */
  --green:      #00E5FF;
  --green-deep: #C3F5FF;                 /* light cyan (text/nums on dark) */
  --green-soft: rgba(0,229,255,.12);
  --on-cyan:    #00363D;

  /* gold — achievements & milestones */
  --amber:      #FFD700;
  --amber-soft: rgba(255,215,0,.14);

  /* status */
  --red:        #FFB4AB;
  --red-soft:   rgba(147,0,10,.35);
  --blue-soft:  rgba(190,198,224,.14);
  --secondary:  #BEC6E0;

  /* shape: buttons/inputs 4px · cards 8px · sections 12px · pill for chips+CTA */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  12px;

  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.5);
  --glow:        0 0 0 1px rgba(0,229,255,.25), 0 8px 28px -8px rgba(0,229,255,.28);
  --shadow-cyan: 0 12px 32px -10px rgba(0,229,255,.15);

  --font-display: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-label:   "Geist", "Consolas", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* circuitry dot-grid over the navy canvas */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(0,229,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .5em; }
h3 { font-size: 1.22rem; font-weight: 600; margin: 1.2em 0 .4em; }
h4 { margin: 1.1em 0 .35em; font-weight: 600; }
p  { margin: 0 0 1em; }
a  { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
code { font-family: var(--font-label); background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .1em .4em; font-size: .88em; color: var(--green-deep); }
pre { background: var(--well); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; overflow-x: auto; }
pre code { background: none; border: 0; color: #D6E4EE; padding: 0; }
::selection { background: rgba(0,229,255,.35); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---------------- header / nav (glassmorphic, Level 3) ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(30,41,59,.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 1.4rem; padding: .7rem 24px; max-width: 1160px; margin: 0 auto; }
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.brand img { width: 36px; height: 36px; border-radius: 50%; display: block; box-shadow: 0 0 12px rgba(0,229,255,.35); }
.brand .dot { color: var(--green); }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-links a.btn, .nav-links a.btn:hover { color: var(--on-cyan); font-weight: 600; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .62rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--green); color: var(--on-cyan);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px rgba(0,229,255,.25);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: #4DEEFF; color: var(--on-cyan); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 22px rgba(0,229,255,.45); }
.btn:focus-visible { outline: 3px solid rgba(0,229,255,.6); outline-offset: 2px; }
/* .btn-amber = the featured "pill" CTA (pill shape reserved for chips + primary CTA) */
.btn-amber { border-radius: 999px; padding: .68rem 1.6rem; background: var(--green); color: var(--on-cyan); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 24px rgba(0,229,255,.4); }
.btn-amber:hover { background: #4DEEFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 34px rgba(0,229,255,.6); }
.btn-ghost { background: transparent; color: var(--green); border: 1px solid rgba(0,229,255,.55); box-shadow: none; }
.btn-ghost:hover { background: var(--green-soft); color: var(--green-deep); transform: none; box-shadow: 0 0 16px rgba(0,229,255,.25); }
.btn-sm { padding: .4rem .9rem; font-size: .86rem; }
.btn-danger { background: #93000A; color: #FFDAD6; box-shadow: none; }
.btn-danger:hover { background: #B00010; color: #fff; box-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------------- cards & layout ---------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow), var(--shadow-cyan);
}
.card + .card { margin-top: 1.1rem; }
.card-flat { box-shadow: none; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.stack > * + * { margin-top: 1.1rem; }
.row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--ink-faint); }
.small { font-size: .88rem; }
.center { text-align: center; }
.mt { margin-top: 1.4rem; } .mt2 { margin-top: 2.5rem; }

/* ---------------- forms (Geist input text, cyan focus glow) ---------------- */
label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font-family: var(--font-label); font-size: .95rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid #3B495C; border-radius: var(--radius-sm);
  padding: .62rem .8rem; margin-bottom: 1rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,229,255,.18), 0 0 16px rgba(0,229,255,.15);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select option { background: var(--paper-2); }
textarea { min-height: 110px; resize: vertical; }
.field-error { color: var(--red); font-size: .86rem; margin: -0.7rem 0 .9rem; }
.checkgroup { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  display: inline-block; cursor: pointer; user-select: none;
  border: 1px solid #3B495C; border-radius: 999px; padding: .38rem 1rem;
  background: var(--paper-2); font-family: var(--font-label); font-size: .85rem; font-weight: 500;
  color: var(--ink-soft);
}
.chip input { position: absolute; opacity: 0; }
.chip:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--on-cyan); font-weight: 600; }
.chip:has(input:focus-visible) { outline: 3px solid rgba(0,229,255,.5); outline-offset: 2px; }

/* ---------------- flash & badges ---------------- */
.flash { border-radius: var(--radius); padding: .8rem 1.1rem; margin: 1rem 0; font-size: .95rem; border: 1px solid; }
.flash-info    { background: var(--blue-soft);  border-color: rgba(190,198,224,.35); }
.flash-success { background: var(--green-soft); border-color: rgba(0,229,255,.35); }
.flash-error   { background: var(--red-soft);   border-color: rgba(255,180,171,.4); color: #FFDAD6; }
.badge {
  display: inline-block; font-family: var(--font-label); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: .2rem .65rem;
}
.badge-green { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,229,255,.35); }
.badge-amber { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(255,215,0,.35); }
.badge-red   { background: var(--red-soft);   color: var(--red);   border: 1px solid rgba(255,180,171,.35); }
.badge-gray  { background: rgba(255,255,255,.06); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------------- progress (thin 4px, cyan gradient) ---------------- */
.progress { background: var(--well); border-radius: 999px; height: 4px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #00B8CC, var(--green)); box-shadow: 0 0 8px rgba(0,229,255,.6); transition: width .5s ease; }
.progress-green > span { background: linear-gradient(90deg, #8A94B8, var(--secondary)); box-shadow: 0 0 8px rgba(190,198,224,.5); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--green); line-height: 1.1; text-shadow: 0 0 18px rgba(0,229,255,.35); }
.stat .lbl { font-family: var(--font-label); font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }

/* ---------------- marketing hero ---------------- */
.hero { padding: 4.2rem 0 3rem; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 130%;
  background: radial-gradient(ellipse at 70% 20%, rgba(0,229,255,.14), transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(190,198,224,.08), transparent 60%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 280px); gap: 2.2rem; align-items: center; }
@media (max-width: 620px) { .hero-grid { grid-template-columns: 1fr; } .hero-logo { justify-self: center; } .hero-logo img { max-width: 180px; } }
.hero-logo { position: relative; justify-self: end; }
.hero-logo img {
  width: 100%; max-width: 280px; height: auto; border-radius: 50%; display: block;
  border: 1px solid rgba(0,229,255,.35);
  box-shadow: 0 0 60px rgba(0,229,255,.30), 0 0 140px rgba(0,229,255,.12), var(--shadow);
  animation: logo-pulse 5s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%, 100% { box-shadow: 0 0 60px rgba(0,229,255,.30), 0 0 140px rgba(0,229,255,.12), 0 1px 2px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 0 80px rgba(0,229,255,.45), 0 0 170px rgba(0,229,255,.18), 0 1px 2px rgba(0,0,0,.4); }
}
.hero .eyebrow {
  font-family: var(--font-label); font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 1rem;
}
.hero h1 em { font-style: normal; color: var(--green); text-shadow: 0 0 24px rgba(0,229,255,.4); }
.hero .lede { font-size: 1.14rem; line-height: 1.7; color: var(--ink-soft); max-width: 34em; }
.hero-topic {
  display: flex; gap: .6rem; max-width: 560px; margin-top: 1.8rem;
  background: rgba(30,41,59,.8); backdrop-filter: blur(20px);
  border: 1px solid #3B495C; border-radius: 999px;
  padding: .4rem .4rem .4rem 1.2rem; box-shadow: var(--shadow-cyan);
}
.hero-topic:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,229,255,.18), 0 0 24px rgba(0,229,255,.2); }
.hero-topic input { border: 0; background: none; margin: 0; padding: .5rem 0; flex: 1; }
.hero-topic input:focus { box-shadow: none; }
.topic-chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-chips a {
  text-decoration: none; font-family: var(--font-label); font-size: .82rem; color: var(--ink-soft);
  border: 1px solid #3B495C; border-radius: 999px; padding: .3rem .9rem; background: var(--paper-2);
}
.topic-chips a:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 12px rgba(0,229,255,.2); }

.big-quote {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600;
  color: var(--green-deep); border-left: 3px solid var(--green); padding-left: 1.2rem; margin: 2.5rem 0;
}
.step-num {
  font-family: var(--font-label); font-size: 2.2rem; font-weight: 600; color: var(--amber);
  line-height: 1; text-shadow: 0 0 18px rgba(255,215,0,.35);
}
section.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3.2rem 0; margin: 3rem 0; }
section.band .card-flat { background: var(--card-hi); }
section.band-green {
  background: linear-gradient(180deg, #0B1120, #0F172A 60%);
  border-top: 1px solid rgba(0,229,255,.25);
  color: var(--ink); padding: 3.2rem 0; margin: 3rem 0 0;
}
section.band-green h2 { color: #fff; }
section.band-green .muted { color: var(--ink-faint); }

.price-card { display: flex; flex-direction: column; }
.price-card .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--green); text-shadow: 0 0 20px rgba(0,229,255,.35); }
.price-card ul { padding-left: 1.2rem; margin: .6rem 0 1.4rem; flex: 1; }
.price-card li { margin-bottom: .35rem; }
.price-featured { border: 1px solid rgba(0,229,255,.5); position: relative; box-shadow: var(--glow); }
.price-featured::before {
  content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: var(--on-cyan); font-family: var(--font-label);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: .22rem .8rem; white-space: nowrap;
}

.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.2rem 0 3rem; font-size: .9rem; color: var(--ink-faint); }
.site-footer a { color: var(--ink-soft); }

/* ---------------- app shell ---------------- */
.app-main { padding: 2rem 0 4rem; }
.breadcrumb { font-family: var(--font-label); font-size: .8rem; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }

/* module / lesson lists */
.module-card { margin-bottom: 1.1rem; }
.lesson-row {
  display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem;
  border-top: 1px dashed var(--line); text-decoration: none; color: var(--ink);
}
.lesson-row:first-of-type { border-top: 0; }
.lesson-row:hover .lesson-title { color: var(--green); }
.lesson-dot {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  border: 1px solid #3B495C; display: grid; place-items: center;
  font-family: var(--font-label); font-size: .78rem; color: var(--ink-faint); background: var(--paper-2);
}
.lesson-dot.done { background: var(--green); border-color: var(--green); color: var(--on-cyan); box-shadow: 0 0 10px rgba(0,229,255,.45); }
.lesson-row .mins { margin-left: auto; font-family: var(--font-label); font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }

/* lesson content */
.lesson-body { max-width: 46em; font-size: 1.05rem; line-height: 1.7; }
.lesson-body h3 { font-size: 1.35rem; border-bottom: 1px solid rgba(0,229,255,.3); padding-bottom: .3rem; }
.example-block {
  background: var(--green-soft); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0; padding: .9rem 1.2rem; margin: 1rem 0;
}
.example-block .ex-label { font-family: var(--font-label); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.keyterms dt { font-weight: 700; color: var(--green-deep); }
.keyterms dd { margin: 0 0 .7rem; color: var(--ink-soft); }

/* knowledge checks & quizzes */
.check-card { border: 1px solid #3B495C; border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0; background: var(--paper-2); border-top: 2px solid var(--green); }
.check-card .q-label { font-family: var(--font-label); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.option-row { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.option-row:hover { background: rgba(255,255,255,.05); }
.option-row input { margin-top: .3rem; accent-color: var(--green); }
.option-row.correct { background: var(--green-soft); outline: 1px solid rgba(0,229,255,.4); }
.option-row.incorrect { background: var(--red-soft); }
.check-feedback { border-radius: var(--radius-sm); padding: .7rem 1rem; margin-top: .7rem; font-size: .95rem; }
.check-feedback.good { background: var(--green-soft); border: 1px solid rgba(0,229,255,.3); }
.check-feedback.bad { background: var(--amber-soft); border: 1px solid rgba(255,215,0,.3); }

/* tutor — AI Assistant module: gradient border + pulse */
.tutor-panel {
  display: flex; flex-direction: column; height: 100%; min-height: 380px;
  position: relative; border: 1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(160deg, rgba(0,229,255,.8), rgba(15,23,42,.2) 45%, rgba(0,98,110,.7)) border-box;
  animation: ai-pulse 4s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(0,229,255,.12), var(--shadow); }
  50%      { box-shadow: 0 0 30px rgba(0,229,255,.25), var(--shadow); }
}
.tutor-log { flex: 1; overflow-y: auto; padding: .4rem 0; display: flex; flex-direction: column; gap: .6rem; }
.msg { max-width: 92%; border-radius: var(--radius); padding: .6rem .95rem; font-size: .95rem; white-space: pre-wrap; }
.msg-user { align-self: flex-end; background: #00626E; color: #E4FBFF; border-bottom-right-radius: 4px; }
.msg-ai   { align-self: flex-start; background: var(--card-hi); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.tutor-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.tutor-suggest button {
  font-family: var(--font-label); font-size: .74rem; cursor: pointer; background: var(--paper-2);
  border: 1px solid #3B495C; border-radius: 999px; padding: .28rem .7rem; color: var(--ink-soft);
}
.tutor-suggest button:hover { border-color: var(--green); color: var(--green); }
.tutor-compose { display: flex; gap: .5rem; margin-top: .6rem; }
.tutor-compose textarea { min-height: 44px; height: 44px; margin: 0; flex: 1; }
#tutor-remaining { font-family: var(--font-label); font-size: .74rem; letter-spacing: .05em; color: var(--ink-faint); margin-top: .4rem; }
#tutor-remaining.warn { color: var(--amber); }
#tutor-remaining.danger { color: var(--red); font-weight: 600; }
#gen-progress { display: none; font-family: var(--font-label); font-size: .9rem; color: var(--green); }

/* lesson two-column */
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.lesson-side { position: sticky; top: 84px; }
@media (max-width: 960px) { .lesson-grid { grid-template-columns: 1fr; } .lesson-side { position: static; } }

/* generation stages */
.gen-stages { list-style: none; padding: 0; margin: 1.2rem 0; }
.gen-stages li { display: flex; gap: .7rem; align-items: center; padding: .45rem 0; color: var(--ink-faint); font-family: var(--font-label); font-size: .92rem; }
.gen-stages li::before { content: "○"; color: #3B495C; font-size: 1.1rem; }
.gen-stages li.active { color: var(--ink); font-weight: 600; }
.gen-stages li.active::before { content: "◐"; color: var(--green); animation: spin-slow 1.6s linear infinite; display: inline-block; text-shadow: 0 0 10px rgba(0,229,255,.6); }
.gen-stages li.done { color: var(--green-deep); }
.gen-stages li.done::before { content: "●"; color: var(--green); text-shadow: 0 0 8px rgba(0,229,255,.5); }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* mastery map — chips in Geist */
.mastery-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.mtag { border-radius: 999px; padding: .28rem .85rem; font-family: var(--font-label); font-size: .8rem; font-weight: 500; border: 1px solid transparent; }
.mtag-mastered   { background: var(--green); color: var(--on-cyan); font-weight: 600; box-shadow: 0 0 12px rgba(0,229,255,.35); }
.mtag-proficient { background: var(--green-soft); color: var(--green); border-color: rgba(0,229,255,.35); }
.mtag-developing { background: var(--amber-soft); color: var(--amber); border-color: rgba(255,215,0,.3); }
.mtag-introduced { background: rgba(255,255,255,.06); color: var(--ink-soft); border-color: var(--line); }
.mtag-needs_review { background: var(--red-soft); color: var(--red); border-color: rgba(255,180,171,.35); }

/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th { text-align: left; font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: .5rem .6rem; border-bottom: 1px solid rgba(0,229,255,.3); }
table.data td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }

/* certificate — dark on screen, light on print */
.certificate {
  max-width: 820px; margin: 3rem auto; background: var(--card);
  border: 1px solid rgba(0,229,255,.4); border-radius: var(--radius-lg); padding: 3.4rem 3rem; text-align: center;
  box-shadow: var(--glow);
}
.certificate .cert-brand { font-family: var(--font-label); font-weight: 600; font-size: 1.1rem; color: var(--green); letter-spacing: .3em; }
.certificate .cert-logo { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem; display: block; box-shadow: 0 0 30px rgba(0,229,255,.35); }
.certificate h1 { font-size: 2.3rem; margin: 1.2rem 0 .4rem; }
.certificate .learner-name { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--green); margin: .8rem 0; text-shadow: 0 0 22px rgba(0,229,255,.4); }
.certificate .rule { width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); margin: 1.2rem auto; }
@media print {
  body::before, .no-print { display: none !important; }
  body { background: #fff; color: #0F172A; }
  .certificate { background: #fff; border-color: #0F172A; box-shadow: none; margin: 0 auto; }
  .certificate h1, .certificate p, .certificate .small { color: #0F172A !important; }
  .certificate .muted { color: #475569 !important; }
  .certificate .learner-name, .certificate .cert-brand { color: #005662; text-shadow: none; }
  .certificate .cert-logo { box-shadow: none; }
  .mtag { box-shadow: none; border: 1px solid #94A3B8 !important; background: #fff !important; color: #0F172A !important; }
}

/* reveal animation for marketing sections */
.reveal { opacity: 0; transform: translateY(14px); animation: rise .7s ease forwards; }
.reveal-2 { animation-delay: .12s; } .reveal-3 { animation-delay: .24s; } .reveal-4 { animation-delay: .36s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .nav { gap: .8rem; }
  .nav-links { gap: .7rem; font-size: .9rem; }
  .hero { padding-top: 2.4rem; }
}