:root{
  --bg:#050a19;
  --card:#0b1220;
  --accent:#06b6d4;
  --accent-2:#34d399;
  --muted:#94a3b8;
  --surface:#081122;
  --radius:12px;
  --max-w:1100px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  --shadow:0 12px 35px rgba(3,7,18,0.38);
}

*{box-sizing:border-box}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html{font-size:100%;scroll-behavior:smooth}
body{min-height:100%;margin:0;font-family:var(--sans);background:radial-gradient(circle at top,#0f172a 0%,var(--bg) 60%);color:#e6eef6;line-height:1.6;font-size:clamp(.95rem,1vw + .6rem,1.05rem)}
body.nav-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}

.container{max-width:var(--max-w);margin:0 auto;padding:clamp(18px,4vw,32px) clamp(20px,6vw,42px)}
.site-header{backdrop-filter:blur(6px);position:sticky;top:0;z-index:40;background:rgba(5,10,25,0.82);border-bottom:1px solid rgba(255,255,255,0.03);padding-block:14px;transition:padding .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.site-header.scrolled{padding-block:6px;background:rgba(3,7,18,0.95);border-bottom-color:rgba(255,255,255,0.08);box-shadow:0 12px 30px rgba(2,6,23,0.45)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px; padding-top: 15px; padding-bottom: 15px;}
.logo{display:inline-flex;align-items:center;width:min(80px,25vw);transition:transform .2s ease}
.logo img{width:100%;max-height:80px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35))}
.site-header.scrolled .logo{transform:scale(.82)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px}
.nav a:hover{color:#fff;background:rgba(255,255,255,0.04)}
.nav a.cta{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 12px;color:#fff}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,0.12);color:#cfeef0;font-size:1.25rem;padding:6px 12px;border-radius:10px}
.nav-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.65);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:35}
.nav-overlay.show{opacity:1;visibility:visible}

.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:72px 56px;min-height:80vh;background:rgba(5,10,25,0.85)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(5,10,25,0.5) 15%,rgba(5,10,25,0.4) 60%,rgba(2,6,23,0.85));z-index:0}
.hero-media{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-video{width:100%;height:100%;object-fit:cover;filter:contrast(.95)saturate(1.05)brightness(.8)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center}
.hero h1{font-size:clamp(2rem,3vw + 1rem,3rem);margin:0 0 12px;line-height:1.1}
.tagline{color:var(--accent);font-weight:600;margin-bottom:12px}
.hero p{color:var(--muted);margin:0 0 16px}
.hero-pills{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:10px}
.hero-pills li{border:1px solid rgba(255,255,255,0.09);border-radius:999px;padding:6px 14px;font-size:.85rem;color:#d8f5f8}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:transform .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(110deg,var(--accent),var(--accent-2));color:#022;box-shadow:0 6px 20px rgba(6,182,212,0.18)}
.btn.ghost{border:1px solid rgba(255,255,255,0.1);color:#eaf9fb}
.hero-visual{width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(140deg,rgba(51,65,85,0.5),rgba(15,118,110,0.4))}
.hero-visual img{object-fit:cover;width:100%;height:100%}

.services,.gallery,.about,.contact{padding-block:48px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.015));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(0,0,0,0.18)}
.card h3{margin:0 0 8px;font-size:1.1rem}
.section-sub{color:var(--muted);margin-top:6px;max-width:580px}

.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.grid img{width:100%;height:100%;border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,0.06);object-fit:cover;min-height:180px}
.lightbox{position:fixed;inset:0;background:rgba(3,7,18,0.9);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.lightbox img{max-width:92%;max-height:85%;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.45)}
.lb-close{position:absolute;top:22px;right:22px;border:0;background:rgba(15,23,42,0.92);color:#fff;padding:10px;border-radius:50%;cursor:pointer}

.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}

.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row label{flex:1 1 220px}
label{display:block;color:var(--muted);margin-bottom:8px;font-size:.95rem}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:#eaf9fb;font-size:1rem}
textarea{min-height:140px;resize:vertical}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.note{color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,0.05);padding:18px 0;margin-top:20px;background:rgba(2,6,23,0.6)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{position:fixed;right:24px;top:90px;background:rgba(5,10,25,0.98);padding:18px;border-radius:16px;flex-direction:column;min-width:220px;box-shadow:var(--shadow);transform:translateY(-20px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav a{width:100%}
  .nav-overlay.show{display:block}
}

@media (max-width:640px){
  .hero{padding-block:54px}
  .hero-pills li{font-size:.8rem}
  .hero-visual{aspect-ratio:3/2}
  .form-actions{flex-direction:column;align-items:flex-start}
}

@media (max-width:480px){
  .container{padding-inline:18px}
  .hero h1{font-size:2.1rem}
  .nav{left:16px;right:16px;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
}