@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap');

:root{
  --red:#d71920;
  --red2:#ff342d;
  --ink:#151515;
  --black:#090909;
  --paper:#f2efe9;
  --white:#fff;
  --muted:#9f9f9f;
  --line:rgba(255,255,255,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.035;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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.header{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4.5vw;background:var(--paper);border-bottom:1px solid rgba(0,0,0,.12);position:relative;z-index:20}
.logo{display:flex;align-items:center;gap:12px;width:max-content}
.logo-mark{display:grid;place-items:center;width:48px;height:48px;background:var(--red);color:#fff;font:700 19px Oswald;transform:skew(-8deg)}
.logo-name{display:flex;flex-direction:column;line-height:1}
.logo-name b{font:700 21px Oswald;letter-spacing:.04em}
.logo-name small{font-size:8px;font-weight:800;letter-spacing:.43em;margin-top:4px;color:#777}
.header nav{display:flex;gap:34px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.header nav a{position:relative}
.header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--red);transition:.25s}
.header nav a:hover:after{right:0}
.header-order{justify-self:end;background:var(--ink);color:white;padding:14px 20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.menu-btn{display:none;border:0;background:transparent}

.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:48% 52%;background:var(--paper);overflow:hidden}
.hero-copy{padding:8vh 3vw 6vh 7vw;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.eyebrow i{width:28px;height:3px;background:var(--red)}
h1{font:700 clamp(74px,8.7vw,156px)/.78 Oswald;margin:32px 0 34px;letter-spacing:-.045em}
h1 span{color:var(--red);white-space:nowrap}
.hero-text{font-size:16px;line-height:1.7;max-width:570px;color:#525252;margin:0 0 34px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.primary-btn{display:flex;align-items:center;justify-content:space-between;gap:50px;background:var(--red);color:#fff;padding:18px 20px 18px 24px;min-width:275px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.09em}
.primary-btn b{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:var(--red);font-size:18px}
.primary-btn:hover b{transform:rotate(45deg);transition:.25s}
.secondary-btn{font-size:11px;font-weight:800;text-transform:uppercase;border-bottom:2px solid var(--ink);padding:11px 0}
.hero-metrics{margin-top:6vh;padding-top:30px;border-top:1px solid rgba(0,0,0,.15);display:flex;gap:50px;max-width:570px}
.hero-metrics div{display:flex;flex-direction:column}
.hero-metrics strong{font:700 27px Oswald}
.hero-metrics span{font-size:9px;color:#777;text-transform:uppercase;letter-spacing:.1em;margin-top:6px}

.hero-visual{position:relative;background:#181818;overflow:hidden;min-height:720px}
.hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 0 42%,rgba(255,255,255,.035) 42% 43%,transparent 43% 55%,rgba(255,255,255,.025) 55% 56%,transparent 56%)}
.sun{position:absolute;width:390px;height:390px;border-radius:50%;background:var(--red);top:7%;right:9%;box-shadow:0 0 90px rgba(215,25,32,.25)}
.sun:after{content:"";position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.route{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%;transform:rotate(-15deg)}
.route-one{width:670px;height:300px;top:20%;left:-15%}
.route-two{width:530px;height:220px;top:27%;left:-2%}
.fuel-card{position:absolute;z-index:3;right:8%;top:15%;width:min(440px,70%);background:#ece9e2;color:#111;box-shadow:0 38px 80px rgba(0,0,0,.42);transform:rotate(2deg)}
.fuel-card-head{height:54px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#101010;color:#fff;font:700 12px Oswald;letter-spacing:.15em}
.fuel-card-head i{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 18px var(--red)}
.fuel-card-main{padding:29px 25px 26px}
.fuel-card-main small{font-size:8px;font-weight:800;letter-spacing:.16em;color:#6d6d6d}
.fuel-card-main strong{display:block;font:700 clamp(24px,2vw,38px) Oswald;margin-top:10px}
.fuel-level{height:10px;background:#d3d0c9;margin-top:24px;overflow:hidden}
.fuel-level span{display:block;height:100%;width:84%;background:var(--red);animation:level 4s ease-in-out infinite}
@keyframes level{50%{width:70%}}
.fuel-card-bottom{display:flex;justify-content:space-between;padding:14px 25px;background:#dbd7cf;font-size:9px;font-weight:800;letter-spacing:.12em}
.fuel-card-bottom b{color:var(--red)}
.road{position:absolute;left:-10%;right:-5%;height:170px;bottom:9%;background:#0b0b0b;transform:rotate(-6deg);border-top:2px solid #404040}
.road:after{content:"";position:absolute;left:0;right:0;top:82px;border-top:5px dashed rgba(255,255,255,.48)}
.truck{position:absolute;width:420px;height:155px;bottom:19%;left:8%;z-index:5;animation:truckFloat 4s ease-in-out infinite}
@keyframes truckFloat{50%{transform:translateY(-7px)}}
.truck-tank{position:absolute;left:0;top:20px;width:280px;height:95px;background:#e9e6df;border-radius:50px 13px 13px 50px;padding:28px 35px;box-shadow:inset -20px -10px 25px rgba(0,0,0,.12)}
.truck-tank b{display:block;font:700 24px Oswald}
.truck-tank span{display:block;color:var(--red);font-size:8px;font-weight:800;letter-spacing:.32em}
.truck-cab{position:absolute;left:278px;top:36px;width:110px;height:80px;background:var(--red);clip-path:polygon(0 0,70% 0,100% 42%,100% 100%,0 100%)}
.truck-cab:after{content:"";position:absolute;right:11px;top:11px;width:47px;height:27px;background:#222;clip-path:polygon(0 0,64% 0,100% 100%,0 100%)}
.wheel{position:absolute;bottom:16px;width:40px;height:40px;border-radius:50%;background:#090909;border:7px solid #2e2e2e;z-index:4}
.w1{left:60px}.w2{left:245px}.w3{left:330px}
.visual-label{position:absolute;right:5%;bottom:4%;color:#777;font-size:8px;letter-spacing:.23em;font-weight:800;writing-mode:vertical-rl}
.ticker{background:var(--red);color:white;overflow:hidden;padding:18px 0;white-space:nowrap}
.ticker div{display:inline-flex;gap:32px;align-items:center;animation:marquee 24s linear infinite}
.ticker span{font:600 15px Oswald;letter-spacing:.12em}
.ticker i{font-style:normal;font-size:8px}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:120px 7vw}
.section-title span,.business-head>span,.section-kicker{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--red)}
.section-title h2,.business-head h2,.delivery-copy h2{font:700 clamp(50px,6vw,98px)/.9 Oswald;margin:20px 0 50px;letter-spacing:-.035em}
.fuel-section{background:var(--paper)}
.fuel-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #bbb;border-left:1px solid #bbb}
.fuel-item{min-height:430px;padding:25px;display:flex;flex-direction:column;border-right:1px solid #bbb;border-bottom:1px solid #bbb;position:relative;overflow:hidden;transition:.3s}
.fuel-item:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(0,0,0,.12);z-index:2}
.fuel-index{font-size:9px;font-weight:800;opacity:.55}
.octane{font:700 110px Oswald;line-height:1;margin:40px 0 15px;letter-spacing:-.06em}
.fuel-item h3{font:700 23px Oswald;text-transform:uppercase;margin:0 0 14px}
.fuel-item p{font-size:12px;line-height:1.7;opacity:.7;margin:0}
.fuel-item a{margin-top:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.fuel-item.red{background:var(--red);color:white;border-color:rgba(255,255,255,.2)}
.fuel-item.white{background:#fff}
.fuel-item.dark{background:#171717;color:white}
.fuel-item.outlined{background:transparent}
.ticket-icon{font:700 100px Oswald;margin:35px 0 27px;color:var(--red);transform:rotate(-8deg)}

.delivery{display:grid;grid-template-columns:55% 45%;min-height:760px;background:#151515;color:white}
.delivery-map{position:relative;overflow:hidden;min-height:690px;background:#101010}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:52px 52px;transform:perspective(600px) rotateX(56deg) scale(1.45);transform-origin:center bottom}
.delivery-map:after{content:"RUSSIA";position:absolute;left:8%;bottom:9%;font:700 130px Oswald;color:rgba(255,255,255,.025)}
.pin{position:absolute;display:flex;align-items:center;gap:9px;font-size:8px;font-weight:800;letter-spacing:.08em}
.pin i{width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 7px rgba(215,25,32,.14),0 0 30px var(--red)}
.p1{left:22%;top:47%}.p2{left:13%;top:28%}.p3{left:41%;top:42%}.p4{left:59%;top:36%}.p5{left:76%;top:51%}
.map-line{position:absolute;height:1px;background:linear-gradient(90deg,var(--red),transparent);transform-origin:left}
.ml1{width:260px;left:22%;top:48%;transform:rotate(-8deg)}
.ml2{width:330px;left:41%;top:43%;transform:rotate(5deg)}
.ml3{width:220px;left:58%;top:37%;transform:rotate(25deg)}
.delivery-copy{padding:110px 7vw 80px;background:var(--red)}
.delivery-copy .section-kicker{color:white;opacity:.7}
.delivery-copy h2{margin-bottom:28px}
.delivery-copy>p{font-size:14px;line-height:1.8;max-width:520px;opacity:.86}
.delivery-copy ul{list-style:none;padding:0;margin:45px 0}
.delivery-copy li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700}
.delivery-copy li b{font:600 13px Oswald}
.primary-btn.inverse{background:#fff;color:var(--red)}
.primary-btn.inverse b{background:var(--ink);color:#fff}

.business{background:#e8e4dc}
.business-head{display:flex;flex-direction:column}
.business-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.business-card{background:#fff;min-height:280px;padding:32px;border-top:6px solid var(--red)}
.business-card b{color:var(--red);font:700 16px Oswald}
.business-card h3{font:700 31px Oswald;text-transform:uppercase;margin:65px 0 18px}
.business-card p{font-size:13px;line-height:1.7;color:#666;max-width:300px}

.cta{background:var(--red);color:#fff;padding:80px 7vw;display:flex;align-items:end;justify-content:space-between;gap:30px}
.cta>div>span{font-size:9px;font-weight:800;letter-spacing:.16em}
.cta h2{font:700 clamp(48px,6vw,100px)/.86 Oswald;margin:20px 0 0}
.cta>a{width:190px;height:190px;border-radius:50%;background:#fff;color:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:800;text-transform:uppercase;gap:15px;transition:.3s}
.cta>a b{font-size:30px}
.cta>a:hover{transform:rotate(7deg) scale(1.04)}

.faq{background:var(--paper);display:grid;grid-template-columns:34% 66%;gap:60px}
.section-title.compact h2{font-size:70px}
.faq-list{border-top:1px solid #aaa}
.faq details{border-bottom:1px solid #aaa}
.faq summary{list-style:none;padding:25px 0;display:flex;justify-content:space-between;align-items:center;font:600 22px Oswald;text-transform:uppercase;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font:400 28px Manrope;color:var(--red);font-style:normal}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{font-size:13px;line-height:1.8;color:#606060;padding:0 50px 25px 0;margin:0}

footer{background:#0c0c0c;color:white;padding:45px 7vw;display:grid;grid-template-columns:1fr 2fr 1fr 1fr;align-items:center;gap:30px}
.footer-logo .logo-name small{color:#777}
footer p{font-size:11px;color:#777}
footer>a:not(.logo){color:var(--red);font-size:11px;font-weight:800}
footer>span{font-size:9px;color:#777;text-align:right}

@media(max-width:1050px){
  .header{grid-template-columns:1fr auto}
  .header nav,.header-order{display:none}
  .menu-btn{display:block;width:44px;height:44px}
  .menu-btn span{display:block;width:26px;height:2px;background:#111;margin:6px auto}
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:80px 7vw}
  .hero-visual{min-height:680px}
  .fuel-grid{grid-template-columns:repeat(2,1fr)}
  .delivery{grid-template-columns:1fr}
  .delivery-map{min-height:600px}
  .business-grid{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  footer{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .header{height:74px;padding:0 20px}
  .logo-mark{width:40px;height:40px}
  .hero{min-height:auto}
  .hero-copy{padding:65px 22px 55px}
  h1{font-size:65px;margin:25px 0 28px}
  .hero-text{font-size:14px}
  .hero-actions{align-items:stretch;flex-direction:column}
  .primary-btn{width:100%;min-width:0}
  .secondary-btn{width:max-content}
  .hero-metrics{gap:25px;justify-content:space-between}
  .hero-metrics strong{font-size:22px}
  .hero-visual{min-height:560px}
  .sun{width:300px;height:300px;right:-60px}
  .fuel-card{width:82%;right:9%;top:12%}
  .truck{transform:scale(.72);transform-origin:left bottom;left:1%;bottom:15%;animation:none}
  .section{padding:80px 22px}
  .section-title h2,.business-head h2,.delivery-copy h2{font-size:53px}
  .fuel-grid{grid-template-columns:1fr}
  .fuel-item{min-height:360px}
  .octane{font-size:90px;margin-top:25px}
  .delivery-map{min-height:430px}
  .delivery-copy{padding:75px 22px}
  .pin span{display:none}
  .cta{padding:65px 22px;flex-direction:column;align-items:flex-start}
  .cta h2{font-size:53px}
  .cta>a{width:145px;height:145px;align-self:flex-end}
  .faq{gap:15px}
  .section-title.compact h2{font-size:53px}
  .faq summary{font-size:18px}
  footer{grid-template-columns:1fr;padding:40px 22px}
  footer>span{text-align:left}
}