:root{
  --bg:#040405;
  --panel:#0A0A0E;
  --panel2:#0F0F15;

  --gold:#D8B865;
  --gold2:#B8892E;
  --cream:#F6F1E6;

  --muted: rgba(246,241,230,.86);
  --line: rgba(216,184,101,.16);
  --lineStrong: rgba(216,184,101,.28);

  --shadow: 0 18px 55px rgba(0,0,0,.65);
  --glow: 0 0 16px rgba(216,184,101,.32), 0 0 34px rgba(216,184,101,.18);

  --whatsapp:#25D366;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background: var(--bg);
  color: var(--cream);
  line-height:1.7;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
section{padding:84px 0;position:relative;overflow:hidden;}

h1,h2,h3,h4{font-family:'Montserrat',sans-serif;font-weight:800;}
h2.section-title{
  font-size:3.1rem;
  text-align:center;
  margin-bottom:52px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
h2.section-title::after{
  content:"";
  display:block;
  width:118px;height:5px;
  margin:16px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--gold), #F3E3B4, var(--gold), transparent);
  background-size:220% 100%;
  animation: sheen 3.4s ease-in-out infinite;
  box-shadow: var(--glow);
}
@keyframes sheen{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  border:2px solid transparent;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  cursor:pointer;
  white-space:nowrap;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111114;
  border-color: rgba(216,184,101,.65);
}
.btn-gold:hover{
  transform: translateY(-3px);
  box-shadow: var(--glow), var(--shadow);
  filter:saturate(1.08);
}
.btn-ghost{
  background: rgba(216,184,101,.06);
  color: var(--cream);
  border-color: rgba(216,184,101,.35);
}
.btn-ghost:hover{
  transform: translateY(-3px);
  border-color: rgba(216,184,101,.6);
  box-shadow: var(--glow);
}

header{
  position:sticky; top:0; z-index:1000;
  background: rgba(10,10,14,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 35px rgba(0,0,0,.65);
  padding:18px 0;
}
header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(243,227,180,.85), transparent 60%),
    linear-gradient(135deg, rgba(216,184,101,.28), rgba(216,184,101,.08));
  border:1px solid rgba(216,184,101,.35);
  box-shadow: var(--glow);
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(216,184,101,.22) 45%, transparent 75%);
  transform: translateX(-55%);
  animation: sweep 7.5s ease-in-out infinite;
}
@keyframes sweep{
  0%{transform: translateX(-60%); opacity:.55;}
  50%{transform: translateX(60%); opacity:.85;}
  100%{transform: translateX(-60%); opacity:.55;}
}
.brand-name{
  font-size:2rem;
  color: var(--gold);
  text-shadow: var(--glow);
  letter-spacing:.6px;
}

nav ul{list-style:none;display:flex;gap:26px;align-items:center;}
nav a{
  color: rgba(246,241,230,.92);
  text-decoration:none;
  font-weight:600;
  position:relative;
  padding-bottom:6px;
  transition: color .2s ease;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: .95rem;
}
nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0%;height:2px;
  background: var(--gold);
  border-radius:999px;
  transition: width .2s ease;
  box-shadow: var(--glow);
}
nav a:hover{color: var(--gold);}
nav a:hover::after, nav a.active::after{width:100%;}

.header-cta{display:flex;align-items:center;gap:10px;}

/* Hamburger defaults (hidden on desktop) */
.hamburger {
  display: none;
  font-size: 1.8rem;
  color: var(--gold);
  cursor: pointer;
  z-index: 1001;
}

.hero{
  min-height: 92vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(216,184,101,.18), transparent 60%),
    radial-gradient(620px 360px at 18% 78%, rgba(216,184,101,.10), transparent 62%),
    linear-gradient(135deg, #020203, #07070A, #0D0D14);
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(130deg, transparent 0%, rgba(216,184,101,.12) 45%, transparent 78%),
    radial-gradient(1200px 600px at 70% 30%, rgba(216,184,101,.08), transparent 55%);
  transform: translateX(-40%);
  animation: heroFlow 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroFlow{
  0%{transform: translateX(-55%); opacity:.55;}
  50%{transform: translateX(55%); opacity:.8;}
  100%{transform: translateX(-55%); opacity:.55;}
}

.hero-content{position:relative;z-index:2;max-width:980px;animation: pop 1.05s ease-out forwards;}
@keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}

.hero h1{
  font-size:4.2rem;
  line-height:1.08;
  text-shadow: 0 14px 45px rgba(0,0,0,.75);
  margin-bottom:18px;
}
.hero h1 .hl{color: var(--gold); text-shadow: var(--glow);}
.hero p{
  font-size:1.28rem;
  color: var(--muted);
  max-width:820px;
  margin:0 auto 38px auto;
  text-shadow: 0 8px 26px rgba(0,0,0,.62);
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero-badges{
  margin-top:20px;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.badge{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(216,184,101,.18);
  background: rgba(216,184,101,.06);
  color: rgba(246,241,230,.90);
  font-weight:600;
  font-size:.95rem;
}
.badge i{color: var(--gold); margin-right:8px; text-shadow: var(--glow);}

.strip{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.grid{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
}
.card{
  flex: 0 0 285px;
  padding:38px 34px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  text-align:center;
}
.card:hover{
  transform: translateY(-8px);
  border-color: var(--lineStrong);
  box-shadow: var(--glow), var(--shadow);
}
.card i{
  font-size:3.1rem;
  color: var(--gold);
  text-shadow: var(--glow);
  margin-bottom:18px;
}
.card h3{font-size:1.35rem;color: var(--gold);margin-bottom:10px;}
.card p{color: var(--muted);font-weight:300;}

.service{
  margin-bottom:56px;
  border-radius:18px;
  background:
    radial-gradient(520px 220px at 15% 25%, rgba(216,184,101,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:44px 42px;
  text-align:center;
}
.service h3{
  font-size:2.05rem;
  color: var(--gold);
  text-shadow: var(--glow);
  margin-bottom:12px;
}
.service p{color: var(--muted); font-weight:300; font-size:1.05rem;}
.service .mini{
  margin-top:16px;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.pill{
  border:1px solid rgba(216,184,101,.18);
  background: rgba(216,184,101,.06);
  color: rgba(246,241,230,.90);
  padding:9px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
}

.fleet{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.fleet-item{
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:28px;
  text-align:center;
  transition: transform .22s ease, border-color .22s ease;
}
.fleet-item:hover{transform: scale(1.012); border-color: var(--lineStrong);}
.fleet-item h4{color: var(--gold);text-shadow: var(--glow);font-size:1.6rem;margin-bottom:8px;}
.fleet-item p{color: var(--muted);font-weight:300;font-size:1.05rem;}

.steps{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;}
.step{
  flex:0 0 305px;
  padding:36px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  text-align:center;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.step:hover{transform: translateY(-8px);border-color: var(--lineStrong);box-shadow: var(--glow), var(--shadow);}
.step i{font-size:3.6rem;color: var(--gold);text-shadow: var(--glow);margin-bottom:16px;}
.step h3{color: var(--gold);font-size:1.45rem;margin-bottom:8px;}
.step p{color: var(--muted);font-weight:300;}
code{
  padding:2px 8px;border-radius:10px;
  background: rgba(216,184,101,.10);
  border:1px solid rgba(216,184,101,.18);
  color: var(--cream);
}

.slider{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:18px;padding-bottom:18px;margin-top:34px;
}
.review{
  flex:0 0 auto; width: 460px;
  scroll-snap-align:start;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:30px;
  position:relative;
}
.review::before{
  content:"\201C";
  position:absolute; top:-18px; left:18px;
  font-family:serif; font-size:6rem;
  color: var(--gold); opacity:.16;
  text-shadow: var(--glow);
  line-height:1;
}
.review p{font-style:italic;color: var(--muted);margin-bottom:16px;position:relative;z-index:1;}
.review .who{color: var(--gold);font-weight:700;text-shadow: var(--glow);}
.stars{color:#F3E3B4;margin-top:6px;text-shadow: 0 0 10px rgba(243,227,180,.22);}

.faq-item{
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom:14px;
  overflow:hidden;
}
.faq-q{
  padding:18px 22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  color: var(--gold);
  font-weight:800;
  font-size:1.08rem;
}
.faq-q:hover{background: rgba(216,184,101,.06);}
.faq-q i{transition: transform .22s ease;}
.faq-item.active .faq-q i{transform: rotate(180deg);}
.faq-a{
  max-height:0; overflow:hidden;
  transition: max-height .32s ease, padding .32s ease;
  background: rgba(4,4,5,.55);
  border-top:1px solid rgba(216,184,101,.12);
  padding:0 22px;
}
.faq-item.active .faq-a{max-height:280px;padding:16px 22px 20px;}
.faq-a p{color: var(--muted);font-weight:300;}

.cta{
  text-align:center;
  background:
    radial-gradient(820px 420px at 50% 18%, rgba(216,184,101,.22), transparent 60%),
    linear-gradient(135deg, #08080C, #101018, #060608);
  border-top:1px solid var(--line);
}
.cta h2{
  font-size:3rem;
  margin-bottom:10px;
  text-shadow: 0 12px 40px rgba(0,0,0,.72);
}
.cta h2 span{color: var(--gold);text-shadow: var(--glow);}
.cta p{color: var(--muted);font-size:1.18rem;margin-bottom:34px;}
.cta .phone{
  margin-top:22px;
  font-size:1.2rem;
  font-weight:900;
}
.cta .phone a{color: var(--gold);text-decoration:none;text-shadow: var(--glow);}

footer{
  background: var(--panel);
  border-top:1px solid var(--line);
  padding:70px 0 30px;
  font-size:.95rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:38px;
  margin-bottom:44px;
}
.footer-col h4{
  color: var(--gold);
  text-shadow: var(--glow);
  text-transform:uppercase;
  margin-bottom:16px;
  letter-spacing:.8px;
}
.footer-col p{color: var(--muted);font-weight:300;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color: rgba(246,241,230,.88);text-decoration:none;font-weight:300;transition: color .18s ease;}
.footer-col a:hover{color: var(--gold);}
.footer-col i{width:22px;color: var(--gold);text-shadow: var(--glow);margin-right:10px;}
.bottom{
  text-align:center;
  border-top:1px solid rgba(216,184,101,.12);
  padding-top:24px;
  color: rgba(246,241,230,.70);
  font-size:.85rem;
}

.mobile-sticky{
  display:none;
  position:fixed; left:0; bottom:0;
  width:100%;
  z-index:1200;
  border-top:1px solid rgba(216,184,101,.14);
  box-shadow: 0 -10px 30px rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
}
.mobile-sticky a{
  flex:1;
  padding:18px 10px;
  text-decoration:none;
  font-weight:900;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.wapp{background: var(--whatsapp); color:#fff;}
.call{background: linear-gradient(135deg, var(--gold), var(--gold2)); color:#111114;}

[data-aos]{opacity:0;transition: transform 1s cubic-bezier(.25,.46,.45,.94), opacity 1s cubic-bezier(.25,.46,.45,.94);}
[data-aos="fade-up"]{transform: translateY(48px);}
[data-aos="fade-left"]{transform: translateX(48px);}
[data-aos="fade-right"]{transform: translateX(-48px);}
[data-aos].aos-animate{opacity:1;transform: translate(0,0);}

@media (max-width: 992px){
  .hero h1{font-size:3.4rem;}
  .hero p{font-size:1.1rem;}
  h2.section-title{font-size:2.45rem;}
  .review{width:90%;}
}
@media (max-width: 768px){
  header .container{flex-direction:column;align-items:center;}
  .header-cta{display:none;}
  .hero h1{font-size:2.75rem;}
  .hero p{font-size:1rem;}
  h2.section-title{font-size:2rem;}
  .card,.step{width:90%;}
  .fleet{width:92%;}
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .mobile-sticky{display:flex;}
  body{padding-bottom:62px;}
  .cta h2{font-size:2.2rem;}
  .faq-q{font-size:1rem;}

  /* Mobile Menu Logic */
  .hamburger {
    display: block; /* Visible on mobile */
    position: absolute;
    right: 20px;
    top: 25px;
  }

  nav ul {
    display: none; /* Hidden by default */
    flex-direction: column;
    width: 100%;
    background: var(--panel);
    padding: 20px 0;
    margin-top: 10px;
    border-top: 1px solid var(--line);
    text-align: center;
  }

  nav ul.active {
    display: flex;
  }
}