/* ==========================================================================
   Ignitrix Voice , Brand & Design System (single source of truth)
   Cool off-white canvas under the Ignitrix navy. Zero external dependencies.
   Loaded by BOTH the marketing site and the product dashboard so they
   look like one funded product. Do not fork the tokens; extend here.
   No em dashes anywhere in this codebase. Use commas or periods.
   ========================================================================== */

:root {
  /* ---- Canvas & surfaces, cool architectural whites ---- */
  --bg:        #F6F7FA;
  --bg-2:      #EDEFF4;
  --panel:     #FFFFFF;
  --panel-2:   #FAFBFD;
  --raised:    #EEF1F6;
  --line:      rgba(15,27,51,0.09);
  --line-2:    rgba(15,27,51,0.14);
  --line-strong: rgba(15,27,51,0.24);

  /* ---- Text ---- */
  --ink:       #0F1B33;
  --ink-soft:  #3A4761;
  --ink-dim:   #6B778E;
  --ink-faint: #9AA4B8;

  /* ---- Accent: one navy hue as a tonal ramp, light to deep.
         The mark is a single flat navy, so the system tones it rather than
         introducing a second colour. Names are historical, values are navy. ---- */
  --a-cyan:    #5C8ED8;
  --a-sky:     #3E6DB8;
  --a-indigo:  #24477F;
  --a-violet:  #14284A;
  --accent:    #0F1B33;
  --accent-ink:#FFFFFF;
  /* Runs dark end to end so a single light label reads across the whole
     sweep. The old gold ramp was light enough for dark text, navy is not. */
  --grad-volt: linear-gradient(115deg, #2F5EA8 0%, #1B3A6B 45%, #0F1B33 100%);
  --grad-volt-soft: linear-gradient(115deg, rgba(159,194,242,0.28), rgba(47,94,168,0.12));

  /* ---- Value/economics signal, used sparingly for the ₹1 proof.
         Deliberately brighter than the navy ramp. If it matched --accent the
         price highlight would disappear into body text. ---- */
  --gold:      #1668D6;
  --gold-deep: #0E4A9C;

  /* ---- Status ---- */
  --ok:        #34D399;
  --warn:      #FBBF24;
  --bad:       #FB7185;

  /* ---- Glow & shadow ---- */
  --glow-accent: 0 0 0 1px rgba(47,94,168,0.24), 0 14px 34px -16px rgba(20,40,74,0.35);
  --glow-soft:   0 0 60px -20px rgba(47,94,168,0.28);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 46px -28px rgba(15,27,51,0.30);
  --shadow-pop:  0 30px 80px -30px rgba(15,27,51,0.35);

  /* ---- Type ---- */
  --font: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.55s;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(47,94,168,0.30); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg, canvas, video { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0; }

/* ---- Premium scrollbar ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #B5BFCF; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #95A2B8; }

/* ---- Display type scale (fluid) ---- */
.t-display { font-size: clamp(2.6rem, 6.2vw, 5.2rem); font-weight: 680; letter-spacing: -0.04em; line-height: 0.98; }
.t-h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); letter-spacing: -0.035em; }
.t-h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); letter-spacing: -0.03em; }
.t-h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.t-lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-soft); line-height: 1.5; }
.t-mono { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0; }
.t-eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* gradient text */
.grad-text {
  background: var(--grad-volt);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Layout primitives ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 140px); position: relative; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }

/* ---- Buttons ---- */
.btn {
  --pad-y: 0.92em; --pad-x: 1.5em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-pill);
  font-weight: 560; font-size: 0.97rem; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
  will-change: transform;
  position: relative; isolation: isolate;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--grad-volt); color: var(--accent-ink);
  box-shadow: var(--glow-accent);
  font-weight: 600;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20,40,74,0.36), 0 20px 44px -14px rgba(20,40,74,0.42); }
.btn-ghost {
  background: rgba(255,255,255,0.7); color: var(--ink);
  border-color: var(--line-2); backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: #fff; border-color: rgba(47,94,168,.4); transform: translateY(-2px); }
.btn-quiet { background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { color: var(--ink); background: rgba(47,94,168,0.08); }
.btn-lg { --pad-y: 1.08em; --pad-x: 1.9em; font-size: 1.03rem; }
.btn-sm { --pad-y: 0.6em; --pad-x: 1.05em; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ---- Glass cards ---- */
.card {
  background: linear-gradient(180deg, #FFFFFF, #F7F9FC);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-pad { padding: clamp(20px, 2.6vw, 34px); }
.card-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: var(--grad-volt); opacity: 0; transition: opacity 0.4s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.card-glow:hover::before { opacity: 0.55; }

/* ---- Pills & badges ---- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.9em; border-radius: var(--r-pill);
  background: #ECF0F7; border: 1px solid var(--line-2);
  font-size: 0.8rem; color: var(--ink-soft); font-weight: 500;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.pill .dot.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.pill .dot.bad  { background: var(--bad);  box-shadow: 0 0 10px var(--bad); }
.badge-gold {
  background: linear-gradient(180deg, rgba(143,184,240,0.16), rgba(201,147,61,0.08));
  border: 1px solid rgba(143,184,240,0.3); color: var(--gold);
}

/* ---- Inputs ---- */
.field { display: flex; flex-direction: column; gap: 0.5em; }
.field > label { font-size: 0.82rem; color: var(--ink-dim); font-weight: 500; letter-spacing: -0.01em; }
.input, .textarea, .select {
  width: 100%; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0.82em 1em; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(47,94,168,0.7);
  box-shadow: 0 0 0 4px rgba(47,94,168,0.12);
  background: var(--panel);
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
::placeholder { color: var(--ink-faint); }

/* ---- Backdrop atmosphere (radial glows + grid + grain) ---- */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos .glow {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
}
.atmos .g1 { width: 720px; height: 720px; top: -260px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(215,180,92,0.22), transparent 62%); }
.atmos .g2 { width: 560px; height: 560px; top: 40%; left: -180px;
  background: radial-gradient(circle, rgba(245,229,184,0.28), transparent 65%); }
.atmos .g3 { width: 620px; height: 620px; bottom: -260px; right: -160px;
  background: radial-gradient(circle, rgba(47,94,168,0.14), transparent 65%); }
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hairline-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* ---- Scroll reveal (content VISIBLE by default; JS only enhances) ---- */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-d="1"] { transition-delay: 0.08s; }
html.js .reveal[data-d="2"] { transition-delay: 0.16s; }
html.js .reveal[data-d="3"] { transition-delay: 0.24s; }
html.js .reveal[data-d="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Utility ---- */
.muted { color: var(--ink-dim); }
.soft  { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.kbd { font-family: var(--mono); font-size: 0.78rem; background: var(--raised); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 7px; padding: 0.15em 0.5em; color: var(--ink-soft); }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }