/*
Theme Name: MyLux Rental v5
Description: One-page luxury car rental — Black/White/Green/Red
Version: 5.0
*/

/* ===== VARIABLES ===== */
:root {
  --black:   #0a0a0a;
  --black2:  #111111;
  --black3:  #1a1a1a;
  --dark:    #222222;
  --mid:     #333333;
  --white:   #ffffff;
  --off:     #f5f5f5;
  --gray:    #999999;
  --green:   #1a7a3a;
  --green2:  #22963f;
  --green3:  #2db352;
  --red:     #c8201a;
  --red2:    #e63329;
  --red3:    #ff4444;

  --font-disp: 'Bebas Neue', sans-serif;
  --font-body: 'Raleway', sans-serif;
  --font-serif:'Cormorant Garamond', serif;

  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 8px 40px rgba(0,0,0,.45);
  --trans: .3s ease;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--black); color:var(--white); line-height:1.7; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ===== ACCENTS ===== */
.accent-red   { color:var(--red2); }
.accent-green { color:var(--green3); }

/* ===== ANIMATIONS ===== */
.anim { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.anim.visible { opacity:1; transform:translateY(0); }
.d2 { transition-delay:.15s; }
.d3 { transition-delay:.28s; }
.d4 { transition-delay:.4s; }
.d5 { transition-delay:.52s; }

/* ===== NAV ===== */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; height:72px;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background var(--trans);
}
.site-nav.scrolled { background:var(--black2); box-shadow:0 2px 20px rgba(0,0,0,.5); }
.logo-img { height:64px; width:auto; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-link {
  font-size:.85rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
  transition:color var(--trans); position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--red2); transform:scaleX(0);
  transition:transform var(--trans);
}
.nav-link:hover { color:var(--white); }
.nav-link:hover::after { transform:scaleX(1); }
.nav-link.active { color:var(--white); }
.hamburger { display:none; color:#fff; }

/* Mobile menu */
.mobile-overlay {
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; position:fixed; inset:0; z-index:999;
  background:var(--black); padding:40px;
}
.mobile-overlay.open { display:flex; }
.mobile-overlay .nav-link { font-size:1.4rem; letter-spacing:.18em; }
.mobile-close { position:absolute; top:20px; right:20px; }

/* ===== HERO ===== */
.hero {
  position:relative; min-height:100vh;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.85) 0%, rgba(10,10,10,.6) 60%, rgba(0,0,0,.75) 100%);
}
.hero-content {
  position:relative; z-index:2; text-align:center;
  padding:0 24px; max-width:860px; margin:0 auto;
  animation:fadeUp .9s ease both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.hero-label {
  font-size:.78rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--green3);
  margin-bottom:20px; display:block;
}
.hero-title {
  font-family:var(--font-disp); font-size:clamp(3.5rem,10vw,8rem);
  line-height:1; letter-spacing:.04em; text-transform:uppercase;
  color:var(--white); margin-bottom:24px;
}
.hero-sub {
  font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.8);
  max-width:560px; margin:0 auto 40px; letter-spacing:.03em;
}
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.scroll-ind {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:2;
}
.scroll-ind span {
  display:block; width:2px; height:50px;
  background:linear-gradient(to bottom, var(--red2), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(.5)} 50%{opacity:1;transform:scaleY(1)} }

/* ===== BUTTONS ===== */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--red2); color:#fff;
  padding:14px 36px; border-radius:var(--radius-sm);
  font-weight:700; font-size:.88rem; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--trans), transform var(--trans), box-shadow var(--trans);
  box-shadow:0 4px 20px rgba(200,32,26,.4);
}
.btn-primary:hover { background:var(--red3); transform:translateY(-2px); box-shadow:0 8px 30px rgba(200,32,26,.5); }

.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid rgba(255,255,255,.5); color:#fff;
  padding:14px 36px; border-radius:var(--radius-sm);
  font-weight:700; font-size:.88rem; letter-spacing:.12em; text-transform:uppercase;
  transition:border-color var(--trans), background var(--trans), transform var(--trans);
}
.btn-outline-white:hover { border-color:var(--white); background:rgba(255,255,255,.08); transform:translateY(-2px); }

.btn-whatsapp {
  display:inline-flex; align-items:center; gap:10px;
  background:#25d366; color:#fff;
  padding:14px 28px; border-radius:var(--radius-sm);
  font-weight:700; font-size:.88rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background var(--trans), transform var(--trans);
  margin-top:8px;
}
.btn-whatsapp:hover { background:#1ebe5e; transform:translateY(-2px); }

/* ===== STATS BAR ===== */
.stats-bar {
  background:linear-gradient(135deg, var(--green) 0%, var(--green2) 100%);
  padding:36px 40px;
}
.stats-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.stat-val {
  font-family:var(--font-disp); font-size:2.8rem;
  color:#fff; letter-spacing:.06em; line-height:1;
}
.stat-lbl { font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:6px; }

/* ===== SECTIONS SHARED ===== */
.section-header { text-align:center; margin-bottom:56px; }
.section-label {
  font-size:.72rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gray); margin-bottom:14px; display:block;
}
.section-title {
  font-family:var(--font-disp); font-size:clamp(2.4rem,5vw,3.8rem);
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
  margin-bottom:20px; line-height:1.1;
}
.divider {
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.divider span { display:block; width:60px; height:1px; background:var(--mid); }
.divider .dot {
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, var(--red2), var(--green3));
}

/* ===== STORY ===== */
.story-section {
  padding:100px 40px;
  background:var(--black2);
  max-width:100%;
}
.story-section > * { max-width:860px; margin-left:auto; margin-right:auto; }
.story-body { margin-bottom:56px; }
.story-text {
  font-size:1.05rem; font-weight:300; color:rgba(255,255,255,.78);
  margin-bottom:20px; line-height:1.85;
}
.story-text strong { color:var(--white); font-weight:600; }

.timeline {
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  max-width:860px; margin:0 auto;
}
.tl-item {
  background:var(--black3); border:1px solid var(--mid);
  border-left:3px solid var(--green3);
  padding:24px 28px; border-radius:var(--radius);
}
.tl-year {
  font-family:var(--font-disp); font-size:1.8rem;
  color:var(--green3); letter-spacing:.08em; margin-bottom:8px;
}
.tl-desc { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.6; }

/* ===== WHY US ===== */
.why-section {
  padding:100px 40px;
  background:var(--black);
  max-width:100%;
}
.why-section .section-header { max-width:1200px; margin:0 auto 56px; }
.why-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.why-card {
  background:var(--black2); border:1px solid var(--mid);
  border-radius:var(--radius); padding:36px 28px;
  transition:border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.why-card:hover { border-color:var(--red2); transform:translateY(-6px); box-shadow:0 16px 40px rgba(200,32,26,.15); }
.why-icon {
  width:54px; height:54px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:#fff;
}
.why-card h3 { font-size:1.05rem; font-weight:700; letter-spacing:.04em; margin-bottom:10px; color:var(--white); }
.why-card p { font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.7; }

/* ===== GARAGE ===== */
.garage-section {
  padding:100px 40px;
  background:var(--black2);
}
.garage-section .section-header { max-width:1300px; margin:0 auto 40px; }

.filter-bar {
  max-width:1300px; margin:0 auto 48px;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.filter-btn {
  padding:10px 28px; border-radius:40px;
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--mid); color:var(--gray);
  transition:all var(--trans);
}
.filter-btn:hover { border-color:var(--green3); color:var(--green3); }
.filter-btn.active { background:var(--green); border-color:var(--green); color:#fff; }

.garage-grid {
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.car-card {
  background:var(--black3); border:1px solid var(--mid);
  border-radius:var(--radius); overflow:hidden;
  transition:transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.car-card:hover { transform:translateY(-8px); border-color:var(--green3); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.car-card.hidden { display:none; }

.car-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/10; }
.car-img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.car-card:hover .car-img { transform:scale(1.06); }

.car-badge {
  position:absolute; top:12px; left:12px;
  background:rgba(10,10,10,.75); backdrop-filter:blur(6px);
  color:var(--green3); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:5px 12px; border-radius:40px;
  border:1px solid rgba(43,179,82,.3);
}

.car-brand-logo {
  position:absolute; bottom:12px; right:12px;
  background:rgba(255,255,255,.95); border-radius:8px;
  padding:6px 10px;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:36px;
}
.car-brand-logo img { max-width:100%; max-height:100%; object-fit:contain; }

.car-info { padding:22px 22px 24px; }
.car-title-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.car-brand { font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:4px; }
.car-model { font-size:1.15rem; font-weight:700; color:var(--white); letter-spacing:.02em; }
.car-price-box { text-align:right; flex-shrink:0; }
.car-price { font-family:var(--font-disp); font-size:1.9rem; color:var(--red2); letter-spacing:.04em; }
.car-per { font-size:.72rem; color:var(--gray); margin-left:2px; }

.car-specs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.spec-pill {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:40px;
}
.pill-red   { background:rgba(200,32,26,.15); color:var(--red2); border:1px solid rgba(200,32,26,.3); }
.pill-green { background:rgba(26,122,58,.2);  color:var(--green3); border:1px solid rgba(43,179,82,.3); }
.pill-dark  { background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); border:1px solid var(--mid); }

.btn-book-car {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px;
  background:var(--green); color:#fff;
  border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transition:background var(--trans), transform var(--trans);
}
.btn-book-car:hover { background:var(--green2); transform:translateY(-1px); }

/* ===== REVIEWS ===== */
.reviews-section {
  padding:100px 40px;
  background:var(--black);
}
.reviews-section .section-header { max-width:1100px; margin:0 auto 56px; }
.reviews-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.review-card {
  background:var(--black2); border:1px solid var(--mid);
  border-radius:var(--radius); padding:32px;
  transition:border-color var(--trans), transform var(--trans);
}
.review-card:hover { border-color:var(--red2); transform:translateY(-4px); }
.review-stars { display:flex; gap:4px; margin-bottom:16px; }
.review-text { font-family:var(--font-serif); font-size:1.02rem; font-style:italic; color:rgba(255,255,255,.8); line-height:1.7; margin-bottom:20px; }
.review-author .name { font-weight:700; font-size:.9rem; color:var(--white); }
.review-author .meta { font-size:.8rem; color:var(--gray); margin-top:2px; }

/* ===== CONTACT ===== */
.contact-section {
  padding:100px 40px;
  background:var(--black2);
}
.contact-section .section-header { max-width:1100px; margin:0 auto 56px; }
.contact-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
.contact-info h3 { font-family:var(--font-disp); font-size:2rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:32px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; }
.contact-icon {
  width:44px; height:44px; flex-shrink:0;
  background:var(--dark); border:1px solid var(--mid);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--green3);
}
.lbl { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-bottom:4px; }
.val { font-size:.95rem; font-weight:500; color:var(--white); transition:color var(--trans); }
a.val:hover { color:var(--red2); }

.contact-form {
  background:var(--black3); border:1px solid var(--mid);
  border-radius:var(--radius); padding:40px;
}
.contact-form h3 { font-family:var(--font-disp); font-size:2rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.fdesc { font-size:.88rem; color:var(--gray); margin-bottom:28px; }
.flbl { display:block; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); margin-bottom:8px; margin-top:20px; }
.finput, .ftextarea {
  width:100%; background:var(--black2);
  border:1px solid var(--mid); border-radius:var(--radius-sm);
  padding:13px 16px; color:var(--white); font-family:var(--font-body);
  font-size:.92rem; transition:border-color var(--trans);
  resize:vertical;
}
.finput:focus, .ftextarea:focus { outline:none; border-color:var(--green3); }
.finput::placeholder, .ftextarea::placeholder { color:rgba(255,255,255,.3); }
#contactSend { margin-top:24px; }

/* ===== CTA BANNER ===== */
.cta-banner {
  padding:90px 40px; text-align:center;
  background:linear-gradient(135deg, var(--red) 0%, #8b0000 100%);
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cta-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.cta-banner h2 { font-family:var(--font-disp); font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.cta-banner p { font-size:1rem; color:rgba(255,255,255,.8); margin-bottom:36px; }

/* ===== FOOTER ===== */
.site-footer {
  background:var(--black); border-top:1px solid var(--mid);
  padding:60px 40px 0;
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1.5fr 1fr; gap:40px;
  padding-bottom:48px;
}
.fcol p { font-size:.88rem; color:rgba(255,255,255,.5); line-height:1.7; }
.fcol h4 { font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:18px; }
.fcol a { display:block; font-size:.88rem; color:rgba(255,255,255,.55); margin-bottom:10px; transition:color var(--trans); }
.fcol a:hover { color:var(--green3); }
.footer-bottom {
  max-width:1200px; margin:0 auto;
  border-top:1px solid var(--mid);
  padding:20px 0; text-align:center;
}
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.3); letter-spacing:.1em; }

/* ===== WA FLOAT ===== */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.5);
  transition:transform var(--trans), box-shadow var(--trans);
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 10px 36px rgba(37,211,102,.7); }

/* ===== RESPONSIVE ===== */
@media(max-width:1100px) {
  .garage-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .site-nav { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:block; }

  .hero-title { font-size:3.5rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .timeline { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .garage-grid { grid-template-columns:1fr; }
  .reviews-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }

  .story-section, .why-section, .garage-section,
  .reviews-section, .contact-section, .cta-banner { padding:70px 20px; }
  .stats-bar { padding:28px 20px; }
}
@media(max-width:480px) {
  .hero-title { font-size:2.8rem; }
  .footer-grid { grid-template-columns:1fr; }
  .filter-bar { gap:8px; }
  .filter-btn { padding:8px 18px; font-size:.72rem; }
}