:root{
  --bg:#0b0c0f; --bg-soft:#111318; --card:#151923; --accent:#2dd4bf;
  --text:#e6e9ee; --muted:#a3adbd; --stroke:#222735;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --radius:14px; --radius-sm:10px; --max:1200px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; background: radial-gradient(1000px 600px at 80% -10%, #182033 0%, transparent 60%), var(--bg); color:var(--text); line-height:1.6; letter-spacing:.2px;}
a{color:inherit; text-decoration:none} img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(8px); background:linear-gradient(180deg, rgba(11,12,15,.85), rgba(11,12,15,.55)); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px}
.logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, #0ea5e9, #22d3ee, #14b8a6); box-shadow: 0 8px 24px rgba(34,211,238,.25)}
nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
nav a{padding:8px 12px; border-radius:10px; color:var(--muted)} nav a:hover{background:#0f1218; color:var(--text)}
.cta-inline{display:flex; gap:10px; align-items:center}
.btn,.btn-outline{padding:12px 16px; border-radius:12px; font-weight:600; display:inline-flex; gap:10px; align-items:center; border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease; will-change:transform; cursor:pointer}
.btn{background:linear-gradient(135deg, #0ea5e9, #14b8a6); color:#0b0c0f; box-shadow:0 10px 30px rgba(20,184,166,.3)}
.btn:hover{transform:translateY(-2px)}
.btn-outline{border-color:#263043; color:var(--text); background:#0f1218}
.btn-outline:hover{border-color:#2dd4bf; transform:translateY(-2px)}
.btn small{opacity:.8; font-weight:500}
.hero{padding:80px 0 40px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
.eyebrow{color:#9bd9cf; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.85rem}
h1{font-size:clamp(2rem, 3.6vw + 1rem, 3.5rem); line-height:1.1; margin:.35em 0}
.hero p{color:var(--muted); font-size:1.05rem}
.hero-card{background: radial-gradient(500px 300px at 110% -20%, #1c2740 0%, transparent 60%), var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.chip{padding:10px 12px; background:#0f1218; border:1px solid #233049; border-radius:12px; color:#b6c2d6; font-size:.95rem}
section{padding:70px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:26px}
.section-head h2{margin:0; font-size:clamp(1.6rem, 1.6vw + 1rem, 2rem)}
.muted{color:var(--muted)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px); border-color:#2dd4bf55}
.card h3{margin:.2em 0 .4em}
.price{font-weight:800; font-size:1.1rem; color:#bfe9e2}
.badge{position:absolute; top:14px; right:14px; background:#0f1218; border:1px solid #284557; border-radius:999px; padding:6px 10px; font-size:.8rem; color:#9bd9cf}
ul.clean{margin:10px 0 0 0; padding-left:18px} ul.clean li{margin:6px 0}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{background:#0f1218; border:1px dashed #2a3347; border-radius:var(--radius-sm); padding:16px}
.step strong{display:block; margin-bottom:6px}
.gallery-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin-top:20px}
.gallery-grid img{width:100%; border-radius:12px; border:1px solid #1e2533; cursor:pointer; transition: transform .3s ease, box-shadow .3s ease}
.gallery-grid img:hover{transform:scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,.4)}
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:start}
.card-list{display:grid; gap:12px}
.item{display:flex; gap:12px; align-items:flex-start; background:#0f1218; border:1px solid #243045; border-radius:14px; padding:14px}
footer{border-top:1px solid var(--stroke); padding:28px 0; color:#8fa0b6}
@media (max-width:992px){.hero-grid{grid-template-columns:1fr; gap:20px} .grid-3{grid-template-columns:1fr 1fr} .timeline{grid-template-columns:1fr 1fr} .contact{grid-template-columns:1fr}}
@media (max-width:600px){nav ul{display:none} .grid-3{grid-template-columns:1fr} .timeline{grid-template-columns:1fr} .cta-inline{flex-wrap:wrap} .btn, .btn-outline{width:100%; justify-content:center}}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}
.lightbox-overlay{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:999}
.lightbox-overlay img{max-width:90%; max-height:85%; border-radius:12px; box-shadow:0 0 25px rgba(0,0,0,.6)}