:root{
  --bg:#000;
  --fg:#fff;
  --fg-dim:rgba(255,255,255,.7);
  --card:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.12);
  --accent:#ffffff;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--fg); text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:1200px; padding:0 20px; margin:0 auto}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border:1px solid var(--border); border-radius:16px;
  transition:.25s; background:transparent; color:var(--fg)
}
.btn:hover{ background:var(--fg); color:#000; transform:translateY(-1px) }

header.sticky{
  position:fixed; inset:0 0 auto 0; height:76px;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(0,0,0,.55); border-bottom:1px solid var(--border); z-index:50;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; height:76px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{
  width:36px; height:36px; border-radius:14px; background:#fff; color:#000;
  display:grid; place-items:center; font-weight:700;
  border:1px solid rgba(255,255,255,.25);
}
.nav a{opacity:.8; margin-left:18px; font-size:14px}
.nav a.active,.nav a:hover{opacity:1}
.mobile-toggle{display:none}

.hero{
  padding-top:110px; padding-bottom:40px;
  background: radial-gradient(80% 60% at 50% -10%, rgba(255,255,255,.10), transparent 60%);
}
.hero h1{font-size:48px; line-height:1.05; margin:0}
.hero p{color:var(--fg-dim); max-width:720px; margin-top:16px}

.grid{display:grid; gap:18px}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .mobile-toggle{display:block}
  .nav .links{display:none}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:transform .3s, border-color .3s, background .3s;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06) }

.section{padding:56px 0}
.section h2{font-size:36px; margin:0 0 8px}
.section p.lead{color:var(--fg-dim)}

.footer{
  border-top:1px solid var(--border); margin-top:40px;
  padding:28px 0; color:rgba(255,255,255,.6); font-size:12px; text-align:center;
}

/* marquee */
.marquee{
  overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.marquee-track{
  display:inline-block; padding:12px 0; animation:marquee 22s linear infinite;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
@keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* animated aura */
.aura{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}
.aura::before{
  content:""; position:absolute; left:50%; top:-20%; width:120vw; height:120vw; transform:translateX(-50%);
  background: radial-gradient(circle at center, rgba(255,255,255,.06), transparent 60%);
  filter: blur(30px); animation:auraPulse 10s ease-in-out infinite;
}
@keyframes auraPulse{0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.06)}}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

/* chat widget */
.chat-fab{
  position:fixed; bottom:20px; right:20px; width:56px; height:56px; border-radius:18px;
  background:#fff; color:#000; display:grid; place-items:center; border:1px solid rgba(0,0,0,.2); box-shadow:var(--shadow); z-index:60;
}
.chat-box{
  position:fixed; bottom:88px; right:20px; width:340px; max-width:calc(100vw - 40px);
  background:#000; border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); z-index:60;
}
.chat-header{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border)}
.chat-body{height:280px; overflow:auto; padding:10px; display:flex; flex-direction:column; gap:8px}
.bubble{border:1px solid var(--border); padding:10px 12px; border-radius:14px; max-width:80%}
.agent{background:rgba(255,255,255,.05); color:var(--fg-dim)}
.user{align-self:flex-end}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border)}
.chat-input input{flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--fg)}
.chat-input button{padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--fg)}
.chat-input button:hover{background:#fff; color:#000}

/* floating WhatsApp */
.whatsapp{
  position:fixed; bottom:20px; left:20px; display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  z-index:60;
}
.whatsapp:hover{background:#fff; color:#000}

/* FAQ */
.faq{ max-width:900px; margin:0 auto }
.faq-item{ border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin:10px 0; background:var(--card) }
.faq-q{ display:flex; justify-content:space-between; gap:10px; cursor:pointer }
.faq-a{ color:var(--fg-dim); max-height:0; overflow:hidden; transition:max-height .35s ease }
.faq-item.open .faq-a{ max-height:300px }

/* forms */
.input, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:transparent; color:var(--fg)
}
label{font-size:14px; color:var(--fg-dim)}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr } }

/* footer columns */
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:20px }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr } }

/* utility */
.mt-8{margin-top:32px}
.mb-4{margin-bottom:16px}
.small{font-size:12px; color:var(--fg-dim)}

/* === Fixed header offset & anchor margins === */

:root{
  --nav-h: 76px;
}

body{
  padding-top: var(--nav-h); /* prevent content hiding under fixed header */
}

/* ensure hero looks balanced while still respecting header */
.hero{ padding-top: calc(40px + var(--nav-h)); }

/* anchors/sections targeted via hashes won't hide under header */
[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }


/* === Enhancements === */

/* Premium buttons */
.btn{ position:relative; overflow:hidden }
.btn::after{
  content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.15), transparent 40%);
  opacity:0; transition:opacity .3s ease;
}
.btn:hover::after{ opacity:1 }

/* Premium floating buttons (chat & WhatsApp) */
.fab{ box-shadow: 0 12px 30px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); }
.whatsapp{
  display:inline-flex; align-items:center; gap:10px; font-weight:600;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:12px 16px;
}
.whatsapp::before{
  content:""; width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #25D366, #128C7E);
  display:inline-block;
}

/* Chat icon upgrade */
.chat-fab{ border-radius:18px; font-weight:700; }
.chat-header{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.chat-body{ background: rgba(255,255,255,.02); }

/* Footer premium layout */
footer.section{ padding:64px 0 0 }
.footer-top{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  padding:28px 0; margin-top:40px;
}
.footer-cta{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.badges{ display:flex; gap:12px; flex-wrap:wrap }
.badge{
  border:1px solid var(--border); border-radius:999px; padding:8px 12px; font-size:12px; color:var(--fg-dim);
  background:rgba(255,255,255,.03);
}
.newsletter{ display:flex; gap:8px; align-items:center }
.newsletter input{
  padding:10px 14px; border:1px solid var(--border); border-radius:14px; background:transparent; color:var(--fg);
}
.newsletter button{ padding:10px 14px; border:1px solid var(--border); border-radius:14px; background:transparent; color:var(--fg) }
.newsletter button:hover{ background:#fff; color:#000 }

.footer-bottom{ border-top:1px solid var(--border); padding:22px 0; text-align:center; color:rgba(255,255,255,.6); font-size:12px }

/* Link underline animation */
.uline{ position:relative }
.uline::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:#fff; transition:right .25s ease;
}
.uline:hover::after{ right:0 }