/* ═══════════════════════════════════════════════════════════════════════
   FolksPMS Documentation Website — ENHANCEMENT LAYER
   Sits on top of style.css + site.css + pms-extra.css.
   Adds: aurora hero, the six-level spine ribbon, module galaxy, screenshot
   showcase, section eyebrows, scroll-reveal, bilingual toggle, richer print.
   CodeFolks · MasGen — June 2026
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --pri:#4338ca; --pri-d:#3730a3; --pri-l:#e0e7ff; --pri-bg:#eef2ff;
  --acc:#06b6d4; --acc-d:#0891b2; --acc-l:#cffafe;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --violet:#7c3aed;
  --ink:#101426; --ink-2:#475069; --ink-3:#8b94b1; --line:#e6e9f2;
  --night:#070b1a;
}

/* selection + smoother fonts */
::selection{ background:rgba(67,56,202,.18); color:#1e1b4b; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ───────────────────────────────────────────────────────────────────────
   1 · NAVBAR — gradient brand + cyan underline on active
   ─────────────────────────────────────────────────────────────────────── */
.site-nav{ background:rgba(7,11,26,.86); border-bottom:1px solid rgba(103,232,249,.10); }
.site-nav-brand-logo{
  background:linear-gradient(135deg,var(--pri),var(--acc));
  box-shadow:0 6px 20px rgba(8,145,178,.5);
}
.site-nav-links a.active{
  background:linear-gradient(135deg,var(--pri),var(--acc));
  box-shadow:0 6px 18px rgba(8,145,178,.4);
}
.site-nav-meta .pill i{ filter:drop-shadow(0 0 4px rgba(6,182,212,.9)); }

/* the bilingual chip in the navbar */
.lang-toggle{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; overflow:hidden;
  font-size:11px; font-weight:800; letter-spacing:.4px; cursor:default;
}
.lang-toggle span{ padding:5px 11px; color:rgba(255,255,255,.6); }
.lang-toggle span.on{ background:linear-gradient(135deg,var(--pri),var(--acc)); color:#fff; }

/* ───────────────────────────────────────────────────────────────────────
   2 · AURORA HERO — animated orbs behind the existing hero
   ─────────────────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(circle at 18% 22%, rgba(67,56,202,.55), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(6,182,212,.42), transparent 45%),
    radial-gradient(circle at 60% 88%, rgba(124,58,237,.40), transparent 48%),
    linear-gradient(135deg,#070b1a 0%,#0f1838 45%,#1b1248 100%);
}
.hero .orb{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  pointer-events:none; z-index:0; animation:floaty 16s ease-in-out infinite;
}
.hero .orb.o1{ width:340px;height:340px; left:-60px; top:-40px;
  background:radial-gradient(circle,#4338ca,transparent 70%); }
.hero .orb.o2{ width:300px;height:300px; right:4%; top:30%;
  background:radial-gradient(circle,#06b6d4,transparent 70%); animation-delay:-5s; }
.hero .orb.o3{ width:260px;height:260px; left:30%; bottom:-60px;
  background:radial-gradient(circle,#7c3aed,transparent 70%); animation-delay:-9s; }
@keyframes floaty{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(26px,-22px) scale(1.08); }
  66%{ transform:translate(-20px,18px) scale(.95); }
}
.hero-inner{ z-index:1; }
.hero h1 .accent{ background:linear-gradient(135deg,#67e8f9,#a78bfa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-stat .num{ background:linear-gradient(135deg,#818cf8,#22d3ee); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-stat{ transition:transform .18s, border-color .18s, background .18s; }
.hero-stat:hover{ transform:translateY(-4px); border-color:rgba(103,232,249,.5); background:rgba(255,255,255,.09); }
.hero-cta a.primary{ background:linear-gradient(135deg,var(--pri),var(--acc)); box-shadow:0 14px 38px rgba(8,145,178,.5); }
.hero-card{ border:1px solid rgba(103,232,249,.14); }
.hero-card ul li i{ color:#67e8f9; }
.hero-card-h .pill{ background:rgba(6,182,212,.16); color:#67e8f9; border-color:rgba(6,182,212,.34); }

/* ───────────────────────────────────────────────────────────────────────
   3 · SECTION EYEBROW + heading rule
   ─────────────────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  width:100%; text-align:center;
  font-size:12px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--acc-d); margin-bottom:10px;
}
.eyebrow::before,.eyebrow::after{ content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc)); }
.eyebrow::after{ background:linear-gradient(90deg,var(--acc),transparent); }
.land-section.alt{ background:linear-gradient(180deg,#f7f9ff,#eef2ff); border-radius:0; }

/* ───────────────────────────────────────────────────────────────────────
   4 · THE SPINE RIBBON — six-level estimate-to-actuals continuum
   ─────────────────────────────────────────────────────────────────────── */
.spine{ max-width:1240px; margin:0 auto; padding:14px 28px 4px; }
.spine-track{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; position:relative;
}
.spine-track::before{
  content:""; position:absolute; left:6%; right:6%; top:46px; height:4px; z-index:0;
  background:linear-gradient(90deg,#6366f1,#06b6d4,#10b981,#f59e0b,#ef4444);
  border-radius:4px; opacity:.5;
}
.spine-node{
  position:relative; z-index:1; background:#fff; border:1.5px solid var(--line);
  border-radius:16px; padding:20px 16px 18px; text-align:center;
  box-shadow:0 6px 24px rgba(20,26,60,.06); transition:transform .18s, box-shadow .18s;
}
.spine-node:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(20,26,60,.14); }
.spine-node .sn-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font:800 10px/1 'Cascadia Code',Consolas,monospace; letter-spacing:.5px;
  color:#fff; padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.spine-node .sn-ico{
  width:54px;height:54px;margin:6px auto 12px; border-radius:15px;
  display:flex;align-items:center;justify-content:center; font-size:23px; color:#fff;
  box-shadow:0 8px 22px rgba(67,56,202,.28);
}
.spine-node h5{ font-size:14px; font-weight:800; color:var(--ink); margin:0 0 4px; }
.spine-node p{ font-size:11.5px; color:var(--ink-3); line-height:1.45; margin:0; }
.lvl-eg .sn-badge,.lvl-eg .sn-ico{ background:linear-gradient(135deg,#6366f1,#4f46e5); }
.lvl-bg .sn-badge,.lvl-bg .sn-ico{ background:linear-gradient(135deg,#4338ca,#06b6d4); }
.lvl-sg .sn-badge,.lvl-sg .sn-ico{ background:linear-gradient(135deg,#06b6d4,#0e7490); }
.lvl-kg .sn-badge,.lvl-kg .sn-ico{ background:linear-gradient(135deg,#10b981,#047857); }
.lvl-ag .sn-badge,.lvl-ag .sn-ico{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.lvl-dv .sn-badge,.lvl-dv .sn-ico{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
.spine-note{ text-align:center; font-size:13px; color:var(--ink-2); max-width:760px; margin:26px auto 0; }
.spine-note .pulse{ color:var(--danger); font-weight:800; }

/* ───────────────────────────────────────────────────────────────────────
   5 · MODULE GALAXY — enhanced pillar cards with glow
   ─────────────────────────────────────────────────────────────────────── */
.pillar-card{ transition:transform .18s, box-shadow .18s, border-color .18s; }
.pillar-card:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(20,26,60,.12); }
.pillar-card .pc-ico{ background:linear-gradient(135deg,var(--pri),var(--acc)); }
.pillar-card.p2 .pc-ico{ background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.pillar-card.p3 .pc-ico{ background:linear-gradient(135deg,#06b6d4,#0e7490); }
.pillar-card.p4 .pc-ico{ background:linear-gradient(135deg,#10b981,#047857); }
.pillar-card.p5 .pc-ico{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.pillar-card.p6 .pc-ico{ background:linear-gradient(135deg,#9333ea,#6b21a8); }
.pillar-card.p7 .pc-ico{ background:linear-gradient(135deg,#ef4444,#b91c1c); }
.mod-chip{ transition:background .12s, transform .12s, box-shadow .12s; }
.mod-chip:hover{ box-shadow:0 6px 16px rgba(67,56,202,.18); }

/* ───────────────────────────────────────────────────────────────────────
   6 · SCREENSHOT SHOWCASE — browser-chrome framed shots
   ─────────────────────────────────────────────────────────────────────── */
.showcase{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
.shot{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 32px rgba(20,26,60,.10); transition:transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.shot:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(20,26,60,.18); }
.shot .chrome{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:linear-gradient(180deg,#1b2140,#141a33);
}
.shot .chrome i{ width:10px;height:10px;border-radius:50%;display:inline-block; }
.shot .chrome i:nth-child(1){ background:#ff5f57; }
.shot .chrome i:nth-child(2){ background:#febc2e; }
.shot .chrome i:nth-child(3){ background:#28c840; }
.shot .chrome .url{ margin-left:8px; font:600 10.5px/1 'Cascadia Code',Consolas,monospace; color:#8aa0c8; }
.shot img{ width:100%; display:block; aspect-ratio:16/10; object-fit:cover; object-position:top; background:#f1f5f9; }
.shot .cap{ padding:13px 16px; }
.shot .cap b{ display:block; font-size:13.5px; color:var(--ink); font-weight:800; }
.shot .cap span{ font-size:12px; color:var(--ink-3); }

/* ───────────────────────────────────────────────────────────────────────
   7 · STAT BANNER (dark) reused on landing
   ─────────────────────────────────────────────────────────────────────── */
.stat-banner{ background:linear-gradient(135deg,#070b1a,#141a33 60%,#1b1248); padding:54px 28px; }
.stat-banner-inner{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-banner .sb{ text-align:center; }
.stat-banner .sb .n{ font-size:40px; font-weight:800; letter-spacing:-1px;
  background:linear-gradient(135deg,#818cf8,#22d3ee); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-banner .sb .l{ font-size:12px; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-top:4px; }

/* ───────────────────────────────────────────────────────────────────────
   8 · CTA STRIP (bottom of landing)
   ─────────────────────────────────────────────────────────────────────── */
.cta-strip{ max-width:1080px; margin:72px auto; padding:0 28px; }
.cta-card{
  background:linear-gradient(135deg,#4338ca,#06b6d4); border-radius:24px;
  padding:46px 44px; color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; box-shadow:0 30px 70px rgba(8,145,178,.35); position:relative; overflow:hidden;
}
.cta-card::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 40%); }
.cta-card .t{ position:relative; z-index:1; }
.cta-card h3{ font-size:26px; font-weight:800; letter-spacing:-.5px; margin:0 0 6px; }
.cta-card p{ font-size:14.5px; color:rgba(255,255,255,.88); margin:0; max-width:540px; }
.cta-card .acts{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }
.cta-card .acts a{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:12px;
  font-weight:800; font-size:14px; text-decoration:none; transition:transform .15s; }
.cta-card .acts a.w{ background:#fff; color:var(--pri-d); }
.cta-card .acts a.g{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.4); }
.cta-card .acts a:hover{ transform:translateY(-2px); }

/* ───────────────────────────────────────────────────────────────────────
   9 · IN-MANUAL FIGURES + level legend + comparison overlay
   ─────────────────────────────────────────────────────────────────────── */
.figure img{ cursor:zoom-in; }
.lvl-legend{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.lvl-legend .lg{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.lvl-legend .sw{ width:13px; height:13px; border-radius:4px; }
.sw-eg{ background:#6366f1; } .sw-bg{ background:#4338ca; } .sw-sg{ background:#06b6d4; }
.sw-kg{ background:#10b981; } .sw-ag{ background:#f59e0b; } .sw-dv{ background:#ef4444; }

/* part divider inside the manual / workbook */
.part-divider{
  max-width:1080px; margin:8px auto; padding:26px 56px;
  background:linear-gradient(135deg,#070b1a,#1b1248); color:#fff; border-radius:16px;
}
.part-divider .pd-tag{ display:inline-block; background:rgba(103,232,249,.16); color:#67e8f9;
  border:1px solid rgba(103,232,249,.3); font-size:11px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; padding:4px 13px; border-radius:999px; margin-bottom:10px; }
.part-divider h2{ font-size:26px; font-weight:800; margin:0 0 6px;
  background:linear-gradient(135deg,#fff,#a5b4fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.part-divider p{ color:rgba(255,255,255,.78); font-size:13.5px; margin:0; max-width:720px; }

/* spec / fact box */
.spec-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; }
.spec-box .sp-cell{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:10px; padding:12px 15px; }
.spec-box .sp-cell .v{ font-size:20px; font-weight:800; color:var(--pri-d); }
.spec-box .sp-cell .k{ font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }

/* keyboard key */
kbd{ font:700 11px/1 'Cascadia Code',Consolas,monospace; background:#0b1022; color:#a5f3fc;
  border-radius:5px; padding:3px 7px; border:1px solid #1e293b; box-shadow:0 2px 0 #1e293b; }

/* ───────────────────────────────────────────────────────────────────────
   10 · SCROLL REVEAL
   ─────────────────────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .orb{ animation:none; }
}

/* ───────────────────────────────────────────────────────────────────────
   11 · RESPONSIVE
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .spine-track{ grid-template-columns:repeat(2,1fr); }
  .spine-track::before{ display:none; }
  .showcase{ grid-template-columns:1fr 1fr; }
  .stat-banner-inner{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .spine-track{ grid-template-columns:1fr; }
  .showcase{ grid-template-columns:1fr; }
  .stat-banner-inner{ grid-template-columns:1fr; }
  .cta-card{ padding:30px 24px; }
  .part-divider{ padding:22px 22px; }
}

@media print{
  .hero .orb,.lang-toggle,.cta-strip{ display:none !important; }
  .spine-node,.shot,.pillar-card{ page-break-inside:avoid; }
  .reveal{ opacity:1 !important; transform:none !important; }
}