*{box-sizing:border-box}
:root{--p:#3455f6;--p-dark:#2843d5;--ink:#0f2a5c;--muted:#64748b;
  --grad:linear-gradient(160deg,color-mix(in oklab,var(--p) 92%,#001060) 0%,color-mix(in oklab,var(--p) 86%,#fff) 45%,color-mix(in oklab,var(--p) 58%,#fff) 100%)}
html{scroll-snap-type:y mandatory;overscroll-behavior:none}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:#eef1f7;-webkit-font-smoothing:antialiased}
/* pontosan két teljes képernyő, minden eszközön */
.screen{height:100vh;height:100svh;min-height:420px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden}

/* 1. képernyő */
/* egységes tartalomszélesség: max 1540 px, 32 px oldalt (1050 px alatt 20 px), középen; a háttér teljes szélességű */
.wrap{width:calc(100% - 64px);max-width:1540px;margin-inline:auto;padding-inline:0;box-sizing:border-box}
@media (max-width:1050px){.wrap{width:calc(100% - 40px)}}
.hero{background:#eef1f7}
.hero-in{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,3vw,48px);padding-block:12px}
.copy{display:flex;flex-direction:column;padding:clamp(16px,4vh,36px) 0 clamp(24px,6vh,56px);min-width:0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;display:block}
.wordmark{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.headline{margin:auto 0}
h1{font-size:clamp(38px,min(5.2vw,9vh),76px);font-weight:900;letter-spacing:-.04em;line-height:1.02;margin:0;text-wrap:balance}
.lead{font-size:clamp(16px,2.2vh,20px);line-height:1.55;color:var(--muted);margin:clamp(12px,2.4vh,22px) 0 0;max-width:460px;text-wrap:pretty}

.blue{position:relative;border-radius:24px;overflow:hidden;color:#fff;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/22px 22px,var(--grad);container-type:size;min-height:0;align-self:center;height:min(100%,clamp(340px,64vh,600px));box-shadow:0 30px 60px rgba(52,85,246,.25)}
.city{position:absolute;left:-12px;right:-232px;bottom:44px;height:70px;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'70'%3E%3Cg%20fill%3D'white'%3E%3Crect%20x%3D'0'%20y%3D'30'%20width%3D'34'%20height%3D'40'%20rx%3D'3'%2F%3E%3Crect%20x%3D'40'%20y%3D'12'%20width%3D'24'%20height%3D'58'%20rx%3D'3'%2F%3E%3Crect%20x%3D'70'%20y%3D'40'%20width%3D'42'%20height%3D'30'%20rx%3D'3'%2F%3E%3Crect%20x%3D'118'%20y%3D'22'%20width%3D'20'%20height%3D'48'%20rx%3D'3'%2F%3E%3Crect%20x%3D'144'%20y%3D'46'%20width%3D'30'%20height%3D'24'%20rx%3D'3'%2F%3E%3Ccircle%20cx%3D'196'%20cy%3D'50'%20r%3D'12'%2F%3E%3Crect%20x%3D'194'%20y%3D'56'%20width%3D'4'%20height%3D'14'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-position:0 100%;animation:city 5s linear infinite;will-change:transform}
.roadbed{position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,rgba(15,30,90,.28),rgba(15,30,90,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.road{position:absolute;left:0;right:-84px;bottom:19px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 28px,transparent 28px 84px);animation:road 1.1s linear infinite;will-change:transform}
.wind{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wind span{position:absolute;left:0;bottom:var(--b);width:var(--w);height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7));animation:wind 1.6s var(--d) linear infinite}

/* kamion: a magasságból és a szélességből is méreteződik, így bármilyen panelben elfér */
.mover{position:absolute;inset:0;animation:enter 1.3s cubic-bezier(.2,.9,.25,1) both}
.shadow{position:absolute;left:16%;right:12%;bottom:4px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,30,90,.38),rgba(15,30,90,0))}
.lines{position:absolute;left:3%;bottom:60px;display:flex;flex-direction:column;gap:8px;animation:lines .3s ease-in-out infinite}
.lines span{height:5px;border-radius:9px}
.lines span:first-child{width:36px;background:rgba(255,255,255,.55)}
.lines span:last-child{width:22px;background:rgba(255,255,255,.35);margin-left:12px}
.truck-wrap{position:absolute;left:50%;bottom:10px;width:min(64cqw,max(140px,calc((100cqh - 90px) * 1.05)));translate:-50% 0;transform:rotate(5deg);transform-origin:25% 95%}
.truck{display:block;width:100%;height:auto;animation:bump .32s linear infinite}

.props img{position:absolute;display:block;height:auto}
.box-a{left:6%;bottom:calc(52% + 10px);width:clamp(40px,12cqw,74px);animation:boxIn .6s .6s ease-out both,bob 6s 1.2s ease-in-out infinite}
.box-b{left:30%;bottom:calc(66% + 10px);width:clamp(28px,8cqw,48px);animation:boxIn .6s 1.2s ease-out both,bob 7s 1.8s ease-in-out infinite reverse}
.box-c{left:60%;bottom:calc(70% + 10px);width:clamp(34px,9.5cqw,58px);animation:boxIn .6s .9s ease-out both,bob 8s 1.5s ease-in-out infinite}
.pin{right:7%;bottom:calc(56% + 10px);width:clamp(30px,8cqw,54px);animation:pinIn 4.5s 1s ease-in-out infinite both}

/* 2. képernyő */
.how{background:#0F2A55;color:#fff;display:flex}
.how-in{padding-block:clamp(24px,7vh,72px) clamp(18px,4vh,36px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,4vh,40px)}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;color:#8FA8E8}
h2{font-size:clamp(30px,min(4.4vw,7vh),56px);font-weight:800;letter-spacing:-.03em;margin:10px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{padding:clamp(20px,3.4vh,34px);border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.n{font-size:15px;font-weight:800;color:#F97316}
h3{font-size:clamp(19px,3vh,24px);font-weight:800;letter-spacing:-.02em;margin:14px 0 0}
.card p{font-size:clamp(14.5px,2vh,17px);line-height:1.5;color:#B8C6E4;margin:6px 0 0}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.f-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:#fff;font-size:16px}
.f-brand img{width:28px;height:28px;display:block}
.f-copy{font-size:13.5px;color:#8FA8E8}

@keyframes enter{from{transform:translateX(-115%)}to{transform:none}}
@keyframes bump{0%,100%{transform:none}50%{transform:translateY(-1px)}}
@keyframes lines{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(-10px);opacity:.75}}
@keyframes road{to{transform:translateX(-84px)}}
@keyframes city{to{transform:translateX(-220px)}}
@keyframes wind{0%{transform:translateX(110cqw);opacity:0}10%{opacity:1}100%{transform:translateX(-160px);opacity:0}}
@keyframes boxIn{from{opacity:0;transform:translateY(14px) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(-6deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes pinIn{0%{opacity:0;transform:translateY(-60px)}14%{opacity:1;transform:translateY(0)}20%{transform:translateY(-10px)}26%,100%{transform:translateY(0)}}

/* telefon / keskeny: a kék panel a szöveg alá kerül, de a két képernyő marad */
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .copy{padding:18px 0 26px}
  .blue{height:min(100%,clamp(240px,42vh,380px))}
  .headline{margin:clamp(20px,6vh,56px) 0 0}
  h1{font-size:clamp(34px,min(10.5vw,6.6vh),56px)}
  .cards{grid-template-columns:1fr;gap:12px}
  .how-in{justify-content:space-between;padding-top:clamp(20px,5vh,40px);gap:14px}
  .card{padding:14px 18px}
  .card h3{margin-top:4px}
  .card p{margin-top:4px}
  h2{font-size:clamp(26px,min(8vw,4.6vh),40px)}
}
@media (max-width:820px) and (max-height:640px){.lead{display:none}}
@media (max-width:480px){footer{padding:14px 16px}.f-copy{font-size:12.5px}.wordmark{font-size:20px}}
@media (prefers-reduced-motion:reduce){
  .city,.road,.wind span,.lines,.truck,.box-a,.box-b,.box-c,.pin{animation:none!important}
  .mover{animation:none}
  .box-a,.box-b,.box-c{transform:rotate(-6deg)}
}