/* ══════════════════════════════════════════════════════════════════════
   Vercentic — Shared Styles
   Loaded by every page. Contains: reset, design tokens, base type/layout,
   nav, buttons, and the gradient-heading utilities. Page-specific styles
   (hero, forms, calculators, etc.) stay in each page's own <style> block.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ─── TOKENS ─── */
:root {
  --black:#000; --white:#fff;
  --g50:#fafafa; --g100:#f4f4f5; --g200:#e4e4e7;
  --g400:#a1a1aa; --g500:#71717a; --g700:#3f3f46; --g900:#18181b;
  --f:'Geist','Inter',-apple-system,sans-serif;
  --fw:'Space Grotesk',sans-serif;
  --accent:#5b47e0; --accent-light:#f0eeff;
  --green:#0ca678; --green-light:#ecfdf5;
  --amber:#d97706; --amber-light:#fffbeb;
  --red:#dc2626;
}

/* ─── BASE ─── */
html { scroll-behavior:smooth; }
body { font-family:var(--f); background:var(--white); color:var(--black); -webkit-font-smoothing:antialiased; }

/* ─── NAV ─── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; height:64px; background:rgba(255,255,255,0.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--g200); display:flex; align-items:center; padding:0 32px; }
.nav-inner { max-width:1200px; margin:0 auto; width:100%; display:flex; align-items:center; }
.nav-logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
.nav-wordmark { font-family:var(--fw); font-size:20px; font-weight:700; color:var(--black); letter-spacing:-0.5px; }
.nav-links { display:flex; margin-left:32px; }
.nav-links a { font-size:12.5px; font-weight:400; color:var(--g500); text-decoration:none; padding:0 10px; line-height:64px; transition:color .12s; }
.nav-links a:hover, .nav-links a.active { color:var(--black); }
.nav-links a.active { font-weight:500; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-ghost { font-size:13px; color:var(--g500); text-decoration:none; padding:7px 14px; transition:color .12s; }
.nav-ghost:hover { color:var(--black); }
.nav-cta { padding:7px 16px; background:var(--black); color:var(--white); border-radius:6px; font-size:13px; font-weight:500; text-decoration:none; transition:background .12s; }
.nav-cta:hover { background:var(--g900); }
.nav-back { margin-left:auto; font-size:13px; color:var(--g500); text-decoration:none; display:flex; align-items:center; gap:5px; transition:color .12s; }
.nav-back:hover { color:var(--black); }
.nav-badge { font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px; background:var(--accent-light); color:var(--accent); letter-spacing:.02em; }

/* ─── BUTTONS ─── */
.btn-black { display:inline-flex; align-items:center; gap:6px; padding:12px 26px; background:var(--black); color:var(--white); border-radius:6px; font-size:14px; font-weight:500; text-decoration:none; transition:background .12s; letter-spacing:-0.1px; border:none; cursor:pointer; }
.btn-black:hover { background:var(--g900); }
.btn-glass { display:inline-flex; align-items:center; gap:6px; padding:12px 26px; background:rgba(255,255,255,0.55); backdrop-filter:blur(12px); color:var(--black); border:1px solid rgba(255,255,255,0.65); border-radius:6px; font-size:14px; font-weight:500; text-decoration:none; transition:background .15s; letter-spacing:-0.1px; }
.btn-glass:hover { background:rgba(255,255,255,0.75); }
.btn-outline { display:inline-flex; align-items:center; gap:6px; padding:12px 26px; background:var(--white); color:var(--black); border:1px solid var(--g200); border-radius:6px; font-size:14px; font-weight:500; text-decoration:none; transition:all .12s; box-shadow:0 1px 3px rgba(0,0,0,.06); cursor:pointer; }
.btn-outline:hover { border-color:var(--g400); background:var(--g50); }

/* ─── GRADIENT HEADINGS ─── */
.grad-txt { background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.grad-b { background-image:linear-gradient(100deg,#5b47e0 0%,#ec4899 55%,#d97706 100%); }
.grad-b-dark { background-image:linear-gradient(100deg,#a78bfa 0%,#ec4899 55%,#f59e0b 100%); }

/* ─── WIZARD SHELL (demo.html + signup.html) ─── */
.page { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding-top:64px; }
.left-panel {
  padding:72px 64px; display:flex; flex-direction:column; justify-content:center;
  position:sticky; top:64px; height:calc(100vh - 64px); overflow:hidden;
  background:
    radial-gradient(ellipse at 10% 40%, rgba(200,180,232,0.75) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(232,180,200,0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 85%, rgba(240,200,152,0.60) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(180,200,232,0.55) 0%, transparent 45%),
    #f0eaf8;
}
.left-panel::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.035) 1px,transparent 1px);
  background-size:72px 72px;
}