:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#5b667a;
  --purple:#7c3aed;
  --purple-dark:#5b21b6;
  --purple-soft:#f3e8ff;
  --ink:#0b1220;
  --line:#e5e7eb;
  --shadow:0 20px 60px rgba(15,23,42,.12);
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--container),calc(100% - 2rem));margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(11,18,32,.84);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:76px;
}
.brand{
  display:flex; align-items:center; gap:.85rem; color:#fff;
}
.brand strong{display:block; font-size:1.2rem; font-weight:800; letter-spacing:-.02em}
.brand small{display:block; color:#ddd6fe; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em}
.logo-mark{
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center;
  border-radius:16px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.logo-mark svg{width:28px;height:28px}

.desktop-nav{
  display:flex; gap:1.6rem; color:#dbe4f0;
  font-size:.95rem; font-weight:500;
}
.desktop-nav a:hover{color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.95rem 1.25rem; border-radius:18px;
  font-weight:700; transition:.2s ease; border:none; cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  color:#fff; box-shadow:0 18px 45px rgba(124,58,237,.28);
}
.btn-outline{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.btn-light{background:#fff; color:var(--purple-dark)}
.btn-dark{background:var(--ink); color:#fff; width:100%}

.hero{
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(168,85,247,.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(126,34,206,.18), transparent 30%),
    linear-gradient(180deg,#0f172a 0%,#111827 38%,#ffffff 100%);
}
.hero-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  padding:3.5rem 0 6rem;
}
.eyebrow,.section-kicker{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.08);
  color:#f5d0fe;
  border:1px solid rgba(255,255,255,.12);
  padding:.6rem .95rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
}
.hero h1{
  margin:1.15rem 0 1rem;
  font-size:clamp(2.65rem,4vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.05em;
  max-width:12ch;
}
.hero p{max-width:60ch; color:#dbe4f0; font-size:1.06rem}
.hero-actions{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem}
.hero-features{
  margin-top:2rem; display:grid; gap:1rem;
  grid-template-columns:repeat(3,1fr);
  max-width:760px;
}
.mini-card{
  padding:1rem 1rem 1.05rem;
  border-radius:22px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.mini-card h3{margin:0 0 .3rem; font-size:1rem; color:#fff}
.mini-card p{margin:0; color:#f8fafc; font-size:.92rem; line-height:1.45}

.quote-card{
  background:#fff; color:var(--text);
  border-radius:32px; padding:2rem;
  box-shadow:0 30px 80px rgba(15,23,42,.24);
  border:1px solid rgba(229,231,235,.8);
}
.quote-card .section-kicker{
  background:#f5f3ff; color:var(--purple-dark); border:1px solid #e9d5ff;
}
.quote-card h2{margin:.85rem 0 .5rem; font-size:2rem; line-height:1.08}
.quote-card > p{margin:0 0 1.2rem; color:var(--muted)}
.quote-form{display:grid; gap:.9rem}
.quote-form input,.quote-form select,.quote-form textarea{
  width:100%; padding:1rem 1rem; border-radius:18px;
  border:1px solid #d1d5db; background:#fff; color:var(--text); font:inherit;
}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 4px rgba(124,58,237,.08);
}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.contact-inline{margin-top:1rem; display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.92rem}

.section{padding:5.5rem 0}
.muted{background:#f8fafc}
.section-head{max-width:760px; margin:0 auto 2.5rem; text-align:center}
.section-head.left{margin:0 0 2rem; text-align:left}
.section-head .section-kicker{
  background:#f3e8ff; color:var(--purple-dark); border:1px solid #e9d5ff;
}
.section-head h2{
  margin:.85rem 0 .7rem;
  font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.06;
}
.section-head p{margin:0; color:var(--muted); font-size:1.05rem}

.card-grid{display:grid; gap:1.25rem}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.card-grid.three{grid-template-columns:repeat(3,1fr)}

.service-card,.review-card,.result-card,.area-card,.dark-panel{
  border-radius:32px;
}
.service-card,.review-card,.result-card,.area-card{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
}
.service-card{padding:1.6rem}
.icon-badge{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--purple-soft); font-size:1.45rem;
}
.service-card h3{margin:1rem 0 .45rem; font-size:1.15rem}
.service-card p{margin:0; color:var(--muted)}

.results-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(3,1fr)}
.result-card{overflow:hidden}
.photo-placeholder{
  aspect-ratio: 16/11;
  display:flex; align-items:end; padding:1rem; color:#fff; font-weight:700; position:relative;
}
.photo-placeholder span{
  position:relative; z-index:1; background:rgba(15,23,42,.72);
  padding:.45rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.2);
}
.photo-placeholder::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(15,23,42,.55));
}
.office{
  background:
    linear-gradient(135deg,rgba(124,58,237,.45),rgba(30,41,59,.4)),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.2), transparent 22%),
    linear-gradient(180deg,#cbd5e1,#94a3b8);
}
.construction{
  background:
    linear-gradient(135deg,rgba(124,58,237,.38),rgba(30,41,59,.45)),
    repeating-linear-gradient(90deg,#e5e7eb 0 16px,#f8fafc 16px 32px);
}
.home{
  background:
    linear-gradient(135deg,rgba(124,58,237,.38),rgba(30,41,59,.45)),
    linear-gradient(180deg,#ede9fe,#ddd6fe 45%,#f8fafc);
}
.result-copy{padding:1.2rem 1.3rem 1.4rem}
.result-copy h3{margin:0 0 .35rem; font-size:1.1rem}
.result-copy p{margin:0; color:var(--muted)}

.review-card{padding:1.6rem}
.stars{color:var(--purple); letter-spacing:.12em; font-weight:800}
.review-card p{margin:.9rem 0 1rem; color:var(--muted)}
.review-card strong{font-size:.85rem; text-transform:uppercase; letter-spacing:.18em}

.split{
  display:grid; gap:1.5rem; grid-template-columns:1fr .9fr; align-items:start;
}
.area-grid{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.area-card{padding:1.2rem 1.1rem; font-weight:700}
.dark-panel{
  background:var(--ink); color:#fff; padding:2rem; box-shadow:0 25px 60px rgba(15,23,42,.28);
}
.panel-kicker{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1)}
.dark-panel h3{margin:.9rem 0 .65rem; font-size:2rem; line-height:1.05}
.dark-panel p{margin:0 0 1.4rem; color:#d1d5db}

.site-footer{background:var(--ink); color:#fff; padding:2rem 0}
.footer-wrap{display:flex; justify-content:space-between; gap:1rem; align-items:center}
.footer-info{text-align:right; color:#cbd5e1; font-size:.95rem}

.mobile-call{
  display:none; position:fixed; right:1rem; bottom:1rem; z-index:60;
  background:linear-gradient(135deg,var(--purple),var(--purple-dark));
  color:#fff; font-weight:800; padding:1rem 1.2rem; border-radius:999px;
  box-shadow:0 20px 45px rgba(124,58,237,.3);
}

@media (max-width: 1100px){
  .hero-grid,.split{grid-template-columns:1fr}
  .card-grid.four,.results-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 820px){
  .desktop-nav,.nav > .btn-light{display:none}
  .hero-grid{padding:2rem 0 4.5rem}
  .hero-features,.card-grid.three,.card-grid.four,.results-grid,.area-grid,.two-col{grid-template-columns:1fr}
  .footer-wrap{flex-direction:column; align-items:flex-start}
  .footer-info{text-align:left}
  .mobile-call{display:inline-flex}
  .section{padding:4.5rem 0}
}
@media (max-width: 560px){
  .container{width:min(var(--container),calc(100% - 1.2rem))}
  .quote-card{padding:1.35rem}
  .hero h1{max-width:10ch}
}