/* ---------- HERO: photo + floating phone + captions ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;color:#fff;isolation:isolate;margin-top:-1px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 58%;z-index:-2;transform:scale(1.04);animation:heroZoom 24s ease-in-out infinite alternate}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.45) 0%,rgba(10,12,16,0) 26%,rgba(10,12,16,0) 70%,rgba(10,12,16,.35) 100%)}
@keyframes heroZoom{to{transform:scale(1.1)}}
/* Fallback sky + wet tarmac reflection when no hero photo is supplied */
.hero-bg-fallback{background:
  radial-gradient(120% 60% at 30% 58%,rgba(255,206,150,.85) 0%,rgba(255,206,150,0) 55%),
  radial-gradient(80% 40% at 80% 20%,rgba(140,160,190,.6),transparent 70%),
  linear-gradient(180deg,#46536a 0%,#6e7c92 22%,#a99a8e 44%,#e3b98d 56%,#cfa784 58%,#8d8a8f 66%,#5d6676 80%,#3b4250 100%)}
.hero-reflect{position:absolute;left:0;right:0;top:57%;bottom:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);mask:linear-gradient(180deg,#000,transparent);-webkit-mask:linear-gradient(180deg,#000,transparent);opacity:.8}
.hero-bg:not(.hero-bg-fallback) .hero-reflect{display:none}

.phone-stage{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;place-items:center;padding:110px 0 170px;perspective:1600px}
.phone{--pw:min(76vw,calc((100svh - 300px) * .462),340px);--rx:6deg;--ry:-10deg;width:var(--pw);aspect-ratio:9/19.5;position:relative;border-radius:calc(var(--pw) * .16);padding:calc(var(--pw) * .028);
  background:linear-gradient(145deg,#d9d9db,#7b7c80 30%,#2b2b2e 52%,#9c9da1 80%,#e7e7e9);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 50px 90px -30px rgba(0,0,0,.65),0 22px 40px -20px rgba(0,0,0,.5);
  transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1.2deg);transform-style:preserve-3d;transition:transform .9s var(--ease);animation:float 7s ease-in-out infinite;container-type:inline-size}
.phone::before{content:"";position:absolute;inset:calc(var(--pw) * .012);border-radius:calc(var(--pw) * .15);background:#0b0b0c}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.ph-screen{position:relative;height:100%;border-radius:calc(var(--pw) * .135);overflow:hidden;background:#161616;color:#fff;font-size:11px;font-size:3.6cqw;font-family:var(--f);letter-spacing:-.01em;line-height:1.3;transition:background .6s}
.phone.s5 .ph-screen{background:#fff}
.ph-island{position:absolute;top:2.9%;left:50%;width:31%;height:4.6%;margin-left:-15.5%;border-radius:99px;background:#000;z-index:9}
.ph-status{position:absolute;top:3.4%;left:0;right:0;padding:0 8.5%;display:flex;justify-content:space-between;align-items:center;font-size:1.25em;font-weight:600;z-index:8;transition:color .5s}
.ph-ind{display:flex;gap:.35em;align-items:center}.ph-ind svg{height:.78em;width:auto}
.phone.s5 .ph-status{color:#111}
.ph-homebar{position:absolute;bottom:1.6%;left:50%;width:36%;height:.42em;margin-left:-18%;border-radius:9px;background:rgba(255,255,255,.85);z-index:9;transition:background .5s}
.phone.s5 .ph-homebar{background:#111}

.scr{position:absolute;inset:0;padding:15% 6.5% 0;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.phone.resetting .scr,.phone.resetting .ph-notif{opacity:0!important;transition:opacity .5s}

/* Home */
.scr-home{background:radial-gradient(120% 60% at 50% 0%,#2a2a2a,#161616 60%)}
.phone.s4 .scr-home{opacity:0;transform:translateX(-14%) scale(.98)}
.h-date{color:rgba(255,255,255,.55);font-size:1.05em;margin-top:.4em}
.h-hello{font-size:2.55em;font-weight:400;letter-spacing:-.045em;line-height:1.02;margin-top:.2em}
.h-hello span{display:block;color:rgba(255,255,255,.42)}
.h-search{display:flex;align-items:center;gap:.6em;margin-top:1.1em;height:3.4em;border-radius:1.7em;background:rgba(255,255,255,.08);padding:0 1.1em;font-size:1.1em}
.h-search .ico{width:1.2em;height:1.2em;opacity:.7}
.h-caret{width:1.5px;height:1.2em;background:#fff;animation:caret 1s steps(1) infinite;margin-left:-.45em}
@keyframes caret{50%{opacity:0}}
.h-feature{position:relative;margin-top:1.3em;border-radius:1.6em;overflow:hidden;aspect-ratio:1.25;background:#222}
.h-feature-media,.d-media{position:absolute;inset:0}
.h-feature-media img,.d-media img,.h-thumb img{width:100%;height:100%;object-fit:cover}
.h-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
.h-badge{position:absolute;top:.9em;left:.9em;z-index:2;background:#fff;color:#111;font-size:.95em;font-weight:600;padding:.3em .7em;border-radius:99px;opacity:0;transform:scale(.6);transition:all .5s cubic-bezier(.3,1.6,.5,1)}
.phone.s2 .h-badge{opacity:1;transform:none}
.h-feature-info{position:absolute;left:1.1em;right:1.1em;bottom:.9em;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:.5em}
.h-feature-info b{display:block;font-size:1.45em;font-weight:500;letter-spacing:-.03em}
.h-feature-info small{color:rgba(255,255,255,.7);font-size:.92em}
.h-price{text-align:right}
.h-price s{display:block;font-size:.9em;color:rgba(255,255,255,.55)}
.odo{display:inline-flex;font-size:1.9em;font-weight:500;letter-spacing:-.03em;line-height:1;height:1em;opacity:0;transition:opacity .3s}
.phone.s2 .odo{opacity:1}
.odo-d{display:inline-block;height:1em;overflow:hidden}
.odo-col{display:flex;flex-direction:column;transition:transform 1.2s cubic-bezier(.2,.85,.25,1)}
.odo-col span,.odo-s{height:1em;line-height:1}
.h-label{color:rgba(255,255,255,.55);margin:1.4em 0 .7em;font-size:1.05em}
.h-row{display:flex;align-items:center;gap:.8em;background:rgba(255,255,255,.06);border-radius:1.1em;padding:.6em;margin-bottom:.55em;transition:opacity .6s,transform .6s}
.phone.filtered .h-row-1{opacity:.12;transform:translateX(12%)}
.h-thumb{width:3.6em;height:3.6em;border-radius:.8em;overflow:hidden;flex:none;position:relative;background:#333}
.h-row-t{flex:1;min-width:0}.h-row-t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-row-t small{color:rgba(255,255,255,.55);font-size:.9em}
.h-row-p{font-weight:500}
.h-tabs{position:absolute;left:6%;right:6%;bottom:5.5%;height:4.6em;border-radius:2.3em;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-around}
.h-tabs .ico{width:1.7em;height:1.7em;opacity:.55}.h-tabs .ico:first-child{opacity:1}
.h-avatar{width:1.9em;height:1.9em;border-radius:50%;background:linear-gradient(135deg,#bbb,#555)}

/* Notification */
.ph-notif{position:absolute;top:8.4%;left:4.5%;right:4.5%;z-index:7;display:flex;gap:.8em;align-items:center;padding:.9em 1em;border-radius:1.5em;background:rgba(245,245,245,.92);color:#111;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-160%);opacity:0;transition:transform .7s cubic-bezier(.3,1.3,.5,1),opacity .4s}
.phone[data-scene="3"] .ph-notif{transform:none;opacity:1}
.ph-notif-ico{width:2.6em;height:2.6em;border-radius:.7em;background:#161616;display:grid;place-items:center;flex:none}
.mini-jet{width:1.8em;color:#fff;transform:rotate(-18deg)}
.ph-notif-txt{font-size:1.02em;line-height:1.35}.ph-notif-txt em{font-style:normal;color:#888;float:right;font-size:.9em}

/* Tap */
.ph-tap{position:absolute;width:4.2em;height:4.2em;margin:-2.1em 0 0 -2.1em;border-radius:50%;border:2px solid rgba(255,255,255,.95);background:rgba(255,255,255,.18);opacity:0;z-index:8;pointer-events:none}
.ph-tap.go{animation:tap 1s var(--ease)}
.phone.s4 .ph-tap.go{border-color:#111;background:rgba(0,0,0,.08)}
@keyframes tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}

/* Detail */
.scr-detail{padding:0;background:#161616;opacity:0;transform:translateX(28%)}
.phone.s4 .scr-detail{opacity:1;transform:none}
.phone.s5 .scr-detail{opacity:0;transform:scale(.96)}
.d-media{bottom:auto;height:47%;}
.d-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,#161616)}
.d-body{position:absolute;top:41%;left:6.5%;right:6.5%;bottom:0}
.d-badges{display:flex;gap:.5em}
.d-badges span{display:inline-flex;align-items:center;gap:.35em;padding:.4em .8em;border-radius:99px;background:rgba(255,255,255,.12);font-size:.95em}
.d-badges .ico{width:1.1em;height:1.1em}
.scr-detail h3{font-size:2.35em;font-weight:400;letter-spacing:-.045em;margin:.35em 0 .2em}
.d-meta{color:rgba(255,255,255,.62);font-size:.98em}
.d-price{margin-top:1em;background:rgba(255,255,255,.07);border-radius:1.3em;padding:1em 1.1em}
.d-price div{display:flex;justify-content:space-between;align-items:baseline}
.d-price b{font-size:2.1em;font-weight:500;letter-spacing:-.03em}
.d-price p{color:rgba(255,255,255,.55);font-size:.9em;margin-top:.4em}
.d-op{display:flex;gap:.8em;align-items:center;margin-top:1em}
.d-op i{width:2.8em;height:2.8em;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:1.05em;font-family:Georgia,serif}
.d-op b{display:block;font-weight:500}.d-op small{color:rgba(255,255,255,.55)}
.d-cta{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:100%;height:3.8em;border-radius:2em;background:#fff;color:#111;display:grid;place-items:center;font-weight:600;font-size:1.05em;transition:width .45s var(--ease)}
.d-cta>*{grid-area:1/1}
.d-spin{width:1.5em;height:1.5em;border-radius:50%;border:2px solid #111;border-right-color:transparent;opacity:0;animation:spin .8s linear infinite}
.phone.busy .d-cta{width:3.8em}.phone.busy .d-cta-label{opacity:0}.phone.busy .d-spin{opacity:1}
.d-cta-label{transition:opacity .2s}
@keyframes spin{to{transform:rotate(360deg)}}

/* Confirmation */
.scr-confirm{background:#fff;color:#111;opacity:0;transform:translateY(5%);padding-top:17%}
.phone.s5 .scr-confirm{opacity:1;transform:none}
.c-check{width:3.4em;height:3.4em;border-radius:50%;background:#161616;color:#fff;display:grid;place-items:center;transform:scale(.4);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .2s}
.phone.s5 .c-check{transform:none}
.c-check .ico{width:1.6em;height:1.6em}
.scr-confirm h3{font-size:2.25em;font-weight:400;letter-spacing:-.045em;margin:.5em 0 .7em;line-height:1.05}
.pass{background:#161616;color:#fff;border-radius:1.4em;padding:1.1em 1.2em .9em;position:relative}
.pass-top,.pass-mid{display:flex;justify-content:space-between;align-items:flex-start}
.pass-top b{font-size:2.4em;font-weight:500;letter-spacing:-.03em;line-height:1}
.pass small{display:block;color:rgba(255,255,255,.55);font-size:.9em}
.pass .r{text-align:right}
.pass-arc{width:34%;margin-top:.6em;color:#fff}
.pass-mid{margin-top:.8em}.pass-mid b{font-weight:500;font-size:1.05em}
.pass-cut{position:relative;margin:.8em -1.2em .7em;border-top:1.5px dashed rgba(255,255,255,.3)}
.pass-cut::before,.pass-cut::after{content:"";position:absolute;top:-.7em;width:1.4em;height:1.4em;border-radius:50%;background:#fff}
.pass-cut::before{left:-.7em}.pass-cut::after{right:-.7em}
.pass-bot{display:flex;justify-content:space-between;align-items:center;gap:.8em}
.barcode{flex:1;height:2.6em;background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px,#fff 3px 5px,transparent 5px 6px,#fff 6px 7px,transparent 7px 10px)}
.ref{font-family:var(--fm);font-size:.85em;letter-spacing:.12em;color:rgba(255,255,255,.7)}
.c-label{color:#888;margin:1.2em 0 .6em}
.c-day{list-style:none;margin:0;padding:0}
.c-day li{position:relative;display:flex;gap:1em;align-items:center;padding:.45em 0 .45em 1.8em;font-size:1.05em}
.c-day li i{position:absolute;left:0;top:50%;width:1em;height:1em;margin-top:-.5em;border-radius:50%;border:1.5px solid #111;background:#fff}
.c-day li:not(:last-child)::after{content:"";position:absolute;left:.47em;top:calc(50% + .5em);height:calc(100% - .2em);border-left:1.5px solid #ccc}
.c-day li.on i{background:#111}
.c-day b{font-weight:500;font-variant-numeric:tabular-nums}
.c-refund{display:flex;align-items:center;gap:.6em;margin-top:1em;padding:.9em 1.1em;border-radius:1.2em;background:#f3f3f3;color:#555}
.c-refund .ico{width:1.2em;height:1.2em}

/* Captions */
.hero-captions{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,620px);display:grid;z-index:5}
.cap{grid-area:1/1;align-self:end;margin:0 auto;text-align:center;background:rgba(238,238,236,.86);color:#161616;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:30px;padding:16px 28px;font-size:clamp(21px,5.6vw,30px);font-weight:400;letter-spacing:-.035em;line-height:1.12;box-shadow:0 10px 40px -10px rgba(0,0,0,.35);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease);text-wrap:balance}
.cap.is-on{opacity:1;transform:none}
.hero-dots{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.hero-dots i{width:6px;height:6px;border-radius:9px;background:rgba(255,255,255,.4);transition:width .4s var(--ease),background .4s}
.hero-dots i.on{width:22px;background:#fff}
.hero-scroll{position:absolute;right:var(--gut);bottom:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);writing-mode:vertical-rl;display:none}
@media(min-width:900px){
  .hero-scroll{display:block}
  .phone{--pw:min(calc((100svh - 220px) * .462),380px)}
  .phone-stage{padding:100px 0 140px}
}
@media(max-height:700px){.phone-stage{padding:90px 0 150px}}
@media(prefers-reduced-motion:reduce){.phone,.hero-bg{animation:none}}