/* ===================================================================
   MeghVaahan Fleet Explorer
   Transparent fixed top nav -> click a family -> static transparent
   side nav (product list) -> click a product -> 3-slide viewer.
   =================================================================== */

.fleet-body{background:var(--navy-950); color:var(--paper); overflow-x:hidden;}

/* ---------- Top nav (transparent, fixed) ---------- */
.fleet-nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  background:linear-gradient(180deg, rgba(7,10,14,.72) 0%, rgba(7,10,14,0) 100%);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease;
}
.fleet-nav.scrolled{background:rgba(9,12,16,.92); backdrop-filter:blur(14px); border-bottom-color:rgba(255,255,255,.1);}
.fleet-nav-inner{
  max-width:1520px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:6px; height:72px;
}
.fleet-brand{display:flex; align-items:center; gap:10px; margin-right:22px; flex-shrink:0; text-decoration:none;}
.fleet-brand img{height:30px; width:auto;}
.fleet-brand span{font-family:'Fraunces',serif; font-weight:700; font-size:16.5px; color:var(--paper); letter-spacing:.02em;}
.fleet-family-menu{display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.fleet-family-menu::-webkit-scrollbar{display:none;}
.fleet-family-btn{
  background:transparent; border:1px solid transparent; color:rgba(241,239,233,.72);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; padding:9px 13px; border-radius:7px;
  white-space:nowrap; cursor:pointer; transition:all .2s ease; font-family:inherit;
}
.fleet-family-btn:hover{color:var(--paper); background:rgba(255,255,255,.06);}
.fleet-family-btn.active{color:var(--navy-950); background:var(--gold-bright); border-color:var(--gold-bright);}
.fleet-nav-right{margin-left:auto; display:flex; align-items:center; gap:14px; flex-shrink:0;}
.fleet-home-link{color:rgba(241,239,233,.7); font-size:12.5px; text-decoration:none; padding:8px 10px;}
.fleet-home-link:hover{color:var(--paper);}

/* ---------- Side nav (opens on family click, transparent, static) ---------- */
.fleet-side-backdrop{
  position:fixed; inset:0; background:rgba(5,7,10,.45); z-index:110;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.fleet-side-backdrop.open{opacity:1; pointer-events:auto;}

.fleet-sidenav{
  position:fixed; top:0; left:0; bottom:0; width:300px; z-index:115;
  background:linear-gradient(180deg, rgba(12,16,22,.94), rgba(9,12,17,.97));
  backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.08);
  padding:96px 22px 28px;
  transform:translateX(-100%); transition:transform .38s cubic-bezier(.22,.9,.32,1);
  overflow-y:auto;
}
.fleet-sidenav.open{transform:translateX(0);}
.fleet-sidenav .fam-label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:var(--gold-bright); text-transform:uppercase; margin-bottom:4px;}
.fleet-sidenav .fam-name{font-family:'Fraunces',serif; font-size:24px; font-weight:700; margin:0 0 6px;}
.fleet-sidenav .fam-tagline{font-size:12px; color:rgba(241,239,233,.55); line-height:1.5; margin-bottom:26px;}
.fleet-sidenav-close{
  position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--paper);
  cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.fleet-sidenav-close:hover{background:rgba(255,255,255,.14);}
.fleet-product-list{display:flex; flex-direction:column; gap:4px;}
.fleet-product-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-radius:9px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05); cursor:pointer; transition:all .2s ease;
  text-align:left; width:100%; color:var(--paper); font-family:inherit;
}
.fleet-product-item:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); transform:translateX(3px);}
.fleet-product-item.active{background:rgba(43,230,207,.1); border-color:rgba(43,230,207,.4);}
.fleet-product-item .code{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-bright); font-weight:700;}
.fleet-product-item .purpose{font-size:10.5px; color:rgba(241,239,233,.5); display:block; margin-top:2px;}
.fleet-product-item .arrow{font-size:14px; color:rgba(241,239,233,.35); flex-shrink:0;}
.fleet-product-item.active .arrow{color:var(--gold-bright);}

/* ---------- Main scroll body ---------- */
.fleet-main{padding-top:72px; min-height:100vh; display:flex; flex-direction:column;}
.fleet-section{flex:1;}

/* Landing (no family selected) */
.fleet-landing-hero{
  position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden;
}
.fleet-landing-hero .bg{position:absolute; inset:0;}
.fleet-landing-hero .bg img{width:100%; height:100%; object-fit:cover; opacity:.4;}
.fleet-landing-hero .bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,12,16,.4) 0%, rgba(9,12,16,.75) 60%, var(--navy-950) 100%);}
.fleet-landing-hero .content{position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 40px;}
.fleet-landing-hero .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--gold-bright); text-transform:uppercase; margin-bottom:16px;}
.fleet-landing-hero h1{font-family:'Fraunces',serif; font-size:clamp(34px,5vw,62px); font-weight:700; line-height:1.06; max-width:820px; margin-bottom:20px;}
.fleet-landing-hero p{font-size:16px; color:rgba(241,239,233,.72); max-width:560px; line-height:1.6;}

.fleet-family-grid{
  max-width:1320px; margin:0 auto; padding:70px 40px 100px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;
}
.fleet-family-card{
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5;
  background:var(--navy-800); text-decoration:none; color:var(--paper);
  border:1px solid rgba(255,255,255,.07); cursor:pointer;
}
.fleet-family-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; opacity:.65;}
.fleet-family-card:hover img{transform:scale(1.06); opacity:.8;}
.fleet-family-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,12,16,.1) 0%, rgba(9,12,16,.92) 100%);}
.fleet-family-card .fc-body{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px;}
.fleet-family-card .fc-body .n{font-family:'Fraunces',serif; font-size:21px; font-weight:700; margin:0 0 4px;}
.fleet-family-card .fc-body .t{font-size:11px; color:rgba(241,239,233,.6); line-height:1.4;}
.fleet-family-card .fc-count{position:absolute; top:16px; right:16px; z-index:2; background:rgba(9,12,16,.6); border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:4px 11px; font-size:10.5px; font-family:'JetBrains Mono',monospace; color:var(--gold-bright);}

/* Product viewer */
.fleet-viewer{max-width:1320px; margin:0 auto; padding:110px 40px 90px;}
.fleet-viewer-head{margin-bottom:34px;}
.fleet-viewer-head .fam-crumb{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--gold-bright); text-transform:uppercase; margin-bottom:10px;}
.fleet-viewer-head h2{font-family:'Fraunces',serif; font-size:clamp(28px,4vw,44px); font-weight:700; margin:0 0 8px;}
.fleet-viewer-head .purpose{font-size:15px; color:rgba(241,239,233,.65);}

.fleet-slideshow{
  position:relative; border-radius:16px; overflow:hidden; background:var(--navy-800);
  border:1px solid rgba(255,255,255,.08); aspect-ratio:16/9;
}
.fleet-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none;}
.fleet-slide.active{opacity:1; pointer-events:auto;}
.fleet-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.fleet-slide::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,12,16,.75) 0%, rgba(9,12,16,0) 38%);}
.fleet-slide-info{
  position:absolute; right:22px; bottom:22px; z-index:3; max-width:340px;
  background:rgba(9,12,16,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:16px 18px;
}
.fleet-slide-info .lbl{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--gold-bright); text-transform:uppercase; margin-bottom:6px;}
.fleet-slide-info p{font-size:12.5px; color:rgba(241,239,233,.85); line-height:1.55; margin:0;}
.fleet-slide-dots{position:absolute; left:22px; bottom:22px; z-index:3; display:flex; gap:7px;}
.fleet-slide-dots button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); border:none; cursor:pointer; padding:0;}
.fleet-slide-dots button.active{background:var(--gold-bright); width:22px; border-radius:5px;}
.fleet-slide-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(9,12,16,.5); border:1px solid rgba(255,255,255,.16); color:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px;}
.fleet-slide-nav:hover{background:rgba(9,12,16,.75);}
.fleet-slide-nav.prev{left:16px;} .fleet-slide-nav.next{right:16px;}
.fleet-slideshow.fleet-empty{display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, rgba(255,255,255,.045) 12px 24px);}
.fleet-empty-body{text-align:center; max-width:340px; padding:20px;}
.fleet-empty-icon{font-size:30px; color:rgba(241,239,233,.25); margin-bottom:14px;}
.fleet-empty-body p{font-size:13px; color:rgba(241,239,233,.5); line-height:1.6;}

.fleet-viewer-desc{margin-top:30px; max-width:760px; font-size:15px; line-height:1.75; color:rgba(241,239,233,.78);}

.fleet-specs{margin-top:38px; max-width:760px;}
.fleet-specs h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(241,239,233,.45); text-transform:uppercase; margin-bottom:14px;}
.fleet-specs-grid{border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02);}
.fleet-spec-row{display:flex; justify-content:space-between; gap:20px; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px;}
.fleet-spec-row:last-child{border-bottom:none;}
.fleet-spec-row:nth-child(even){background:rgba(255,255,255,.02);}
.fleet-spec-row .k{color:rgba(241,239,233,.5); flex:0 0 40%;}
.fleet-spec-row .v{color:var(--paper); text-align:right; flex:1;}
@media (max-width:600px){
  .fleet-spec-row{flex-direction:column; gap:2px;}
  .fleet-spec-row .v{text-align:left;}
}

.fleet-more-models{margin-top:56px;}
.fleet-more-models h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:rgba(241,239,233,.45); text-transform:uppercase; margin-bottom:16px;}
.fleet-more-grid{display:flex; gap:12px; flex-wrap:wrap;}
.fleet-more-chip{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:10px 16px; cursor:pointer; color:var(--paper); font-family:inherit; font-size:12.5px;}
.fleet-more-chip:hover{background:rgba(255,255,255,.09);}
.fleet-more-chip b{color:var(--gold-bright); margin-right:6px;}

/* Infographic strip on family landing */
.fleet-family-stats{max-width:1320px; margin:0 auto; padding:0 40px 60px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:rgba(255,255,255,.07); border-radius:14px; overflow:hidden;}
.fleet-family-stats .st{background:var(--navy-900); padding:22px 20px; text-align:center;}
.fleet-family-stats .st .v{font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--gold-bright);}
.fleet-family-stats .st .l{font-size:10.5px; color:rgba(241,239,233,.5); text-transform:uppercase; letter-spacing:.06em; margin-top:4px;}

@keyframes fleetFade{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.fleet-fade-in{animation:fleetFade .5s ease both;}

@media (max-width:880px){
  .fleet-family-menu{display:none;}
  .fleet-sidenav{width:86vw;}
  .fleet-slide-info{max-width:78%; right:12px; bottom:12px; padding:12px 14px;}
  .fleet-slideshow{aspect-ratio:4/3;}
}