:root { --max: 1100px; --pad: 18px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #0b1320; }
a { text-decoration: none; }
header { position: sticky; top:0; background:#ffffffE6; backdrop-filter: blur(6px); border-bottom:1px solid #eef1f3; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 10px; flex-wrap: wrap; }
.brand { font-weight:800; letter-spacing:.3px; }
.brand .sub { display:block; font-weight:500; letter-spacing:0; font-size: 12px; opacity:.7; }
nav a { margin-left:16px; font-weight:600; }
.hero { padding: 56px var(--pad); background: radial-gradient(1000px 400px at 10% -10%, #f0f7ff, #fff); border-bottom:1px solid #eef1f3; }
.hero .wrap { max-width: var(--max); margin: 0 auto; display:grid; gap: 18px; }
h1 { font-size: clamp(28px, 4vw, 44px); margin:0 0 6px; }
.lead { font-size: clamp(16px, 2.2vw, 20px); opacity: .85; }
.cta { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.btn { display:inline-block; padding:12px 16px; border:1px solid #0b1320; border-radius:10px; font-weight:700; }
.btn.primary { background:#0b1320; color:#fff; }
.badges { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:14px; opacity:.8; }
.grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap: 16px; }
.card { border:1px solid #eef1f3; border-radius:12px; padding:16px; background:#fff; }
h2 { font-size: clamp(22px, 3vw, 30px); margin: 22px 0 8px; }
.section { padding: 30px 0; }
.kv { display:flex; flex-direction:column; gap:6px; font-size:14px; }
.kv span { opacity:.75; }
.footer { background:#0b1320; color:#fff; padding: 36px 0; margin-top: 30px; }
.footer a { color:#fff; text-decoration: underline; }
.notice { font-size:14px; opacity:.75; }
.small { font-size: 13px; }
label { display:block; font-weight:600; margin-top:12px; }
input, select, textarea { width:100%; padding:12px; border:1px solid #d9dde3; border-radius:10px; font: inherit; }
form .row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 640px){ form .row { grid-template-columns: 1fr; } }
.success { padding:14px; background:#ecfdf5; border:1px solid #d1fae5; border-radius:10px; }


:root { --brand: #a200ff; } /* brand purple */
.logo { height: 40px; width: 40px; border-radius: 50%; display:inline-block; vertical-align: middle; margin-right: 10px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
a { color: var(--brand); }
nav a { color: inherit; }
.badges { color: #333; }


/* === Brand hero with big logo === */
.hero.center { text-align:center; }
.hero.center .wrap { display:block; max-width: 780px; }
.logo-xl { width: clamp(180px, 26vw, 280px); height: auto; border-radius: 50%; display:block; margin: 0 auto 14px; box-shadow: 0 6px 28px rgba(0,0,0,.08); }

/* === Reviews / Testimonials === */
.reviews { background: #fafbfc; border-top:1px solid #eef1f3; }
.stars { font-size: 20px; letter-spacing: 1px; }
.review-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap: 14px; }
.review { background:#fff; border:1px solid #eef1f3; border-radius:12px; padding:14px; }
.review .meta { font-size: 14px; opacity: .75; margin-top: 6px; }
.review .src { font-size: 12px; opacity: .7; }
.google-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #eef1f3; border-radius: 999px; background:#fff; font-weight:700; }
.google-badge img { width:18px; height:18px; }


/* Header logo cleanup */
.logo { height: 40px; width: auto; border-radius: 50%; object-fit: cover; }

/* Big hero logo */
.hero.center { text-align: center; background:#0b1320; color:#fff; }
.hero.center .wrap { max-width: 780px; margin: 0 auto; }
.logo-xl { width: clamp(180px, 24vw, 260px); height: auto; border-radius: 50%; display:block; margin: 0 auto 14px; object-fit: cover; }

.hero.center h1, .hero.center p, .hero.center .badges { color:#fff; }
.hero.center .btn { border-color:#fff; color:#fff; }
.hero.center .btn.primary { background: var(--brand); border-color: var(--brand); color:#fff; }


/* Purple buttons on black hero */
.hero.center .btn.primary { background: var(--brand); border-color: var(--brand); color:#fff; }
.hero.center .btn { border-color: var(--brand); color:#fff; }


/* Ensure brand purple buttons sitewide */
:root { --brand: #a200ff; }
.btn.primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
a.btn.primary { color: #fff !important; }

/* On dark hero, make secondary buttons outlined in white */
.hero.center .btn:not(.primary) { border-color:#fff !important; color:#fff !important; background: transparent !important; }
.hero.center .btn:not(.primary):hover { opacity:.85; }


/* Full site black background */
body { background:#0b1320; color:#fff; }
.section, .container { background:transparent; color:#fff; }
.card { background:#111827; border-color:#1f2937; color:#fff; }
.footer { background:#000; }

/* Adjust hero logo size */
.logo-xl { width: clamp(140px, 18vw, 180px) !important; height:auto; }


/* --- Full black header & nav for contrast --- */
header { background:#0b1320 !important; border-bottom:1px solid #1f2937 !important; }
.topbar, nav a, .brand, .brand .sub { color:#fff !important; }
nav a { opacity:.9; }
nav a:hover { opacity:1; text-decoration: underline; }
.brand .sub { opacity:.6 !important; }

/* Small header logo */
.logo { height: 36px; width: auto; border-radius: 50%; object-fit: cover; }

/* Links default to brand purple on dark background */
a { color: var(--brand); }


/* Purple glow behind hero logo */
.logo-xl, .logo-hero {
  box-shadow: 0 0 25px rgba(162,0,255,0.6), 0 0 60px rgba(162,0,255,0.4);
  border-radius: 50%;
}
/* Reviews: dark cards to match theme */
.review {
background:#111827 !important;
border:1px solid #2a2f3a !important;
color:#fff !important;
padding:20px;
border-radius:8px;
}
.review .meta,
.review .src,
.reviews .stars {
color:#fff !important;
}
/* Reviews: purple glowing stars */
.reviews .stars {
color: #a200ff !important; /* brand purple */
text-shadow: 0 0 6px rgba(162,0,255,0.8),
0 0 12px rgba(162,0,255,0.6);
font-size: 20px;
letter-spacing: 2px;
}
/* Reviews: purple glow on hover */
.review:hover {
border-color: #a200ff !important;
box-shadow: 0 0 12px rgba(162,0,255,0.4),
0 0 24px rgba(162,0,255,0.2);
transform: translateY(-2px);
transition: all 0.25s ease;
}
.review-icon {
width: 40px;
height: auto;
display: block;
margin: 0 auto 10px auto;
}
/* --- Services: hover glow + button --- */
.service-card{background:#0b0b0b;border:1px solid #1e1e1e;border-radius:14px;transition:transform .18s,box-shadow .18s,border-color .18s}
@media (hover:hover){.service-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 24px rgba(0,173,255,.25);border-color:#2e95ff}}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:10px;border:1px solid #2a2a2a;color:#eaeaea;text-decoration:none;font-weight:600;transition:transform .15s,opacity .15s,border-color .15s}
.btn:hover{border-color:#2e95ff;opacity:.95;transform:translateY(-1px)}

/* --- Quote form: make it match the black theme --- */
.form-wrap{background:#0b0b0b;border:1px solid #1e1e1e;border-radius:14px;padding:20px}
.form-wrap label{color:#e6e6e6}
.form-wrap input,.form-wrap select,.form-wrap textarea{
width:100%;background:#121212;color:#eaeaea;border:1px solid #2a2a2a;border-radius:10px;
padding:.75rem .9rem;outline:none;transition:border-color .15s,box-shadow .15s
}
.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:#9a9a9a}
.form-wrap input:focus,.form-wrap textarea:focus{border-color:#2e95ff;box-shadow:0 0 0 3px rgba(46,149,255,.15)}

/* --- Kill the white bar above reviews (common culprits) --- */
/* Kill the white bar above reviews */
#reviews, .reviews, .reviews-section {
background:#0b0b0b !important;
border-top:none !important;
margin-top:0 !important;
padding-top:0 !important;
}

#reviews hr, .reviews hr, .reviews-section hr {
display:none !important;
border:0 !important;
height:0 !important;
}

/* If the bar is from the section above */
.section, .container {
border-bottom:none !important;
}

.section + #reviews,
.section + .reviews-section {
margin-top:-1px !important;
}
/* QUICK FIX: Remove white bar above reviews */
#reviews {
background: #0b0b0b !important;
border: none !important;
margin: 0 !important;
padding-top: 0 !important;
}
#services {
border: none !important;
margin: 0 !important;
padding-bottom: 0 !important;
}
/* Hide the white review separator bar */
#reviews .kv,
#reviews .kv::before,
#reviews .kv::after {
display: none !important;
height: 0 !important;
border: 0 !important;
background: none !important;
}
/* Service card styling */
#services .card {
background: #0b0b0b;
border: 1px solid #1e1e1e;
border-radius: 14px;
padding: 1rem;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover glow effect */
@media (hover:hover){
#services .card:hover {
transform: translateY(-3px);
border-color: #2e95ff;
box-shadow: 0 10px 28px rgba(0,0,0,.35),
0 0 24px rgba(0,173,255,.25);
}
}
/* Services hover glow - purple to match reviews */
@media (hover:hover){
#services .card:hover {
transform: translateY(-3px);
border-color: #a200ff;
box-shadow: 0 10px 28px rgba(0,0,0,.35),
0 0 24px rgba(162,0,255,.4); /* purple glow */
}
}
/* Glowing divider between sections */
.section-divider {
width: 100%;
height: 2px;
margin: 3rem auto; /* space above and below */
background: linear-gradient(90deg, transparent, #a200ff, transparent);
border-radius: 2px;
}
body, .section, #services, #reviews, #contact {
background: #0b0b0b !important;
}
/* === Global colors to match Services look === */
:root{
--bg-section: #111827; /* the dark blue/black you used behind Services */
--bg-card: #0b0b0b; /* the card color */
--card-border:#1e1e1e;
--glow: #a200ff; /* purple */
}

/* Sections & page background */
html, body, .section, #services, #reviews, #contact, header, footer {
background: var(--bg-section) !important;
}

/* Make ALL cards (Services, Reviews, etc.) look the same */
.card,
.review-card,
#reviews .review {
background: var(--bg-card) !important;
border: 1px solid var(--card-border) !important;
border-radius: 14px !important;
color: #eaeaea;
padding: 1rem;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Unified hover glow (same purple as Services) */
@media (hover:hover){
.card:hover,
.review-card:hover,
#reviews .review:hover {
transform: translateY(-3px);
border-color: var(--glow);
box-shadow: 0 10px 28px rgba(0,0,0,.35),
0 0 24px rgba(162,0,255,.40);
}
}

/* Buttons & links inside cards – optional but keeps style consistent */
.card a.btn, .review-card a.btn, #reviews .review a.btn {
display: inline-block;
padding: .7rem 1rem;
border-radius: 10px;
border: 1px solid var(--card-border);
color: #eaeaea;
text-decoration: none;
font-weight: 600;
transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.card a.btn:hover, .review-card a.btn:hover, #reviews .review a.btn:hover {
border-color: var(--glow);
opacity: .95;
transform: translateY(-1px);
}

/* Forms + inputs match the card style (quote/contact) */
.form-wrap, form, #quote, #contact form {
background: var(--bg-card) !important;
border: 1px solid var(--card-border) !important;
border-radius: 14px;
padding: 20px;
}
.form-wrap input, .form-wrap textarea, .form-wrap select,
#contact input, #contact textarea, #contact select {
background: #121212; color:#eaeaea;
border:1px solid #2a2a2a; border-radius:10px;
padding:.75rem .9rem; outline:none;
transition:border-color .15s, box-shadow .15s;
}
.form-wrap input:focus, .form-wrap textarea:focus,
#contact input:focus, #contact textarea:focus {
border-color: var(--glow);
box-shadow: 0 0 0 3px rgba(162,0,255,.15);
}

/* Headings for sections (Services / Reviews) */
#services h2, #reviews h2 {
text-align:center; color:#fff; font-weight:800;
margin:0 0 1.5rem; font-size:1.8rem; letter-spacing:.5px;
}
#services h2::after, #reviews h2::after {
content:""; display:block; width:64px; height:3px; margin:.5rem auto 0;
background: linear-gradient(90deg, #6a5cff, var(--glow));
border-radius:2px;
}

/* Divider (leave if you want the line between sections) */
.section-divider {
width:100%; height:2px; margin:3rem auto;
background: linear-gradient(90deg, transparent, var(--glow), transparent);
border-radius:2px;
}
/* === Back to BLACK ON BLACK theme === */
:root{
--bg: #0b0b0b; /* page/section background */
--card: #0b0b0b; /* card background (same as page) */
--border: #1e1e1e; /* thin outline to separate cards */
--glow: #a200ff; /* purple glow */
}

/* Make every section the same dark background, no gradients */
html, body, header, .hero, #hero, .section, #services, #reviews, #contact, footer{
background: var(--bg) !important;
background-image: none !important;
box-shadow: none !important;
}

/* kill any section/container tint */
.container, .grid{
background: transparent !important;
box-shadow: none !important;
}

/* Cards (services + reviews) – black on black with subtle outline */
#services .card,
#reviews .card,
.review-card,
#reviews .review{
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: 14px;
color:#eaeaea;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Matching purple hover */
@media (hover:hover){
#services .card:hover,
#reviews .card:hover,
.review-card:hover,
#reviews .review:hover{
transform: translateY(-3px);
border-color: var(--glow);
box-shadow: 0 10px 28px rgba(0,0,0,.35),
0 0 24px rgba(162,0,255,.40);
}
}

/* Section titles (optional, keeps them readable on black) */
#services h2, #reviews h2{
color:#fff; text-align:center; font-weight:800; margin:0 0 1.5rem; font-size:1.8rem;
}
#services h2::after, #reviews h2::after{
content:""; display:block; width:64px; height:3px; margin:.5rem auto 0;
background: linear-gradient(90deg, #6a5cff, var(--glow)); border-radius:2px;
}
:root { --ink:#e9e9f1; --bg:#0b0b10; --purple:#7a3cff; --muted:#9aa0a6; }
html,body{background:#0b0b10;color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--ink);text-decoration:none}

/* Header & nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:#090910;border-bottom:1px solid #1b1b22;position:sticky;top:0;z-index:10}
.logo{font-weight:700;letter-spacing:.3px}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.btn{padding:10px 16px;border-radius:8px;border:1px solid transparent;display:inline-block}
.btn-outline{border-color:#2a2a36}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 0 22px rgba(122,60,255,.35)}
.btn-ghost{border-color:#2a2a36}

/* Hero */
.hero{padding:80px 22px;background:radial-gradient(600px 200px at 50% -40px, rgba(122,60,255,.25), transparent 70%);text-align:center}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Services grid */
#services{padding:48px 22px;max-width:1100px;margin:0 auto}
#services h2{text-align:center;margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:#0f0f16;border:1px solid #1f1f2a;border-radius:12px;padding:16px;transition:.2s box-shadow,.2s transform}
.card:hover{box-shadow:0 0 30px rgba(122,60,255,.25), inset 0 0 0 1px rgba(122,60,255,.5);transform:translateY(-2px)}
.card h3{margin:0 0 8px}
.card p{color:var(--muted);margin:0}
/* Top nav logo */
.logo img{display:block; height:28px}

/* Big hero logo with purple glow */
.hero-logo{
width:clamp(220px, 40vw, 480px);
display:block;
margin:0 auto 14px;
filter:drop-shadow(0 0 18px rgba(122,60,255,.55));
animation:heroPulse 2.8s ease-in-out infinite;
}
@keyframes heroPulse{
0%{filter:drop-shadow(0 0 12px rgba(122,60,255,.35))}
50%{filter:drop-shadow(0 0 32px rgba(122,60,255,.8))}
100%{filter:drop-shadow(0 0 12px rgba(122,60,255,.35))}
}