/* Neon green + neon yellow accent on black. Loaded after site.css and theme-pro.css on every page.
   Remove the theme-neon.css <link> lines to return to the indigo accent. */
:root {
  --bg: #040504;
  --bg-2: #090c08;
  --blue: #3dff7a;      /* neon green (primary accent) */
  --violet: #14a84e;    /* deep green */
  --cyan: #e6ff3a;      /* neon yellow (highlights, focus) */
  --accent-soft: #c9ff8f;
  --on-accent: #061006; /* text on neon fills */
  --grad: linear-gradient(135deg, #00e070 0%, #7dff3a 50%, #eaff00 100%);
  --grad-text: linear-gradient(100deg, #ffffff 0%, #c8ff8a 40%, #3dff7a 70%, #eaff00 100%);
  --glow: 0 0 0 1px rgba(61, 255, 122, .45), 0 10px 34px -10px rgba(125, 255, 58, .55);
}
::selection { background: rgba(125, 255, 58, .3); }

/* Ambient light: green glow at the top, green-yellow horizon at the bottom */
body::before {
  background:
    radial-gradient(45% 55% at 50% -5%, rgba(61, 255, 122, .13), transparent 70%),
    radial-gradient(30% 40% at 90% 10%, rgba(234, 255, 0, .07), transparent 70%);
}
body::after {
  background:
    radial-gradient(35% 60% at 25% 75%, rgba(20, 168, 78, .55), transparent 70%),
    radial-gradient(30% 55% at 60% 80%, rgba(61, 255, 122, .4), transparent 70%),
    radial-gradient(25% 50% at 85% 78%, rgba(234, 255, 0, .3), transparent 70%);
  background-size: 140% 100%, 130% 100%, 120% 100%;
}

/* Buttons: neon gradient primary with dark text */
.btn-primary { color: var(--on-accent); background: var(--grad); background-size: 160% 100%; box-shadow: var(--glow); }
.btn-primary:hover { background: var(--grad); background-position: 100% 0; box-shadow: 0 0 0 1px rgba(234, 255, 0, .6), 0 14px 44px -10px rgba(125, 255, 58, .7); }
.btn-primary .spinner { border-color: rgba(6, 16, 6, .25); border-top-color: var(--on-accent); }
.btn-ghost:hover { border-color: rgba(61, 255, 122, .5); }
.skip { color: var(--on-accent); }

/* Surfaces and accents */
.card.glow::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 255, 122, .08), transparent 45%); }
.icon-tile { border-color: rgba(61, 255, 122, .25); background: linear-gradient(140deg, rgba(61, 255, 122, .12), rgba(234, 255, 0, .03)); }
.icon-tile svg { stroke: var(--accent-soft); }
.eyebrow::before { box-shadow: 0 0 10px var(--blue); }
.answer-band { border-color: rgba(61, 255, 122, .3); background: linear-gradient(110deg, rgba(61, 255, 122, .09), rgba(234, 255, 0, .04)); }
.cta-band { border-color: rgba(61, 255, 122, .3); background: radial-gradient(70% 120% at 50% 0%, rgba(61, 255, 122, .16), transparent 70%), radial-gradient(50% 80% at 100% 100%, rgba(234, 255, 0, .08), transparent 70%), var(--bg-2); }
.float { border-color: rgba(61, 255, 122, .18); background: rgba(8, 12, 8, .82); }
.bars span { background: linear-gradient(180deg, #3dff7a, #14a84e); }
.bars span:nth-child(2n) { background: linear-gradient(180deg, #eaff00, #7dff3a); }
.sheet .hl { background: rgba(61, 255, 122, .16); color: #e4ffe9; }
.examples button:hover, .examples button[aria-pressed="true"] { border-color: rgba(61, 255, 122, .5); background: rgba(61, 255, 122, .08); }
.demo-steps span.on { background: rgba(61, 255, 122, .15); }
.tool-card .for, .audience .label, .module .kicker, .rhythm b { color: var(--blue); }
.module.pro .kicker { color: var(--cyan); }
.stat.dark { border-color: rgba(61, 255, 122, .35); background: linear-gradient(140deg, rgba(61, 255, 122, .1), rgba(234, 255, 0, .03)); }
.plan.featured { border-color: rgba(61, 255, 122, .45); background: radial-gradient(80% 60% at 100% 0%, rgba(234, 255, 0, .08), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); }
.plan .ribbon { background: var(--grad); color: var(--on-accent); }
.pro-tag { color: var(--on-accent); }
.health-check { background: linear-gradient(120deg, #041208, #0b3a1c 60%, #12662f); border-color: rgba(61, 255, 122, .35); }
.health-check a.btn { color: #0b3a1c !important; }
.rhythm div:last-child { border-color: rgba(234, 255, 0, .35); background: rgba(234, 255, 0, .05); }
.rhythm div:last-child b { color: var(--cyan); }
.product-logo small { background: linear-gradient(90deg, #3dff7a, #eaff00); -webkit-background-clip: text; background-clip: text; }
.pill.info, .file-list .ext, .report ol li::before { color: var(--accent-soft); }
.pill.info, .file-list .ext { background: rgba(61, 255, 122, .12); }
.report ol li::before { background: rgba(61, 255, 122, .16); }
.notice.info { border-color: rgba(61, 255, 122, .35); background: rgba(61, 255, 122, .06); color: #d6ffe0; }
.report .card h3 span { background: rgba(61, 255, 122, .14); }

/* Forms */
.input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 255, 122, .18); }
.choice input:checked + span { border-color: var(--blue); background: rgba(61, 255, 122, .07); }
.dropzone:hover, .dropzone.drag { border-color: var(--blue); background: rgba(61, 255, 122, .05); }
.dropzone svg { stroke: var(--accent-soft); }
.sol-nav a:hover, .sol-nav a.active { border-color: rgba(61, 255, 122, .45); background: rgba(61, 255, 122, .07); }
.solution .problem { border-left-color: var(--blue); background: rgba(61, 255, 122, .05); }

/* Product page */
.shot-tab[aria-selected="true"] { border-color: rgba(61, 255, 122, .55); background: rgba(61, 255, 122, .07); }
.shot-stage::before { background: radial-gradient(closest-side, rgba(61, 255, 122, .18), transparent); }
.product-shot:hover { border-color: rgba(61, 255, 122, .55); }