/* ═══════════════════════════════════════════════════════════════════════════
   WeWantBetter — Light QA Professional Edition
   Light blue-grey pages · White cards · Deep navy text · Electric blue accent
   Dark hero / CTA / footer for high-contrast landmark sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
  /* Surfaces — light theme */
  --bg-page:       #F2F4FD;   /* soft blue-tinted off-white          */
  --bg-surface:    #E8ECF8;   /* slightly more tinted surface        */
  --bg-card:       #FFFFFF;   /* pure white cards                    */
  --bg-card-hover: #F6F8FF;
  --bg-elevated:   #DDE3F5;   /* interactive hover / elevated bg     */

  /* Brand — electric blue, darker shades ensure WCAG AA on light bg */
  --brand-50:  #EEEEFF;
  --brand-100: #D0D0FF;
  --brand-200: #7070CC;
  --brand-300: #3535C8;   /* links / category labels on light bg  */
  --brand-400: #2828B8;
  --brand-500: #2525A8;   /* primary button / active state        */
  --brand-600: #1B1B90;
  --brand-700: #1515A0;
  --brand-800: #181880;
  --brand-900: #101060;

  /* Accent — darkened for readability on light backgrounds */
  --cyan:    #0088BB;
  --green:   #007840;
  --amber:   #B86800;
  --red:     #C01530;

  /* Borders */
  --border:       rgba(30, 35, 100, 0.10);
  --border-mid:   rgba(30, 35, 100, 0.18);
  --border-brand: rgba(37, 37, 168, 0.30);

  /* Text — dark on light surfaces */
  --text-100: #0E1030;   /* near-black navy  */
  --text-200: #252850;   /* dark navy        */
  --text-300: #464A78;   /* medium navy      */
  --text-400: #686CA0;   /* muted navy       */

  /* Legacy compat (ink-xxx still referenced in templates) */
  --ink-900: #0E1030;
  --ink-800: #252850;
  --ink-700: #252850;
  --ink-600: #464A78;
}

/* ── Keyframe animations ────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0)      rotate(0deg); }
  33%       { transform: translateY(-14px)  rotate(.7deg); }
  66%       { transform: translateY(-7px)   rotate(-.5deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-22px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: .4; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: .9; transform: translate(-50%,-50%) scale(1.12); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  25%       { transform: translate(40px,-28px) scale(1.06); }
  50%       { transform: translate(-22px,35px) scale(.95); }
  75%       { transform: translate(28px,18px) scale(1.03); }
}
@keyframes scan-line {
  0%   { transform: translateY(-100%); opacity:0; }
  10%  { opacity:.35; }
  90%  { opacity:.35; }
  100% { transform: translateY(100vh); opacity:0; }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(56,56,245,0.3); }
  50%      { box-shadow: 0 0 28px rgba(56,56,245,0.75), 0 0 50px rgba(56,56,245,0.3); }
}


/* ── Base dark ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg-page);
  color: var(--text-100);
  -webkit-font-smoothing: antialiased;
}

/* ── Tailwind utility overrides — light theme ───────────────────────── */
.bg-white          { background-color: #FFFFFF                   !important; }
.bg-slate-50,
.bg-slate-100      { background-color: var(--bg-page)            !important; }
.border-slate-200,
.border-slate-100,
.border-slate-300  { border-color: var(--border)                 !important; }

/* bg-ink-900: kept dark — used for deliberate contrast sections */
.bg-ink-900        { background-color: #0C0E2A                   !important; }

.text-ink-900,
.text-slate-900    { color: var(--text-100)                       !important; }
.text-ink-800,
.text-slate-800    { color: var(--text-200)                       !important; }
.text-ink-700,
.text-slate-700    { color: var(--text-200)                       !important; }
.text-ink-600,
.text-slate-600    { color: var(--text-300)                       !important; }
.text-ink-500,
.text-slate-500    { color: var(--text-400)                       !important; }
.text-slate-400    { color: var(--text-300)                       !important; }

/* Brand text — darkened for WCAG AA on white */
.text-brand-300                   { color: #3535C8               !important; }
.text-brand-200                   { color: #2525A8               !important; }
.hover\:text-brand-300:hover      { color: #2525A8               !important; }
.hover\:text-brand-200:hover      { color: #1B1B90               !important; }

/* Restore original light brand colours inside dark landmark sections */
.bg-ink-900 .text-brand-300,
.cta-bg     .text-brand-300,
.hero-bg    .text-brand-300       { color: #8080FF               !important; }
/* hero-accent (inner pages) — restore brand colours for dark bg */
.hero-accent .text-brand-300      { color: #8080FF               !important; }
.hero-accent .text-brand-400      { color: #ABABFF               !important; }
.hero-accent .text-brand-700      { color: #ABABFF               !important; }
.hero-accent .hover\:text-brand-300:hover { color: #ABABFF       !important; }
.hero-accent .hover\:text-brand-200:hover { color: #C8C8FF       !important; }
/* Headings / bold text always white inside dark hero-accent */
.hero-accent h1,
.hero-accent h2                   { color: #FFFFFF               !important; }
.hero-accent strong               { color: #FFFFFF               !important; }
/* Category pills inside the dark hero-accent */
.hero-cat-pill                    { color: #FFFFFF               !important; }
.hero-cat-pill--active            { color: #FFFFFF               !important; }
.bg-ink-900 .hover\:text-brand-300:hover,
.cta-bg     .hover\:text-brand-300:hover { color: #ABABFF        !important; }
.bg-ink-900 .text-brand-200,
.cta-bg     .text-brand-200       { color: #ABABFF               !important; }
.bg-ink-900 .hover\:text-brand-200:hover,
.cta-bg     .hover\:text-brand-200:hover { color: #C8C8FF        !important; }

/* Hero badge — guaranteed white regardless of inheritance chain */
.hero-badge                       { color: #FFFFFF               !important; }

.hover\:bg-slate-100:hover        { background-color: var(--bg-elevated)     !important; }
.bg-slate-50\/40                  { background-color: var(--bg-surface)       !important; }
.bg-slate-50\/60                  { background-color: rgba(232,236,248,0.85)  !important; }
.border-slate-100                 { border-color: var(--border)               !important; }

/* White-alpha borders — keep visible on light bg */
.border-white\/10                 { border-color: var(--border)               !important; }
.border-white\/20                 { border-color: var(--border-mid)           !important; }
.hover\:bg-white\/10:hover        { background-color: var(--bg-elevated)      !important; }

/* ── Badge pills — light bg variants ────────────────────────────────── */
.bg-emerald-100   { background-color: rgba(0,120,64,.10)         !important; }
.text-emerald-800 { color: var(--green)                          !important; }
.ring-emerald-200 { --tw-ring-color: rgba(0,120,64,.25)          !important; }
.bg-red-100       { background-color: rgba(192,21,48,.10)        !important; }
.text-red-800     { color: var(--red)                            !important; }
.ring-red-200     { --tw-ring-color: rgba(192,21,48,.25)         !important; }
.bg-amber-100     { background-color: rgba(184,104,0,.10)        !important; }
.text-amber-800   { color: var(--amber)                          !important; }
.ring-amber-200   { --tw-ring-color: rgba(184,104,0,.25)         !important; }
.ring-slate-200   { --tw-ring-color: var(--border)               !important; }

.hover\:bg-brand-50:hover         { background-color: rgba(37,37,168,.08)    !important; }
.bg-brand-50                      { background-color: rgba(37,37,168,.08)    !important; }
.bg-brand-100                     { background-color: rgba(37,37,168,.13)    !important; }
.border-brand-200                 { border-color: var(--border-brand)        !important; }
.text-brand-700                   { color: var(--brand-300)                  !important; }
.text-brand-600                   { color: var(--brand-400)                  !important; }
.bg-brand-600                     { background-color: var(--brand-500)       !important; }
.hover\:bg-brand-700:hover        { background-color: var(--brand-600)       !important; }
.bg-amber-50                      { background-color: rgba(184,104,0,.08)    !important; }
.border-amber-200                 { border-color: rgba(184,104,0,.25)        !important; }
.text-amber-700                   { color: var(--amber)                      !important; }
.hover\:bg-red-50:hover           { background-color: rgba(192,21,48,.08)    !important; }
.hover\:text-red-600:hover        { color: var(--red)                        !important; }
.hover\:border-red-200:hover      { border-color: rgba(192,21,48,.25)        !important; }
.shadow-sm, .shadow-md, .shadow-xl { --tw-shadow-color: rgba(0,0,0,0.07); }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width:8px; height:8px; }
::-webkit-scrollbar-track      { background: transparent; transition: background 0.3s; }
::-webkit-scrollbar-thumb      { background: transparent; border-radius:4px; transition: background 0.3s; }
html.sb-visible ::-webkit-scrollbar-track      { background: #fff; }
html.sb-visible ::-webkit-scrollbar-thumb      { background: var(--brand-500); }
html.sb-visible ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Selection / focus ───────────────────────────────────────────────── */
::selection    { background: rgba(37,37,168,.18); color: var(--text-100); }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }


/* ── Typography / prose ─────────────────────────────────────────────── */
.prose-ww { color: var(--text-200); font-size: 1.0625rem; line-height: 1.78; }
.prose-ww h1, .prose-ww h2, .prose-ww h3, .prose-ww h4 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  color: var(--text-100);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.prose-ww h2 { font-size: 1.6rem; margin: 2.25rem 0 0.9rem; }
.prose-ww h3 { font-size: 1.275rem; margin: 1.75rem 0 0.6rem; }
.prose-ww h4 { font-size: 1.075rem; margin: 1.5rem 0 0.5rem; }
.prose-ww p  { margin: 0 0 1.1rem; }
.prose-ww ul, .prose-ww ol { padding-left: 1.25rem; margin: 0 0 1.1rem; }
.prose-ww li { margin: 0.25rem 0; }
.prose-ww a  { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; }
.prose-ww a:hover { color: var(--brand-400); }
.prose-ww blockquote {
  border-left: 3px solid var(--brand-500);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 1.25rem 0;
  color: var(--text-300);
  background: linear-gradient(90deg, rgba(37,37,168,0.06), transparent);
}
.prose-ww code {
  background: rgba(37,37,168,0.08);
  border: 1px solid var(--border-brand);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.92em;
  font-family: 'JetBrains Mono','Fira Mono',monospace;
  color: var(--brand-500);
}
.prose-ww pre {
  background: #0E1030;
  color: #c0c8ff;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono','Fira Mono',monospace;
}
.prose-ww img { border-radius: 12px; margin: 1.25rem 0; max-width: 100%; height: auto; }
.prose-ww table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95em; }
.prose-ww th { background: rgba(37,37,168,0.08); color: var(--text-100); font-weight: 700; text-align: left; padding: 0.55rem 0.85rem; border: 1px solid var(--border-brand); }
.prose-ww td { padding: 0.5rem 0.85rem; border: 1px solid var(--border); vertical-align: top; color: var(--text-200); }
.prose-ww tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.prose-ww hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* ── Hero accent (inner-page banner — now light) ──────────────────────── */
.hero-accent {
  position: relative;
  isolation: isolate;
  background-color: #07070C;
  color: #fff;
  border-bottom: 1px solid rgba(53,53,245,0.30);
  overflow: visible; /* never clip native <select> dropdowns */
}
.hero-accent::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(7,7,12,.97) 0%, rgba(27,27,112,.80) 55%, rgba(53,53,245,.28) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-accent::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(56,56,245,0.22) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-accent > * { position: relative; z-index: 1; }

/* ── Full-page hero (home) — stays dark with background image ─────────── */
.hero-bg {
  position: relative;
  isolation: isolate;
  background-color: #07070C;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(7,7,12,.97) 0%, rgba(27,27,112,.80) 55%, rgba(53,53,245,.28) 100%);
  z-index: 0;
}
/* QA grid-dot pattern */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(56,56,245,0.22) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-bg > * { position: relative; z-index: 1; }

/* Animated background orbs */
.hero-orb-1 {
  position: absolute;
  width: 700px; height: 700px;
  right: -150px; top: -150px;
  background: radial-gradient(circle, rgba(53,53,245,.45) 0%, transparent 70%);
  border-radius: 50%;
  animation: orb-drift 18s ease-in-out infinite;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero-orb-2 {
  position: absolute;
  width: 450px; height: 450px;
  left: -80px; bottom: -80px;
  background: radial-gradient(circle, rgba(0,212,255,.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: orb-drift 25s ease-in-out infinite reverse;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

/* ── Glass card (used in dark hero) ──────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 8px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ── Gradient text ────────────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #00D4FF 0%, #8080FF 50%, #3535F5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Floating stat cards ──────────────────────────────────────────────── */
.stat-card-float { animation: float 7s ease-in-out infinite; }
.stat-card-float:nth-child(2) { animation-delay: -1.75s; }
.stat-card-float:nth-child(3) { animation-delay: -3.5s; }
.stat-card-float:nth-child(4) { animation-delay: -5.25s; }

/* ── Tool / vendor logo tiles ─────────────────────────────────────────── */
.tool-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  display: grid; place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  overflow: hidden;
  /* No hover transform — logos are non-interactive unless inside <a> */
}
/* Hover only when tile is inside a hyperlink */
a .tool-logo:hover,
a.tool-logo:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(37,37,168,.22); }
.tool-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.tool-logo--lg { width: 72px; height: 72px; border-radius: 16px; }
.tool-logo--xl { width: 96px; height: 96px; border-radius: 20px; }

.logo-placeholder {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  color: var(--brand-500);
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  position: relative;
}

/* ── News / article cards with cover image ────────────────────────────── */
.card-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-elevated);
}
.card-cover.placeholder {
  background:
    radial-gradient(60% 70% at 30% 30%, rgba(6,212,255,0.15), transparent 65%),
    radial-gradient(70% 80% at 80% 70%, rgba(56,56,245,0.30), transparent 65%),
    linear-gradient(135deg, #0E1040 0%, #1A1E52 100%);
}

/* ── Line clamp safety net ────────────────────────────────────────────── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Stat cards hero glow orb ─────────────────────────────────────────── */
.stat-glow-orb {
  position: absolute;
  inset: 0;
  z-index: -10;
  border-radius: 1.5rem;
  background: radial-gradient(circle at 50% 50%, rgba(56,56,245,0.6), transparent 70%);
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge-soft {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand-500); background: rgba(37,37,168,0.10); border:1px solid rgba(37,37,168,0.25);
  padding:.28rem .85rem; border-radius:9999px;
}
.hero-accent .badge-soft {
  color: #8080FF; background: rgba(128,128,255,0.15); border-color: rgba(128,128,255,0.35);
}

.badge-pass {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.70rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--green); background: rgba(0,120,64,.10); border:1px solid rgba(0,120,64,.25);
  padding:.22rem .65rem; border-radius:9999px;
}
.badge-pass::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); display:inline-block; }

.badge-warn {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.70rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--amber); background: rgba(184,104,0,.10); border:1px solid rgba(184,104,0,.25);
  padding:.22rem .65rem; border-radius:9999px;
}

/* Compare table badge tiers */
.badge-good      { background:rgba(0,120,64,.12);   color:#007840; border:1px solid rgba(0,120,64,.25);   border-radius:9999px; padding:.25rem .7rem; font-size:.80rem; font-weight:700; display:inline-flex; align-items:center; }
.badge-warn-cell { background:rgba(184,104,0,.12);  color:#B86800; border:1px solid rgba(184,104,0,.25);  border-radius:9999px; padding:.25rem .7rem; font-size:.80rem; font-weight:700; display:inline-flex; align-items:center; }
.badge-bad       { background:rgba(192,21,48,.12);  color:#C01530; border:1px solid rgba(192,21,48,.25);  border-radius:9999px; padding:.25rem .7rem; font-size:.80rem; font-weight:700; display:inline-flex; align-items:center; }
.badge-info      { background:rgba(37,37,168,.12);  color:#2525A8; border:1px solid rgba(37,37,168,.25);  border-radius:9999px; padding:.25rem .7rem; font-size:.80rem; font-weight:700; display:inline-flex; align-items:center; }

/* ── Nav link animated underline ────────────────────────────────────── */
.nav-link {
  position: relative;
  transition: color .2s;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--cyan));
  border-radius: 1px;
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Animated gradient button ───────────────────────────────────────── */
.btn-animated {
  background: linear-gradient(135deg, #2525A8, #1A1E80, #2525A8);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-animated::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 55%);
  pointer-events: none;
}
.btn-animated:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px -4px rgba(37,37,168,.50);
}

/* ── Step icon ───────────────────────────────────────────────────────── */
.step-icon-num {
  background: linear-gradient(135deg, var(--brand-500), #0088BB) !important;
  box-shadow: 0 8px 22px -4px rgba(37,37,168, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Step cards (How It Works) ───────────────────────────────────────── */
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease, border-color .3s ease;
}
.step-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,37,168,0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.step-card:hover {
  transform: perspective(900px) rotateX(-5deg) translateY(-10px) translateZ(14px);
  box-shadow: 0 28px 70px -14px rgba(37,37,168,.18), 0 6px 18px -6px rgba(0,0,0,.10);
  border-color: var(--border-brand);
}
.step-card:hover::before { opacity: 1; }

/* ── Comparison cards ───────────────────────────────────────────────── */
.comparison-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.comparison-card:hover {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px rgba(37,37,168,0.12), 0 20px 50px -10px rgba(37,37,168,.18);
  transform: translateY(-2px);
}
.comparison-card h3 { color: var(--text-100) !important; }
.comparison-card:hover h3 { color: var(--brand-500) !important; }
.comparison-card p  { color: var(--text-300) !important; }

/* ── Value cards — light default, dark override for bg-ink-900 section ── */
.value-card {
  background: rgba(37,37,168,0.05);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.5rem;
  position: relative; overflow: hidden;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.value-card:hover {
  background: rgba(37,37,168,0.09);
  border-color: var(--border-brand);
  box-shadow: 0 20px 50px -10px rgba(37,37,168,.12);
}
.bg-ink-900 .value-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.bg-ink-900 .value-card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(170,170,255,0.30);
  box-shadow: 0 20px 50px -10px rgba(53,53,245,.35);
}

/* ── News cards ─────────────────────────────────────────────────────── */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: border-color .25s, box-shadow .25s, transform .3s;
}
.news-card:hover {
  border-color: var(--border-brand);
  box-shadow: 0 0 0 1px rgba(37,37,168,0.10), 0 16px 40px -8px rgba(37,37,168,.15);
  transform: translateY(-4px);
}
.news-card h3 { color: var(--text-100) !important; }
.news-card:hover h3 { color: var(--brand-500) !important; }
.news-card p  { color: var(--text-300) !important; }

/* ── CTA section — stays dark ────────────────────────────────────────── */
.cta-bg {
  position: relative;
  background: linear-gradient(135deg, #1B1B70 0%, #0F0F3A 55%, #07070C 100%);
  overflow: hidden;
}
.cta-orb-1 {
  position: absolute;
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(53,53,245,.30) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse-glow 5s ease-in-out infinite;
  filter: blur(40px);
  pointer-events: none;
}
.cta-orb-2 {
  position: absolute;
  width: 320px; height: 320px;
  top: -70px; right: 7%;
  background: radial-gradient(circle, rgba(6,212,255,.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float-slow 10s ease-in-out infinite;
  filter: blur(28px);
  pointer-events: none;
}

/* ── Glow utilities ─────────────────────────────────────────────────── */
.glow-brand { animation: glow-pulse 3s ease-in-out infinite; }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 10px rgba(37,37,168,0.3); }
  50%      { box-shadow: 0 0 28px rgba(37,37,168,0.75), 0 0 50px rgba(37,37,168,0.3); }
}

/* CTA button */
.cta-btn-shadow {
  box-shadow: 0 20px 60px -12px rgba(0,0,0,0.4), 0 4px 12px -4px rgba(0,0,0,0.2);
}

/* ── Form inputs (global light) ──────────────────────────────────────── */
input, select, textarea {
  background: #FFFFFF !important;
  border-color: var(--border-mid) !important;
  color: var(--text-100) !important;
  caret-color: var(--brand-500);
}
input::placeholder, textarea::placeholder { color: var(--text-400) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(37,37,168,.15) !important;
}
select option { background: #FFFFFF; color: var(--text-100); }

/* Ensure containers with pickers never clip native <select> dropdown */
.picker-wrap { overflow: visible !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar            { width: 8px; height: 8px; }
::-webkit-scrollbar-track      { background: transparent; transition: background 0.3s; }
::-webkit-scrollbar-thumb      { background: transparent; border-radius: 4px; transition: background 0.3s; }
html.sb-visible ::-webkit-scrollbar-track      { background: #fff; }
html.sb-visible ::-webkit-scrollbar-thumb      { background: var(--brand-500); }
html.sb-visible ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Reading progress bar ───────────────────────────────────────────── */
#reading-progress {
  background: linear-gradient(90deg, var(--brand-500), var(--cyan));
}

/* ── Terminal decorations ───────────────────────────────────────────── */
.terminal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.terminal-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.terminal-dot.blue  { background: var(--brand-500); box-shadow: 0 0 8px var(--brand-500); }
.terminal-dot.cyan  { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.cursor-blink::after { content: '_'; animation: blink 1s step-end infinite; color: var(--cyan); }

/* ── HR ─────────────────────────────────────────────────────────────── */
hr { border-color: var(--border) !important; }