/* Professional theme: near-black, white typography, one restrained indigo accent, calm motion.
   Loaded after site.css on every page. Remove the theme-pro.css <link> lines to return to the original look. */
:root {
  --bg: #050506;
  --bg-2: #0b0c0f;
  --surface: rgba(255, 255, 255, .028);
  --surface-2: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --text: #ededf0;
  --text-2: #a9aeb9;
  --muted: #737884;
  --blue: #6f8cff;      /* single accent: soft indigo */
  --violet: #4c5bd4;
  --cyan: #a9b8ff;
  --grad: linear-gradient(135deg, #3f4fc4 0%, #6f8cff 60%, #a9b8ff 100%);
  --grad-text: linear-gradient(100deg, #ffffff 0%, #d5dcff 45%, #98aaff 100%);
  --glow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px -10px rgba(0, 0, 0, .8);
}
body { background: var(--bg); letter-spacing: -.003em; }
::selection { background: rgba(111, 140, 255, .35); }

/* Calm ambient light at the top, and a faint, slow indigo horizon at the bottom: an AI feel without the show. */
body::before {
  background:
    radial-gradient(45% 55% at 50% -5%, rgba(111, 140, 255, .13), transparent 70%),
    radial-gradient(30% 40% at 90% 10%, rgba(76, 91, 212, .07), transparent 70%);
}
body::after {
  content: ""; position: fixed; left: -10vw; right: -10vw; bottom: -30vh; height: 50vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 60% at 25% 75%, rgba(76, 91, 212, .55), transparent 70%),
    radial-gradient(30% 55% at 60% 80%, rgba(111, 140, 255, .45), transparent 70%),
    radial-gradient(25% 50% at 85% 78%, rgba(169, 184, 255, .3), transparent 70%);
  background-size: 140% 100%, 130% 100%, 120% 100%;
  filter: blur(60px);
  opacity: .22;
  animation: horizon 24s ease-in-out infinite alternate;
}
@keyframes horizon {
  from { background-position: 0% 0%, 100% 0%, 30% 0%; }
  to   { background-position: 100% 0%, 0% 0%, 70% 0%; }
}

/* Typography: headings in clean white with a subtle silver-indigo accent */
h1 { font-weight: 700; letter-spacing: -.045em; }
h2 { font-weight: 700; letter-spacing: -.035em; }
.eyebrow { background: transparent; color: var(--text-2); font-weight: 500; letter-spacing: .14em; }
.eyebrow::before { background: var(--blue); box-shadow: none; }

/* Header */
.site-header.scrolled { background: rgba(5, 5, 6, .82); }

/* Buttons: solid white primary, quiet secondary */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { color: #0a0b0e; background: #f2f3f5; box-shadow: var(--glow); }
.btn-primary:hover { background: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 30px -12px rgba(111, 140, 255, .45); }
.btn-primary .spinner { border-color: rgba(0, 0, 0, .2); border-top-color: #0a0b0e; }
.btn-ghost { background: transparent; backdrop-filter: none; }

/* Surfaces: flatter, crisper cards */
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); border-radius: 18px; }
.card.glow::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 140, 255, .08), transparent 45%); }
.icon-tile { border-radius: 12px; border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.icon-tile svg { stroke: #c7d0ff; }
.quote-card { border-radius: 18px; }
.answer-band { border-color: var(--line-2); background: linear-gradient(110deg, rgba(111, 140, 255, .09), rgba(255, 255, 255, .02)); }
.cta-band { border-color: var(--line-2); background: radial-gradient(70% 120% at 50% 0%, rgba(111, 140, 255, .16), transparent 70%), var(--bg-2); }
.marquee-track span { font-weight: 500; }
.marquee-track span::before { color: var(--muted); }
.float { background: rgba(12, 13, 17, .8); border-color: var(--line-2); }
.bars span { background: linear-gradient(180deg, #a9b8ff, #4c5bd4); }
.bars span:nth-child(2n) { background: linear-gradient(180deg, #d5dcff, #6f8cff); }
.sheet .hl { background: rgba(111, 140, 255, .18); color: #e3e8ff; }
.examples button:hover, .examples button[aria-pressed="true"] { border-color: rgba(111, 140, 255, .5); background: rgba(111, 140, 255, .1); }
.tool-card .for, .audience .label, .module .kicker, .rhythm b { color: #9fb0ff; }
.module.pro .kicker { color: #c7d0ff; }
.stat.dark { border-color: rgba(111, 140, 255, .35); background: linear-gradient(140deg, rgba(111, 140, 255, .12), rgba(255, 255, 255, .02)); }
.plan.featured { border-color: rgba(111, 140, 255, .4); background: radial-gradient(80% 60% at 100% 0%, rgba(111, 140, 255, .1), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); }
.plan .ribbon { background: var(--blue); color: #0a0b0e; }
.health-check { background: linear-gradient(120deg, #141833, #1f2757 60%, #2c3a8a); border: 1px solid rgba(111, 140, 255, .3); }
.health-check a.btn { background: #f2f3f5 !important; border-color: #f2f3f5 !important; color: #0a0b0e !important; }
.rhythm div:last-child { border-color: rgba(111, 140, 255, .35); background: rgba(111, 140, 255, .06); }
.rhythm div:last-child b { color: #c7d0ff; }
.product-logo small { background: linear-gradient(90deg, #c7d0ff, #8ea2ff); -webkit-background-clip: text; background-clip: text; }
.product-logo img { box-shadow: none; }

/* Forms */
.input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(111, 140, 255, .18); }
.choice input:checked + span { border-color: var(--blue); background: rgba(111, 140, 255, .08); box-shadow: none; }
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: rgba(111, 140, 255, .05); }
.dropzone svg { stroke: #c7d0ff; }
.sol-nav a:hover, .sol-nav a.active { border-color: rgba(111, 140, 255, .45); background: rgba(111, 140, 255, .08); }
.solution .problem { border-left-color: var(--blue); background: rgba(111, 140, 255, .06); }
.timeline::before { background: linear-gradient(var(--violet), var(--blue), var(--cyan)); opacity: .35; }

@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }