:root {
  --primary: #eab308;
  --primary-dark: #ca8a04;
  --dark: #0a0a0a;
  --dark-light: #1a1a1a;
  --gray: #737373;
  --light: #fafafa;
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--dark);
  color: var(--light);
  line-height: 1.6;
}
.font-orbitron{ font-family:'Orbitron',sans-serif; }
.font-teko{ font-family:'Teko',sans-serif; letter-spacing:.05em; }

/* Hero BG */
@keyframes heroZoom { 0%{transform:scale(1)} 100%{transform:scale(1.1)} }
.hero-bg{ position:relative; min-height:100vh; overflow:hidden; }
.hero-bg::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.5)), url('assets/hero.webp');
  background-size:cover; background-position:center; background-attachment:fixed;
  animation:heroZoom 10s ease-in-out forwards; z-index:0;
}
.hero-content{ position:relative; z-index:1; }

.section-glow{ position:relative; overflow:hidden; }
.section-glow::before{
  content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:500px; height:200px; background:radial-gradient(circle, rgba(234,179,8,.15), transparent 70%);
  filter:blur(80px); z-index:0; pointer-events:none;
}

/* Brands decorations */
.decor-left, .decor-right{
  position:absolute; width:18rem; height:18rem; background:rgba(234,179,8,.05);
  filter:blur(30px); border-radius:9999px;
}
.decor-left{ left:-5rem; top:0; }
.decor-right{ right:-5rem; bottom:0; }

.thumbnail{ width:100%; height:180px; object-fit:contain; background:#0a0a0a; cursor:pointer; transition:.3s; opacity:.6; border:2px solid transparent; }
.thumbnail.active,.thumbnail:hover{ opacity:1; border-color:var(--primary); transform:scale(1.05); }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background-color:rgba(234,179,8,.8); color:var(--dark);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; transition:.3s; z-index:10; box-shadow:0 4px 6px rgba(0,0,0,.1);
}
.slider-arrow:hover{ background-color:var(--primary); transform:translateY(-50%) scale(1.1); }

.gallery-container{ position:relative; width:100%; height:600px; overflow:hidden; background:#0a0a0a; border-radius:.5rem; }
.gallery-image{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .5s ease; object-fit:contain; background:#0a0a0a; }
.gallery-image.active{ opacity:1; }
.gallery-counter{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); color:#fff; padding:.25rem .75rem; border-radius:9999px; font-size:.875rem;
}

.icon-round{ background:#000; border:1px solid #27272a; height:4rem; width:4rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; }

.btn-primary{
  background:linear-gradient(145deg, var(--primary), var(--primary-dark));
  transition:.3s; position:relative; overflow:hidden;
}
.btn-primary::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:.6s;
}
.btn-primary:hover::before{ left:100%; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 15px rgba(234,179,8,.3); }

.brand-logo{ filter:grayscale(1) brightness(.7); transition:.4s; }
.brand-logo:hover{ filter:grayscale(0) brightness(1); transform:scale(1.05); }

.form-input{ transition:.3s; }
.form-input:focus{ box-shadow:0 0 0 3px rgba(234,179,8,.2); }

.fade-in{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

.floating-whatsapp{
  position:fixed; bottom:25px; right:25px; width:60px; height:60px;
  background:linear-gradient(145deg, var(--primary), var(--primary-dark));
  color:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center;
  box-shadow:0 6px 20px rgba(234,179,8,.4); z-index:999; transition:.3s; animation:pulse 2s infinite;
}
.floating-whatsapp:hover{ transform:scale(1.1); box-shadow:0 8px 25px rgba(234,179,8,.5); }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(234,179,8,.7)} 70%{box-shadow:0 0 0 10px rgba(234,179,8,0)} 100%{box-shadow:0 0 0 0 rgba(234,179,8,0)} }

.back-to-top{
  position:fixed; bottom:25px; left:25px; width:50px; height:50px; background:var(--dark-light);
  color:var(--primary); border:2px solid var(--primary); border-radius:50%; display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.2); z-index:999; transition:.3s; opacity:0; visibility:hidden;
}
.back-to-top.active{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:var(--primary); color:var(--dark); }

/* Mobile Menu */
.mobile-menu{ display:none; opacity:0; transition:opacity .3s ease; }
.mobile-menu.show{ display:block; opacity:1; }
header{ position:absolute; }
.sticky-header{ position:fixed; top:0; left:0; right:0; background-color:rgba(10,10,10,.95); backdrop-filter:blur(10px); animation:slideDown .5s ease-in-out; box-shadow:0 4px 20px rgba(0,0,0,.25); z-index:1000; }
@keyframes slideDown{ from{transform:translateY(-100%)} to{transform:translateY(0)} }
.sticky-header img{ height:3rem; }

/* Loading skeleton for images (lazy) */
.image-loading{
  background:linear-gradient(90deg,#1c1c1c 0%,#2c2c2c 50%,#1c1c1c 100%);
  background-size:200% 100%; animation:loading 1.5s infinite;
}
@keyframes loading{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* CTA background */
.cta-hero-bg{
  background-image: linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.6)), url('assets/hero.webp');
}

/* Main menu styles */
.main-nav-item{
  font-family:'Orbitron',sans-serif; color:var(--primary); font-weight:700; transition:.3s;
  position:relative; padding-bottom:4px;
}
.main-nav-item::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background-color:var(--primary); transition:width .3s ease;
}
.main-nav-item:hover::after{ width:100%; }

/* About badge */
.about-badge{
  position:absolute; bottom:-1.5rem; left:-1.5rem; background:var(--primary); color:#0a0a0a;
  padding:.75rem 1rem; border-radius:.75rem; box-shadow:0 10px 25px rgba(0,0,0,.35);
}

/* Service/Testimonial card effect */
.service-card,.testimonial-card{ transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; }
.service-card::before,.testimonial-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.service-card:hover::before,.testimonial-card:hover::before{ transform:scaleX(1); }
.service-card:hover,.testimonial-card:hover{ transform:translateY(-2px); box-shadow:0 6px 15px rgba(234,179,8,.2); border-color:rgba(234,179,8,.3); }

/* Brand card */
.brand-card{ background:rgba(24,24,27,.5); padding:2rem; border-radius:1rem; border:1px solid rgba(39,39,42,.5); transition:.3s; }
.brand-card:hover{ border-color:rgba(234,179,8,.5); }

/* Scroll Indicator */
.scroll-indicator{ position:absolute; bottom:2rem; left:4rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; opacity:.7; transition:opacity .3s ease; cursor:pointer; }
.scroll-indicator:hover{ opacity:1; }
.scroll-arrow{ width:12px; height:12px; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(45deg); animation:scrollArrow 2s infinite; }
.scroll-arrow:nth-child(2){ animation-delay:.2s; }
@keyframes scrollArrow{ 0%{opacity:0; transform:rotate(45deg) translate(-5px,-5px)} 50%{opacity:1} 100%{opacity:0; transform:rotate(45deg) translate(5px,5px)} }

/* Success modal */
.success-modal{ position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px); z-index:50; display:flex; align-items:center; justify-content:center; padding:1rem; }
.success-modal-card{ background:#18181b; padding:2rem; border-radius:1rem; border:1px solid rgba(234,179,8,.2); max-width:28rem; width:100%; transform:scale(.95); }
.success-modal-icon{ width:4rem; height:4rem; background:rgba(234,179,8,.1); border-radius:9999px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }

/* Hidden util (to replace inline style=display:none) */
/*.hidden{ display:none !important; }*/

/* Consent components */
.consent-card{
  position:fixed; left:1rem; bottom:1rem; z-index:1000; max-width:420px;
  border-radius:1rem; border:1px solid rgba(39,39,42,.6); background:rgba(24,24,27,.95); backdrop-filter:blur(6px);
  box-shadow:0 20px 50px rgba(0,0,0,.45); padding:1rem; color:#e5e7eb;
  transform:translateY(1.5rem); opacity:0; transition:all .3s ease;
}
.consent-card.show{ transform:none; opacity:1; }
.primary-grad{ background:linear-gradient(145deg, var(--primary), var(--primary-dark)); }
.consent-chip{ background:linear-gradient(145deg, var(--primary), var(--primary-dark)); color:#0a0a0a; }

.consent-modal{ position:fixed; inset:0; z-index:1001; }
.consent-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.consent-modal-panel{
  position:relative; margin:10vh auto 0; width:92%; max-width:640px; border-radius:1rem;
  border:1px solid rgba(39,39,42,.6); background:#18181b; color:#e5e7eb; padding:1.25rem; box-shadow:0 25px 60px rgba(0,0,0,.5);
}
.pref-box{ padding:1rem; border-radius:.75rem; border:1px solid rgba(39,39,42,.6); background:rgba(24,24,27,.6); }