:root{
  --bg:#0b0f12;
  --card:#0f161b;
  --text:#e9f0f3;
  --muted:#a9b6bf;
  --line:rgba(255,255,255,.09);
  --brand:#25d366; /* used only for whatsapp button icon */
  --accent:#29d3c2;
  --accent2:#d3b46a;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(1200px 700px at 20% -10%, rgba(41,211,194,.18), transparent 55%),
              radial-gradient(900px 600px at 85% 0%, rgba(211,180,106,.16), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

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

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,18,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.brand img{border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.brand-name{display:block;font-weight:800;letter-spacing:.2px}
.brand-tagline{display:block;font-size:.88rem;color:var(--muted)}

.nav{display:flex;gap:18px;align-items:center}
.nav a{opacity:.9;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{opacity:1}
.nav .pill{
  padding:10px 14px;border-radius:999px;
  background:linear-gradient(135deg, rgba(41,211,194,.22), rgba(211,180,106,.22));
  border:1px solid var(--line);
}

.menu-btn{display:none;background:transparent;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;opacity:.9}

/* Hero */
.hero{position:relative;min-height:78vh;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter: contrast(1.05) saturate(1.05);
  opacity:.85;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, rgba(11,15,18,.92), rgba(11,15,18,.55) 45%, rgba(11,15,18,.88));
}
.hero-content{position:relative;z-index:1;padding:56px 0}
.hero-card{
  width:min(720px,100%);
  padding:26px 22px;
  border-radius:22px;
  background:rgba(15,22,27,.74);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-card h1{margin:0 0 10px;font-size:clamp(1.7rem, 3.2vw, 2.6rem);line-height:1.15}
.hero-card p{margin:0 0 18px;color:rgba(233,240,243,.92)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.btn.primary{
  background:linear-gradient(135deg, rgba(41,211,194,.95), rgba(211,180,106,.85));
  color:#071012;
  border:0;
}

.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.badge{
  font-size:.85rem;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted);
}

/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%)}
.section-head{margin-bottom:22px}
.section-head h2{margin:0 0 8px;font-size:clamp(1.4rem, 2.2vw, 2rem)}
.section-head p{margin:0;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.card{
  padding:18px 16px;
  border-radius:18px;
  background:rgba(15,22,27,.6);
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

.cta-bar{
  margin-top:18px;
  padding:18px 16px;
  border-radius:18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(41,211,194,.10), rgba(211,180,106,.10));
}
.cta-bar span{display:block;color:var(--muted)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px}
.gitem{padding:0;border:0;background:transparent;cursor:pointer;border-radius:18px;overflow:hidden;outline:none}
.gitem img{width:100%;height:180px;object-fit:cover;transition:transform .25s ease}
.gitem:hover img{transform:scale(1.05)}

/* Video */
.video-wrap{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.video-wrap::before{content:"";display:block;padding-top:56.25%}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Social */
.social-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.social-card{
  border-radius:18px;
  background:rgba(15,22,27,.6);
  border:1px solid var(--line);
  padding:16px;
}
.social-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.link{color:var(--accent);font-weight:700;text-decoration:none}
.link:hover{text-decoration:underline}
.fb-embed{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.fb-embed iframe{width:100%;height:520px;border:0}
.muted{color:var(--muted)}
.spacer{height:16px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-card{border-radius:18px;background:rgba(15,22,27,.6);border:1px solid var(--line);padding:16px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.mini{display:grid;gap:6px;margin-bottom:12px}
.form{display:grid;gap:10px}
label{display:grid;gap:6px;font-weight:700}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(41,211,194,.5)}

.map-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:360px;border:0}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:22px 0;background:rgba(11,15,18,.7)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-left img{border-radius:10px}
.footer-right p{margin:0;color:var(--muted)}

/* WhatsApp */
.whatsapp-float{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:54px;height:54px;border-radius:16px;
  background:rgba(37,211,102,.16);
  border:1px solid rgba(37,211,102,.35);
  display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.whatsapp-float svg{width:28px;height:28px;fill:var(--brand)}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(980px, 100%);max-height:86vh;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow)}
.lb-close{
  position:fixed;top:14px;right:14px;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,22,27,.65);
  color:var(--text);
  font-size:28px;line-height:1;
  cursor:pointer;
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .gitem img{height:170px}
  .social-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .menu-btn{display:block}
  .nav{position:fixed;top:64px;right:18px;left:18px;display:none;flex-direction:column;gap:10px;
    padding:14px;border-radius:18px;
    background:rgba(11,15,18,.92);border:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
  .nav .pill{width:100%;text-align:center}
  .hero{min-height:72vh}
}