/* ============================================
   FLEET-SPECIFIC STYLES
   (Not in common.css)
   ============================================ */

/* ============================================
   HERO SECTION
   ============================================ */
.fleet-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:120px clamp(20px,6vw,120px)}
.fleet-hero-bg{position:absolute;inset:0}
.fleet-hero-bg::before{content:'';position:absolute;top:20%;right:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(240,123,28,.08),transparent 70%);animation:heroOrb 10s ease-in-out infinite}
.fleet-hero-bg::after{content:'';position:absolute;bottom:10%;left:-5%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(0,217,255,.04),transparent 70%);animation:heroOrb 12s ease-in-out infinite reverse}
@keyframes heroOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.fleet-hero-content{position:relative;z-index:2;max-width:900px}
.fleet-hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border:1px solid rgba(240,123,28,.3);border-radius:40px;background:var(--orange-dim);margin-bottom:32px;font-family:var(--font-mono);font-size:11px;color:var(--orange);letter-spacing:.12em;text-transform:uppercase}
.fleet-hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.fleet-hero h1{font-family:var(--font-en);font-size:clamp(40px,7vw,80px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:28px}
.fleet-hero h1 .line{display:block;overflow:hidden}
.fleet-hero h1 .line-inner{display:block;transform:translateY(100%);animation:slideUp .8s var(--ease) forwards}
.fleet-hero h1 .line:nth-child(2) .line-inner{animation-delay:.15s}
.fleet-hero h1 .line:nth-child(3) .line-inner{animation-delay:.3s}
@keyframes slideUp{to{transform:translateY(0)}}
.fleet-hero-desc{font-size:clamp(16px,2vw,20px);color:var(--gray);line-height:1.8;margin-bottom:48px;max-width:640px;font-weight:300}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.hero-stat{text-align:center;padding:24px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(0,0,0,0.15);transition:all .4s var(--ease)}
.hero-stat:hover{border-color:rgba(240,123,28,.3);background:var(--orange-dim);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3),0 0 24px rgba(240,123,28,0.06)}
.hero-stat-num{font-family:var(--font-en);font-size:clamp(28px,3.5vw,44px);font-weight:800;color:var(--orange);line-height:1}
.hero-stat-unit{font-family:var(--font-mono);font-size:11px;color:var(--orange-light);margin-top:4px}
.hero-stat-label{font-size:13px;color:var(--gray);margin-top:8px}
@media(max-width:768px){.hero-stats{grid-template-columns:repeat(2,1fr);gap:12px}.hero-stat{padding:16px}}

/* ============================================
   WHY FLEET
   ============================================ */
.why-fleet{background:var(--bg2)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}
.why-visual{position:relative;background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:40px;min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.mileage-compare{width:100%;max-width:360px}
.mileage-bar{margin-bottom:28px}
.mileage-bar-label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;color:var(--gray)}
.mileage-bar-label span:last-child{font-family:var(--font-en);font-weight:700;color:var(--white)}
.mileage-bar-track{height:12px;background:var(--bg3);border-radius:6px;overflow:hidden}
.mileage-bar-fill{height:100%;border-radius:6px;transition:width 1.5s var(--ease);width:0}
.mileage-bar-fill.personal{background:var(--gray);width:20%}
.mileage-bar-fill.taxi{background:linear-gradient(90deg,var(--orange),var(--orange-light));width:100%}
.mileage-bar-fill.active.personal{width:20%}
.mileage-bar-fill.active.taxi{width:100%}
.mileage-insight{text-align:center;margin-top:20px;padding:16px;background:var(--orange-dim);border:1px solid rgba(240,123,28,.2);border-radius:12px}
.mileage-insight p{font-size:14px;color:var(--orange-light);line-height:1.6}
.mileage-insight strong{color:var(--orange);font-family:var(--font-en);font-weight:800}

.why-text h3{font-family:var(--font-en);font-size:clamp(24px,3vw,36px);font-weight:700;margin-bottom:20px;line-height:1.2}
.why-text p{font-size:15px;color:var(--gray);line-height:1.9;margin-bottom:16px}
.why-highlights{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.why-highlight{display:flex;gap:16px;align-items:flex-start;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .3s var(--ease)}
.why-highlight:hover{border-color:rgba(240,123,28,.2);background:var(--orange-dim)}
.why-highlight-icon{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--orange-dim);display:flex;align-items:center;justify-content:center}
.why-highlight-icon svg{width:18px;height:18px}
.why-highlight-text h4{font-size:14px;font-weight:700;margin-bottom:4px}
.why-highlight-text p{font-size:13px;color:var(--dark);margin:0;line-height:1.6}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:40px}}

/* ============================================
   TRI-FUEL SYSTEM
   ============================================ */
.trifuel{background:var(--bg)}
.trifuel-flow{display:flex;align-items:center;justify-content:center;gap:0;margin-top:60px;flex-wrap:wrap}
.trifuel-step{flex:0 0 200px;text-align:center;padding:32px 20px;position:relative}
.trifuel-step-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.06);transition:all .4s var(--ease)}
.trifuel-step-icon svg{width:32px;height:32px}
.trifuel-step:hover .trifuel-step-icon{border-color:var(--orange);background:var(--orange-dim);transform:scale(1.1)}
.trifuel-step h4{font-family:var(--font-en);font-size:14px;font-weight:700;margin-bottom:6px;color:var(--white)}
.trifuel-step p{font-size:12px;color:var(--gray);line-height:1.6}
.trifuel-arrow{flex:0 0 60px;display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:24px}
@media(max-width:768px){.trifuel-flow{flex-direction:column;gap:12px}.trifuel-arrow{transform:rotate(90deg)}}

.trifuel-detail{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trifuel-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:clamp(24px,3vw,36px);position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(0,0,0,0.15);transition:all .4s var(--ease)}
.trifuel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.trifuel-card:hover{border-color:rgba(240,123,28,.3);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3),0 0 24px rgba(240,123,28,0.06)}.trifuel-card:hover::before{transform:scaleX(1)}
.trifuel-card-icon{width:36px;height:36px;margin-bottom:16px}
.trifuel-card h4{font-family:var(--font-en);font-size:18px;font-weight:700;margin-bottom:8px}
.trifuel-card p{font-size:14px;color:var(--gray);line-height:1.7}
.trifuel-card .stat{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--orange);margin-top:12px}
.trifuel-card .stat-label{font-size:11px;color:var(--dark);font-family:var(--font-mono);letter-spacing:.05em}
@media(max-width:768px){.trifuel-detail{grid-template-columns:1fr}}

/* ============================================
   VEHICLE SPECS
   ============================================ */
.vehicle-specs{background:var(--bg2)}
.vehicle-tabs{display:flex;gap:12px;margin-bottom:48px;flex-wrap:wrap}
.vehicle-tab{padding:12px 28px;border:1px solid rgba(255,255,255,.08);border-radius:40px;background:transparent;color:var(--gray);font-family:var(--font-en);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s var(--ease);letter-spacing:.02em}
.vehicle-tab.active{background:var(--orange);border-color:var(--orange);color:var(--bg)}
.vehicle-tab:hover:not(.active){border-color:var(--orange);color:var(--orange)}

.vehicle-panel{display:none;animation:fadeIn .5s var(--ease)}
.vehicle-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.vehicle-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.vehicle-image{background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:40px;min-height:320px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vehicle-image-placeholder{text-align:center;color:var(--dark)}
.vehicle-image-placeholder .emoji{font-size:80px;display:block;margin-bottom:16px}
.vehicle-image-placeholder p{font-size:12px;font-family:var(--font-mono);letter-spacing:.05em}

.vehicle-info h3{font-family:var(--font-en);font-size:clamp(24px,3vw,32px);font-weight:800;margin-bottom:8px}
.vehicle-info .vehicle-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border:1px solid rgba(240,123,28,.3);border-radius:20px;font-family:var(--font-mono);font-size:10px;color:var(--orange);letter-spacing:.08em;margin-bottom:20px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.spec-item{padding:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px}
.spec-item-label{font-size:11px;color:var(--dark);font-family:var(--font-mono);letter-spacing:.05em;margin-bottom:4px}
.spec-item-value{font-family:var(--font-en);font-size:16px;font-weight:700;color:var(--white)}

.price-options{margin-top:24px}
.price-option{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px;margin-bottom:8px;transition:all .3s var(--ease)}
.price-option:hover{border-color:rgba(240,123,28,.3);background:var(--orange-dim)}
.price-option-name{font-size:14px;font-weight:500}
.price-option-price{font-family:var(--font-en);font-size:18px;font-weight:800;color:var(--orange)}
@media(max-width:900px){.vehicle-layout{grid-template-columns:1fr}}

/* ============================================
   ECONOMY CALCULATOR
   ============================================ */
.economy{background:var(--bg)}
.economy-compare{margin-top:48px}
.compare-header{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:0;margin-bottom:4px}
.compare-header span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--dark);text-transform:uppercase;padding:12px 16px;text-align:center}
.compare-header span:first-child{text-align:left}
.compare-row{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:0;border:1px solid rgba(255,255,255,.04);border-radius:12px;margin-bottom:6px;overflow:hidden;transition:all .3s var(--ease)}
.compare-row:hover{border-color:rgba(240,123,28,.15)}
.compare-row.highlight{border-color:rgba(240,123,28,.4);background:var(--orange-dim)}
.compare-cell{padding:16px;text-align:center;font-size:14px;border-right:1px solid rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
.compare-cell:first-child{justify-content:flex-start;font-weight:600}
.compare-cell:last-child{border-right:none}
.compare-cell .value{font-family:var(--font-en);font-weight:700}
.compare-cell .value.best{color:var(--orange);font-size:16px}
.compare-cell .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-family:var(--font-mono);letter-spacing:.05em}
.compare-cell .tag.save{background:rgba(34,197,94,.1);color:var(--success)}
@media(max-width:768px){
  .compare-header,.compare-row{grid-template-columns:1.5fr repeat(3,1fr)}
  .compare-cell{padding:10px 8px;font-size:12px}
}

.savings-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.savings-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:clamp(24px,3vw,36px);text-align:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(0,0,0,0.15);transition:all .4s var(--ease)}
.savings-card:hover{border-color:rgba(240,123,28,.3);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3),0 0 24px rgba(240,123,28,0.06)}
.savings-card-num{font-family:var(--font-en);font-size:clamp(32px,4vw,48px);font-weight:800;color:var(--orange);line-height:1}
.savings-card-unit{font-family:var(--font-mono);font-size:12px;color:var(--orange-light);margin-top:4px;letter-spacing:.05em}
.savings-card-label{font-size:14px;color:var(--gray);margin-top:12px;line-height:1.5}
@media(max-width:768px){.savings-cards{grid-template-columns:1fr}}

/* ============================================
   ROI CALCULATOR
   ============================================ */
.roi{background:var(--bg2)}
.roi-calculator{max-width:800px;margin:48px auto 0;background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:clamp(28px,4vw,48px);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.roi-input-group{margin-bottom:28px}
.roi-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.roi-label span{font-size:14px;color:var(--gray)}
.roi-label .roi-value{font-family:var(--font-en);font-size:18px;font-weight:700;color:var(--orange)}
.roi-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--bg3);outline:none}
.roi-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--orange);cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 10px var(--orange-glow)}
.roi-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--orange);cursor:pointer;border:3px solid var(--bg)}

.roi-results{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.roi-result{padding:20px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:12px;text-align:center}
.roi-result-num{font-family:var(--font-en);font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--orange)}
.roi-result-label{font-size:12px;color:var(--gray);margin-top:6px}
.roi-result.total{grid-column:1/-1;background:var(--orange-dim);border-color:rgba(240,123,28,.3)}
.roi-result.total .roi-result-num{font-size:clamp(32px,4vw,48px)}
@media(max-width:600px){.roi-results{grid-template-columns:1fr}}

/* ============================================
   PROCESS SECTION
   ============================================ */
.process{background:var(--bg)}
.process-timeline{display:flex;justify-content:space-between;align-items:flex-start;margin-top:60px;position:relative;padding:0 20px}
.process-timeline::before{content:'';position:absolute;top:40px;left:60px;right:60px;height:2px;background:linear-gradient(90deg,var(--orange),var(--orange-light),var(--orange))}
.process-step{text-align:center;flex:1;position:relative;z-index:1}
.process-step-circle{width:80px;height:80px;border-radius:50%;background:var(--bg2);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--font-en);font-size:20px;font-weight:800;color:var(--orange);transition:all .4s var(--ease)}
.process-step:hover .process-step-circle{background:var(--orange);color:var(--bg);transform:scale(1.1)}
.process-step-day{font-family:var(--font-mono);font-size:11px;color:var(--orange);letter-spacing:.08em;margin-bottom:6px}
.process-step h4{font-size:14px;font-weight:700;margin-bottom:4px}
.process-step p{font-size:12px;color:var(--gray);line-height:1.5;max-width:140px;margin:0 auto}
@media(max-width:768px){
  .process-timeline{flex-direction:column;gap:32px;align-items:stretch}
  .process-timeline::before{top:0;bottom:0;left:40px;width:2px;height:100%;right:auto}
  .process-step{display:flex;text-align:left;gap:20px;align-items:flex-start}
  .process-step-circle{min-width:60px;width:60px;height:60px;margin:0;font-size:16px}
  .process-step p{max-width:none}
}

/* ============================================
   PARTNERS SECTION
   ============================================ */
.partners{background:var(--bg2)}
.partner-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;margin-top:48px}
.partner-logo{width:160px;height:100px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px;display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);padding:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.partner-logo:hover{border-color:rgba(240,123,28,.3);background:var(--orange-dim);transform:translateY(-4px)}
.partner-logo span{font-family:var(--font-en);font-size:14px;font-weight:700;color:var(--gray);text-align:center;line-height:1.3}
.partner-logo:hover span{color:var(--orange)}

.credentials{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.credential{text-align:center;padding:24px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:16px;transition:all .4s var(--ease)}
.credential:hover{border-color:rgba(240,123,28,.2)}
.credential-icon{width:28px;height:28px;margin:0 auto 10px}
.credential-title{font-family:var(--font-en);font-size:13px;font-weight:700;margin-bottom:4px}
.credential-desc{font-size:11px;color:var(--dark);line-height:1.5}
@media(max-width:768px){.credentials{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials{background:var(--bg)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.testimonial-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:20px;transition:all .4s var(--ease);position:relative;overflow:hidden;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.testimonial-card:hover{border-color:rgba(240,123,28,.3);transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.3)}
.testimonial-card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.testimonial-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.testimonial-card:hover .testimonial-card-thumb img{transform:scale(1.05)}
.testimonial-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);transition:background .3s var(--ease)}
.testimonial-card:hover .testimonial-card-play{background:rgba(0,0,0,.2)}
.testimonial-card-play-btn{width:52px;height:52px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(240,123,28,.4);transition:transform .3s var(--ease)}
.testimonial-card:hover .testimonial-card-play-btn{transform:scale(1.1)}
.testimonial-card-play-btn svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.testimonial-card-body{padding:clamp(20px,2.5vw,28px)}
.testimonial-km{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--orange);margin-bottom:4px}
.testimonial-km-label{font-family:var(--font-mono);font-size:10px;color:var(--dark);letter-spacing:.08em;margin-bottom:12px}
.testimonial-text{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.testimonial-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.testimonial-author{font-size:13px;font-weight:500}
.testimonial-vehicle{font-family:var(--font-mono);font-size:10px;color:var(--dark);letter-spacing:.05em}
.testimonial-yt-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;color:var(--orange);letter-spacing:.06em;margin-top:10px}
.testimonial-yt-tag svg{width:14px;height:14px;fill:var(--orange)}

@media(max-width:768px){.testimonial-grid{grid-template-columns:1fr}}

/* ============================================
   SERVICE NETWORK
   ============================================ */
.service{background:var(--bg2)}
.service-features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.service-feature{text-align:center;padding:clamp(20px,3vw,32px);background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:16px;transition:all .4s var(--ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,0,0,0.12)}
.service-feature:hover{border-color:rgba(240,123,28,.3);transform:translateY(-4px)}
.service-feature-icon{width:36px;height:36px;margin:0 auto 12px}
.service-feature h4{font-family:var(--font-en);font-size:15px;font-weight:700;margin-bottom:6px}
.service-feature p{font-size:13px;color:var(--gray);line-height:1.6}
.service-feature .highlight-num{font-family:var(--font-en);font-size:28px;font-weight:800;color:var(--orange);display:block;margin-bottom:8px}
@media(max-width:768px){.service-features{grid-template-columns:1fr 1fr;gap:12px}}

/* ============================================
   CTA SECTION
   ============================================ */
.fleet-cta{background:var(--bg);text-align:center;padding:clamp(80px,14vh,160px) clamp(20px,6vw,120px)}
.fleet-cta h2{font-family:var(--font-en);font-size:clamp(28px,4vw,48px);font-weight:800;margin-bottom:16px}
.fleet-cta p{font-size:16px;color:var(--gray);margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-btn{padding:16px 36px;border-radius:100px;font-family:var(--font-en);font-size:15px;font-weight:700;letter-spacing:.03em;transition:all .4s var(--ease);cursor:pointer;border:none}
.cta-btn.primary{background:var(--orange);color:var(--bg)}
.cta-btn.primary:hover{background:var(--orange-light);transform:translateY(-2px);box-shadow:0 8px 30px var(--orange-glow)}
.cta-btn.secondary{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.15)}
.cta-btn.secondary:hover{border-color:var(--orange);color:var(--orange)}

/* ============================================
   BASE LAYOUT (fleet-specific overrides)
   ============================================ */
.section-label{font-family:var(--font-mono);font-size:13px;letter-spacing:4px;color:var(--orange);text-transform:uppercase;margin-bottom:16px}
.section-title{font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.3;margin-bottom:20px;color:var(--white)}
.section-subtitle{font-size:17px;color:var(--gray);max-width:640px;line-height:1.8;margin-bottom:48px}
.accent{color:var(--orange)}

/* Mobile: hide desktop nav, handled by common.css */
@media(max-width:768px){.nav-links{display:none}}

/* Reveal delay utilities */
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ============================================
   ENHANCED MICRO-INTERACTIONS
   ============================================ */

/* Animated gradient border for featured cards */
.trifuel-card::after,
.savings-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--shimmer-angle, 0deg),
    transparent 0%,
    rgba(240, 123, 28, 0.12) 10%,
    transparent 20%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.trifuel-card:hover::after,
.savings-card:hover::after,
.testimonial-card:hover::after {
  opacity: 1;
  animation: cardShimmer 4s linear infinite;
}
@property --shimmer-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes cardShimmer {
  to { --shimmer-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .trifuel-card:hover::after,
  .savings-card:hover::after,
  .testimonial-card:hover::after { display: none; }
}

/* Icon pulse on card hover */
.trifuel-card:hover .trifuel-card-icon,
.savings-card:hover .savings-icon,
.service-feature:hover .service-feature-icon {
  transform: scale(1.15) translateY(-2px);
  transition: transform 0.4s var(--ease);
}

/* Process step enhanced interaction */
.process-step-circle {
  position: relative;
}
.process-step-circle::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease);
}
.process-step:hover .process-step-circle::after {
  border-color: rgba(240, 123, 28, 0.3);
  inset: -8px;
}

/* ROI slider enhanced thumb */
.roi-slider::-webkit-slider-thumb {
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.roi-slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 16px var(--orange-glow), 0 0 32px rgba(240, 123, 28, 0.15);
  transform: scale(1.15);
}
.roi-slider:active::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 20px var(--orange-glow), 0 0 40px rgba(240, 123, 28, 0.2);
}

/* Credential card enhanced hover */
.credential {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.credential::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(240, 123, 28, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.credential:hover::before { opacity: 1; }
.credential:hover .credential-icon { transform: scale(1.2); }
.credential-icon { transition: transform 0.4s var(--ease); }

/* Vehicle tab enhanced transitions */
.vehicle-tab {
  position: relative;
  overflow: hidden;
}
.vehicle-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(240, 123, 28, 0.06));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.vehicle-tab:hover:not(.active)::before { opacity: 1; }
.vehicle-tab.active {
  box-shadow: 0 4px 16px rgba(240, 123, 28, 0.25);
}

/* Compare row stagger animation */
.compare-row {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.compare-row:hover .compare-cell .value.best {
  text-shadow: 0 0 12px rgba(240, 123, 28, 0.4);
}

/* Spec item subtle glow */
.spec-item {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s var(--ease);
}
.spec-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

/* Price option enhanced hover */
.price-option {
  position: relative;
  overflow: hidden;
}
.price-option::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease);
}
.price-option:hover::before { transform: scaleY(1); }

/* Why visual enhanced ambient */
.why-visual {
  position: relative;
  overflow: hidden;
}
.why-visual::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 123, 28, 0.05), transparent 70%);
  animation: float 8s ease-in-out infinite;
}
.why-visual::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -10%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.03), transparent 70%);
  animation: float 10s ease-in-out infinite reverse;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, -15px); }
}

/* Mileage bar enhanced fill animation */
.mileage-bar-fill {
  position: relative;
  overflow: hidden;
}
.mileage-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  animation: barShine 2s ease-in-out infinite;
}
@keyframes barShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Section ambient orbs */
.trifuel { position: relative; overflow: hidden; }
.trifuel::before {
  content: '';
  position: absolute;
  top: 10%;
  right: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 123, 28, 0.04), transparent 70%);
  animation: heroOrb 14s ease-in-out infinite;
  pointer-events: none;
}

.economy { position: relative; overflow: hidden; }
.economy::after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: -5%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.03), transparent 70%);
  animation: heroOrb 12s ease-in-out infinite reverse;
  pointer-events: none;
}

/* Service feature hover glow */
.service-feature:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 20px rgba(240,123,28,0.05);
}

/* Testimonial play button pulse */
.testimonial-card-play-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(240, 123, 28, 0.4);
  animation: playPulse 2s ease-out infinite;
}
@keyframes playPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Partner logo enhanced interaction */
.partner-logo {
  position: relative;
  overflow: hidden;
}
.partner-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(240, 123, 28, 0.04));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.partner-logo:hover::before { opacity: 1; }

/* CTA button enhanced hover */
.cta-btn.primary {
  position: relative;
  overflow: hidden;
}
.cta-btn.primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s var(--ease);
}
.cta-btn.primary:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* ============================================
   EXTRACTED INLINE-STYLE CLASSES
   ============================================ */

/* Vehicle footnote */
.vehicle-footnote {
  font-size: 12px;
  color: var(--dark);
  margin-top: 12px;
  line-height: 1.6;
}

/* Partner logo highlight (KGM) */
.partner-logo-highlight {
  border-color: rgba(240, 123, 28, .3);
  background: rgba(240, 123, 28, .06);
}

/* SVG icon containers */
.credential-icon svg,
.service-feature-icon svg,
.why-highlight-icon svg,
.trifuel-step-icon svg,
.trifuel-card-icon svg {
  width: 100%;
  height: 100%;
}

.vehicle-placeholder-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  color: var(--dark);
}
.vehicle-placeholder-icon svg {
  width: 100%;
  height: 100%;
}