:root{
  --deep-navy:#000000;  /* page background now black */
  --light-grey:#D3D3D3; /* body text */
  --electric-blue:#00FFFF; /* CTAs + hover outline */
  --neon-purple:#A020F0; /* headings */
  --octo-pink:#FF1F8F;   /* default focus/validation glow */
  --neon-yellow:#FFFF33; /* focus ring */
  --card-bg: rgba(255,255,255,0.06);
  --card-bd: rgba(255,255,255,0.12);
} 

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--deep-navy);
  color:var(--light-grey);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif
}
h1,h2,h3{font-family:Sora,Inter,system-ui,sans-serif;color:var(--neon-purple);line-height:1.2}
h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 8px}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 10px}
h3{font-size:1.125rem;margin:0 0 6px}
p{margin:0 0 10px}
.muted{color:rgba(211,211,211,0.9)}

/* =========================
   CTA buttons
   - .btn keeps its own look (filled electric)
   - other variants only get the glow, no style changes
   ========================= */
a.btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;
  background:var(--electric-blue);color:#021827;font-weight:700;border:none;cursor:pointer;
  text-decoration:none;
  transition:opacity .2s ease, box-shadow .2s ease, filter .2s ease;
  /* Glow */
  box-shadow:0 0 24px rgba(0,255,255,.35);
  filter:drop-shadow(0 0 14px rgba(0,255,255,.28));
}
a.btn:hover,.btn:hover{opacity:.9;box-shadow:0 0 32px rgba(0,255,255,.45);filter:drop-shadow(0 0 18px rgba(0,255,255,.35))}

.btn-ghost{background:transparent;color:var(--electric-blue);border:1px solid var(--electric-blue)}

/* Apply ONLY the glow to Tailwind-style CTA variants (no other style changes) */
a.bg-electric,button.bg-electric,
a.border-electric,button.border-electric,
a.shadow-glow,button.shadow-glow,
#stickyCta a,#stickyCta button,
a[href*="lead-form"]{
  box-shadow:0 0 24px rgba(0,255,255,.35) !important;
  filter:drop-shadow(0 0 14px rgba(0,255,255,.28)) !important;
  transition:box-shadow .2s ease, filter .2s ease;
}
a.bg-electric:hover,button.bg-electric:hover,
a.border-electric:hover,button.border-electric:hover,
a.shadow-glow:hover,button.shadow-glow:hover,
#stickyCta a:hover,#stickyCta button:hover,
a[href*="lead-form"]:hover{
  box-shadow:0 0 32px rgba(0,255,255,.45) !important;
  filter:drop-shadow(0 0 18px rgba(0,255,255,.35)) !important;
}

/* General layout */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
header{padding:18px 0}
header .brand{display:flex;align-items:center;gap:12px}
header img{height:clamp(96px,16vw,208px);width:auto}

/* =========================
   HERO — ensure glow is not clipped
   ========================= */
.hero{padding:40px 0 16px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}

/* If a Tailwind hero wrapper used overflow-hidden, don't clip the glow */
section.relative.overflow-hidden,
#top.relative.overflow-hidden,
.hero.relative.overflow-hidden{
  overflow: visible !important;
}

.beam-glow{
  width:100%;
  height:auto;
  border-radius:18px;
  /* Dual glow for soft halo */
  box-shadow:0 0 80px rgba(0,255,255,.28);
  filter: drop-shadow(0 0 24px rgba(0,255,255,.35));
}

.section{padding:40px 0}
.section--alt{background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}

/* =========================
   Cards — Electric Blue soft glow
   ========================= */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.card{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  padding:16px;
  border-radius:16px;
  box-shadow: 0 6px 22px rgba(0,255,255,0.16),
              0 0 0 1px rgba(0,255,255,0.22);
  filter: drop-shadow(0 0 8px rgba(0,255,255,0.14));
  transition: box-shadow .2s ease;
}
.card:hover{
  box-shadow: 0 10px 28px rgba(0,255,255,0.20),
              0 0 0 1px rgba(0,255,255,0.26);
}
.card h3{color: var(--electric-blue) !important;}

/* Lists & timeline */
.list{padding-left:18px}
.timeline{display:grid;gap:12px}
.step{display:flex;gap:10px;align-items:flex-start}
.step .dot{width:12px;height:12px;border-radius:50%;background:var(--neon-purple);margin-top:8px;box-shadow:0 0 0 3px rgba(160,32,240,.25)}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* details/summary (general) */
details{background:var(--card-bg);border:1px solid var(--card-bd);padding:12px 14px;border-radius:14px}
summary{cursor:pointer;font-weight:600}

/* =========================
   Accordion (FAQ) — matches card glow
   ========================= */
#faq details{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:14px;
  box-shadow: 0 6px 22px rgba(0,255,255,0.16),
              0 0 0 1px rgba(0,255,255,0.22);
  filter: drop-shadow(0 0 8px rgba(0,255,255,0.14));
  transition: box-shadow .2s ease, filter .2s ease, background-color .2s ease;
}
#faq details:hover,
#faq details[open]{
  box-shadow: 0 10px 28px rgba(0,255,255,0.20),
              0 0 0 1px rgba(0,255,255,0.26);
}
#faq summary::-webkit-details-marker{display:none}

/* CTA layout */
.cta-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}

footer{border-top:1px solid rgba(255,255,255,0.08)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:0px 0;gap:0px}
.footer-inner img{height:100px}

/* Header bar layout */
.header-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.header-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.header-cta .micro{
  font-size: 1rem;   /* bumped up from .85rem */
  line-height: 1.4;
}
@media (max-width:920px){.header-cta{align-items:flex-start}}

/* =========================
   Form inputs — pink on focus, blue on valid
   ========================= */
.field{margin-bottom:12px}
label{display:block;font-size:.9rem;margin-bottom:6px}
.control{position:relative}
input,textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;border:2px solid transparent;outline:2px solid transparent;box-shadow:none;background:#fff;color:#111;
  transition:border-color .15s ease, outline-color .15s ease, box-shadow .15s ease;
}
input:hover,textarea:hover,select:hover{outline-color:var(--octo-pink)}
input:focus,textarea:focus,select:focus{outline-color:var(--octo-pink);box-shadow:0 0 0 4px rgba(255,31,143,.22)}
input.completed,textarea.completed,select.completed{outline-color:var(--electric-blue)!important; box-shadow:0 0 0 4px rgba(0,255,255,.24)!important}

/* Checkbox */
.policy{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
input[type="checkbox"]{width:18px;height:18px;display:inline-block;margin-top:3px;cursor:pointer}

/* Numbered cards (How it works) */
.ncards .ncard .num{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--neon-purple);color:#fff;font-weight:800;box-shadow:0 0 0 4px rgba(160,32,240,.22);margin-bottom:8px
}
.ncards .ncard h3{margin:2px 0 6px}

/* Problem section: keep paragraph text consistent */
#problem p{font-size:1rem}

/* Colour tweaks per request */
#problem .cards .card p{color:var(--electric-blue)}
#solution h2{color:var(--neon-purple)}
#solution h3{color:var(--neon-purple)}

/* Responsive */
@media (max-width:920px){
  .hero-grid,.cards,.grid-2,.cta-wrap{grid-template-columns:1fr}
  header img{height:clamp(80px,28vw,160px)}
}