:root{
  --bg:#0b1120;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --brand:#00d0e0;
  --brand-2:#ff2d2d;
  --light:#f8fafc;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:radial-gradient(1200px 800px at 10% -10%, #0b3a55 0%, transparent 60%) no-repeat,
             radial-gradient(800px 600px at 120% 10%, #064663 0%, transparent 50%) no-repeat,
             var(--bg);
  line-height:1.6;
}

.hidden{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.container{width:min(1100px, 92%); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(14px);
  background:linear-gradient(to bottom, rgba(2,6,23,.85), rgba(2,6,23,.35));
  border-bottom:1px solid rgba(148,163,184,.15);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.logo{display:flex; gap:.6rem; align-items:center; color:var(--text); text-decoration:none; font-weight:700}
.logo-img{height:40px; width:auto; border-radius:.2rem; background:#fff}

.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:var(--text); text-decoration:none; padding:.6rem .8rem; border-radius:.6rem; opacity:.85}
.nav a:hover{opacity:1; background:rgba(148,163,184,.1)}
.nav a.active{background:rgba(14,165,233,.15); outline:1px solid rgba(56,189,248,.25)}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0}

@media (max-width: 860px){
  .nav{position:fixed; inset:64px 0 auto 0; background:rgba(2,6,23,.98);
       border-bottom:1px solid rgba(148,163,184,.15);
       flex-direction:column; padding:1rem; display:none}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}

.btn{display:inline-block; padding:.75rem 1rem; border-radius:.8rem; text-decoration:none; font-weight:600; border:1px solid rgba(148,163,184,.2)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#002b3b; border:0}
.btn-ghost{background:transparent; color:var(--text)}
.btn-light{background:#e6f6fe; color:#063646; border:0}

.hero{padding:5rem 0 3rem}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy h1{font-size: clamp(2rem, 2.5vw + 1.2rem, 3rem); margin:.2rem 0 .6rem}
.hero-copy p{color:var(--muted); margin:0 0 1.2rem}
.hero-bullets{margin:0 0 1rem; padding-left:1.2rem}
.hero-art img{width:100%; border-radius:1rem; border:1px solid rgba(148,163,184,.2)}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr}
}

.section-title{font-size:1.6rem; margin:0 0 1rem}
.features{padding:2rem 0 3rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{background:rgba(2,6,23,.5); border:1px solid rgba(148,163,184,.15); border-radius:1rem; padding:1rem}
.card h3, .card h2{margin-top:0}

.process{background:radial-gradient(800px 400px at 0% 0%, rgba(56,189,248,.2), transparent),
                         radial-gradient(800px 400px at 100% 100%, rgba(255,45,45,.2), transparent);
         padding:2rem 0 2.5rem; margin:1rem 0 2rem}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:decimal-leading-zero; padding-left:1rem}
.steps li{background:rgba(2,6,23,.5); border:1px solid rgba(148,163,184,.2); border-radius:.8rem; padding:1rem}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

.page{padding:2rem 0 3rem}
.services-grid .service img{width:100%; height:180px; object-fit:cover; border-radius:.6rem; border:1px solid rgba(148,163,184,.2)}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:.6rem; border:1px solid rgba(148,163,184,.2)}
.gallery figure{margin:0}
.gallery figcaption{font-size:.9rem; color:var(--muted); margin-top:.2rem}
@media (max-width: 960px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .gallery{grid-template-columns:1fr} }

.contact-form{max-width:640px}
.form-field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
input, textarea{
  width:100%; padding:.8rem 1rem;
  border-radius:.6rem; border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.6); color:var(--text);
}
input:focus, textarea:focus{outline:2px solid rgba(56,189,248,.5)}
.checkbox{display:flex; align-items:center; gap:.6rem}

.site-footer{border-top:1px solid rgba(148,163,184,.15); margin-top:2rem}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; padding:2rem 0}
.footer-grid h4{margin:.3rem 0}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid a{color:var(--text); opacity:.8; text-decoration:none}
.footer-grid a:hover{opacity:1}
.footer-bottom{padding:1rem 0; border-top:1px solid rgba(148,163,184,.15); opacity:.8}
.badges-list{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none}
.badges-list li{background:rgba(2,6,23,.5); border:1px solid rgba(148,163,184,.2); padding:.5rem .7rem; border-radius:.7rem}