/* ========================================================================
   MAAT — style.css
   Cosmic order · Kemetic palette · lapis blue + Egyptian gold
   ======================================================================== */

:root {
  --bg:        #06090f;
  --surface:   #0c121c;
  --elevated:  #141b29;
  --text:      #e8ecf4;
  --text-soft: #b0bac8;
  --muted:     #6a7386;
  --border:    #1e2838;

  --primary:   #d4a947;
  --primary-hi:#f0c770;
  --primary-lo:#8b6f2a;

  --accent:    #3668b5;
  --accent-hi: #5488d9;
  --accent-lo: #1e3f75;

  --font-serif:'Cormorant Garamond','Garamond','Georgia',serif;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius: 4px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(6,9,15,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1180px;margin:0 auto;padding:18px 32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.nav-brand{
  font-family:var(--font-serif);font-size:26px;font-weight:700;
  color:var(--primary);text-decoration:none;letter-spacing:.08em;
}
.brand-glyph{color:var(--primary-hi);margin-right:10px;font-size:28px}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{
  color:var(--text-soft);text-decoration:none;
  font-size:15px;font-weight:500;transition:color .2s;
}
.nav-links a:hover{color:var(--primary-hi)}
.nav-cta{
  background:var(--accent);color:var(--text)!important;
  padding:8px 16px;border-radius:var(--radius);font-weight:700!important;
  border:1px solid var(--accent-hi);
}
.nav-cta:hover{background:var(--accent-hi);transform:translateY(-1px)}

/* HERO */
.hero{
  position:relative;overflow:hidden;
  padding:100px 32px 80px;
  background:
    radial-gradient(ellipse at top right,rgba(54,104,181,.18) 0%,transparent 55%),
    radial-gradient(ellipse at bottom left,rgba(212,169,71,.09) 0%,transparent 60%),
    var(--bg);
}
.hero-inner{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;
  position:relative;z-index:2;
}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;
  color:var(--primary);margin:0 0 24px;
}
.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(44px,7vw,80px);
  font-weight:600;line-height:1.05;margin:0 0 28px;
  letter-spacing:-.01em;
}
.hero-accent{color:var(--primary-hi);font-style:italic;font-weight:400}
.hero-lede{
  font-size:20px;line-height:1.6;color:var(--text-soft);
  margin:0 0 36px;max-width:560px;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hi) 100%);
  color:#fff;padding:14px 26px;border-radius:var(--radius);
  font-weight:700;text-decoration:none;font-size:15px;
  box-shadow:0 8px 24px rgba(54,104,181,.4);
  transition:transform .2s,box-shadow .2s;
  display:inline-block;
  border:1px solid var(--accent-hi);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(54,104,181,.55)}
.btn-large{padding:18px 34px;font-size:17px}
.btn-ghost{
  background:transparent;color:var(--text);
  padding:14px 24px;border-radius:var(--radius);border:1px solid var(--border);
  font-weight:600;text-decoration:none;font-size:15px;transition:all .2s;
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-hi)}
.hero-proof{
  font-size:14px;color:var(--muted);margin:0;letter-spacing:.02em;
}
.hero-proof strong{color:var(--primary);font-weight:600}

/* ORBIT — eye of Ra inspired */
.hero-orbit{
  position:relative;width:100%;aspect-ratio:1;max-width:420px;
  margin:0 auto;display:flex;align-items:center;justify-content:center;
}
.orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--accent);opacity:.3;
  animation:orbitSpin 45s linear infinite;
}
.orbit-ring-2{inset:15%;border-color:var(--primary);opacity:.28;animation-duration:30s;animation-direction:reverse}
.orbit-ring-3{inset:32%;border:2px solid var(--accent-hi);opacity:.5;animation-duration:20s}
.orbit-core{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-hi) 0%,var(--primary) 50%,var(--accent-lo) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:44px;color:var(--bg);font-weight:900;
  box-shadow:0 0 80px rgba(54,104,181,.5),inset 0 0 20px rgba(212,169,71,.4);
  animation:corePulse 4s ease-in-out infinite;
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{box-shadow:0 0 80px rgba(54,104,181,.5),inset 0 0 20px rgba(212,169,71,.4)}50%{box-shadow:0 0 120px rgba(54,104,181,.8),inset 0 0 30px rgba(212,169,71,.6)}}

/* SECTIONS */
main > section{padding:80px 32px}
.section-title{
  font-family:var(--font-serif);font-size:clamp(32px,4.5vw,48px);
  font-weight:600;text-align:center;margin:0 0 48px;letter-spacing:-.01em;
}

/* STATS */
.stats{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.stat{text-align:center}
.stat-number{
  font-family:var(--font-serif);font-size:80px;font-weight:700;
  color:var(--primary-hi);margin:0 0 8px;line-height:1;letter-spacing:-.02em;
}
.stat-unit{font-size:32px;color:var(--accent-hi);margin-left:4px;font-weight:600}
.stat-label{font-size:15px;color:var(--text-soft);margin:0;max-width:220px;margin-inline:auto}
.stats-note{
  max-width:760px;margin:60px auto 0;text-align:center;
  font-size:18px;color:var(--text-soft);font-style:italic;
  font-family:var(--font-serif);
}

/* PILLARS */
.pillars-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.pillar{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:40px 32px;
  transition:transform .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.pillar:hover{transform:translateY(-4px);border-color:var(--accent)}
.pillar-num{
  font-family:var(--font-serif);font-size:32px;font-weight:700;
  color:var(--primary);letter-spacing:.05em;margin-bottom:12px;line-height:1;
}
.pillar-title{
  font-family:var(--font-serif);font-size:30px;font-weight:600;
  color:var(--text);margin:0 0 14px;letter-spacing:-.01em;
}
.pillar-body{color:var(--text-soft);font-size:15px;line-height:1.65;margin:0}

/* WHY */
.why{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.why-inner{max-width:1180px;margin:0 auto}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.why-col{padding:0 8px}
.why-head{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-hi);margin:0 0 16px;
}
.why-col p{color:var(--text-soft);font-size:16px;line-height:1.65;margin:0}

/* MATH */
.math-inner{max-width:900px;margin:0 auto}
.math-compare{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  margin-bottom:32px;
}
.math-col{text-align:center;padding:36px 24px;border-radius:var(--radius)}
.math-bad{background:var(--surface);border:1px solid var(--border)}
.math-good{
  background:linear-gradient(135deg,rgba(54,104,181,.15) 0%,rgba(212,169,71,.08) 100%);
  border:1px solid var(--accent);
}
.math-label{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
.math-good .math-label{color:var(--accent-hi)}
.math-big{
  font-family:var(--font-serif);font-size:64px;font-weight:700;
  margin:0 0 8px;letter-spacing:-.02em;line-height:1;
}
.math-bad .math-big{color:#c56b6b}
.math-good .math-big{color:var(--primary-hi)}
.math-sub{font-size:14px;color:var(--text-soft);margin:0}
.math-vs{
  font-family:var(--font-serif);font-size:26px;font-weight:600;
  color:var(--muted);font-style:italic;
}
.math-note{
  text-align:center;color:var(--text-soft);font-size:17px;margin:0;
  line-height:1.65;
}
.math-note strong{color:var(--primary-hi)}

/* CTA FINAL */
.cta-final{
  background:
    radial-gradient(ellipse at center,rgba(54,104,181,.18) 0%,transparent 60%),
    var(--bg);
  text-align:center;padding:100px 32px;
}
.cta-inner{max-width:760px;margin:0 auto}
.cta-title{
  font-family:var(--font-serif);font-size:clamp(38px,5.5vw,58px);
  font-weight:600;margin:0 0 20px;letter-spacing:-.02em;
}
.cta-sub{
  font-size:19px;color:var(--text-soft);line-height:1.6;margin:0 0 36px;
}
.cta-micro{font-size:13px;color:var(--muted);margin:24px 0 0;letter-spacing:.05em}

/* FOOTER */
.site-footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:56px 32px 40px;
}
.footer-grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
  margin-bottom:32px;
}
.footer-brand{
  font-family:var(--font-serif);font-size:24px;color:var(--primary);
  margin:0 0 8px;font-weight:700;letter-spacing:.08em;
}
.footer-tagline{color:var(--text-soft);margin:0 0 10px;font-size:15px}
.footer-author{color:var(--muted);font-size:13px;margin:0;line-height:1.55}
.footer-author a{color:var(--primary);text-decoration:none}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-col-title{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.footer-links a{color:var(--text-soft);text-decoration:none;font-size:14px;transition:color .2s}
.footer-links a:hover{color:var(--primary-hi)}
.footer-meta{
  max-width:1180px;margin:0 auto;border-top:1px solid var(--border);padding-top:24px;
  font-size:12px;color:var(--muted);letter-spacing:.05em;text-align:center;
}

/* RESPONSIVE */
@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-orbit{max-width:300px;order:-1}
  .stats-grid,.pillars-grid,.why-grid{grid-template-columns:1fr;gap:24px}
  .math-compare{grid-template-columns:1fr;gap:16px}
  .math-vs{transform:rotate(90deg)}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .stat-number{font-size:60px}
  main > section{padding:56px 24px}
  .hero{padding:64px 24px 48px}
  .nav{padding:14px 20px}
  .nav-links{gap:14px}
  .nav-links a{font-size:14px}
}

::selection{background:var(--accent);color:#fff}
a:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:2px}
