:root{
  --blue:#1d4ed8; --blue2:#2563eb; --blue3:#60a5fa;
  --ink:#101828; --muted:#667085; --line:#e4e7ec;
  --paper:#f7f8fa; --dark:#0b1220; --dark2:#111a2b;
  --white:#fff; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin:auto}
.nav{height:76px;display:flex;align-items:center;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,231,236,.85)}
.navin{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-.04em}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-weight:750}.brand i{font-style:normal;color:var(--blue2);font-weight:600}
.links{display:flex;align-items:center;gap:27px;font-size:14px;color:#475467;font-weight:550}
.links a:not(.btn):hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:650;transition:.2s ease}
.btn.primary{background:var(--blue);color:#fff;padding:12px 17px;box-shadow:0 7px 20px rgba(29,78,216,.17)}
.btn.primary:hover{background:#1945bf;transform:translateY(-1px)}
.btn.secondary{background:#fff;border:1px solid var(--line);padding:12px 17px}
.btn.secondary:hover{background:#f8fafc;border-color:#cbd5e1}

/* ---------- HERO: deliberately quiet, product-first ---------- */
.hero{background:var(--paper);overflow:hidden;border-bottom:1px solid var(--line)}
.heroIn{padding:92px 0 74px;text-align:center}
.eyebrow,.kicker{font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.14em;font-weight:750;color:var(--blue);margin:0 0 20px}
.hero h1{font-size:clamp(50px,6.5vw,78px);line-height:.98;letter-spacing:-.067em;font-weight:700;margin:0 auto;max-width:900px}
.hero h1 em{font-style:normal;color:var(--blue2)}
.lede{max-width:620px;margin:25px auto 0;color:var(--muted);font-size:17px;line-height:1.65}
.actions{display:flex;justify-content:center;gap:10px;margin-top:27px}

/* cinematic product stage */
.demo{margin:65px auto 0;max-width:1160px}
.stage{position:relative;height:585px;perspective:1400px}
.glow{position:absolute;left:14%;right:14%;top:16%;height:52%;background:radial-gradient(ellipse,rgba(37,99,235,.12),rgba(37,99,235,0) 68%);filter:blur(22px);pointer-events:none}
.window{position:absolute;background:#fff;border:1px solid rgba(16,24,40,.10);box-shadow:0 30px 80px rgba(16,24,40,.15);border-radius:17px;overflow:hidden;will-change:transform}
.map{left:3%;right:5%;top:0;z-index:3;transform:translateZ(0)}
.sched{width:62%;right:-1%;bottom:0;z-index:4;transform:translate3d(0,18px,-70px) rotateY(-1.5deg);box-shadow:0 22px 60px rgba(16,24,40,.17)}
.chrome{height:40px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid #eaecf0;background:rgba(255,255,255,.96)}
.chrome i{display:block;width:6px;height:6px;border-radius:50%;background:#d0d5dd}
.chrome__date{margin-left:auto;font-size:10px;color:#98a2b3;letter-spacing:.02em}
.chrome__date b{color:#344054;margin-left:5px;font-weight:650}
.frames{position:relative;aspect-ratio:993/514;background:#f2f4f7;overflow:hidden}
.frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
.frames img:first-child{opacity:1}
.label{position:absolute;left:17px;bottom:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid rgba(16,24,40,.08);border-radius:8px;padding:7px 10px;font-size:9px;color:#475467;font-weight:650;letter-spacing:.03em;box-shadow:0 4px 15px rgba(16,24,40,.08)}
.schedView{position:relative;aspect-ratio:1675/718;background:#f8fafc;overflow:hidden}
.schedView img{width:100%;height:100%;object-fit:cover}
.schedLine{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);left:4%;box-shadow:0 0 0 4px rgba(37,99,235,.08);transition:left .45s ease}
.sync{position:absolute;left:50%;top:56%;z-index:7;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(29,78,216,.12);background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 8px 30px rgba(16,24,40,.12);font-size:10px;font-weight:650;color:#344054;white-space:nowrap}
.sync .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.scrub{position:relative;margin:22px auto 0;max-width:950px;text-align:left}
.scrub__date{display:block;text-align:center;font-size:12px;font-weight:650;letter-spacing:.04em;color:#344054;margin-bottom:11px}
.scrub__track{position:relative;padding:0 0 20px}
.scrub__range{appearance:none;width:100%;height:3px;border-radius:99px;background:#d0d5dd;outline:none;display:block}
.scrub__range::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 2px 8px rgba(16,24,40,.22);cursor:grab}
.scrub__range::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 2px 8px rgba(16,24,40,.22);cursor:grab}
.scrub__ends{display:flex;justify-content:space-between;margin-top:9px;color:#98a2b3;font-size:9px}
.scrub__hint{display:block;text-align:center;color:#98a2b3;font-size:10px;margin-top:4px}
.caption{margin-top:14px;text-align:center;color:#98a2b3;font-size:11px}

/* ---------- statement ---------- */
.statement{padding:125px 0 110px}
.statement .grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}
.statement h2{font-size:clamp(38px,4.7vw,59px);line-height:1.03;letter-spacing:-.057em;margin:0}
.statement h2 span{color:var(--blue2)}
.statement .grid > p{font-size:17px;line-height:1.75;color:var(--muted);margin:0;max-width:520px}

/* ---------- dark product story ---------- */
.dark{background:var(--dark);color:#fff;padding:120px 0 130px}
.darkHead{max-width:690px;margin-bottom:80px}
.dark .kicker{color:#8fb9ff}
.darkHead h2{font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.06em;margin:0}
.darkHead>p:last-child{color:#a9b4c6;font-size:17px;line-height:1.7;margin:24px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #293448;border-bottom:1px solid #293448}
.card{padding:35px 28px 42px;border-right:1px solid #293448}
.card:last-child{border-right:0}
.num{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#718096;letter-spacing:.04em}
.card h3{font-size:26px;line-height:1.1;letter-spacing:-.035em;margin:15px 0 13px}
.card p{font-size:14px;line-height:1.7;color:#a9b4c6;margin:0}
.feature{margin-top:85px!important;background:#111a2b;border:1px solid #293448;border-radius:20px;overflow:hidden;padding:0!important;display:grid;grid-template-columns:1fr 1fr}
.feature__text{padding:62px 55px;display:flex;flex-direction:column;justify-content:center}
.feature__text h3{font-size:38px;line-height:1.04;letter-spacing:-.045em;margin:15px 0}
.feature__text p{font-size:15px;line-height:1.75;color:#a9b4c6;margin:0}
.facts{list-style:none;padding:22px 0 0;margin:0;border-top:1px solid #293448;margin-top:26px;display:grid;gap:9px}
.facts li{font-size:12px;color:#c3ccda}.facts li:before{content:"✓";color:#8fb9ff;margin-right:8px}
.sheets{min-height:560px;position:relative;background:#0e1726;overflow:hidden}
.sheet{position:absolute;width:61%;height:auto;border-radius:4px;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.sheet--back{left:10%;top:13%;transform:rotate(-4deg);opacity:.62}
.sheet--front{right:9%;top:10%;transform:rotate(3deg)}
/* Logistics: app window bleeds off the card's right edge (clipped by .feature's overflow) */
.feature .shot{position:relative;background:radial-gradient(ellipse at 30% 50%,rgba(37,99,235,.16),rgba(37,99,235,0) 65%),#0e1726;display:flex;align-items:center;padding:56px 0 56px 40px;min-height:520px}
.shot__win{width:132%;flex:none;border:1px solid #2c3a52;border-radius:12px;overflow:hidden;background:#121d2e;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(143,185,255,.04)}
.feature .shot .chrome{height:30px;background:#121d2e;border-color:#293448}
.feature .shot .chrome i{background:#3a4a63}
.feature .shot img{width:100%;height:auto}
#logistics{margin-top:28px!important}

/* ---------- CTA / footer ---------- */
.cta{padding:125px 0;text-align:center;background:var(--paper);border-top:1px solid var(--line)}
.cta h2{font-size:clamp(44px,5.2vw,68px);line-height:1;letter-spacing:-.06em;max-width:760px;margin:0 auto}
.cta p{color:var(--muted);font-size:16px;margin:23px 0 29px}
footer{padding:43px 0 28px}
.foot{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.footlinks{display:flex;gap:27px;font-size:12px;color:#667085}
.foot small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:19px;color:#98a2b3;font-size:10px}

/* ---------- motion ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:heroIn .8s .05s both}
.hero h1{animation:heroIn .9s .14s both}
.hero .lede{animation:heroIn .8s .25s both}
.hero .actions{animation:heroIn .8s .34s both}
.demo{animation:heroIn 1.15s .45s both}
.map{animation:floatMap 8s ease-in-out 1.6s infinite}
.sched{animation:floatSchedule 8s ease-in-out 1.7s infinite}
@keyframes floatMap{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes floatSchedule{0%,100%{transform:translate3d(0,18px,-70px) rotateY(-1.5deg)}50%{transform:translate3d(0,11px,-70px) rotateY(-1.5deg)}}

@media(max-width:900px){
 .links a:not(.btn){display:none}
 .heroIn{padding-top:70px}
 .stage{height:470px}
 .statement .grid{grid-template-columns:1fr;gap:30px}
 .cards{grid-template-columns:1fr}
 .card{border-right:0;border-bottom:1px solid #293448}
 .card:last-child{border-bottom:0}
 .feature{grid-template-columns:1fr}
 .sheets{min-height:500px}
 .feature .shot{min-height:0;padding:48px 0 48px 40px}
}
@media(max-width:620px){
 .wrap{width:calc(100% - 28px)}
 .nav{height:66px}
 .links .btn{padding:10px 13px}
 .heroIn{padding:58px 0 55px}
 .hero h1{font-size:47px}
 .lede{font-size:15px}
 .actions{flex-direction:column}
 .stage{height:350px}
 .map{left:0;right:0}
 .sched{width:72%;right:-4%}
 .sync{top:62%;font-size:8px;padding:7px 10px}
 .scrub{margin-top:15px}
 .statement{padding:80px 0}
 .dark{padding:80px 0}
 .darkHead{margin-bottom:55px}
 .feature__text{padding:42px 28px}
 .feature__text h3{font-size:31px}
 .sheets{min-height:390px}
 .sheet{width:68%}
 .feature .shot{padding:28px 0 28px 20px;min-height:0}
 .cta{padding:85px 0}
 .foot{grid-template-columns:1fr}
 .footlinks{flex-wrap:wrap}
 .foot small{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}