/* ===== Sample 1 · MIDNIGHT =====
   Deep navy hero with cobalt + saffron, rounded cards, soft depth.
   Display: Bricolage Grotesque · Body: Figtree */
:root{
  --bg:#f6f7fb; --bg-alt:#eef0f7; --surface:#ffffff;
  --ink:#0d1330; --text:#2a3150; --muted:#5a6283; --line:#e1e4ef;
  --accent:#2f4bff; --accent-ink:#ffffff; --accent-soft:rgba(47,75,255,.1); --accent-on-dark:#ffb020;
  --hero-bg:#0a0f2c; --hero-ink:#ffffff; --hero-text:#d6dbf5; --hero-muted:#a2aad3; --hero-line:rgba(255,255,255,.2); --hero-accent:#ffb020;
  --dark:#0a0f2c; --dark-2:#151c44; --dark-ink:#ffffff; --dark-text:#aab2d9; --dark-line:rgba(255,255,255,.1);
  --font-d:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif; --font-b:'Figtree',ui-sans-serif,system-ui,sans-serif;
  --d-weight:800; --d-track:-.03em; --d-case:none;
  --r:14px; --r-lg:20px; --r-xl:28px; --r-btn:999px; --bw:1px; --bc:#e1e4ef; --bc-h:transparent;
  --shadow:0 1px 2px rgba(13,19,48,.04); --shadow-h:0 26px 50px -24px rgba(13,19,48,.32); --shadow-btn:0 14px 28px -12px rgba(47,75,255,.65); --shadow-drop:0 30px 60px -20px rgba(13,19,48,.3);
  --lift:translateY(-6px);
  --icon-bg:#2f4bff; --icon-ink:#ffffff;
  --header-bg:#ffffff; --header-shadow:0 12px 30px -20px rgba(13,19,48,.35);
  --mock-bg:#121a45; --mock-line:rgba(255,255,255,.12); --mock-bar:#0e1538; --mock-dot:rgba(255,255,255,.28); --mock-text:#a2aad3; --mock-strong:rgba(255,255,255,.78); --mock-soft:rgba(255,255,255,.08); --mock-accent:#ffb020; --mock-img:linear-gradient(135deg,#2f4bff,#7b8cff); --mock-shadow:0 40px 80px -30px rgba(0,0,0,.75);
  --chip-bg:#ffffff; --chip-ink:#0d1330;
  --cta-bg:#2f4bff; --cta-text:#dfe4ff; --cta-ink:#ffffff; --cta-btn-bg:#ffffff; --cta-btn-ink:#0d1330;
  --field-bg:#ffffff; --field-line:#dde1ee;
  color-scheme:light;
}
body{background:var(--bg)}
.display em{font-style:normal;color:var(--hero-accent)}
.hero-deco{background:
  radial-gradient(600px 400px at 85% 20%,rgba(47,75,255,.45),transparent 70%),
  radial-gradient(500px 360px at 0% 100%,rgba(255,176,32,.16),transparent 70%)}
.hero-deco::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.btn-accent:hover{background:#2440e8}
.hero .btn-accent,.page-hero .btn-accent{background:var(--hero-accent);color:#1a1300;border-color:var(--hero-accent)}
.hero .btn-accent:hover{box-shadow:0 14px 28px -12px rgba(255,176,32,.7)}
.who-box{background-image:radial-gradient(500px 300px at 100% 0%,rgba(47,75,255,.45),transparent 70%)}
.cta-band::after{content:"";position:absolute;right:-60px;top:-120px;width:340px;height:340px;border-radius:50%;border:60px solid rgba(255,255,255,.08);z-index:-1}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
a.card:hover::before{opacity:1}
.stats{background-image:radial-gradient(400px 260px at 0% 0%,rgba(47,75,255,.4),transparent 70%)}
.dv{border-color:#0d1330}