:root{
  --bg:#07161b;
  --card:#0c222a;
  --muted:#9bb5bd;
  --text:#e9f6f9;
  --brand:#21c1d6;
  --brand2:#0aa6a6;
  --line:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:radial-gradient(1200px 600px at 20% 0%, rgba(33,193,214,.22), transparent 55%), radial-gradient(900px 700px at 85% 10%, rgba(10,166,166,.18), transparent 55%), var(--bg); color:var(--text);}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw); margin:0 auto}
.nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(10px);
  background: rgba(7,22,27,.62);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:42px; height:42px; border-radius:14px; box-shadow: 0 10px 22px rgba(0,0,0,.35)}
.brand strong{font-size:18px; letter-spacing:.2px}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{opacity:.86; text-decoration:none; font-weight:600; font-size:14px}
.nav-links a:hover{opacity:1}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:16px; border:1px solid var(--line); text-decoration:none; font-weight:800; letter-spacing:.2px}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); border-color:transparent; color:#021013; box-shadow: 0 12px 28px rgba(33,193,214,.22)}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.small{padding:10px 12px; border-radius:14px; font-size:14px}
.hero{padding:44px 0 30px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:stretch}
.kicker{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(33,193,214,.10); border:1px solid rgba(33,193,214,.20); color:#bff5ff; font-weight:800; font-size:13px}
.h1{font-size: clamp(30px, 4.3vw, 52px); line-height:1.03; margin:14px 0 10px}
.sub{color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.badge{padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#d8f3f8; font-weight:700; font-size:13px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-media{overflow:hidden; position:relative}
.hero-media img{width:100%; height:100%; object-fit:cover; min-height:420px}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(800px 400px at 30% 0%, rgba(33,193,214,.30), transparent 60%),
              linear-gradient(180deg, rgba(7,22,27,.15), rgba(7,22,27,.70));
}
.hero-media .overlay{
  position:absolute; inset:auto 18px 18px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.pill{display:inline-flex; align-items:center; gap:10px; width:max-content;
  padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22); font-weight:900
}
.pill span{color:#c7f7ff}
.section{padding:34px 0}
.section h2{font-size:28px; margin:0 0 8px}
.section p.lead{margin:0 0 18px; color:var(--muted); line-height:1.7}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature{padding:18px}
.icon{
  width:42px; height:42px; border-radius:16px;
  background:rgba(33,193,214,.12); border:1px solid rgba(33,193,214,.22);
  display:grid; place-items:center; font-weight:900; color:#bff5ff
}
.feature h3{margin:12px 0 8px; font-size:18px}
.feature p{margin:0; color:var(--muted); line-height:1.6}
.strip{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:16px; align-items:center; justify-content:space-between
}
.strip .left{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.strip .right{display:flex; flex-wrap:wrap; gap:10px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{padding:10px 12px; border-radius:999px; border:1px dashed rgba(255,255,255,.18); color:#d8f3f8; background:rgba(255,255,255,.03); font-weight:800; font-size:13px}
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.g-item{grid-column: span 4; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03); position:relative; cursor:pointer}
.g-item img{width:100%; height:220px; object-fit:cover; transition:transform .35s ease}
.g-item:hover img{transform:scale(1.04)}
.g-item .cap{position:absolute; inset:auto 10px 10px 10px; padding:10px 12px;
  border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  font-weight:900; font-size:13px
}
.video{padding:18px}
.ratio{position:relative; padding-top:56.25%; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#000}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%}
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact{padding:18px}
.kv{display:grid; gap:10px}
.kv div{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.kv b{min-width:96px}
.small-note{color:var(--muted); font-size:13px; line-height:1.6}
.footer{padding:26px 0 34px; border-top:1px solid var(--line); color:var(--muted)}
.footer .fgrid{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.footer a{color:inherit}
.lightbox{
  position:fixed; inset:0; display:none; place-items:center; z-index:80;
  background:rgba(0,0,0,.72); padding:18px
}
.lightbox.open{display:grid}
.lightbox img{max-width:min(1040px,96vw); max-height:84vh; border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lightbox .close{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:16px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;
  font-size:20px; cursor:pointer
}
.fab{
  position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:10px
}
.fab a{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14); background:rgba(7,22,27,.65);
  backdrop-filter: blur(8px); text-decoration:none; box-shadow: 0 16px 40px rgba(0,0,0,.38)
}
.fab a.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); border-color:transparent; color:#021013}
.fab .menu{position:relative}
.menu-panel{
  position:absolute; right:66px; bottom:0;
  min-width:240px; padding:10px; border-radius:18px;
  background:rgba(7,22,27,.92); border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow); display:none
}
.menu-panel.open{display:grid; gap:8px}
.menu-panel a{
  width:auto; height:auto; padding:10px 12px; border-radius:14px;
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
  background:rgba(255,255,255,.04)
}
.menu-panel small{color:var(--muted); font-weight:700}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media img{min-height:320px}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .g-item{grid-column: span 6}
}
@media (max-width: 560px){
  .nav-links{display:none}
  .g-item{grid-column: span 12}
}