:root{ --bg:#0b0b0f; --panel:#111217; --panel-2:#151723; --text:#e6e6e6; --muted:#a7a7ad; --accent:#e11d2e; --accent-2:#ff3b30; --border:#2a2d3a; --glow:0 0 40px rgba(225,29,46,.25); }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif; color:var(--text); background:radial-gradient(60% 40% at 20% 0%,#15151d 0%, var(--bg) 60%); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--text); text-decoration:none}
a.text-link{color:var(--accent)}
img{max-width:100%; display:block}
.wrap{width:min(1100px,90%); margin:0 auto}
.page{min-height:100vh; display:flex; flex-direction:column}
.content{flex:1}

.site-header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:linear-gradient(180deg, rgba(15,15,20,.9), rgba(15,15,20,.55)); border-bottom:1px solid var(--border); z-index:10}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}
.brand img{width:36px; height:36px; filter:drop-shadow(var(--glow))}
.nav{display:flex; gap:22px}
.nav a{opacity:.8; padding:8px 2px; border-bottom:2px solid transparent}
.nav a.active,.nav a:hover{opacity:1; border-bottom-color:var(--accent)}
.nav-toggle{display:none; background:none; color:var(--text); border:1px solid var(--border); padding:6px 10px; border-radius:8px}

.hero{padding:56px 0 24px; background:radial-gradient(60% 30% at 80% 0%, rgba(225,29,46,.08), transparent 60%)}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center}
.hero-text h1{font-size:48px; line-height:1.1; margin:.2em 0 .2em}
.accent{color:var(--accent)}
.cta-row{display:flex; gap:12px; margin:20px 0}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; border:1px solid var(--border)}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:white; box-shadow:var(--glow)}
.btn-secondary{background:var(--panel); color:var(--text)}
.btn-ghost{background:transparent}
.badges{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:18px 0 0}
.badges li{background:var(--panel); border:1px solid var(--border); padding:8px 10px; border-radius:10px; color:var(--muted)}

.hero-card{display:grid; gap:14px; padding:18px; background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--border); border-radius:18px; box-shadow:var(--glow)}
.stat{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#0f1118; border:1px solid var(--border); border-radius:12px}
.stat span{font-weight:800; font-size:28px}
.stat small{color:var(--muted)}

.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,#0d0f15,#0b0b0f)}
.center{text-align:center}
.mt{margin-top:18px}
.tight{margin-top:0}
.two-col{display:grid; grid-template-columns:1fr .7fr; gap:36px; align-items:start}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid var(--border); border-radius:18px; padding:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.work-thumb{border-radius:14px; height:160px; border:1px solid var(--border); background-size:cover; background-position:center; box-shadow:var(--glow)}
.demo-a{background-image:linear-gradient(120deg, #121212, #161b22), radial-gradient(90px 80px at 30% 40%, rgba(225,29,46,.2), transparent)}
.demo-b{background-image:linear-gradient(120deg, #111013, #171a21), radial-gradient(90px 80px at 70% 60%, rgba(225,29,46,.18), transparent)}
.demo-c{background-image:linear-gradient(120deg, #0f0f14, #151b23), radial-gradient(90px 80px at 20% 70%, rgba(225,29,46,.2), transparent)}
.demo-d,.demo-e,.demo-f{background-image:linear-gradient(120deg, #111213, #131820)}

.checklist,.bullets{list-style:none; padding:0; margin:0}
.checklist li::before{content:"✔"; color:var(--accent); margin-right:10px}
.checklist li{margin:8px 0}
.bullets li{margin:8px 0; color:var(--muted)}

.quote-grid{display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:18px}
.form-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0}
.form-row > label{display:flex; justify-content:space-between; align-items:center; width:100%}
.form-row input[type="text"], .form-row input[type=email], .form-row input[type=tel], .form-row input[type=number],
.form-row textarea, .form-row select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#0f1118; color:var(--text) }
.form-row .hint{color:var(--muted); margin-left:10px; font-size:.9em}
.form-row.multi{gap:10px}
.estimate{margin-top:12px; padding:16px; border-radius:14px; border:1px dashed var(--border); background:#0e1116}
.estimate .muted{color:var(--muted); font-size:.9em}
.estimate .big{font-size:20px; margin-top:6px}

.contact .form-row{flex-direction:column; align-items:stretch}
.site-footer{border-top:1px solid var(--border); padding:24px 0; background:linear-gradient(180deg, rgba(15,15,20,.55), rgba(15,15,20,.9))}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.copyright{color:var(--muted); text-align:center; margin-top:16px}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .quote-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; gap:8px; background:#0f1114; position:absolute; top:60px; left:0; right:0; padding:12px; border-bottom:1px solid var(--border)}
  .nav-toggle{display:inline-block}
}

/* Prevent layout shift between pages with/without scrollbar */
html { overflow-y: scroll; }

/* Normalize nav link weight to avoid width changes */
.nav a { font-weight: 500; }

/* Keep header logo a consistent size */
.site-header .brand img { height: 36px; width: auto; max-width: 160px; display: block; }