/* === RESET & BASE === */
*{font-family:Inter,sans-serif;margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;overflow-x:hidden}
.skip-link{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:9999;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem;width:auto;height:auto}

/* === NAVBAR === */
#navbar{position:fixed;width:100%;top:0;z-index:50;transition:.3s}
.nav-scrolled{background:rgba(0,0,0,.95);backdrop-filter:blur(10px)}

/* === HERO === */
#home{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:url('../bannericar - Copy.webp') center center/cover no-repeat #111}
.hero-video{width:100%;height:100vh;object-fit:cover;object-position:center;position:absolute;top:0;left:0;z-index:1;opacity:1}
.gradient-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.animate-fade-in{animation:1s ease-in fadeIn}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* === MOBILE CAROUSEL === */
.mobile-carousel{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.carousel-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}
.carousel-slide.active{opacity:1}
.carousel-indicators{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.indicator{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}
.indicator.active{background:#fff;width:24px;border-radius:4px}
@media(min-width:769px){.mobile-carousel{display:none!important}}
@media(max-width:768px){.hero-video{display:none!important}}
@media(max-width:768px){#home{min-height:100svh}}
@media(max-width:640px){#home{background-position:center 25%;min-height:100svh}}

/* === NAVBAR RESPONSIVE === */
@media(max-width:768px){#navbar{padding:0}.mobile-menu{width:100vw;max-width:280px;height:100vh;overflow-y:auto;transform:translateX(-100%);top:0;transition:transform .3s}.mobile-menu.active{transform:translateX(0)}}

/* === MOBILE MENU === */
.mobile-menu{position:fixed;top:0;left:0;width:18rem;height:100vh;background:#000;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transform:translateX(-100%);transition:transform .3s;overflow-y:auto;z-index:60}
.mobile-menu.active{transform:translateX(0)}

/* === MODEL CARDS === */
.model-card{transition:transform .3s,box-shadow .3s}
.model-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.3)}

/* === BATTERY TOGGLE === */
.bat-btn{background:transparent;color:#9ca3af;border-color:rgba(255,255,255,.15);cursor:pointer}
.bat-active{background:#16a34a!important;color:#fff!important;border-color:#16a34a!important}
.hidden{display:none!important}

/* === BENTO GRID (5 items) === */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:10px}
.bento-1{grid-column:1/3;grid-row:1/3}
.bento-2{grid-column:3/4;grid-row:1/2}
.bento-3{grid-column:3/4;grid-row:2/3}
.bento-4{grid-column:1/2;grid-row:3/4}
.bento-5{grid-column:2/4;grid-row:3/4}
.bento-item{position:relative;overflow:hidden;border-radius:14px;background:#111;cursor:pointer}
.bento-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94)}
.bento-item:hover img{transform:scale(1.07)}
.bento-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0,rgba(0,0,0,.15) 50%,transparent 100%);opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;padding:18px 20px}
.bento-item:hover .bento-overlay{opacity:1}
.bento-label{color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6);transform:translateY(6px);transition:transform .35s}
.bento-item:hover .bento-label{transform:translateY(0)}
@media(max-width:768px){.bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:6px}.bento-1,.bento-2,.bento-3,.bento-4,.bento-5{grid-column:auto;grid-row:auto}.bento-1{grid-column:1/3}}
@media(max-width:480px){.bento-grid{grid-auto-rows:130px;gap:4px}}

/* === FLOATING CONTACT === */
.floating-contact{position:fixed;right:30px;bottom:30px;z-index:1000;display:flex;flex-direction:column;gap:15px}
.back-to-top{position:fixed;left:30px;bottom:30px;z-index:1000;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s,background .3s;transform:translateY(10px)}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:rgba(255,255,255,.3);transform:translateY(-3px)}
.back-to-top i{font-size:18px}
.contact-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);cursor:pointer;transition:.3s;position:relative}
.contact-btn:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.whatsapp-btn{background:linear-gradient(135deg,#25d366 0,#128c7e 100%)}
.phone-btn{background:linear-gradient(135deg,#667eea 0,#764ba2 100%)}
.contact-btn i{font-size:26px;color:#fff}
.contact-tooltip{position:absolute;right:75px;background:#fff;color:#333;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.contact-btn:hover .contact-tooltip{opacity:1}
.pulse-ring{position:absolute;border:3px solid;border-radius:50%;width:100%;height:100%;animation:2s ease-out infinite pulse}
.whatsapp-btn .pulse-ring{border-color:#25d366}
.phone-btn .pulse-ring{border-color:#667eea}
@keyframes pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media(max-width:768px){.floating-contact{right:12px;bottom:80px;gap:10px}.contact-btn{width:44px;height:44px}.contact-btn i{font-size:18px}.contact-tooltip{display:none}}
@media(max-width:480px){.floating-contact{right:8px;bottom:60px;gap:8px}.contact-btn{width:40px;height:40px}.contact-btn i{font-size:16px}}
@media(max-width:400px){.floating-contact{right:6px;bottom:50px;gap:6px}.contact-btn{width:36px;height:36px}.contact-btn i{font-size:14px}}

/* === SCROLL REVEAL === */
.fade-in-pending{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in-visible{opacity:1;transform:translateY(0)}
/* sm: >= 640px */
@media(min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:px-8{padding-left:2rem;padding-right:2rem}
  .sm\:py-4{padding-top:1rem;padding-bottom:1rem}
  .sm\:p-8{padding:2rem}
  .sm\:h-6{height:1.5rem}
  .sm\:w-6{width:1.5rem}
  .sm\:gap-4{gap:1rem}
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-6xl{font-size:3.75rem;line-height:1}
  .sm\:bottom-10{bottom:2.5rem}
}
/* md: >= 768px */
@media(min-width:768px){
  .md\:flex{display:flex!important}
  .md\:hidden{display:none!important}
  .md\:h-20{height:5rem}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-7xl{font-size:4.5rem;line-height:1}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* lg: >= 1024px */
@media(min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2/span 2}
}

/* === SCROLL REVEAL === */
.fade-in-pending{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.fade-in-visible{opacity:1!important;transform:translateY(0)!important}

/* === FORM === */
input,textarea,select{color-scheme:dark}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 2px rgba(34,197,94,.3);outline:none}

/* === TYPOGRAPHY === */
h1{font-weight:700;line-height:1.2;color:#fff}
p{line-height:1.5}
a{text-decoration:none;color:inherit}