/* Lets Delivery product page: warm palette on top of xo.css */
body.ld{
  --bg:#0d0805; --bg2:#160e08; --ink:#fff6ea; --mute:#c2ab92;
  --a:#ff8a1c; --b:#ffd23f; --c:#ff5e5b;
  --grad:linear-gradient(120deg,var(--a),var(--b) 55%,var(--c));
  --glass:rgba(255,220,180,.05); --line:rgba(255,220,180,.12);
}
.ld ::selection{background:var(--a);color:#1a0d00}
.ld .eyebrow{color:var(--b)}
.ld .eyebrow::before{background:var(--b)}
.ld .btn-warm,.ld .btn-glow{color:#1d1300}
.ld #nav a.active{background:rgba(255,200,60,.16)}

/* hero */
.ld-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:150px 0 100px;background:radial-gradient(ellipse at 70% 20%,rgba(255,138,28,.22),transparent 55%),radial-gradient(ellipse at 10% 90%,rgba(255,94,91,.18),transparent 50%)}
.sun{position:absolute;width:520px;height:520px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,#ffd23f 0,#ff8a1c 35%,transparent 68%);opacity:.35;animation:pulse 6s ease-in-out infinite}
.cloud{position:absolute;height:60px;border-radius:60px;background:rgba(255,240,220,.06);animation:cloud linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:70px;height:70px;left:24px;top:-34px}
.cloud::after{width:50px;height:50px;left:80px;top:-22px}
.c1{width:180px;top:18%;animation-duration:60s}
.c2{width:240px;top:32%;animation-duration:85s;animation-delay:-40s;opacity:.7}
.c3{width:150px;top:9%;animation-duration:70s;animation-delay:-20s;opacity:.5}
@keyframes cloud{from{transform:translateX(-300px)}to{transform:translateX(calc(100vw + 300px))}}
.route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.route path{fill:none;stroke:rgba(255,210,63,.35);stroke-width:3;stroke-dasharray:14 16;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-60}}
.ld-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;z-index:3}
.ld-logo{width:min(440px,90%);margin:6px 0 22px;filter:drop-shadow(0 18px 40px rgba(255,138,28,.45));opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .8s var(--ease) .3s,transform 1.1s cubic-bezier(.34,1.56,.64,1) .3s}
.ready .ld-logo{opacity:1;transform:none;animation:float 5s ease-in-out 1.6s infinite}
.ld-title{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:22px}
.ld-title .line:nth-child(2) .split{transition-delay:.15s}
.stores{display:flex;gap:14px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;border-radius:14px;background:#000;border:1px solid rgba(255,255,255,.22);transition:.3s var(--ease)}
.store:hover{transform:translateY(-4px);border-color:var(--b)}
.store svg{width:26px;height:26px}
.store span{display:flex;flex-direction:column;line-height:1.15;font-family:"Space Grotesk";font-weight:600;font-size:1.05rem}
.store small{font-family:Inter;font-weight:400;font-size:.68rem;color:#bbb;text-transform:uppercase;letter-spacing:.04em}

.ld-hero-visual{position:relative;opacity:0;transform:translateY(60px) rotate(2deg);transition:opacity 1s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.ready .ld-hero-visual{opacity:1;transform:none}
.phone{position:relative;padding:12px;border-radius:34px;background:linear-gradient(145deg,#2a2018,#0c0805);border:1px solid rgba(255,220,180,.18);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.04),0 0 80px rgba(255,138,28,.25);transition:transform .25s linear}
.phone::before{content:"";position:absolute;left:4px;top:50%;width:4px;height:60px;margin-top:-30px;border-radius:4px;background:#000}
.phone-screen{border-radius:24px;overflow:hidden;aspect-ratio:16/9}
.phone-screen>img{width:100%;height:100%;object-fit:cover}
.pop{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:rgba(30,20,12,.96);border:1px solid rgba(255,220,180,.2);box-shadow:0 18px 40px rgba(0,0,0,.5);transition:transform .25s linear}
.pop b{font-family:"Space Grotesk";font-size:1rem}
.pop small{color:var(--mute);font-size:.78rem}
.pop1{top:-28px;left:-20px;padding-right:40px;flex-direction:column;align-items:flex-start;gap:0;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 1.4s both}
.pop1::before{content:"";position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#2dff9b;box-shadow:0 0 0 0 #2dff9b;animation:ping 1.6s infinite}
.pop2{right:-18px;top:28%;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 1.7s both}
.pop2 .coin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc21a 50%,#d98a00);color:transparent;box-shadow:0 0 18px rgba(255,200,40,.7);animation:spin3d 2.4s linear infinite}
.pop2 b{color:var(--b);font-size:1.3rem}
.pop3{bottom:-38px;left:-56px;flex-direction:column;align-items:flex-start;gap:2px;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 2s both}
.pop3 .stars{color:#ffc94d;letter-spacing:2px}
@keyframes popin{from{opacity:0;scale:.4}}
@keyframes spin3d{to{transform:rotateY(360deg)}}

.ld-marquee{background:linear-gradient(90deg,#ff8a1c,#ffb627);border:0}
.ld-marquee .marquee-track span{color:#1d1000;-webkit-text-stroke:0}
.ld-marquee .marquee-track span:nth-child(4n+1){color:#fff}
.ld-marquee .marquee-track i{color:#1d1000}

/* loop cards */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px}
.loop-card{position:relative;padding:40px 32px 36px;border-radius:26px;background:linear-gradient(160deg,rgba(255,170,80,.1),rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden;--mx:50%;--my:50%}
.loop-card.reveal.in{transition:transform .15s linear,opacity .9s,filter .9s}
.loop-card:hover .card-glow{opacity:1}
.ld .card-glow{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,160,40,.28),transparent 55%)}
.loop-emoji{font-size:3rem;width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:rgba(255,200,60,.12);border:1px solid rgba(255,200,60,.25);margin-bottom:24px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.loop-card:hover .loop-emoji{transform:rotate(-10deg) scale(1.12)}
.loop-step{position:absolute;top:26px;right:30px;font-family:"Lilita One","Space Grotesk";font-size:3.2rem;color:transparent;-webkit-text-stroke:1.5px rgba(255,210,63,.25);line-height:1}
.loop-card h3{font-size:1.4rem;margin-bottom:10px}
.loop-card p{color:var(--mute)}

/* garage */
.rides{background:radial-gradient(ellipse at center,rgba(255,138,28,.08),transparent 70%)}
.garage{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ride{padding:30px 16px;border-radius:22px;text-align:center;background:var(--glass);border:1px solid var(--line);transition:.4s var(--ease)}
.ride:hover{transform:translateY(-10px);border-color:var(--b);box-shadow:0 20px 40px rgba(255,138,28,.18)}
.ride-icon{font-size:2.8rem;margin-bottom:12px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ride:hover .ride-icon{transform:translateX(8px) rotate(-6deg)}
.ride b{display:block;font-family:"Space Grotesk";font-size:1.05rem}
.ride small{color:var(--mute);font-size:.8rem}
.ride.locked{background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,rgba(255,255,255,.04) 10px 20px);border-style:dashed}
.ride.locked .ride-icon{filter:grayscale(1);opacity:.6}
.ride.locked:hover .ride-icon{animation:shake .5s}
@keyframes shake{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

/* districts */
.districts{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.district{position:relative;border-radius:26px;overflow:hidden;min-height:420px;border:1px solid var(--line);translate:0 var(--py,0)}
.district>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.district:hover>img{transform:scale(1.08)}
.district::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(13,8,5,.95))}
.district-info{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2}
.district-info h3{font-family:"Lilita One","Space Grotesk";font-weight:400;font-size:2rem;letter-spacing:.01em;margin:10px 0 6px}
.district-info p{color:#e6d4bf;font-size:.95rem}
.tag{display:inline-block;padding:5px 12px;border-radius:100px;font-size:.75rem;font-weight:600;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25)}
.tag-open{background:#2dff9b;color:#062014;border-color:transparent}
.mystery>img{filter:blur(14px) saturate(.4) brightness(.6);transform:scale(1.2)}
.mystery:hover>img{filter:blur(10px) saturate(.6) brightness(.7);transform:scale(1.25)}
.mystery h3{animation:flicker 3s infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}50%{opacity:.3}53%{opacity:1}}

.ld .foot-word{background:linear-gradient(180deg,rgba(255,138,28,.22),transparent 80%);-webkit-background-clip:text;background-clip:text}

/* stats band */
.ld-stats-wrap{padding:40px 0}
.ld-stats-wrap .stats{margin-top:0}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{padding:30px;border-radius:22px;background:var(--glass);border:1px solid var(--line);transition:.4s var(--ease)}
.feat:hover{transform:translateY(-6px);border-color:var(--a)}
.feat>span{font-size:2rem;display:inline-block;margin-bottom:14px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.feat:hover>span{transform:scale(1.25) rotate(-8deg)}
.feat h4{font-family:"Space Grotesk";font-size:1.15rem;margin-bottom:6px}
.feat p{color:var(--mute);font-size:.93rem}

/* notify */
.notify-card{position:relative;max-width:900px;margin:0 auto;padding:70px 40px;border-radius:36px;text-align:center;overflow:hidden;background:linear-gradient(145deg,rgba(255,138,28,.16),rgba(255,94,91,.08));border:1px solid rgba(255,200,60,.3)}
.notify-glow{position:absolute;width:500px;height:500px;left:50%;top:-250px;margin-left:-250px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.35),transparent 65%);animation:pulse 5s infinite}
.notify-logo{width:220px;margin:0 auto 24px;position:relative;animation:float 5s ease-in-out infinite}
.notify-card .h2,.notify-card p{position:relative}
.notify-card p{max-width:560px;margin:0 auto 34px}
.notify-actions{justify-content:center;position:relative}

@media(max-width:1000px){
  .ld-hero-grid{grid-template-columns:1fr}
  .ld-hero-visual{max-width:620px;margin:30px auto 0;width:100%}
  .loop,.feats{grid-template-columns:1fr 1fr}
  .garage{grid-template-columns:repeat(3,1fr)}
  .districts{grid-template-columns:1fr}
  .district{min-height:0;aspect-ratio:16/10}
}
@media(max-width:620px){
  .loop,.feats{grid-template-columns:1fr}
  .garage{grid-template-columns:1fr 1fr}
  .pop1{left:0}.pop2{right:0}
  .notify-card{padding:50px 22px}
}