@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#e9e9e6; --ink:#111; --muted:#666; --line:rgba(17,17,17,.13);
  --white:#f8f8f5; --green:#203d2b; --accent:#df4b32;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
a{text-decoration:none;color:inherit}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(233,233,230,.88);backdrop-filter:blur(16px);z-index:15}
.brand{display:flex;align-items:baseline;gap:11px;font-family:"Space Grotesk",sans-serif;font-weight:700}
.toyota-mark{font-size:13px;letter-spacing:.13em;border:1px solid #111;border-radius:50%;padding:6px 8px}
.drive{font-size:22px;letter-spacing:-.06em}.drive span{color:var(--accent)}
nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:600}
nav a{opacity:.7;transition:.25s}nav a:hover{opacity:1}
.nav-cta{background:#111;color:#fff;padding:12px 19px;border-radius:99px;opacity:1!important}
.hero{min-height:calc(100vh - 82px);display:grid;grid-template-columns:43% 57%;position:relative;overflow:hidden;background:linear-gradient(105deg,#ececea 0 44%,#dfe2df 44% 100%)}
.hero-copy{padding:13vh 0 12vh 10vw;position:relative;z-index:3}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;margin:0 0 28px;color:#555}.eyebrow span{display:inline-block;width:27px;height:1px;background:var(--accent);vertical-align:middle;margin-right:9px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif}
h1{font-size:clamp(62px,8vw,124px);line-height:.84;letter-spacing:-.08em;margin:0;max-width:700px}
h1 em,h2 em{font-style:normal;font-weight:400}
.hero-text{max-width:410px;line-height:1.7;color:#555;margin:38px 0 35px;font-size:15px}
.primary{display:inline-flex;gap:25px;align-items:center;background:#111;color:#fff;padding:16px 20px;border-radius:99px;font-size:13px;font-weight:700}.primary b{font-size:18px}
.hero-car{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hero-car:before{content:"";position:absolute;width:80%;height:65%;border-radius:50%;background:#fff;filter:blur(1px);opacity:.55}
.hero-car img{width:105%;max-width:880px;position:relative;z-index:2;filter:drop-shadow(0 28px 25px rgba(0,0,0,.16));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(32,61,43,.13);filter:blur(70px)}
.floating-chip{position:absolute;z-index:4;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.1);backdrop-filter:blur(10px);padding:12px 16px;border-radius:10px;font-size:11px;font-weight:700;box-shadow:0 14px 40px rgba(0,0,0,.08)}
.chip-one{left:5%;bottom:18%}.chip-two{right:7%;top:22%}
.hero-index{position:absolute;bottom:28px;left:10vw;font-family:"Space Grotesk";font-size:13px}.hero-index span{color:#888}
.fleet-section{padding:120px 5vw 70px;background:#f4f4f1}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:48px}
h2{font-size:clamp(48px,6vw,86px);line-height:.88;letter-spacing:-.07em;margin:0}h2 strong{font-weight:700}
.hint{font-size:12px;color:#777;line-height:1.6;text-align:right}
.fleet{display:flex;gap:10px;height:610px;min-height:500px}
.car-card{flex:1;min-width:0;position:relative;overflow:hidden;background:#ddd;cursor:pointer;transition:flex .55s cubic-bezier(.2,.8,.2,1),filter .35s,transform .35s;isolation:isolate}
.car-card:nth-child(1){background:#d9ddda}.car-card:nth-child(2){background:#d8d8d5}.car-card:nth-child(3){background:#2c4937;color:white}.car-card:nth-child(4){background:#e7e7e3}.car-card:nth-child(5){background:#c9ced0}
.car-card:not(.active){filter:saturate(.8)}
.car-card.active{flex:2.5}
.car-card:hover{flex:2.5;filter:none;z-index:3}
.card-bg{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.32) 100%);z-index:0}
.car-card img{position:absolute;width:170%;max-width:none;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-2deg);transition:.55s cubic-bezier(.2,.8,.2,1);z-index:1}
.car-card.active img,.car-card:hover img{width:112%}
.card-top{position:absolute;top:25px;left:25px;right:25px;display:flex;justify-content:space-between;font:700 11px "Space Grotesk";z-index:4}
.tag{padding:7px 9px;border-radius:99px;background:rgba(255,255,255,.78);color:#111}.tag.hybrid{background:#173d29;color:#fff}.tag.petrol{background:#111;color:#fff}
.card-info{position:absolute;left:26px;bottom:73px;z-index:4;opacity:0;transform:translateY(15px);transition:.35s}.active .card-info,.car-card:hover .card-info{opacity:1;transform:none}
.card-info p{font-size:13px;margin:0 0 1px}.card-info h3{font-size:36px;margin:0;letter-spacing:-.05em}.card-info span{font-size:10px;opacity:.75}
.details{position:absolute;left:25px;bottom:25px;background:rgba(255,255,255,.9);border:0;border-radius:99px;padding:10px 14px;font-size:10px;font-weight:800;z-index:5;opacity:0;cursor:pointer;transition:.3s}.active .details,.car-card:hover .details{opacity:1}.details b{margin-left:12px;font-size:14px}
.spec-panel{display:grid;grid-template-columns:48% 52%;min-height:720px;background:#e2e4df}
.spec-visual{background:#1f3929;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.spec-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.08) 45% 55%,transparent 55%);opacity:.7}
.spec-visual img{width:110%;position:relative;z-index:2;filter:drop-shadow(0 35px 30px rgba(0,0,0,.28));transition:.5s}
.spec-number{position:absolute;top:35px;left:40px;color:#fff;font:600 12px "Space Grotesk";z-index:3}
.sound-btn{position:absolute;bottom:35px;left:40px;z-index:5;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);color:#fff;padding:13px 16px;border-radius:99px;font-size:10px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px)}.sound-btn span{margin-left:18px}
.spec-copy{padding:95px 8vw 70px}
.spec-title-row{display:flex;align-items:start;justify-content:space-between;gap:25px}
.spec-copy h2{font-size:clamp(48px,5vw,74px)}.spec-copy h3{font-size:32px;font-weight:400;margin:2px 0 0;letter-spacing:-.05em}
.fuel-badge{font-size:10px;font-weight:800;letter-spacing:.1em;padding:9px 12px;border:1px solid #aaa;border-radius:99px}
.spec-description{max-width:600px;line-height:1.7;color:#666;font-size:14px;margin:28px 0 36px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.spec-grid div{padding:17px 0;border-bottom:1px solid var(--line)}.spec-grid span{display:block;font-size:10px;color:#777;margin-bottom:7px}.spec-grid strong{font:600 17px "Space Grotesk"}
.included{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;color:#39473e;font-size:10px;font-weight:700}.included span{padding:8px 10px;background:#d4dbd3;border-radius:99px}
.whatsapp{display:flex;justify-content:space-between;align-items:center;background:#111;color:#fff;border-radius:6px;padding:17px 19px;font-size:12px;font-weight:700;margin-top:28px}.whatsapp span{font-size:18px}
.disclaimer{display:block;color:#888;font-size:9px;line-height:1.5;margin-top:14px}
.process{padding:120px 5vw;background:#f4f4f1}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.step{padding:34px 25px 30px 0;border-right:1px solid var(--line)}.step:not(:first-child){padding-left:25px}.step:last-child{border-right:0}.step b{font:600 12px "Space Grotesk";color:var(--accent)}.step h3{font-size:30px;margin:38px 0 10px}.step p{max-width:330px;color:#777;line-height:1.65;font-size:13px}
.cta{padding:120px 8vw;display:flex;justify-content:space-between;align-items:end;background:#203d2b;color:#fff;gap:40px}.cta .eyebrow{color:#b7c0b8}.cta h2{font-size:clamp(55px,8vw,110px)}.cta a{background:#fff;color:#111;padding:17px 20px;border-radius:99px;font-size:12px;font-weight:800;min-width:210px;display:flex;justify-content:space-between}
footer{display:flex;justify-content:space-between;align-items:center;padding:35px 5vw;background:#111;color:#fff;font-size:11px}footer .toyota-mark{border-color:#fff}footer p{color:#999}footer>a{font-weight:700}
@media(max-width:900px){
  nav a:not(.nav-cta){display:none}
  .hero{display:block;min-height:850px;background:linear-gradient(160deg,#ececea 0 45%,#dfe2df 45%)}
  .hero-copy{padding:70px 7vw 0}.hero-text{margin:30px 0 24px}
  .hero-car{height:430px;margin-top:10px}.hero-car img{width:125%}.chip-one{left:5%;bottom:8%}.chip-two{right:5%;top:7%}
  .hero-index{left:7vw}
  .fleet-section,.process{padding:85px 5vw 50px}.section-head{align-items:start;flex-direction:column}.hint{text-align:left}
  .fleet{height:620px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .car-card,.car-card.active,.car-card:hover{flex:0 0 78vw;height:590px;scroll-snap-align:center}
  .car-card img,.car-card.active img,.car-card:hover img{width:135%}
  .card-info,.details{opacity:1;transform:none}
  .spec-panel{display:block}.spec-visual{height:390px}.spec-visual img{width:125%}.spec-copy{padding:65px 7vw 55px}
  .steps{grid-template-columns:1fr}.step,.step:not(:first-child){border-right:0;border-bottom:1px solid var(--line);padding:25px 0}.step h3{margin:22px 0 8px}
  .cta{display:block;padding:85px 7vw}.cta a{margin-top:40px}
  footer{flex-wrap:wrap;gap:20px}footer p{order:3;width:100%;margin:0}
}
@media(max-width:520px){
  .topbar{height:68px;padding:0 5vw}.drive{font-size:19px}
  .hero{min-height:760px}.hero-copy{padding-top:55px}h1{font-size:65px}.hero-text{font-size:13px}
  .hero-car{height:330px}.floating-chip{font-size:9px;padding:9px 11px}.chip-one{bottom:1%}.chip-two{top:1%}
  .fleet{height:530px}.car-card,.car-card.active,.car-card:hover{height:505px;flex-basis:84vw}
  .card-info h3{font-size:30px}.spec-visual{height:330px}.spec-copy h3{font-size:25px}.spec-grid strong{font-size:14px}
}