/* ========================================================================
   IYAH — style.css
   Di elevated watcher · Rasta sun palette · warm amber + ochre
   ======================================================================== */

:root {
  --bg:        #0f0a05;
  --surface:   #1a110a;
  --elevated:  #231810;
  --text:      #f5e6d3;
  --text-soft: #d4bfa1;
  --muted:     #7a6a55;
  --border:    #3a2a1c;

  --primary:   #e8a947;
  --primary-hi:#ffc971;
  --primary-lo:#8b5f1f;

  --accent:    #c14040;
  --accent-hi: #e55555;

  --green:     #7da356;

  --font-serif:'Playfair Display','Georgia',serif;
  --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius: 6px;
}

*{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(15,10,5,.88);
  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:24px;font-weight:900;
  color:var(--primary);text-decoration:none;letter-spacing:.02em;
}
.brand-glyph{color:var(--primary-hi);margin-right:6px}
.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(--primary);color:var(--bg)!important;
  padding:8px 16px;border-radius:100px;font-weight:700!important;
}
.nav-cta:hover{background:var(--primary-hi);transform:translateY(-1px)}

/* HERO */
.hero{
  position:relative;overflow:hidden;
  padding:100px 32px 80px;
  background:radial-gradient(ellipse at top right,rgba(232,169,71,.12) 0%,transparent 60%),
             radial-gradient(ellipse at bottom left,rgba(193,64,64,.08) 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:.22em;text-transform:uppercase;
  color:var(--primary);margin:0 0 24px;
}
.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(42px,6.5vw,76px);
  font-weight:900;line-height:1.05;margin:0 0 28px;
  letter-spacing:-.02em;
}
.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(--primary) 0%,var(--primary-hi) 100%);
  color:var(--bg);padding:14px 24px;border-radius:100px;
  font-weight:700;text-decoration:none;font-size:15px;
  box-shadow:0 8px 24px rgba(232,169,71,.3);
  transition:transform .2s,box-shadow .2s;
  display:inline-block;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,169,71,.45)}
.btn-large{padding:18px 32px;font-size:17px}
.btn-ghost{
  background:transparent;color:var(--text);
  padding:14px 24px;border-radius:100px;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 */
.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(--primary);opacity:.35;
  animation:orbitSpin 40s linear infinite;
}
.orbit-ring-2{inset:18%;border-color:var(--accent);opacity:.25;animation-duration:28s;animation-direction:reverse}
.orbit-ring-3{inset:34%;border-color:var(--primary-hi);opacity:.45;animation-duration:18s}
.orbit-core{
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-hi) 0%,var(--primary) 60%,var(--primary-lo) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;color:var(--bg);font-weight:900;
  box-shadow:0 0 60px rgba(232,169,71,.6);
  animation:corePulse 3s ease-in-out infinite;
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{0%,100%{box-shadow:0 0 60px rgba(232,169,71,.6)}50%{box-shadow:0 0 100px rgba(232,169,71,.9)}}

/* SECTIONS */
main > section{padding:80px 32px}
.section-title{
  font-family:var(--font-serif);font-size:clamp(30px,4vw,44px);
  font-weight:700;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:72px;font-weight:900;
  color:var(--primary-hi);margin:0 0 8px;line-height:1;letter-spacing:-.03em;
}
.stat-unit{font-size:32px;color:var(--primary);margin-left:4px;font-weight:700}
.stat-label{font-size:15px;color:var(--text-soft);margin:0;max-width:220px;margin-inline:auto}
.stats-note{
  max-width:720px;margin:60px auto 0;text-align:center;
  font-size:17px;color:var(--text-soft);font-style:italic;
}

/* 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:36px 32px;
  transition:transform .2s,border-color .2s;
}
.pillar:hover{transform:translateY(-4px);border-color:var(--primary)}
.pillar-num{
  font-family:var(--font-serif);font-size:14px;font-weight:700;
  color:var(--primary);letter-spacing:.15em;margin-bottom:16px;
}
.pillar-title{
  font-family:var(--font-serif);font-size:28px;font-weight:700;
  color:var(--text);margin:0 0 12px;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:.2em;text-transform:uppercase;
  color:var(--primary);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:32px 24px;border-radius:var(--radius)}
.math-bad{background:var(--surface);border:1px solid var(--border)}
.math-good{
  background:linear-gradient(135deg,rgba(232,169,71,.12) 0%,rgba(255,201,113,.08) 100%);
  border:1px solid var(--primary);
}
.math-label{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.math-good .math-label{color:var(--primary)}
.math-big{
  font-family:var(--font-serif);font-size:56px;font-weight:900;
  margin:0 0 8px;letter-spacing:-.03em;line-height:1;
}
.math-bad .math-big{color:var(--accent-hi)}
.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:24px;font-weight:700;
  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(232,169,71,.15) 0%,transparent 60%),var(--bg);
  text-align:center;padding:100px 32px;
}
.cta-inner{max-width:720px;margin:0 auto}
.cta-title{
  font-family:var(--font-serif);font-size:clamp(36px,5vw,54px);
  font-weight:700;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:22px;color:var(--primary);
  margin:0 0 8px;font-weight:900;
}
.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:56px}
  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(--primary);color:var(--bg)}
a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
