.jeep-page { background:#111510; color:#f6f5f3; overflow:hidden; }
.jeep-hero { min-height:min(760px,calc(100vh - 4rem)); background:#111510 url('/images/jeep-tours/hero-fourrunner-mountain.webp') center/cover no-repeat; }
.jeep-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,12,10,.95) 0%,rgba(9,12,10,.75) 39%,rgba(9,12,10,.18) 73%,rgba(9,12,10,.5) 100%),linear-gradient(0deg,rgba(9,12,10,.9),transparent 48%); }
.jeep-shell { position:relative; z-index:1; }
.jeep-eyebrow { letter-spacing:.23em; text-transform:uppercase; font-size:.7rem; font-weight:800; color:#e5bb54; }
.jeep-glass { border:1px solid rgba(233,211,151,.22); background:rgba(20,26,20,.62); box-shadow:0 18px 48px rgba(0,0,0,.28); backdrop-filter:blur(13px); }
.jeep-chip { display:inline-flex; align-items:center; gap:.45rem; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.28); border-radius:999px; padding:.55rem .8rem; color:#f7f1e8; font-size:.78rem; font-weight:700; }
.jeep-primary { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; border-radius:1rem; background:linear-gradient(115deg,#e9be4e,#b58125); padding:.95rem 1.25rem; color:#18150e; font-weight:900; box-shadow:0 12px 28px rgba(186,132,29,.28); transition:transform .2s,filter .2s; }
.jeep-primary:hover { transform:translateY(-2px); filter:brightness(1.07); }
.jeep-section { position:relative; padding:5.5rem 0; background:radial-gradient(circle at 80% 0%,rgba(195,147,48,.12),transparent 27rem),#151913; }
.jeep-section--paper { background:#f3efe6; color:#1b211a; }
.jeep-section--deep { background:linear-gradient(125deg,#0b120f,#182118 50%,#111711); }
.fleet-viewport { overflow:hidden; }
.fleet-track { display:flex; gap:1rem; overflow:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:.5rem .25rem 1rem; scroll-behavior:smooth; }
.fleet-track::-webkit-scrollbar { display:none; }
.fleet-card { min-width:min(84vw,340px); scroll-snap-align:start; overflow:hidden; border:1px solid rgba(231,207,137,.24); border-radius:1.6rem; background:#1c221b; box-shadow:0 22px 38px rgba(0,0,0,.24); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.fleet-card.is-selected { transform:translateY(-8px); border-color:#f1ca66; box-shadow:0 0 0 3px rgba(232,190,87,.22),0 26px 52px rgba(0,0,0,.42); }
.fleet-card__image { position:relative; height:15rem; overflow:hidden; background:linear-gradient(145deg,#303c2e,#101510); }
.fleet-card__image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,16,12,.84),transparent 55%); }
.fleet-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease; }
.fleet-card:hover .fleet-card__image img { transform:scale(1.07); }
.fleet-card__body { padding:1.25rem; }
.fleet-card__badge { position:absolute; z-index:1; top:1rem; left:1rem; border-radius:999px; padding:.38rem .65rem; background:rgba(9,13,10,.76); border:1px solid rgba(255,255,255,.2); color:#e8be57; font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.11em; }
.fleet-button { width:2.8rem; height:2.8rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(225,189,91,.38); border-radius:1rem; color:#e8be57; transition:background .2s,color .2s; }
.fleet-button:hover { background:#e8be57; color:#182019; }
.route-card { position:relative; overflow:hidden; border:1px solid rgba(36,48,37,.16); border-radius:1.5rem; background:#fffdf8; padding:1.45rem; box-shadow:0 14px 32px rgba(35,32,24,.08); transition:transform .25s,box-shadow .25s; }
.route-card:hover { transform:translateY(-4px); box-shadow:0 22px 40px rgba(35,32,24,.13); }
.route-card--offroad { background:linear-gradient(145deg,#213126,#172117); color:#f6f5f3; border-color:rgba(230,194,91,.25); }
.route-card__number { color:#a9761c; font-size:.78rem; font-weight:900; letter-spacing:.16em; }
.route-card__price { display:flex; align-items:baseline; gap:.35rem; font-size:1.45rem; font-weight:900; color:#845b13; }
.route-card--offroad .route-card__price { color:#e8be57; }
.fleet-picker { display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid rgba(232,190,87,.2); border-radius:1.25rem; background:rgba(9,14,10,.42); padding:.75rem; }
.fleet-picker__button { flex:none; white-space:nowrap; }
.roulette-options { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }
.roulette-option { border:1px solid rgba(232,190,87,.35); border-radius:999px; padding:.55rem .8rem; color:#eff3e8; font-size:.8rem; font-weight:800; transition:.2s; }
.roulette-option[aria-pressed="true"],.roulette-option:hover { background:#e8be57; color:#182019; }
.fleet-result { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:5.1rem; border:1px solid rgba(232,190,87,.25); border-radius:1.25rem; background:linear-gradient(110deg,rgba(31,43,31,.98),rgba(13,19,14,.98)); padding:1rem 1.15rem; box-shadow:0 18px 34px rgba(0,0,0,.2); }
.fleet-result__main { display:grid; gap:.18rem; }
.fleet-result__route { color:#fff; font-family:Lora,serif; font-size:1.1rem; }
.fleet-result__meta { color:rgba(255,255,255,.68); font-size:.85rem; }
.fleet-result__meta i { color:#e8be57; margin-right:.35rem; }
.fleet-result__link { display:inline-flex; align-items:center; gap:.55rem; color:#e8be57; font-size:.85rem; font-weight:800; white-space:nowrap; }
.fleet-result.is-ready { animation:jeepResult .45s ease-out; }
@keyframes jeepResult { from { opacity:.25; transform:translateY(12px); } to { opacity:1; transform:none; } }
.jeep-fact { border-left:2px solid #e8be57; padding-left:1rem; }
.transfer-panel { border:1px solid rgba(232,190,87,.28); border-radius:1.7rem; background:linear-gradient(105deg,rgba(19,27,20,.95),rgba(25,38,28,.78)),url('/images/jeep-tours/bmw-520i-transfer.webp') right center/48% auto no-repeat; padding:2rem; color:#f6f5f3; box-shadow:0 20px 40px rgba(0,0,0,.25); }
@media (min-width:768px) { .fleet-card { min-width:300px; } .route-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .jeep-hero { min-height:610px; background-position:63% center; } .jeep-hero::after { background:linear-gradient(90deg,rgba(9,12,10,.93),rgba(9,12,10,.7)),linear-gradient(0deg,rgba(9,12,10,.94),transparent 58%); } .jeep-section { padding:4rem 0; } .fleet-picker,.fleet-result { align-items:stretch; flex-direction:column; } .fleet-picker__button { width:100%; } .fleet-result__link { justify-content:center; border-top:1px solid rgba(255,255,255,.12); padding-top:.8rem; } .transfer-panel { background:linear-gradient(125deg,rgba(19,27,20,.97),rgba(19,27,20,.8)),url('/images/jeep-tours/bmw-520i-transfer.webp') center/cover no-repeat; } }
@media (prefers-reduced-motion:reduce) { .fleet-track,.fleet-card,.fleet-card__image img { transition:none!important; } .fleet-result.is-ready { animation:none; } }