/* ─────────────────────────────────────────────
   M5 Sovereign Design System · v1
   Shared tokens, chrome, type, motion
   Used by every page in the M5 product surface
   ───────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#050810;--bg-2:#080a16;--bg-3:#0c0f1d;
  --gold:#C9A84C;--cyan:#00D6FF;--purple:#B83CFF;
  --teal:#5fcfcf;--green:#22cc66;--lime:#BDF95A;--pink:#FF3FC5;--warm:#D8D0C3;
  --yellow:#FFD84D;--mint:#2DDAB4;--blue:#3C7BFF;--cyan-2:#3EE7F7;--green-2:#4A9B3A;
  --border:rgba(255,255,255,.07);
  --border-2:rgba(255,255,255,.12);
  --text-1:rgba(255,255,255,.96);
  --text-2:rgba(255,255,255,.78);
  --text-3:rgba(255,255,255,.52);
  --text-4:rgba(255,255,255,.32);
}

html{background:var(--bg);color:white;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
body{min-height:100vh;overflow-x:hidden;}
#canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
#scroll{padding-top:44px;padding-bottom:80px;position:relative;z-index:10;}
.page{max-width:1200px;margin:0 auto;padding:0 40px;}

/* ── OS BAR ─────────────────────────────── */
#os-bar{position:fixed;top:0;left:0;right:0;height:44px;z-index:500;
  display:flex;align-items:center;justify-content:space-between;padding:0 40px;
  background:rgba(5,8,16,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);}
.osb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.osb-m{font-size:15px;font-weight:700;color:white;}
.osb-sub{font-size:8px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);}
.osb-div{width:1px;height:14px;background:var(--border);margin:0 18px;}
.osb-crumb{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.52);text-decoration:none;}
.osb-sep{color:rgba(255,255,255,.2);margin:0 10px;}
.osb-section{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);}
.osb-back{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);text-decoration:none;transition:color .2s;}
.osb-back:hover{color:rgba(255,255,255,.82);}
.osb-nav{display:flex;gap:22px;}
.osb-nav a{font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;}
.osb-nav a:hover{color:white;}

/* ── HERO PATTERN ───────────────────────── */
.m5-hero{padding:80px 40px 50px;text-align:center;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(5,8,16,.88) 0%,rgba(5,8,16,.55) 70%,transparent 100%);}
.hero-ey{font-size:8px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;display:inline-flex;align-items:center;gap:12px;
  opacity:0;animation:fadeUp .8s ease .2s forwards;}
.hero-ey::before,.hero-ey::after{content:'';flex:0 0 32px;height:1px;background:var(--gold);opacity:.4;}
.hero-ey.purple{color:var(--purple);}
.hero-ey.purple::before,.hero-ey.purple::after{background:var(--purple);}
.hero-ey.cyan{color:var(--cyan);}
.hero-ey.cyan::before,.hero-ey.cyan::after{background:var(--cyan);}
.hero-title{font-family:'EB Garamond',serif;font-size:clamp(40px,7vw,84px);
  font-weight:400;font-style:italic;line-height:1.0;color:white;margin-bottom:18px;
  opacity:0;animation:fadeUp .9s ease .35s forwards;max-width:1000px;margin-left:auto;margin-right:auto;}
.hero-title em{font-style:italic;color:var(--gold);}
.hero-sub{font-size:14px;font-weight:400;color:var(--text-2);
  max-width:620px;line-height:1.78;margin:0 auto;
  opacity:0;animation:fadeUp .8s ease .5s forwards;}

/* ── SECTION PATTERN ────────────────────── */
.m5-section{padding:70px 0;border-top:1px solid var(--border);}
.m5-section:first-of-type{border-top:none;}
.sec-eyebrow{font-size:8px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;}
.sec-eyebrow.purple{color:var(--purple);}
.sec-eyebrow.cyan{color:var(--cyan);}
.sec-eyebrow.lime{color:var(--lime);}
.sec-eyebrow.pink{color:var(--pink);}
.sec-title{font-family:'EB Garamond',serif;font-size:clamp(32px,4.5vw,52px);font-weight:400;font-style:italic;
  line-height:1.05;color:white;margin-bottom:14px;max-width:820px;}
.sec-sub{font-size:14px;color:var(--text-2);max-width:680px;line-height:1.78;margin-bottom:40px;}

/* ── BUTTONS ────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:13px 24px;border-radius:6px;
  text-decoration:none;transition:all .25s;border:1px solid;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--gold);color:#0a0a0a;border-color:var(--gold);}
.btn-primary:hover{background:#dbb95c;border-color:#dbb95c;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:white;border-color:rgba(255,255,255,.18);}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);}
.btn-sm{padding:8px 14px;font-size:9px;letter-spacing:.16em;}

/* ── PILLS ──────────────────────────────── */
.pill{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;border:1px solid;display:inline-flex;align-items:center;gap:6px;}
.pill.gold{color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.12);}
.pill.cyan{color:var(--cyan);border-color:rgba(0,214,255,.3);background:rgba(0,214,255,.08);}
.pill.lime{color:var(--lime);border-color:rgba(189,245,90,.3);background:rgba(189,245,90,.08);}
.pill.purple{color:var(--purple);border-color:rgba(184,60,255,.3);background:rgba(184,60,255,.08);}
.pill.teal{color:var(--teal);border-color:rgba(95,207,207,.3);background:rgba(95,207,207,.08);}
.pill.warm{color:var(--warm);border-color:rgba(216,208,195,.25);background:rgba(216,208,195,.06);}
.pill.pink{color:var(--pink);border-color:rgba(255,63,197,.3);background:rgba(255,63,197,.08);}
.pill.green{color:var(--green);border-color:rgba(34,204,102,.3);background:rgba(34,204,102,.08);}
.pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor;}

/* ── CARD ───────────────────────────────── */
.m5-card{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:16px;
  padding:24px;transition:all .25s;position:relative;overflow:hidden;}
.m5-card:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);}
.m5-card.accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
.m5-card.gold::before{background:linear-gradient(90deg,var(--gold),transparent);}
.m5-card.cyan::before{background:linear-gradient(90deg,var(--cyan),transparent);}
.m5-card.purple::before{background:linear-gradient(90deg,var(--purple),transparent);}
.m5-card.lime::before{background:linear-gradient(90deg,var(--lime),transparent);}
.m5-card.pink::before{background:linear-gradient(90deg,var(--pink),transparent);}
.m5-card.green::before{background:linear-gradient(90deg,var(--green),transparent);}

/* ── GLYPH ICON ─────────────────────────── */
.m5-glyph{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.m5-glyph span{font-family:'EB Garamond',serif;font-style:italic;font-weight:600;font-size:20px;}
.m5-glyph.gold{background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.25);}
.m5-glyph.gold span{color:var(--gold);}
.m5-glyph.cyan{background:rgba(62,231,247,.1);border:1.5px solid rgba(62,231,247,.25);}
.m5-glyph.cyan span{color:var(--cyan-2);}
.m5-glyph.purple{background:rgba(184,60,255,.1);border:1.5px solid rgba(184,60,255,.25);}
.m5-glyph.purple span{color:var(--purple);}
.m5-glyph.lime{background:rgba(189,245,90,.1);border:1.5px solid rgba(189,245,90,.25);}
.m5-glyph.lime span{color:var(--lime);}
.m5-glyph.pink{background:rgba(255,63,197,.1);border:1.5px solid rgba(255,63,197,.25);}
.m5-glyph.pink span{color:var(--pink);}
.m5-glyph.green{background:rgba(74,155,58,.1);border:1.5px solid rgba(74,155,58,.25);}
.m5-glyph.green span{color:#7ed16c;}
.m5-glyph.lg{width:56px;height:56px;border-radius:14px;}
.m5-glyph.lg span{font-size:26px;}

/* ── MONO LABELS ────────────────────────── */
.mono{font-family:'JetBrains Mono',monospace;}
.eyebrow-sm{font-size:8px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-4);}
.label-mono{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);letter-spacing:.04em;}

/* ── FOOTER ─────────────────────────────── */
#m5-footer{position:relative;z-index:10;border-top:1px solid var(--border);
  background:rgba(3,4,10,0.98);padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
#m5-footer .ft-meta{font-size:9px;color:rgba(255,255,255,.42);}
#m5-footer .ft-status{display:flex;align-items:center;gap:6px;}
#m5-footer .ft-status .dot{width:5px;height:5px;border-radius:50%;background:#22cc66;box-shadow:0 0 5px #22cc66;}
#m5-footer .ft-status span{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#22cc66;}
#m5-footer .ft-links{display:flex;align-items:center;gap:18px;}
#m5-footer .ft-links a{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(201,168,76,.7);text-decoration:none;transition:color .2s;}
#m5-footer .ft-links a:hover{color:var(--gold);}

/* ── ANIMATIONS ─────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:960px){
  .osb-nav{display:none;}
  .m5-section{padding:50px 0;}
  .page{padding:0 24px;}
  .m5-hero{padding:60px 24px 40px;}
}