/* ==========================================================================
   Naadham — LOCKED design system (monochrome, premium). Single source of truth.
   Loaded LAST on every page so it re-themes the whole app consistently:
   near-black canvas · white text · zinc greys · silver-chrome accents · Inter.
   Individual pages keep their own layout CSS; this only owns the theme tokens,
   the font, the ambient background, and a few shared premium touches.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* palette — overrides each page's own :root because this file loads last */
  --bg:#0a0a0a;--bg2:#0f0f11;
  --card:rgba(255,255,255,.024);--card-hi:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.05);
  --fg:#fafafa;--mut:#a1a1aa;--faint:#71717a;
  --accent:#e4e4e7;--accent2:#ffffff;--accent-soft:rgba(255,255,255,.08);--glow:rgba(255,255,255,.14);
  --ok:#4ade80;--ok-soft:rgba(74,222,128,.13);--warn:#e0a93b;--warn-soft:rgba(224,169,59,.13);
  --bad:#f2617a;--bad-soft:rgba(242,97,122,.13);
  --code:#0f0f11;--surface:#111114;--surface2:#161619;--raise:#1b1b1f;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html{scroll-behavior:smooth}
body{font-family:var(--font)!important;background:#0a0a0a;color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  animation:pageIn .5s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
code,pre,.key,.mono{font-family:var(--mono)}
::selection{background:rgba(255,255,255,.22);color:#fff}

/* ambient monochrome glow + dot-grid behind everything (skipped where a page sets its own) */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;background:
  radial-gradient(680px 420px at 50% -2%,rgba(255,255,255,.07),transparent 62%),
  radial-gradient(560px 480px at 90% 12%,rgba(255,255,255,.035),transparent 58%),
  radial-gradient(620px 560px at 8% 46%,rgba(255,255,255,.025),transparent 58%);
  animation:drift 26s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.4;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(circle at 50% 28%,#000,transparent 82%);
  mask-image:radial-gradient(circle at 50% 28%,#000,transparent 82%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,2%,0) scale(1.06)}}

/* white primary buttons + glass ghost, consistent everywhere */
.btn,button.primary{background:#fff;color:#0a0a0a;border:0;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 8px 24px -14px rgba(255,255,255,.5);transition:transform .15s,box-shadow .2s}
.btn:hover,button.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--fg);box-shadow:none}

/* filled-accent components in the page templates used white text on a blue bg; accent is now
   near-white, so force these specific ones to premium white-on-dark buttons (avoid white-on-white). */
.cta,.tab.on,.bubble.me,header a.cta{background:#fff!important;color:#0a0a0a!important;border-color:#fff!important}
.cta:hover,header a.cta:hover{filter:brightness(.93)}

/* premium hover lift on any card-like element */
.card,.tabref,.feat,.plan,.step,.metric,.kpi{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.card:hover,.tabref:hover,.metric:hover{border-color:var(--line-2)}

/* brand spark logo — subtle 3D rotate on hover */
.logo{display:inline-flex;align-items:center}
.logomark{transition:transform .5s cubic-bezier(.2,1.35,.35,1)}
.logo:hover .logomark{transform:rotate(135deg) scale(1.08)}
@media(prefers-reduced-motion:reduce){.logomark{transition:none}.logo:hover .logomark{transform:none}}

/* shared scroll-reveal (theme.js toggles .rv-in) */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}body::before{animation:none}}