/* Basic reset */
* {box-sizing: border-box; margin:0; padding:0;}
html,body{height:100%;font-family:Inter, system-ui, Arial, sans-serif;color:var(--text);
  background: var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Theme variables: updated to provided palette */
:root{
  /* Greens */
  --green-700:#065F46;   /* Emerald 700 */
  --green-600:#047857;   /* Emerald 600 */
  --green-300:#86EFAC;   /* Emerald 300 */
  --slate-500:#64748B;   /* Neutral slate */

  /* Text & surfaces */
  --text:#0F172A;        /* Slate 900 */
  --bg:#FFFFFF;          /* White background */
  --white:#FFFFFF;       /* Utility white */
  --header-h:72px;       /* Header height used for background inset */
  --page-bg:url('../assets/car/_A4A4930.jpg'); /* Global background image */
  --bg-top: var(--header-h); /* Top inset for page background */
  --bg-bottom: 48px;         /* Bottom inset for page background */
  --bg-overlay-start: rgba(0,0,0,0.20);
  --bg-overlay-end: rgba(0,0,0,0.32);

  /* Legacy neutrals kept for borders/backgrounds */
  --silver-100:#f2f3f5;
  --silver-300:#e5e7eb;
  --silver-500:#c0c0c0;

  /* Background gradient/pattern */
  --bg-gradient-start:var(--green-700);
  --bg-gradient-mid:var(--green-600);
  --bg-gradient-end:var(--green-300);
}

.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.85);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(2,6,12,0.08);min-height:var(--header-h);display:flex;align-items:center}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.site-logo{height:40px;width:auto;display:inline-block}
.brand-text{font-weight:700;font-size:1.05rem}
.nav a{margin-left:18px;color:var(--text);text-decoration:none}

/* Global link styles */
a{color:var(--green-700)}
a:hover{color:var(--green-600)}

/* --- New: Hero banner like reference --- */
.hero-banner{position:relative;min-height:62vh;display:flex;align-items:flex-end;color:#fff;
  background-image:linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.28)), var(--hero, url('../assets/car/_A4A4930.jpg'));
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  border-bottom:1px solid rgba(2,6,12,0.08)
}
.hero-wrap{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-inline{max-height:56vh;width:auto;border-radius:10px;object-fit:contain;display:block;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.product-card{background:rgba(0,0,0,0.55);backdrop-filter:saturate(120%) blur(4px);padding:20px 22px;border-radius:12px;max-width:420px;border:1px solid rgba(255,255,255,0.22)}
/* Removed inline hero image in favor of full-page background */
.product-card .eyebrow{font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.product-card .product-name{font-size:2rem;line-height:1.15;margin:4px 0 2px}
.product-card .sub{opacity:.9;margin-bottom:6px}
.product-card .price-line{opacity:.95;margin:6px 0 10px}

/* Quick links (brochure/manual) */
.quick-links{display:flex;gap:18px;justify-content:center;align-items:center;padding:18px 24px}
.icon-link{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(2,6,12,.12);text-decoration:none;color:var(--text);background:#fff}
.icon-link .icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(4,120,87,.12)}

.hero{display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 0;text-align:center}
.hero-left{display:flex;flex-direction:column;align-items:center;max-width:600px}
.hero-left h1{font-size:2rem;margin-bottom:8px}
.tagline{color:#475569;margin-bottom:12px}
.price{font-size:1.1rem;margin-bottom:12px}
.amount{font-weight:800;color:var(--green-700)}
.badges{list-style:none;display:flex;gap:12px;margin:12px auto;justify-content:center;width:fit-content}
.badges li{background:#fff;padding:8px 12px;border-radius:8px;border:1px solid var(--silver-300)}
.cta-row{display:flex;gap:12px;margin-top:16px;justify-content:center}

.btn{display:inline-block;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;text-align:center}
.btn.primary{background:var(--green-600);color:#fff}
.btn.ghost{background:#fff;border:1px solid rgba(2,6,12,0.18);color:var(--text)}

.hero-right{display:flex;flex-direction:column;align-items:center;max-width:500px}
.car-img{width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:10px;display:block;background:#fff}
.car-img.large{height:auto;max-height:420px}

.gallery{display:flex;gap:8px;margin-top:10px;justify-content:center}
.thumb{width:88px;height:56px;object-fit:contain;border-radius:8px;cursor:pointer;border:2px solid transparent;background:#fff}
.thumb:hover{border-color:rgba(0,0,0,0.08)}
.thumb.active{outline:3px solid rgba(4,120,87,0.25)}

/* Rotation helper for images needing orientation correction */
.rotate-90{transform:rotate(90deg); transform-origin:center center;}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);visibility:hidden;opacity:0;transition:opacity .15s ease}
.lightbox[aria-hidden="false"]{visibility:visible;opacity:1}
.lightbox img{max-width:92%;max-height:84%;border-radius:8px}
.lightbox .close, .lightbox .nav{position:absolute;top:20px;color:#fff;font-size:28px;background:transparent;border:none;cursor:pointer}
.lightbox .close{right:24px}
.lightbox .nav.prev{left:24px}
.lightbox .nav.next{right:80px}

.features,.specs,.contact,.manual{background:#fff;margin:18px auto;padding:20px;border-radius:10px;border:1px solid rgba(2,6,12,0.08);max-width:800px;text-align:center;box-shadow:0 1px 2px rgba(2,6,12,0.04)}
.feature-grid{display:flex;gap:16px;justify-content:center}
.feature{flex:1}
table{width:100%;border-collapse:collapse;margin:12px auto}
table th,table td{padding:10px;text-align:center;border-bottom:1px solid rgba(2,6,12,0.08)}

/* --- New: Spec sections and cards --- */
.spec-section{padding:12px 0 24px}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;opacity:.9;text-align:center;margin:18px 0 4px}
.section-sub{text-align:center;font-size:1.3rem;margin:8px 0 14px}
.card-grid{display:grid;gap:12px}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.spec-card{background:#fff;border:1px solid rgba(2,6,12,0.08);border-radius:8px;padding:12px 14px}
.spec-card .k{font-size:.85rem;opacity:.85;margin-bottom:4px}
.spec-card .v{font-weight:700}

.gallery-section{padding-top:8px;text-align:center}
.gallery-section{position:relative}
.gallery-section h2{margin-bottom:8px}
.gallery-hero{position:relative;display:block;width:100%;height:420px}
.gallery-hero .car-img.large{height:100%;width:100%;max-height:none;object-fit:contain}
.gallery-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--green-600);color:#fff;border:1px solid rgba(2,6,12,0.12);border-radius:999px;width:36px;height:36px;display:inline-grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.12);z-index:2}
.gallery-btn.prev{left:24px !important}
.gallery-btn.next{right:24px !important}
.gallery-btn:hover{background:var(--green-700)}

.features-list .bullets{margin-top:8px;text-align:left;max-width:900px;margin-left:auto;margin-right:auto;line-height:1.55}
.features-list .bullets li{margin:6px 0}

.contact-form,.purchase-form{max-width:500px;margin:12px auto}
.contact-form label,.purchase-form label{display:block;margin-bottom:10px;text-align:left}
.contact-form input,.contact-form textarea,.purchase-form input,.purchase-form textarea,.purchase-form select{width:100%;padding:8px;border:1px solid #CBD5E1;border-radius:6px;background:#fff;color:var(--text)}
.contact-form input::placeholder,.contact-form textarea::placeholder,.purchase-form input::placeholder,.purchase-form textarea::placeholder{color:#94A3B8}
.form-row{margin-top:12px;text-align:center}

.site-footer{padding:18px 0;color:var(--text);font-size:0.9rem;text-align:center}
.site-footer a{color:var(--green-700)}
.site-footer a:hover{color:var(--green-600)}

/* Footer socials */
.socials{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.socials::before{content:"Follow us:";opacity:.8;margin-right:4px}
.social-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:50%;
  background:rgba(4,120,87,.12);color:var(--green-700);text-decoration:none;
  border:1px solid rgba(4,120,87,.25);transition:transform .12s ease, background .12s ease, color .12s}
.social-btn:hover{transform:translateY(-1px);background:var(--green-600);color:#fff}
.social-btn .icon{font-weight:800;font-size:18px;line-height:1}
.social-btn.label{display:flex;align-items:center;gap:8px;width:auto;height:auto;min-height:36px;padding:6px 10px;border-radius:999px}
.social-btn.label .icon{font-size:16px}
.social-btn.label .label{font-weight:600;font-size:.9rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);visibility:hidden;opacity:0;transition:opacity .18s ease, visibility .18s}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-panel{background:#fff;padding:20px;border-radius:12px;max-width:520px;width:100%;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.15)}
.modal-close{position:absolute;right:12px;top:10px;background:transparent;border:none;font-size:22px;cursor:pointer}
.order-confirmation{padding:12px;background:rgba(16,185,129,0.12);border:1px solid var(--green-300);border-radius:8px;margin-top:12px}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-right{order:-1}
  .feature-grid{flex-direction:column}
  .card-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-wrap{flex-direction:column;align-items:center}
  .hero-inline{width:100%;max-height:42vh;object-fit:cover;margin:8px 0 12px;box-shadow:0 4px 14px rgba(0,0,0,0.18)}
  .product-card{width:100%;max-width:520px;padding:16px 18px;text-align:center}
  .product-card .product-name{font-size:1.6rem}
  .cta-row{justify-content:center}
  .quick-links{flex-wrap:wrap;gap:12px}
  .thumb{width:68px;height:44px}
  .gallery-btn{width:32px;height:32px}
  .gallery-hero{height:380px}
}
/* Full-page background image */
body.page-bg{position:relative; background: var(--bg);} 
body.page-bg::before{content:""; position:fixed; top:var(--bg-top); left:0; right:0; bottom:var(--bg-bottom); width:100vw; 
  background-image:linear-gradient(var(--bg-overlay-start), var(--bg-overlay-end)), var(--page-bg);
  background-size:cover; background-position:center top; background-repeat:no-repeat; 
  z-index:-1; pointer-events:none;}

@media (max-width:520px){
  .container{padding:16px}
  .brand{font-size:1rem}
  .card-grid.two,.card-grid.three{grid-template-columns:1fr}
  .product-card{max-width:480px;padding:14px 16px}
  .product-card .product-name{font-size:1.5rem}
  .hero-inline{max-height:38vh}
  .thumb{width:60px;height:40px}
  .gallery-hero{height:340px}
}