:root{
  --bg-dark: rgba(0,0,0,.55);
  --txt: #f3f5f7;
  --muted: #d9dde3;
  --accent: #ffb300;
  --brand: #ff4b4b;
  --glass: rgba(15,18,22,.55);
  --card: rgba(20,24,30,.65);
  --border: rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  line-height:1.55;
}
#bg{
  position:fixed; inset:0;
  background:url('../..//images/bg.jpg') center center / cover no-repeat fixed;
  z-index:-2;
}
body::before{
  content:""; position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(10,12,16,.6), rgba(10,12,16,.8));
  z-index:-1;
}
.topbar{
  position:sticky; top:0; z-index:9;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background:var(--glass); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{font-weight:800; letter-spacing:.5px; color:#fff; text-decoration:none; display:flex; align-items:center; gap:.4rem}
.brand .sun{color:var(--accent)}
.topbar nav{display:flex; gap:14px; align-items:center}
.topbar nav a{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:12px;
  border:1px solid transparent;
}
.topbar nav a:hover{color:#fff; border-color:var(--border); background:rgba(255,255,255,.04)}
.topbar nav .cta{color:#fff; border-color:var(--border); background:rgba(255,255,255,.06)}
.page{padding:clamp(18px,2.2vw,28px); max-width:1200px; margin-inline:auto}
.hero{display:grid; place-items:center; min-height:68vh; padding-block:4vh}
.glass{background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:22px}
.hero-card{padding:28px; max-width:900px}
.hero-card h1{font-size:clamp(28px,3.6vw,48px); margin:.2em 0 .4em}
.accent{color:var(--brand)}
.hero-card p{color:var(--muted); font-weight:300}
.hero-actions{display:flex; gap:12px; margin:.8rem 0 1rem}
.badges{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:0; list-style:none; color:var(--muted); font-size:.95rem}
.cols{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--card)}
.card h3{margin-top:4px}
.tick{padding-left:1.1rem}
.tick li{margin:.35rem 0}
.cta-wide{margin:28px 0; text-align:center}
.cta-wide h2{margin:0 0 10px 0}
.btn{display:inline-block; padding:10px 16px; border-radius:14px; border:1px solid var(--border); text-decoration:none; color:#fff; background:rgba(255,255,255,.05)}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#ff7a59); border-color:transparent}
.btn.primary.big{font-size:1.05rem; padding:12px 18px}
.page-head{margin:10px 0 18px}
.page-head h1{margin:.2rem 0}
.gallery{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery a{border-radius:14px; overflow:hidden; border:1px solid var(--border); background:rgba(0,0,0,.25)}
.gallery img{display:block; width:100%; height:200px; object-fit:cover; transition:transform .3s ease}
.gallery a:hover img{transform:scale(1.04)}
.lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.85)}
.lightbox.hidden{display:none}
.lightbox img{max-width:min(92vw,1200px); max-height:85vh; border-radius:14px}
.lightbox-close{position:absolute; top:18px; right:18px; font-size:34px; background:rgba(0,0,0,.5); color:#fff; border:0; width:44px; height:44px; border-radius:50%; cursor:pointer}
.contact{display:grid; gap:16px; grid-template-columns:2fr 1fr}
.contact-form{display:grid; gap:10px; margin-top:8px}
input,textarea{width:100%; padding:12px 14px; border-radius:12px; color:#fff; background:#0f1318; border:1px solid var(--border)}
.tiny{opacity:.8; font-size:.85rem}
.tips ul{margin-top:.3rem}
.site-footer{
  margin-top:30px; padding:20px; text-align:center; color:var(--muted);
  border-top:1px solid var(--border); background:var(--glass); backdrop-filter:blur(8px); border-radius:18px;
}
.site-footer .foot-links{display:flex; gap:8px; justify-content:center; margin:6px 0 4px}
@media (max-width:800px){
  .contact{grid-template-columns:1fr}
  .hero-card{padding:20px}
}