/* =========================================================
   Launchlytics - Global Styles
   ========================================================= */
:root{
  --brand:#6f4ff2;
  --brand-2:#a78bfa;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#f8fafc;
  --border:#eef2ff;
  --ring:#c7d2fe;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text); background:#fff; line-height:1.55;
}

/* Accessibility & focus */
:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus{
  position:static!important; width:auto;height:auto;margin:0;
  clip:auto;border:0;padding:.25rem .5rem;background:#fff;
  box-shadow:0 0 0 3px var(--ring);
}

/* Color scheme helpers */
.bg-gradient-light{
  background:linear-gradient(180deg,#ffffff, #f7f7ff 70%, #fff);
}
.text-muted{color:var(--muted)!important}

/* =========================================================
   Navbar / Header
   ========================================================= */
/* ===== Clean, Sticky Header (no shapes) ===== */
/* Navbar Logo */
.navbar .logo-img{
  height:55px;              /* adjust size as needed */
  width:auto;
  display:block;
  transition:transform .2s ease;
}
.navbar .logo-img:hover{
  transform:scale(1.05);    /* subtle zoom on hover */
}
header.border-bottom{ border:0 } /* remove the default hard line */

header {
  position: sticky;
  top: 0;
  z-index: 1040; /* above modals/offcanvas */
}
/* Sticky, flat, modern bar */
.navbar{
  position: sticky; top:0; z-index: 1040;  /* above offcanvas/modals */
  background:#ffffff !important;
  border-bottom:1px solid #eaeef6;
  padding:.7rem 0;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

/* Subtle elevation when scrolled */
.navbar.is-scrolled{
  border-color:#e3e8f2;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

/* Brand */
.navbar .logo-circle{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand,#6f4ff2),var(--brand-2,#a78bfa));
}
.navbar .navbar-brand strong{ letter-spacing:.2px }

/* Links — simple, crisp, no shapes/underlines */
.navbar .nav-link{
  font-weight:600;
  color:#1f2937;
  padding:.5rem .8rem;
  border-radius:0;                 /* no pill shapes */
  background:transparent;          /* no hover fills */
  transition: color .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color:var(--brand,#6f4ff2) }
.navbar .nav-link.active{
  color:var(--brand,#6f4ff2);      /* active = color only, no bars/lines */
}

/* CTA — solid, not gradient */
.navbar .btn.btn-primary{
  background:var(--brand,#6f4ff2);
  border-color:var(--brand,#6f4ff2);
  font-weight:700;
  padding:.55rem .95rem;
  border-radius:.6rem;
  box-shadow:0 6px 16px rgba(111,79,242,.2);
}
.navbar .btn.btn-primary:hover{ filter:brightness(1.05) }

/* Toggler icon — always visible */
.navbar-toggler{ border:0; outline:0 }
.navbar-toggler:focus{ box-shadow:none }
.navbar-toggler .navbar-toggler-icon{
  width:1.35rem; height:1.35rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23343a40' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Container width polish on very wide screens */
@media (min-width:1400px){
  .navbar .container{ max-width:1200px }
}

/* Mobile spacing */
@media (max-width: 991.98px){
  .navbar{ padding:.6rem 0 }
  .navbar .nav-link{ padding:.6rem .75rem }
}


/* =========================================================
   Hero — Modern, premium, responsive (HTML unchanged)
   ========================================================= */
#home{
  /* local aliases (safe) */
  --b: var(--brand, #6f4ff2);
  --b2: var(--brand-2, #a78bfa);
  --glow: rgba(111,79,242,.08);
  --ink: #0f172a;

  position: relative;
  border-bottom:1px solid #eef2ff;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    linear-gradient(to bottom, rgba(2,6,23,.02), rgba(2,6,23,.02)) 0 0 / 100% 100%,
    linear-gradient(0deg, transparent 24%, rgba(15,23,42,.04) 25%, rgba(15,23,42,.04) 26%, transparent 27%, transparent 74%, rgba(15,23,42,.04) 75%, rgba(15,23,42,.04) 76%, transparent 77%) 0 0/ 100% 42px,
    linear-gradient(90deg, transparent 24%, rgba(15,23,42,.04) 25%, rgba(15,23,42,.04) 26%, transparent 27%, transparent 74%, rgba(15,23,42,.04) 75%, rgba(15,23,42,.04) 76%, transparent 77%) 0 0/ 42px 100%,
    radial-gradient(700px 300px at 85% 10%, var(--glow), transparent 60%),
    #fff;
}
#home .container{ max-width: 1160px }

/* Headline & copy */
#home h1{
  color: var(--ink);
  line-height:1.12;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: .6rem;
}
#home .lead{
  color:#475569;
  max-width: 65ch;
  margin-top: .75rem;
  font-weight: 500;
}

/* Feature bullets: crisp, minimal checks */
#home ul.list-unstyled{ margin-top: 1rem }
#home ul.list-unstyled li{
  position:relative;
  padding-left:1.75rem;
  margin:.45rem 0;
  color:#334155;
}
#home ul.list-unstyled li::before{
  content:"";
  position:absolute; left:0; top:.25rem;
  width:18px; height:18px; border-radius:6px;
  background: #fff;
  border: 2px solid var(--brand);
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
}
#home ul.list-unstyled li::after{
  content:"";
  position:absolute; left:6px; top:1px;
  width:8px; height:12px; transform: rotate(40deg);
  border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
}

/* -------- BUTTONS: solid fallback + gradient; no color-mix needed -------- */
#home .btn.btn-primary.btn-lg{
  /* Fallback (solid) */
  background: var(--b);
  /* Nice gradient */
  background-image: linear-gradient(135deg, var(--b), var(--b2));
  border: 0;
  color:#fff;
  font-weight: 800;
  padding: .9rem 1.25rem;
  border-radius: .85rem;
  box-shadow: 0 12px 28px rgba(111,79,242,.22);
  transform: translateZ(0);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
#home .btn.btn-primary.btn-lg:hover{
  filter: brightness(1.05) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(111,79,242,.26);
}
/* Outline secondary (unchanged, just ensuring visibility) */
#home .btn.btn-outline-secondary.btn-lg{
  border:2px solid #cbd5e1;
  color:#0f172a;
  font-weight: 700;
  padding: .9rem 1.15rem;
  border-radius: .85rem;
  background: #fff;
}
#home .btn.btn-outline-secondary.btn-lg:hover{
  background:#0f172a; color:#fff; border-color:#0f172a;
}

/* Micro-trust badges */
#home .mini-trust .badge{
  background:#fff; color:#0f172a;
  border:1px solid #e2e8f0;
  font-weight:700;
  padding:.5rem .75rem;
  border-radius:.6rem;
  box-shadow: 0 2px 0 rgba(15,23,42,.02);
}

/* Form card: premium, precise */
.hero-card{
  border:1px solid #e7ebff;
  border-radius: 1rem;
  box-shadow:
    0 .5rem 1.25rem rgba(17,24,39,.06),
    0 0 0 1px rgba(111,79,242,.05) inset;
}
.hero-card h2{ font-weight:800 }
.hero-card .form-label{ font-weight:600 }
.hero-card .form-control,
.hero-card .form-select{
  border-color:#e5e7eb;
  padding:.75rem .9rem;
  border-radius:.7rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
/* -------- FORM FOCUS etc. (keep as you had) -------- */
.hero-card .form-control:focus,
.hero-card .form-select:focus{
  border-color: var(--b);
  box-shadow: 0 0 0 .2rem rgba(111,79,242,.12);
  background:#fff;
}
.hero-card .btn.btn-primary.btn-lg{
  font-weight:900;
  padding: 1rem 1rem;
  border-radius:.9rem;
}

/* Make the form follow on desktop */
@media (min-width: 992px){
  .hero-card{ position: sticky; top: 92px; }
}

/* Responsiveness */
@media (max-width: 991.98px){
  #home{ padding: 2.25rem 0 }
  #home .display-5{ font-size: clamp(1.75rem, 4.5vw, 2.4rem) }
  #home .lead{ font-size: 1.05rem }
  #home .d-flex.gap-3.mt-4{ gap: .85rem!important }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; scroll-behavior:auto!important }
}


/* =========================================================
   Forms
   ========================================================= */
form .form-label{font-weight:600}
form .form-control, form .form-select{
  border-color:#e5e7eb;
  transition:border-color .2s, box-shadow .2s;
}
form .form-control:focus, form .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(111,79,242,.15);
}
.btn-primary{
  background:var(--brand); border-color:var(--brand);
}
.btn-primary:hover, .btn-primary:focus{
  background:#5b3cf1; border-color:#5b3cf1;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color:#fff; background:#6b7280; border-color:#6b7280;
}

/* Honeypot */
.hp{display:none !important}

/* =========================================================
   Services — Modern, premium (HTML unchanged)
   ========================================================= */

/* Section polish */
#services{
  background:#fff;
  border-top:1px solid #eef2ff;
}
#services .text-center h2{
  letter-spacing:-.3px;
}
#services .text-center p{
  max-width:60ch; margin-left:auto; margin-right:auto;
}

/* Card shell: gradient border + soft elevation */
#services .card{
  position:relative;
  border:1px solid transparent;                 /* we’ll draw the border via bg layers */
  border-radius:1rem;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa)) border-box;
  box-shadow:0 6px 18px rgba(17,24,39,.05);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
#services .card:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 36px rgba(17,24,39,.10);
}

/* Subtle hover glow using an extra layer (no shapes, just light) */
#services .card::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 120% -20%, rgba(111,79,242,.12), transparent 60%);
  opacity:.0; transition: opacity .22s ease;
}
#services .card:hover::after{ opacity:1 }

/* Card content spacing */
#services .card-body{ padding:1.5rem }
@media (min-width: 576px){
  #services .card-body{ padding:2rem }
}

/* Headings with a refined accent line */
#services .card h3{
  font-weight:800; letter-spacing:.1px; margin-bottom:.75rem; color:#0f172a;
  position:relative; padding-bottom:.4rem;
}
#services .card h3::after{
  content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa));
  opacity:.85;
}

/* Intro paragraph */
#services .card p{
  color:#475569; margin-bottom:1rem;
}

/* Feature list: clean checkmarks (CSS-only) */
#services .card ul{ margin:0; padding:0; list-style:none }
#services .card ul li{
  color:#334155; margin:.45rem 0; padding-left:1.6rem; position:relative;
}
#services .card ul li::before{
  content:""; position:absolute; left:0; top:.25rem; width:18px; height:18px; border-radius:6px;
  background:#fff; border:2px solid var(--brand,#6f4ff2);
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}
#services .card ul li::after{
  content:""; position:absolute; left:6px; top:1px; width:8px; height:12px; transform:rotate(40deg);
  border-right:2px solid var(--brand,#6f4ff2); border-bottom:2px solid var(--brand,#6f4ff2);
}

/* Focus rings for accessibility when tabbing inside cards */
#services .card:focus-within{
  box-shadow:0 0 0 .2rem rgba(111,79,242,.18), 0 16px 36px rgba(17,24,39,.10);
  outline:none;
}

/* Small screens: tighten vertical rhythm */
@media (max-width: 575.98px){
  #services .card h3{ margin-bottom:.5rem }
  #services .card p{ margin-bottom:.75rem }
}


/* =========================================================
   Process — Modern, premium (HTML unchanged)
   ========================================================= */

#process{
  /* keep Bootstrap bg-light but polish the section edge */
  border-top:1px solid var(--border);
  background:
    linear-gradient(180deg,#f8fafc, #ffffff 70%) !important;
}

#process .text-center h2{
  letter-spacing:-.3px;
}
#process .text-center p{
  max-width:60ch; margin-left:auto; margin-right:auto;
  color:#64748b;
}

/* Card shell: gradient border, soft elevation, pleasant hover */
#process .step{
  position:relative;
  border:1px solid transparent;                 /* border drawn via bg layers */
  border-radius:1rem;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa)) border-box;
  box-shadow:0 6px 18px rgba(17,24,39,.05);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
#process .step:hover{
  transform: translateY(-4px);
  box-shadow:0 16px 36px rgba(17,24,39,.10);
}

/* Subtle corner glow on hover (no cheesy shapes) */
#process .step::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 120% -20%, rgba(111,79,242,.10), transparent 60%);
  opacity:0; transition: opacity .22s ease;
}
#process .step:hover::after{ opacity:1 }

/* Step index: modern badge with soft ring */
#process .step-index{
  width:40px; height:40px; margin-bottom:.75rem;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa));
  position:relative;
  box-shadow: 0 6px 18px rgba(111,79,242,.25);
}
#process .step-index::after{
  /* faint outer ring */
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  box-shadow: 0 0 0 6px rgba(111,79,242,.12);
}

/* Headings & copy inside each step */
#process .step h3{
  font-weight:800; letter-spacing:.1px; color:#0f172a;
  margin-bottom:.35rem;
}
#process .step p{
  color:#475569;
}
#process .step a{
  color:var(--brand,#6f4ff2); text-decoration:none;
}
#process .step a:hover{ text-decoration:underline }

/* Keyboard focus: accessible ring on card */
#process .step:focus-within{
  box-shadow:0 0 0 .2rem rgba(111,79,242,.18), 0 16px 36px rgba(17,24,39,.10);
  outline:none;
}

/* Optional progress baseline (desktop): subtle line under cards */
@media (min-width: 768px){
  #process .row.g-4{
    position:relative;
  }
  #process .row.g-4::before{
    content:"";
    position:absolute; left:8px; right:8px; bottom:-10px;
    height:2px; border-radius:2px;
    background:linear-gradient(90deg,#e5e7eb, #eef2ff, #e5e7eb);
    opacity:.7;
  }
}

/* Tighten vertical rhythm on small screens */
@media (max-width: 575.98px){
  #process .step{ padding:1.25rem !important }
  #process .step-index{ width:36px; height:36px; margin-bottom:.6rem }
  #process .step h3{ margin-bottom:.25rem }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  #process .step, #process .step::after{ transition:none!important }
}

/* =========================================================
   FAQ — Modern, clean, accessible
   ========================================================= */
#faq{
  background: linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  border-top:1px solid var(--border);
}

#faq .text-center h2{
  letter-spacing:-.3px;
}
#faq .text-center p{
  max-width:60ch;
  margin-left:auto; margin-right:auto;
  color:#64748b;
}

/* FAQ card */
#faq article{
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem 1.5rem;
  background:#fff;
  box-shadow:0 4px 12px rgba(17,24,39,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
}
#faq article:hover{
  transform:translateY(-3px);
  border-color:var(--brand);
  box-shadow:0 8px 20px rgba(111,79,242,.12);
}

/* Question */
#faq h3{
  margin-bottom:.4rem;
  font-weight:700;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:.5rem;
}
#faq h3::before{
  content:"?";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  font-size:.9rem; font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(111,79,242,.25);
}

/* Answer text */
#faq p{
  color:#475569;
  font-size:.95rem;
  line-height:1.5;
  margin:0;
}

/* Responsive stacking */
@media (max-width: 575.98px){
  #faq article{ padding:1rem 1.1rem }
  #faq h3{ font-size:1rem }
}


/* =========================================================
   Contact — Modern, premium (HTML unchanged)
   ========================================================= */
#contact{
  background: linear-gradient(180deg,#f8fafc 0%, #ffffff 100%) !important;
  border-top:1px solid var(--border);
  scroll-margin-top: 80px; /* nice anchor offset below sticky header */
}

#contact h2{
  letter-spacing:-.3px;
}
#contact p.text-muted{
  color:#64748b!important;
}

/* --- Contact info list (left column) --- */
#contact ul.list-unstyled{
  margin: 1rem 0 1.25rem;
}
#contact ul.list-unstyled li{
  position:relative;
  padding-left:2.25rem;
  margin:.6rem 0;
  color:#334155;
}
#contact ul.list-unstyled li a{
  color:inherit; text-decoration:none; border-bottom:1px dashed rgba(2,6,23,.15);
}
#contact ul.list-unstyled li a:hover{
  color:var(--brand); border-color:var(--brand);
}

/* Gradient icon disc + emoji/glyph per row (no HTML changes) */
#contact ul.list-unstyled li::before{
  content:"";
  position:absolute; left:0; top:.1rem;
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 4px 10px rgba(111,79,242,.25);
}
#contact ul.list-unstyled li::after{
  position:absolute; left:0; top:.1rem; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem; font-weight:800;
}
#contact ul.list-unstyled li:nth-child(1)::after{ content:"✉"; } /* Email */
#contact ul.list-unstyled li:nth-child(2)::after{ content:"☎"; } /* Phone */
#contact ul.list-unstyled li:nth-child(3)::after{ content:"💬"; } /* WhatsApp */
#contact ul.list-unstyled li:nth-child(4)::after{ content:"📍"; } /* Address */

#contact .small.text-muted{ color:#6b7280!important }

/* --- Contact card (right column) --- */
#contact .card{
  border:1px solid transparent;
  border-radius:1rem;
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa)) border-box;
  box-shadow:0 8px 22px rgba(17,24,39,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
#contact .card:hover{
  transform: translateY(-3px);
  box-shadow:0 18px 38px rgba(17,24,39,.10);
}

/* Card heading */
#contact .card .h6{
  font-weight:800; letter-spacing:.2px; color:#0f172a;
}

/* Form controls: comfortable, precise */
#contact .form-label{ font-weight:600 }
#contact .form-control,
#contact .form-select{
  border-color:#e5e7eb;
  padding:.75rem .9rem;
  border-radius:.7rem;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
#contact .form-control:focus,
#contact .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(111,79,242,.12);
  background:#fff;
}

/* Submit button */
#contact .btn.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border:0;
  font-weight:800;
  padding:.85rem 1.1rem;
  border-radius:.8rem;
  box-shadow:0 12px 28px rgba(111,79,242,.20);
}
#contact .btn.btn-primary:hover{ filter:brightness(1.05) saturate(1.05) }

/* Accessibility focus within the card */
#contact .card:focus-within{
  box-shadow:0 0 0 .18rem rgba(111,79,242,.20), 0 18px 38px rgba(17,24,39,.10);
  outline:none;
}

/* Responsive niceties */
@media (max-width: 991.98px){
  #contact .card .row.g-3 > [class*="col-"] + [class*="col-"]{ margin-top:.25rem }
  #contact .btn.btn-primary{ width:100% } /* full-width submit on mobile */
}
@media (max-width: 575.98px){
  #contact ul.list-unstyled li{ padding-left:2rem }
  #contact ul.list-unstyled li::before,
  #contact ul.list-unstyled li::after{ top:.15rem; width:22px; height:22px; font-size:.8rem }
}


/* =========================================================
   Footer — Modern, lightweight
   ========================================================= */
footer{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  backdrop-filter:saturate(120%) blur(6px);
  font-size:.9rem;
  color:#6b7280;
}

footer p{
  margin:0;
  color:#6b7280;
}

footer nav ul{
  gap:1.25rem!important;
}

footer a{
  color:#6b7280;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
footer a:hover,
footer a:focus{
  color:var(--brand,#6f4ff2);
  transform:translateY(-1px);
}

footer .container{
  max-width:1160px;
}

/* Responsive stack */
@media (max-width: 575.98px){
  footer .container{
    flex-direction:column!important;
    text-align:center;
  }
  footer nav ul{ justify-content:center }
}


/* =========================================================
   Utilities / Helpers
   ========================================================= */
.rounded-4{border-radius:1rem!important}
.shadow-sm{box-shadow:0 .5rem 1rem rgba(17,24,39,.05)!important}

/* Smooth section spacing on small screens */
@media (max-width: 991.98px){
  .display-5{font-size:2rem}
  header#home .py-5{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
}

/* Reduce animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important; transition:none!important}
}

/* Print basics (optional but neat) */
@media print{
  .navbar, footer, .modal, .btn, .badge{display:none!important}
  a[href]:after{content:" (" attr(href) ")"; font-size:90%}
}

/* =========================================================
   Lead Modal — Modern, premium (HTML unchanged)
   ========================================================= */

/* Backdrop: darker + subtle tint */
.modal-backdrop.show{
  background: rgba(15,23,42,.55);
}

/* Dialog sizing + smooth entrance */
#leadModal .modal-dialog{
  max-width: 720px;
}
.modal.fade #leadModal .modal-dialog{
  transform: translateY(10px) scale(.98);
  transition: transform .25s ease, opacity .25s ease;
}
.modal.show #leadModal .modal-dialog{
  transform: none;
}

/* Card: gradient border + glassy panel */
#leadModal .modal-content{
  border:1px solid transparent;
  border-radius: 1rem;
  background:
    linear-gradient( rgba(255,255,255,.92), rgba(255,255,255,.96) ) padding-box,
    linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa)) border-box;
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow:
    0 18px 50px rgba(2,6,23,.25),
    0 0 0 1px rgba(111,79,242,.06) inset;
  overflow: hidden;
}

/* Header: clean, with tiny accent bar + title badge */
#leadModal .modal-header{
  border:0;
  padding: 1rem 1.25rem 0.75rem 1.25rem;
  position: relative;
}
#leadModal .modal-header::after{
  /* thin accent bar under header */
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa));
  opacity:.9;
}
#leadModal .modal-title{
  font-weight:900;
  letter-spacing:.2px;
  display:flex; align-items:center; gap:.5rem;
}
#leadModal .modal-title::after{
  content:"24h response";
  font-size:.72rem; font-weight:800;
  color: var(--brand,#6f4ff2);
  background: rgba(111,79,242,.1);
  border:1px solid rgba(111,79,242,.25);
  padding:.15rem .45rem;
  border-radius:999px;
}

/* Close button visible on any bg */
#leadModal .btn-close{
  filter: invert(0.2);
  opacity:.8;
}
#leadModal .btn-close:hover{ opacity:1 }

/* Body spacing */
#leadModal .modal-body{
  padding: 1.25rem;
}
@media (min-width: 576px){
  #leadModal .modal-body{ padding: 1.5rem 1.5rem 1.75rem }
}

/* Form: comfy, precise fields with strong focus */
#leadModal .form-label{ font-weight:600 }
#leadModal .form-control,
#leadModal .form-select{
  border-color:#e5e7eb;
  padding:.75rem .9rem;
  border-radius:.7rem;
  background:#ffffff;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#leadModal .form-control:focus,
#leadModal .form-select:focus{
  border-color: var(--brand,#6f4ff2);
  box-shadow: 0 0 0 .2rem rgba(111,79,242,.14);
  background:#fff;
}

/* Submit CTA: bold gradient + lift */
#leadModal .btn.btn-primary{
  background: linear-gradient(135deg, var(--brand,#6f4ff2), var(--brand-2,#a78bfa));
  border:0;
  font-weight:900;
  padding:.95rem 1.1rem;
  border-radius:.9rem;
  box-shadow: 0 14px 32px rgba(111,79,242,.25);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
#leadModal .btn.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 18px 40px rgba(111,79,242,.30);
}

/* Helper text */
#leadModal .small.text-muted{
  color:#6b7280!important;
}

/* Mobile niceties */
@media (max-width: 575.98px){
  #leadModal .modal-dialog{ margin: .75rem }
  #leadModal .modal-title::after{ display:none } /* hide badge if cramped */
  #leadModal .btn.btn-primary{ width:100% }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .modal.fade #leadModal .modal-dialog{ transition:none }
  #leadModal .btn.btn-primary{ transition:none }
}

/* Keep the Bootstrap order: backdrop < modal */
.modal-backdrop { z-index: 1050 !important; }
.modal { z-index: 1060 !important; }