/* ==========================================================================
   RapidX Voice , Brand & Design System (single source of truth)
   Premium ivory and gold SaaS aesthetic. 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, warm architectural whites ---- */
  --bg:        #F7F5EF;
  --bg-2:      #F1EEE5;
  --panel:     #FFFFFF;
  --panel-2:   #FBFAF6;
  --raised:    #F4F0E6;
  --line:      rgba(32,28,20,0.09);
  --line-2:    rgba(32,28,20,0.14);
  --line-strong: rgba(32,28,20,0.24);

  /* ---- Text ---- */
  --ink:       #1C1913;
  --ink-soft:  #4E493F;
  --ink-dim:   #777064;
  --ink-faint: #A39B8D;

  /* ---- Accent: electric "voltage" system (cyan -> indigo -> violet) ---- */
  --a-cyan:    #D9B866;
  --a-sky:     #C9A44E;
  --a-indigo:  #A77A21;
  --a-violet:  #7F5815;
  --accent:    #B88A2D;
  --accent-ink:#FFFFFF;
  --grad-volt: linear-gradient(115deg, #F4DC9A 0%, #D7B45C 38%, #B47D1E 100%);
  --grad-volt-soft: linear-gradient(115deg, rgba(244,220,154,0.28), rgba(184,138,45,0.12));

  /* ---- Value/economics signal (refined gold, used sparingly for ₹1 proof) ---- */
  --gold:      #B88A2D;
  --gold-deep: #805815;

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

  /* ---- Glow & shadow ---- */
  --glow-accent: 0 0 0 1px rgba(184,138,45,0.24), 0 14px 34px -16px rgba(128,88,21,0.35);
  --glow-soft:   0 0 60px -20px rgba(184,138,45,0.28);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 46px -28px rgba(50,40,20,0.30);
  --shadow-pop:  0 30px 80px -30px rgba(50,40,20,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(184,138,45,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: #CFC6B5; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #B8AB95; }

/* ---- 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: #211708;
  box-shadow: var(--glow-accent);
  font-weight: 600;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(128,88,21,0.36), 0 20px 44px -14px rgba(128,88,21,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(184,138,45,.4); transform: translateY(-2px); }
.btn-quiet { background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { color: var(--ink); background: rgba(184,138,45,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, #FCFBF7);
  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: #F7F4EC; 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(245,201,123,0.16), rgba(201,147,61,0.08));
  border: 1px solid rgba(245,201,123,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(184,138,45,0.7);
  box-shadow: 0 0 0 4px rgba(184,138,45,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(184,138,45,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; }