
:root {
  --fg:#0f172a; --muted:#475569; --bg:#ffffff; --ink:#111827;
  --brand:#4338ca; --brand2:#2563eb; --border:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand img{display:block}
.nav a{margin:0 10px;color:var(--fg);text-decoration:none}
.nav a:hover{color:var(--brand2)}
.cta{background:var(--brand2);color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none}
.site-footer{border-top:1px solid var(--border);margin-top:48px}
.site-footer .cols{display:flex;justify-content:space-between;gap:16px;padding:24px 0}
.copy{color:var(--muted);font-size:14px}
.hero{background:linear-gradient(180deg,#eef2ff,transparent)}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:48px 0}
.hero h1{font-size:clamp(28px,3.5vw,40px);line-height:1.2;margin:0 0 12px}
.hero p{color:var(--muted)}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:var(--fg)}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn.small{padding:8px 12px;font-size:14px}
.stats{display:flex;gap:16px;flex-wrap:wrap;padding:0;margin:16px 0 0;list-style:none}
.disclaimer{font-size:12px;color:var(--muted)}
.products .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff}
.card-body{padding:14px}
.cta-band{background:#0b1220;color:#fff}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.breadcrumb{font-size:14px;margin:12px 0;color:var(--muted)}
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checklist{padding-left:18px}
.specs{width:100%;border-collapse:collapse}
.specs th,.specs td{border:1px solid var(--border);padding:8px;text-align:left}
.form label{display:block;margin-bottom:12px}
.form input,.form textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.prose h1,.prose h2{line-height:1.2}
@media (max-width:900px){
  .hero-inner,.product-hero,.grid-2{grid-template-columns:1fr}
  .site-footer .cols{flex-direction:column;align-items:flex-start}
}


/* --- Mobile-first enhancements --- */
.site-header { position: sticky; top: 0; z-index: 50; background:#fff; border-bottom:1px solid var(--border); }
.nav { display:flex; gap:10px; align-items:center; }
.nav a{ padding:8px 10px; border-radius:10px; }
.nav a:focus-visible, .cta:focus-visible, button:focus-visible { outline:2px solid var(--brand2); outline-offset:2px; }
.hamburger{ display:none; background:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.hamburger span{ display:block; width:18px; height:2px; background:var(--fg); margin:3px 0; }
@media (max-width: 800px){
  .hamburger{ display:block; }
  .nav{ position: absolute; right:16px; top:56px; flex-direction:column; background:#fff; padding:8px; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); display:none; }
  .nav.open{ display:flex; }
  .cta{ display:none; }
  .hero-inner{ padding:28px 0; }
}
/* Image gallery */
.gallery{ display:grid; gap:12px; }
.gallery-main{ border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:8px; }
.thumbs img{ border:1px solid var(--border); border-radius:8px; cursor:pointer; }


/* --- Carousel --- */
.carousel{ position:relative; --nav:rgba(0,0,0,.55); --navFg:#fff; }
.carousel-viewport{ overflow:hidden; border:1px solid var(--border); border-radius:14px; }
.carousel-track{ display:flex; transition:transform .4s ease; touch-action:pan-y; }
.carousel-slide{ min-width:100%; user-select:none; }
.carousel img{ width:100%; height:auto; display:block; }
.carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:var(--nav); color:var(--navFg); width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; }
.carousel .nav:hover{ background:rgba(0,0,0,.7); }
.carousel .prev{ left:10px; } .carousel .next{ right:10px; }
.carousel .dots{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.carousel .dot{ width:8px; height:8px; border-radius:999px; border:1px solid var(--border); background:#cbd5e1; opacity:.7; cursor:pointer; }
.carousel .dot.active{ background:#0ea5e9; opacity:1; }
@media (max-width: 800px){
  .carousel .nav{ width:32px; height:32px; }
}

.hero-video{display:block;max-height:520px;object-fit:cover}


/* --- Responsive Nav --- */
.nav { display:flex; gap:1rem; }
.hamburger { display:none; background:none; border:none; cursor:pointer; }
.hamburger span { display:block; width:24px; height:3px; margin:4px 0; background:#0f172a; transition:.3s; }

@media (max-width: 900px) {
  .nav { 
    display:none; 
    flex-direction:column; 
    position:absolute; 
    top:64px; right:16px; 
    background:white; 
    padding:1rem; 
    box-shadow:0 4px 12px rgba(0,0,0,.15); 
    border-radius:12px;
    z-index:1000;
  }
  .nav.open { display:flex; }
  .hamburger { display:block; }
}


/* --- Uniform carousel sizing & image fit --- */
.carousel-viewport{ aspect-ratio: 16 / 9; }
.carousel-slide{ min-width:100%; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }

/* --- Logo sizing improvements --- */
.brand img{ width:120px; height:auto; }
@media (max-width: 600px){
  .brand img{ width:96px; }
}

/* Ensure mobile nav button is visible on all pages */
@media (max-width: 900px){
  .hamburger{ display:block; }
}
