/* ===== 2 ONLINE — scroll menü → ödeme seç → panel + %0 ===== */
.v2 {
  --cycle: 24s;
  --pw: 132px;          /* past / strip size */
  --pw-focus: 188px;    /* active step (2–5) */
  --pw-hero: 220px;     /* first step hero */
  --pgap: 14px;
  --pslot: calc(var(--pw) + var(--pgap));
  background: #07090c;
}
.v2 .story { position:absolute; inset:0; }
/* Version label on frame (desktop / mobile export) */
.v2 .ver-badge {
  position:absolute; top:0.7rem; left:0.85rem; z-index:14;
  display:flex; flex-direction:column; gap:0.12rem;
  pointer-events:none;
  animation:v2badgeIn var(--cycle) linear infinite;
}
@keyframes v2badgeIn {
  0%,3%{opacity:0;transform:translateY(-6px)}
  7%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v2 .ver-badge em {
  font:800 .52rem Outfit,sans-serif; font-style:normal;
  letter-spacing:.14em; text-transform:uppercase;
  color:#ffc86b;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.v2 .ver-badge strong {
  font:700 .78rem Outfit,sans-serif; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.v2.is-mobile .ver-badge em { color:#7eb6ff; }
.v2 .beat {
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
}
/* 5 phone steps · hero then L→R filmstrip · panel finale */
.v2 .b-flow { animation:v2beatFlow var(--cycle) linear infinite; }
.v2 .b-panel { animation:v2beatPanel var(--cycle) linear infinite; }
/* flow 4–70 · panel 70–100 */
@keyframes v2beatFlow {
  0%,3%{opacity:0;visibility:hidden}
  4%{opacity:0;visibility:visible}
  7%{opacity:1}
  67%{opacity:1}
  70%{opacity:0}
  71%,100%{opacity:0;visibility:hidden}
}
@keyframes v2beatPanel {
  0%,69%{opacity:0;visibility:hidden;transform:scale(1.02)}
  70%{opacity:0;visibility:visible;transform:scale(1.02)}
  74%{opacity:1;transform:scale(1)}
  100%{opacity:1;visibility:visible;transform:scale(1)}
}
.v2 .shot {
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:2.5% 2%;
}
.v2 .b-flow .shot {
  background:linear-gradient(160deg,#12151c,#07090c 70%);
  place-items:stretch; align-content:center;
  padding:2% 0 2%;
}
.v2 .b-panel .shot {
  background:
    radial-gradient(ellipse 55% 50% at 50% 35%, rgba(125,255,178,.1), transparent 55%),
    linear-gradient(165deg,#12151c,#07090c 60%);
}

/* Horizontal progression — 01 hero center → shrink left → 03+ strip */
.v2 .flow-view {
  position:relative; width:100%; height:100%;
  overflow:hidden;
  display:flex; align-items:center;
  mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent);
}
.v2 .flow-track {
  display:flex; align-items:center; gap:var(--pgap);
  height:100%;
  will-change:margin-left;
  animation:v2pan var(--cycle) linear infinite;
  box-sizing:border-box;
  transform:none;
  padding-left:0;
}
/*
  ACTIVE step centered via margin-left (% of parent; may go negative
  so past phones slide off left while focus stays mid-frame).
*/
@keyframes v2pan {
  /* 01 hero alone */
  0%,18%{
    margin-left:calc(50% - var(--pw-hero) / 2);
  }
  /* 02 focus */
  23%,31%{
    margin-left:calc(50% - var(--pw) - var(--pgap) - var(--pw-focus) / 2);
  }
  /* 03 focus */
  37%,43%{
    margin-left:calc(50% - 2 * (var(--pw) + var(--pgap)) - var(--pw-focus) / 2);
  }
  /* 04 focus */
  49%,53%{
    margin-left:calc(50% - 3 * (var(--pw) + var(--pgap)) - var(--pw-focus) / 2);
  }
  /* 05 focus */
  59%,67%{
    margin-left:calc(50% - 4 * (var(--pw) + var(--pgap)) - var(--pw-focus) / 2);
  }
  70%,100%{
    margin-left:4%;
  }
}
.v2 .step {
  flex:0 0 var(--pw); width:var(--pw);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  opacity:0; transform:translateX(36px) scale(.9);
  filter:saturate(.85);
  align-self:center;
  max-height:100%;
}
.v2 .step.s1 { animation:v2step1 var(--cycle) var(--snap) infinite; }
.v2 .step.s2 { animation:v2step2 var(--cycle) var(--snap) infinite; }
.v2 .step.s3 { animation:v2step3 var(--cycle) var(--snap) infinite; }
.v2 .step.s4 { animation:v2step4 var(--cycle) var(--snap) infinite; }
.v2 .step.s5 { animation:v2step5 var(--cycle) var(--snap) infinite; }
/* 01: large center → shrink left as past */
@keyframes v2step1 {
  0%,4%{
    opacity:0;
    flex:0 0 var(--pw-hero); width:var(--pw-hero);
    transform:scale(.94); filter:none;
  }
  7%,18%{
    opacity:1;
    flex:0 0 var(--pw-hero); width:var(--pw-hero);
    transform:none; filter:none;
  }
  22%{
    opacity:1;
    flex:0 0 var(--pw); width:var(--pw);
    transform:none; filter:none;
  }
  25%,100%{
    opacity:.5;
    flex:0 0 var(--pw); width:var(--pw);
    transform:scale(.88); filter:saturate(.7) brightness(.85);
  }
}
/* 02–05: enter large near center → then shrink left when next arrives */
@keyframes v2step2 {
  0%,19%{
    opacity:0;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:translateX(48px) scale(.92); filter:saturate(.85);
  }
  23%,31%{
    opacity:1;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:none; filter:none;
  }
  35%{
    opacity:1;
    flex:0 0 var(--pw); width:var(--pw);
    transform:none; filter:none;
  }
  37%,100%{
    opacity:.5;
    flex:0 0 var(--pw); width:var(--pw);
    transform:scale(.88); filter:saturate(.7) brightness(.85);
  }
}
@keyframes v2step3 {
  0%,33%{
    opacity:0;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:translateX(48px) scale(.92); filter:saturate(.85);
  }
  37%,43%{
    opacity:1;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:none; filter:none;
  }
  47%{
    opacity:1;
    flex:0 0 var(--pw); width:var(--pw);
    transform:none; filter:none;
  }
  49%,100%{
    opacity:.5;
    flex:0 0 var(--pw); width:var(--pw);
    transform:scale(.88); filter:saturate(.7) brightness(.85);
  }
}
@keyframes v2step4 {
  0%,45%{
    opacity:0;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:translateX(48px) scale(.92); filter:saturate(.85);
  }
  49%,53%{
    opacity:1;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:none; filter:none;
  }
  57%{
    opacity:1;
    flex:0 0 var(--pw); width:var(--pw);
    transform:none; filter:none;
  }
  59%,100%{
    opacity:.5;
    flex:0 0 var(--pw); width:var(--pw);
    transform:scale(.88); filter:saturate(.7) brightness(.85);
  }
}
@keyframes v2step5 {
  0%,55%{
    opacity:0;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:translateX(48px) scale(.92); filter:saturate(.85);
  }
  59%,67%{
    opacity:1;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:none; filter:none;
  }
  70%,100%{
    opacity:1;
    flex:0 0 var(--pw-focus); width:var(--pw-focus);
    transform:none; filter:none;
  }
}
.v2 .step-cap {
  display:flex; flex-direction:column; align-items:center; gap:.08rem;
  text-align:center; min-height:2.2rem; flex-shrink:0;
}
.v2 .step-cap .n {
  font:800 .42rem Outfit,sans-serif; letter-spacing:.14em; text-transform:uppercase;
}
.v2 .step.s1 .step-cap .n{color:#a8cfff}
.v2 .step.s2 .step-cap .n{color:#ffd08a}
.v2 .step.s3 .step-cap .n{color:#ffb4b1}
.v2 .step.s4 .step-cap .n{color:#9dffc4}
.v2 .step.s5 .step-cap .n{color:#99f6e4}
.v2 .step-cap strong {
  font:800 .72rem Outfit,sans-serif; color:#fff; line-height:1.1;
}
.v2 .step-cap em {
  font:600 .48rem Outfit,sans-serif; color:var(--muted); font-style:normal;
}
/* hero caption a bit larger while 01 is featured */
.v2 .step.s1 .step-cap { animation:v2capHero var(--cycle) linear infinite; }
@keyframes v2capHero {
  0%,18%{transform:scale(1.12)}
  23%,100%{transform:scale(1)}
}

/* Phone — width follows step (hero grows, then normal) */
.v2 .phone {
  width:100%; aspect-ratio:9/19; height:auto;
  max-height:calc(100% - 2.5rem);
  border-radius:22px; background:#0c0e12;
  border:2px solid #2a3140; padding:8px 6px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  flex-shrink:0; overflow:hidden;
  box-sizing:border-box;
}
.v2 .phone-screen {
  height:100%; border-radius:20px; overflow:hidden;
  background:#f4f5f7; color:#111;
  display:flex; flex-direction:column;
  font-family:Outfit,"IBM Plex Sans",sans-serif;
  position:relative;
}
.v2 .ph-notch {
  height:12px; display:flex; align-items:center; justify-content:center;
  background:#fff; flex-shrink:0;
}
.v2 .ph-notch i { width:40px; height:4px; border-radius:99px; background:#d1d5db; }
.v2 .ph-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem .45rem; background:#fff; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
.v2 .ph-brand {
  display:flex; align-items:center; gap:.28rem;
  font:800 .58rem Outfit,sans-serif;
}
.v2 .ph-brand i {
  width:18px; height:18px; border-radius:5px; background:#6d28d9; color:#fff;
  display:grid; place-items:center; font-style:normal; font-weight:800; font-size:.5rem;
}
.v2 .ph-pill {
  font:700 .4rem Outfit,sans-serif; color:#4b5563;
  padding:.12rem .32rem; border-radius:99px; border:1px solid #e5e7eb; background:#f9fafb;
}
.v2 .ph-pill.cart {
  background:var(--brand); color:#fff; border-color:var(--brand);
  animation:v2cartpill var(--cycle) linear infinite;
}
@keyframes v2cartpill {
  0%,16%{content:none}
}
.v2 .ph-body {
  flex:1; min-height:0; padding:.35rem .4rem .55rem;
  display:flex; flex-direction:column; gap:.28rem; overflow:hidden;
}
.v2 .ph-search {
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  padding:.28rem .38rem; font-size:.42rem; color:#9ca3af; font-weight:600; flex-shrink:0;
}
.v2 .ph-cats { display:flex; gap:.18rem; flex-wrap:wrap; flex-shrink:0; }
.v2 .ph-cats span {
  font:700 .38rem Outfit,sans-serif; padding:.12rem .3rem; border-radius:99px;
  background:#e5e7eb; color:#374151;
}
.v2 .ph-cats span.on { background:#111827; color:#fff; }

/* Scrollable product list — top scroll (not transform) so thumbs keep painting */
.v2 .scroll {
  flex:1; min-height:0; overflow:hidden; position:relative;
}
.v2 .prows {
  display:flex; flex-direction:column; gap:.28rem;
  position:relative; top:0;
  animation:v2scroll var(--cycle) linear infinite;
}
@keyframes v2scroll {
  0%,7%{top:0}
  9%{top:0}
  13%{top:-72px}
  16%{top:-145px}
  19%{top:-218px}
  22%,100%{top:-218px}
}
.v2 .prow {
  display:grid; grid-template-columns:40px 1fr auto; gap:.3rem; align-items:center;
  background:#fff; border:1px solid #e5e7eb; border-radius:9px; padding:.28rem;
  flex-shrink:0;
}
.v2 .pthumb {
  width:40px; height:36px; border-radius:6px; display:block;
  background-color:#e5e7eb;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* Keep decode hot while beats toggle visibility */
.v2 .v2-preload {
  position:absolute; width:1px; height:1px; overflow:hidden; opacity:.01; pointer-events:none;
}
.v2 .prow strong { display:block; font:800 .48rem Outfit,sans-serif; line-height:1.15; }
.v2 .prow em { font-style:normal; font-size:.36rem; color:#6b7280; font-weight:600; }
.v2 .prow .add {
  width:24px; height:24px; border-radius:7px; background:#111827; color:#fff;
  display:grid; place-items:center; font:800 .65rem Outfit,sans-serif;
}
/* staggered + taps while scrolling */
.v2 .prow.hit .add { background:var(--brand); }
.v2 .prow.hit:nth-of-type(2) .add { animation:v2addA var(--cycle) var(--punch) infinite; }
.v2 .prow.hit:nth-of-type(5) .add { animation:v2addB var(--cycle) var(--punch) infinite; }
.v2 .prow.hit:nth-of-type(6) .add { animation:v2addC var(--cycle) var(--punch) infinite; }
.v2 .prow.hit:nth-of-type(8) .add { animation:v2addD var(--cycle) var(--punch) infinite; }
.v2 .prow.hit:nth-of-type(13) .add { animation:v2addE var(--cycle) var(--punch) infinite; }
@keyframes v2addA {
  0%,9%{transform:scale(1)} 11%{transform:scale(.82);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.4)} 13%,100%{transform:scale(1)}
}
@keyframes v2addB {
  0%,12%{transform:scale(1)} 14%{transform:scale(.82);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.4)} 16%,100%{transform:scale(1)}
}
@keyframes v2addC {
  0%,14%{transform:scale(1)} 16%{transform:scale(.82);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.4)} 18%,100%{transform:scale(1)}
}
@keyframes v2addD {
  0%,16%{transform:scale(1)} 18%{transform:scale(.82);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.4)} 20%,100%{transform:scale(1)}
}
@keyframes v2addE {
  0%,18%{transform:scale(1)} 20%{transform:scale(.82);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.4)} 21%,100%{transform:scale(1)}
}
.v2 .cart-bar {
  position:absolute; left:.4rem; right:.4rem; bottom:.4rem;
  background:#111827; color:#fff; border-radius:10px;
  padding:.4rem .5rem; display:flex; justify-content:space-between; align-items:center;
  font:800 .5rem Outfit,sans-serif;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  opacity:0; animation:v2cbar var(--cycle) var(--snap) infinite;
}
@keyframes v2cbar {
  0%,10%{opacity:0;transform:translateY(8px)}
  12%{opacity:1;transform:none}
  19%,100%{opacity:1}
}
.v2 .cart-bar .cnt {
  background:var(--brand); min-width:1.1rem; height:1.1rem; border-radius:99px;
  display:inline-grid; place-items:center; font-size:.45rem; margin-right:.25rem;
  animation:v2cnt var(--cycle) linear infinite;
}
@keyframes v2cnt {
  0%,13%{opacity:1}
}
.v2 .cart-bar b { color:#7dffb2; }

/* Sepet özeti (beat cart) */
.v2 .cart-head { font:800 .62rem Outfit,sans-serif; padding:.05rem 0 .2rem; flex-shrink:0; }
.v2 .cart-lines {
  display:flex; flex-direction:column; gap:.28rem; flex:1; min-height:0;
  overflow:hidden;
}
.v2 .cart-line {
  display:flex; justify-content:space-between; align-items:center;
  padding:.34rem .4rem; background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  font-size:.44rem; font-weight:600;
  opacity:0; animation:v2cline var(--cycle) var(--snap) infinite;
}
.v2 .cart-line:nth-child(1){animation-delay:0s}
.v2 .cart-line:nth-child(2){animation-delay:.05s}
.v2 .cart-line:nth-child(3){animation-delay:.1s}
.v2 .cart-line:nth-child(4){animation-delay:.15s}
.v2 .cart-line:nth-child(5){animation-delay:.2s}
@keyframes v2cline {
  0%,24%{opacity:0;transform:translateX(6px)} 27%{opacity:1;transform:none} 31%,100%{opacity:1}
}
.v2 .cart-line b { font:800 .5rem Outfit,sans-serif; }
.v2 .cart-total {
  display:flex; justify-content:space-between; padding:.3rem .1rem;
  font:800 .62rem Outfit,sans-serif; flex-shrink:0;
  border-top:1px dashed #e5e7eb; margin-top:.1rem;
}
.v2 .b-cart .cta { animation:v2tapCart var(--cycle) var(--punch) infinite; }
@keyframes v2tapCart {
  0%,28%{transform:scale(1)} 31%{transform:scale(.92);box-shadow:0 0 0 5px rgba(var(--brand-rgb),.4)} 33%,100%{transform:scale(1)}
}

/* Ödeme (beat pay) — ayrı ekran */
.v2 .pay-sum {
  display:flex; justify-content:space-between; align-items:center;
  padding:.35rem .4rem; background:#fff; border:1px solid #e5e7eb; border-radius:9px;
  font:700 .42rem Outfit,sans-serif; color:#6b7280; flex-shrink:0;
}
.v2 .pay-sum b { font:800 .55rem Outfit,sans-serif; color:#111; }
.v2 .pay-label {
  font:800 .45rem Outfit,sans-serif; color:#6b7280; letter-spacing:.04em;
  text-transform:uppercase; margin:.2rem 0 .15rem; flex-shrink:0;
}
.v2 .pays {
  display:flex; flex-direction:column; gap:.28rem; flex:1; min-height:0;
}
.v2 .pay {
  display:flex; align-items:center; gap:.35rem;
  padding:.4rem .45rem; background:#fff; border:1.5px solid #e5e7eb;
  border-radius:9px; font:700 .48rem Outfit,sans-serif; color:#374151;
  opacity:0; animation:v2payin var(--cycle) var(--snap) infinite;
}
.v2 .pay:nth-child(1){animation-delay:0s}
.v2 .pay:nth-child(2){animation-delay:.06s}
.v2 .pay:nth-child(3){animation-delay:.12s}
.v2 .pay:nth-child(4){animation-delay:.18s}
@keyframes v2payin {
  0%,36%{opacity:0;transform:translateY(4px)} 39%{opacity:1;transform:none} 43%,100%{opacity:1}
}
.v2 .pay i {
  width:14px; height:14px; border-radius:50%; border:1.5px solid #9ca3af;
  flex-shrink:0; display:grid; place-items:center; font-style:normal;
}
.v2 .pay.on {
  border-color:var(--brand); background:#fff5f4; color:#111;
  animation:v2payon var(--cycle) var(--punch) infinite, v2payin var(--cycle) var(--snap) infinite;
}
.v2 .pay.on i {
  border-color:var(--brand); background:var(--brand);
  box-shadow:inset 0 0 0 2px #fff;
}
@keyframes v2payon {
  0%,40%{box-shadow:none}
  42%{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.25)}
  44%,100%{box-shadow:none}
}
.v2 .cta {
  margin-top:.25rem; background:var(--brand); color:#fff; text-align:center;
  padding:.48rem .35rem; border-radius:10px; flex-shrink:0;
  font:800 .55rem Outfit,sans-serif;
}
.v2 .b-pay .cta { animation:v2tapPay var(--cycle) var(--punch) infinite; }
@keyframes v2tapPay {
  0%,41%{transform:scale(1)} 43%{transform:scale(.92);box-shadow:0 0 0 5px rgba(var(--brand-rgb),.4)} 45%,100%{transform:scale(1)}
}
.v2 .zero-chip {
  align-self:center; margin-top:.15rem;
  font:800 .4rem Outfit,sans-serif; color:#15803d;
  background:#ecfdf5; border:1px solid #86efac;
  padding:.15rem .4rem; border-radius:99px; flex-shrink:0;
}

/* Success modal (dijifis-web order-success) */
.v2 .ok-bg {
  position:absolute; inset:0; background:#f4f5f7;
  display:flex; flex-direction:column; filter:blur(1.2px) brightness(.85);
  padding:.35rem .4rem; gap:.22rem; pointer-events:none;
}
.v2 .ok-bg .ghost {
  height:28px; border-radius:8px; background:#fff; border:1px solid #e5e7eb; flex-shrink:0;
}
.v2 .ok-bg .ghost.tall { height:48px; }
.v2 .ok-modal {
  position:relative; z-index:2; margin:auto .35rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:.7rem .55rem .55rem; text-align:center;
  box-shadow:0 16px 40px rgba(2,6,23,.28);
  animation:v2okIn var(--cycle) var(--snap) infinite;
}
@keyframes v2okIn {
  0%,46%{opacity:0;transform:scale(.92) translateY(8px)}
  49%{opacity:1;transform:none}
  53%,100%{opacity:1;transform:none}
}
.v2 .ok-ico {
  width:36px; height:36px; margin:0 auto .35rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.1rem;
  background:linear-gradient(145deg,rgba(34,197,94,.2),rgba(22,163,74,.1)); color:#16a34a;
}
.v2 .ok-title {
  margin:0 0 .3rem; font:800 .58rem Outfit,sans-serif; color:#0f172a; line-height:1.25;
}
.v2 .ok-no {
  margin:0 0 .28rem; padding:.28rem .35rem; border-radius:8px;
  font:700 .42rem Outfit,sans-serif; color:#065f46;
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);
  border:1px solid rgba(16,185,129,.25);
}
.v2 .ok-lead {
  margin:0 0 .4rem; font:600 .38rem Outfit,sans-serif; color:#64748b; line-height:1.35;
}
.v2 .ok-btn {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.25rem;
  padding:.38rem .3rem; border-radius:8px; font:800 .42rem Outfit,sans-serif; margin-top:.2rem;
}
.v2 .ok-btn.pri {
  background:#1f2937; color:#fff;
  animation:v2okTap var(--cycle) var(--punch) infinite;
}
.v2 .ok-btn.sec { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; }
@keyframes v2okTap {
  0%,51%{transform:scale(1)} 53%{transform:scale(.94);box-shadow:0 0 0 4px rgba(31,41,55,.2)} 55%,100%{transform:scale(1)}
}

/* Order track (dijifis-web order-track) */
.v2 .trk-body {
  flex:1; min-height:0; background:#eef1f4; color:#111;
  padding:.3rem .35rem .4rem; display:flex; flex-direction:column; gap:.28rem; overflow:hidden;
}
.v2 .trk-badge {
  align-self:flex-start; font:700 .36rem Outfit,sans-serif; color:#1d4ed8;
  background:#dbeafe; border:1px solid #93c5fd; padding:.12rem .3rem; border-radius:99px;
}
.v2 .trk-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; flex-shrink:0;
}
.v2 .trk-head {
  background:#1f2937; color:#fff; padding:.4rem .45rem .35rem;
}
.v2 .trk-head .row {
  display:flex; justify-content:space-between; align-items:center; gap:.3rem;
  font:700 .4rem Outfit,sans-serif; margin-bottom:.3rem;
}
.v2 .trk-st {
  font:800 .32rem Outfit,sans-serif; letter-spacing:.04em;
  background:#111827; border:1px solid rgba(255,255,255,.25);
  padding:.1rem .28rem; border-radius:99px;
}
.v2 .trk-steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.15rem; text-align:center;
}
.v2 .trk-steps span {
  font:700 .3rem Outfit,sans-serif; color:rgba(255,255,255,.45);
  padding:.18rem .1rem; border-radius:6px;
}
.v2 .trk-steps span.on {
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
}
.v2 .trk-rows { padding:.3rem .4rem; display:flex; flex-direction:column; gap:.18rem; }
.v2 .trk-rows .r {
  display:flex; justify-content:space-between; font:600 .38rem Outfit,sans-serif; color:#6b7280;
}
.v2 .trk-rows .r b { color:#111; font-weight:800; }
.v2 .trk-rows .r b.blu { color:#2563eb; }
.v2 .trk-eta {
  background:#1f2937; color:#fff; border-radius:12px; padding:.45rem .45rem .4rem;
  flex:1; min-height:0; display:flex; flex-direction:column; gap:.22rem;
  animation:v2trkIn var(--cycle) var(--snap) infinite;
}
@keyframes v2trkIn {
  0%,58%{opacity:0;transform:translateY(8px)} 61%{opacity:1;transform:none} 67%,100%{opacity:1}
}
.v2 .trk-eta .lab {
  font:800 .32rem Outfit,sans-serif; letter-spacing:.06em; color:#5eead4; text-transform:uppercase;
}
.v2 .trk-eta .msg { font:700 .4rem Outfit,sans-serif; line-height:1.25; color:#f3f4f6; }
.v2 .trk-eta .clock {
  font:800 .95rem Outfit,sans-serif; color:#5eead4; letter-spacing:.02em;
  animation:v2tick var(--cycle) linear infinite;
}
@keyframes v2tick {
  0%,59%{content:none}
}
.v2 .trk-eta .pills { display:flex; gap:.2rem; flex-wrap:wrap; }
.v2 .trk-eta .pills i {
  font-style:normal; font:700 .32rem Outfit,sans-serif; color:#e5e7eb;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:.12rem .28rem; border-radius:99px;
}
.v2 .trk-eta .bar {
  height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:.1rem;
}
.v2 .trk-eta .bar em {
  display:block; height:100%; width:28%; border-radius:99px;
  background:linear-gradient(90deg,#6b7280,#9ca3af);
  animation:v2bar var(--cycle) linear infinite;
}
@keyframes v2bar {
  0%,59%{width:18%} 67%{width:32%} 100%{width:32%}
}
.v2 .trk-eta .note { font:600 .32rem Outfit,sans-serif; color:#9ca3af; line-height:1.3; }

/* Panel */
.v2 .panel {
  width:min(92%,520px);
  background:#151922; border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden;
  box-shadow:0 28px 64px rgba(0,0,0,.5);
  animation:v2panelIn var(--cycle) var(--snap) infinite;
}
@keyframes v2panelIn {
  0%,70%{opacity:.6;transform:translateY(12px) scale(1.02)}
  75%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
.v2 .panel-bar {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .75rem; border-bottom:1px solid var(--line);
  font:700 .72rem Outfit,sans-serif; color:#fff;
}
.v2 .badge0 {
  font:800 .55rem Outfit,sans-serif; color:#052e16;
  background:#7dffb2; padding:.22rem .5rem; border-radius:99px;
  animation:v2badge var(--cycle) var(--punch) infinite;
}
@keyframes v2badge {
  0%,76%{transform:scale(1)} 80%{transform:scale(1.08)} 84%,100%{transform:scale(1)}
}
.v2 .panel-body { padding:.65rem .75rem .8rem; }
.v2 .toast {
  background:#1e2430; border:1px solid rgba(var(--brand-rgb),.45);
  border-left:3px solid var(--brand); border-radius:10px;
  padding:.55rem .65rem; margin-bottom:.55rem;
  opacity:0; animation:v2toast var(--cycle) var(--punch) infinite;
}
@keyframes v2toast {
  0%,72%{opacity:0;transform:translateY(-10px)} 77%{opacity:1;transform:none} 100%{opacity:1}
}
.v2 .toast strong {
  display:block; font:800 .85rem Outfit,sans-serif; color:#fff; margin-bottom:.15rem;
}
.v2 .toast span { color:var(--muted); font-size:.62rem; font-weight:600; }
.v2 .order-card {
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:12px; padding:.55rem .65rem;
  opacity:0; animation:v2ocard var(--cycle) var(--snap) infinite;
}
@keyframes v2ocard {
  0%,75%{opacity:0;transform:translateY(8px)} 80%{opacity:1;transform:none} 100%{opacity:1}
}
.v2 .order-card .meta {
  display:flex; justify-content:space-between; align-items:center; gap:.4rem;
  margin-bottom:.4rem; font-size:.58rem; font-weight:700; color:var(--muted);
}
.v2 .order-card .meta .ch {
  background:rgba(126,182,255,.15); color:#a8cfff;
  padding:.12rem .35rem; border-radius:6px; font-size:.5rem;
}
.v2 .order-card .meta .paytag {
  background:rgba(125,255,178,.12); color:#9dffc4;
  padding:.12rem .35rem; border-radius:6px; font-size:.5rem;
}
.v2 .order-card li {
  list-style:none; display:flex; justify-content:space-between;
  padding:.28rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.65rem; font-weight:600; color:#e5e9f0;
}
.v2 .order-card ul { margin:0; padding:0; }
.v2 .order-card .sum {
  display:flex; justify-content:space-between; margin-top:.45rem;
  font:800 .95rem Outfit,sans-serif; color:#fff;
}
.v2 .hold-line {
  margin:.75rem 0 0; text-align:center;
  font:800 clamp(1rem,2.6vw,1.35rem) Outfit,sans-serif; color:#7dffb2;
  opacity:0; animation:v2hold var(--cycle) var(--punch) infinite;
}
@keyframes v2hold {
  0%,82%{opacity:0;transform:translateY(8px)} 87%{opacity:1;transform:none} 100%{opacity:1}
}
.v2 .hold-sub {
  margin:.25rem 0 0; text-align:center;
  font-size:.68rem; color:var(--muted); font-weight:600;
  opacity:0; animation:v2hold var(--cycle) var(--punch) infinite;
  animation-delay:.08s;
}

/*
  ===== 2 MOBILE — spotlight filmstrip (not desktop multi-phone) =====
  One large phone centered; previous step only peeks its right edge from the left.
  Same v2pan / v2step* timing as desktop; sizes create the mobile composition.
*/
.v2.is-mobile {
  --cycle: 24s;
  --pw: 128px;
  --pw-focus: clamp(200px, 72vw, 268px);
  --pw-hero: clamp(210px, 76vw, 286px);
  --pgap: 12px;
}
.v2.is-mobile .ver-badge em { color:#7eb6ff; }
.v2.is-mobile .ver-badge {
  top:0.5rem; left:0.65rem; right:auto;
  z-index:22;
  max-width:min(78%, 15rem);
}
.v2.is-mobile .ver-badge strong {
  font-size:clamp(0.64rem, 2.8vw, 0.78rem);
  line-height:1.2;
}
.v2.is-mobile .flow-view {
  padding-top:2.4rem;
  box-sizing:border-box;
  /* Soft sides — emphasize center phone, hide distant strip */
  mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.v2.is-mobile .step {
  overflow:hidden;
}
.v2.is-mobile .step-cap {
  min-height:1.55rem;
}
.v2.is-mobile .step-cap strong { font-size:clamp(0.58rem, 2.4vw, 0.72rem); }
.v2.is-mobile .step-cap em { font-size:clamp(0.38rem, 1.6vw, 0.48rem); }
.v2.is-mobile .phone {
  max-height:calc(100% - 1.9rem);
  border-radius:20px;
}
.v2.is-mobile .panel {
  width:min(92%,420px);
}
/* Portrait-leaning frame so the hero phone can be large */
.stage.v2.is-mobile {
  aspect-ratio: 10 / 14;
}
@media (min-width:641px) {
  .v2.is-mobile {
    --pw: 120px;
    --pw-focus: 210px;
    --pw-hero: 230px;
    --pgap: 12px;
  }
  .stage.v2.is-mobile { aspect-ratio: 16 / 10; }
}
@media (max-width:640px) {
  .v2.is-mobile {
    --pw: 118px;
    --pw-focus: min(78vw, 270px);
    --pw-hero: min(82vw, 290px);
    --pgap: 10px;
  }
  .v2.is-mobile .ver-badge {
    top:0.35rem; left:0.4rem;
    max-width:78%;
  }
  .v2.is-mobile .ver-badge em {
    font-size:0.48rem; letter-spacing:0.12em;
  }
  .v2.is-mobile .ver-badge strong { font-size:0.62rem; }
  .v2.is-mobile .flow-view { padding-top:2.25rem; }
  .stage.v2.is-mobile,
  .deck .clip.is-active .stage.v2.is-mobile {
    aspect-ratio: 9 / 14;
    min-height: min(64vh, 560px);
  }
}