:root{
  --bg:#0a0a0a; --bg2:#151515; --gold:#d4af37; --gold2:#bfa132; --muted:#bbbbbb; --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", Tahoma, sans-serif;
  color:var(--white);
  background: radial-gradient(1200px 600px at 20% 0%, #111, #000) fixed;
}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  background: linear-gradient(90deg, #000, #111);
  border-bottom:1px solid #222; padding:12px 20px; display:flex; gap:16px; align-items:center;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--gold)}
.brand-text{letter-spacing:.5px}
.nav{display:flex; gap:12px; flex:1; flex-wrap:wrap}
.nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:10px; transition:.2s}
.nav a:hover{color:var(--white); background:#1b1b1b}
.header-actions{display:flex; gap:8px}
.btn-ghost,.btn-outline,.btn-gold{
  padding:8px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--white)
}
.btn-ghost:hover{background:#1b1b1b}
.btn-outline{border-color:#333}
.btn-outline:hover{background:#1b1b1b}
.btn-gold{background: linear-gradient(180deg, var(--gold), var(--gold2)); color:#000; font-weight:700}
.btn-gold:hover{filter:brightness(1.05)}
.input{background:#0f0f0f; color:#fff; border:1px solid #333; border-radius:12px; padding:10px; width:100%}

/* Hero */
.hero{position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.85));
}
.hero-content{position:relative; text-align:center; padding:40px; z-index:1}
.hero h1{font-size:42px; margin:.2em 0}
.hero p{color:var(--muted); margin:0 0 20px}
.hero-cta{margin-bottom:16px}
.hero-controls{display:flex; gap:8px; justify-content:center}
.hero-dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.hero-dots span{width:8px; height:8px; border-radius:50%; background:#444}
.hero-dots span.active{background:var(--gold)}

/* Sections */
.section{padding:48px 20px; max-width:1100px; margin:0 auto}
.section h2{margin:0 0 18px; color:var(--gold)}
.mt{margin-top:24px}

/* About */
.about{display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:center; background:linear-gradient(180deg,#0d0d0d,#080808); border:1px solid #1a1a1a; border-radius:18px}
.about-img-wrap img{width:100%; border-radius:16px; border:1px solid #222}
.about-text p{color:var(--muted)}

/* Services */
.grid{display:grid; gap:16px}
.services-grid{grid-template-columns:repeat(2,1fr)}
@media (min-width:800px){ .services-grid{grid-template-columns:repeat(3,1fr)} }
.service{
  background:#0f0f0f; border:1px solid #252525; border-radius:16px; padding:18px; text-align:center;
  transition:.2s; box-shadow: inset 0 0 0 1px #000;
}
.service:hover{transform:translateY(-2px); border-color:#2d2d2d}

/* Counter */
.counter{text-align:center}
.counter-number{font-size:44px; font-weight:800; color:var(--gold)}
.muted{color:var(--muted); font-size:13px}

/* Cases */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.case-grid{grid-template-columns:repeat(1,1fr)}
@media (min-width:700px){ .case-grid{grid-template-columns:repeat(2,1fr)} }
.case-card{
  background:#0f0f0f; border:1px solid #222; border-radius:16px; overflow:hidden
}
.case-media{display:grid; grid-template-columns:1fr 1fr}
.case-media img{width:100%; height:220px; object-fit:cover}
.case-body{padding:12px}
.tag{display:inline-block; background:#161616; border:1px solid #2c2c2c; color:#ccc; font-size:12px; padding:4px 8px; border-radius:999px; margin:2px}

/* Notice & PDFs */
.notice-list{list-style:none; padding-left:0; display:grid; gap:10px}
.notice-list li{background:#0f0f0f; border:1px solid #222; padding:12px; border-radius:12px}
.pdf-grid{display:grid; grid-template-columns:repeat(1,1fr); gap:12px}
@media (min-width:800px){ .pdf-grid{grid-template-columns:repeat(2,1fr)} }
.pdf-item{background:#0f0f0f; border:1px solid #222; border-radius:12px; padding:12px}
.pdf-item a{color:var(--gold); text-decoration:none}

/* Booking */
.booking{text-align:center}
.booking-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}

/* Footer */
.footer{background:linear-gradient(180deg,#070707,#000); border-top:1px solid #111; padding:24px 20px}
.footer-cols{display:grid; grid-template-columns:1fr; gap:16px; max-width:1100px; margin:0 auto}
@media (min-width:800px){ .footer-cols{grid-template-columns:2fr 1fr} }
.brand-sm{color:var(--gold); font-weight:700}
.social a{color:var(--muted); margin-right:10px; text-decoration:none}
.social a:hover{color:var(--white)}