/* Maf Universe — shared styles (used by index.html, pages/the-world.html, pages/your-life.html) */

:root {
  --bg: #05070d;
  --bg2: #090d16;
  --panel: #0d1420;
  --text: #f5f7fb;
  --muted: #aab4c4;
  --line: rgba(255,255,255,.12);
  --accent: #b9a4ff;
  --accent2: #73c8ff;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}

/* Header / nav */
.site-header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:20;background:linear-gradient(180deg,rgba(3,5,10,.88),rgba(3,5,10,0));backdrop-filter:blur(5px)}
.brand{font-family:Cinzel,serif;font-size:28px;letter-spacing:.03em}
.nav{display:flex;gap:28px;font-size:13px;color:#d6dbe5}
.nav a{opacity:.82;transition:.2s}
.nav a:hover{opacity:1}
.nav a.active{color:#fff;opacity:1}
.nav-cta{border:1px solid rgba(255,255,255,.35);padding:9px 16px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}

/* Image-based hero pattern (full-bleed image + gradient shade) */
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,4,10,.75),rgba(2,4,10,.15) 55%,rgba(2,4,10,.18)),linear-gradient(0deg,rgba(2,4,10,.55),transparent 45%)}

/* Section / heading / body-copy primitives */
.section{max-width:var(--max);margin:0 auto;padding:120px 7vw}
.section-kicker{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent2);font-weight:700}
h2{font-family:Cinzel,Georgia,serif;font-size:clamp(38px,5vw,66px);line-height:1.08;font-weight:500;letter-spacing:-.02em;margin:14px 0 26px}
h2 span{color:#bfc9d9}
.lead{font-size:18px;color:var(--muted);max-width:760px;margin:0 auto}
.narrow{max-width:690px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:4px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;transition:.2s}
.primary{background:#f4f6fb;color:#060912}
.primary:hover{transform:translateY(-2px);background:white}
.ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.ghost:hover{background:rgba(255,255,255,.08)}

/* Footer */
footer{border-top:1px solid var(--line);padding:45px 7vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;background:#03050a}
.footer-brand{font-family:Cinzel,serif;font-size:26px}
.footer-copy{color:#aab4c4;font-size:12px}
.footer-note{color:#687386;font-size:10px;text-align:right}

@media(max-width:850px){
  .nav{display:none}
  .site-header{height:64px}
  .section{padding:85px 6vw}
}