/* ============================================================
   The Black Lotus ($LOTUS) — Shared theme
   Design tokens, reset, background, navigation, buttons, footer.
   Page-specific styles live in home.css / whitepaper.css.
   ============================================================ */

:root{
  /* Surfaces & lines */
  --bg:#06080a;
  --surface:#0c0f0e;
  --surface-2:#111614;
  --border:rgba(0,255,102,.14);
  --border-soft:rgba(255,255,255,.06);

  /* Accent & text */
  --accent:#00ff66;
  --accent-soft:rgba(0,255,102,.10);
  --danger:#ff5c6c;
  --text:#e9f1ec;
  --muted:#8b978f;
  --muted-2:#5f6b64;

  /* Typography */
  --font-display:"Orbitron",sans-serif;
  --font-body:"Sora",system-ui,sans-serif;

  /* Shape */
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;

  /* Rhythm */
  --nav-h:68px;
  --space-section:100px;

  /* Layout width — overridden per page */
  --maxw:1160px;
}

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

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{text-decoration:none;color:inherit}

/* Consistent, on-brand keyboard focus */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Atmospheric background ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(0,255,102,.10), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(0,255,102,.05), transparent 70%);
  z-index:-2;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 20%, #000 0%, transparent 75%);
  opacity:.5;
  z-index:-1;
  pointer-events:none;
}

/* ---------- Layout container ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Navigation ---------- */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(6,8,10,.6);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav-h);
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:1.5px;
  font-size:16px;
}
.brand img{width:30px;height:30px;object-fit:contain}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-size:14px;
  color:var(--muted);
  transition:color .2s;
}
.nav-links a:hover{color:var(--text)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  padding:11px 22px;
  border-radius:var(--radius-sm);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  color:#031008;
  box-shadow:0 6px 24px rgba(0,255,102,.18);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{
  border:1px solid var(--border);
  color:var(--accent);
  background:var(--accent-soft);
}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
.btn-lg{padding:15px 30px;font-size:15px;border-radius:12px}

/* ---------- Shared decorative pieces ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--border);
  background:var(--accent-soft);
  padding:7px 15px;
  border-radius:100px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

.quote{
  border-left:2px solid var(--accent);
  padding:22px 26px;
  background:var(--accent-soft);
  border-radius:8px;
  font-family:var(--font-display);
  line-height:1.5;
  color:var(--text);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border-soft);
  padding:48px 0 40px;
  margin-top:60px;
}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.foot-brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:700;letter-spacing:1.5px;
}
.foot-brand img{width:28px;height:28px;object-fit:contain}
.foot-copy{color:var(--muted-2);font-size:13.5px}
.foot-social{display:flex;gap:16px}
.foot-social a{
  width:38px;height:38px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-soft);color:var(--muted);
  transition:color .2s, border-color .2s;
}
.foot-social a:hover{color:var(--accent);border-color:var(--border)}
.foot-social svg{width:18px;height:18px;fill:currentColor}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive base ---------- */
@media(max-width:880px){
  .nav-links{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}