/* ===== Volition Vending Hybrid - Shared Stylesheet ===== */

:root {
  --bg-base:        #111827; /* gray-900 */
  --bg-surface:     #1f2937; /* gray-800 */
  --bg-elevated:    #111827;
  --border:         rgba(255, 255, 255, 0.10);
  --text-primary:   #f3f4f6; /* gray-100 */
  --text-secondary: rgba(243, 244, 246, 0.70);
  --text-muted:     rgba(243, 244, 246, 0.50);
  --success:        #16a34a; /* green-600 - Text Us button */

  /* Defaults; overridden per-page via [data-accent] below */
  --accent:      #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.15);
}

body[data-accent="cyan"]   { --accent: #60a5fa; --accent-soft: rgba(96, 165, 250, 0.15); }
body[data-accent="purple"] { --accent: #c084fc; --accent-soft: rgba(192, 132, 252, 0.15); }
body[data-accent="yellow"] { --accent: #facc15; --accent-soft: rgba(250, 204, 21, 0.15); }
body[data-accent="green"]  { --accent: #4ade80; --accent-soft: rgba(74, 222, 128, 0.15); }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: Inter, system-ui, sans-serif;
}

.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tabnum       { font-variant-numeric: tabular-nums; }

/* ===== Background patterns ===== */

.grid-bg {
  background-image:
    linear-gradient(rgba(243, 244, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 244, 246, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' /></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

section { position: relative; }

/* ===== Marquee scrolling banner ===== */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }

/* ===== Scroll reveal ===== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ===== Coin drop animation ===== */

@keyframes coinDrop {
  0%   { transform: translate(-50%, -220px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  60%  { transform: translate(-50%,  40px) rotate(540deg);  opacity: 1; }
  72%  { transform: translate(-50%,  34px) rotate(560deg); }
  80%  { transform: translate(-50%,  40px) rotate(560deg); }
  100% { transform: translate(-50%,  40px) rotate(560deg);  opacity: 0; }
}
.coin { animation: coinDrop 2.6s cubic-bezier(.36, .02, .24, 1) infinite; }

/* ===== Dollar bill fly-out ===== */

@keyframes billFly {
  0%   { transform: translate(0, 0)               rotate(0deg)            scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--fx, 180px), var(--fy, -160px)) rotate(var(--fr, 30deg)) scale(1); opacity: 0; }
}
.bill { animation: billFly var(--fd, 2.4s) ease-out infinite; animation-delay: var(--dl, 0s); }

/* ===== Vending machine rocking ===== */

@keyframes rock {
  0%, 100% { transform: rotate(-0.4deg); }
  50%      { transform: rotate( 0.4deg); }
}
.machine-rock {
  transform-origin: 50% 95%;
  animation: rock 6s ease-in-out infinite;
}

/* ===== LED blink ===== */

@keyframes led {
  0%, 60%   { opacity: 1; }
  70%, 100% { opacity: 0.25; }
}
.led { animation: led 2.4s linear infinite; }

/* ===== Soft pulse for stat blocks (accent-aware) ===== */

@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(34, 211, 238, 0); }
  50%      { box-shadow: 0 0 0 10px var(--accent-soft); }
}
.pulse-ring { animation: softPulse 3.2s ease-in-out infinite; }

/* ===== Timeline step line + running dot ===== */

.step-line {
  background: repeating-linear-gradient(
    90deg,
    rgba(243, 244, 246, 0.25) 0 6px,
    transparent 6px 12px
  );
}

@keyframes runDot {
  0%   { left: 0; }
  100% { left: 100%; }
}
.run-dot {
  animation: runDot 6s linear infinite;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}

/* ===== Glow card hover (accent-aware) ===== */

.glow-card {
  transition:
    transform     0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color  0.3s,
    background    0.3s;
}
.glow-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: #15151d;
}

/* ===== Range slider (placement calculator) ===== */

input[type="range"].vv-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #2a3862;
  border-radius: 999px;
  outline: none;
}
input[type="range"].vv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-base);
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
input[type="range"].vv-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-base);
  cursor: pointer;
}

/* ===== Dashed border for service-area pills ===== */

.dash {
  background-image:
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%);
  background-size: 14px 1.5px, 14px 1.5px, 1.5px 14px, 1.5px 14px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* ===== Text link with animated underline ===== */

.tlink { position: relative; }
.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.tlink:hover::after { transform: scaleX(1); }

/* ===== Card hover utility (simple lift) ===== */

.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-8px); }

/* ===== Mobile gates: disable expensive animations under 1024px ===== */

@media (max-width: 1023px) {
  .marquee-track { animation-duration: 60s; }
  .bill,
  .coin,
  .machine-rock { animation: none; }
  .desktop-only-anim { display: none !important; }
}

/* ===== Honor user's reduced-motion preference ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================== */
/* ===== HERO ANIMATIONS (tap-to-pay + earnings dash) === */
/* Used by index.html (Scene 1), buy.html (Scene 2)      */
/* ===================================================== */

  /* ===== SCENE 1: TAP TO PAY ===== */
  .scene1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px}
  .scene1-floor{
    position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
    width:75%;height:30px;
    background:radial-gradient(50% 100% at 50% 50%,rgba(96,165,250,.18),transparent 70%);
    filter:blur(8px);
  }

  /* Card reader — Nayax-style proportions: rounded-square housing, top circular tap zone, slot, screen */
  .reader{
    position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    width:240px;height:330px;
  }
  .reader-body{
    position:absolute;inset:0;
    background:linear-gradient(180deg,#1a1f2e 0%,#0e1220 100%);
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      0 30px 60px -20px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.6);
  }
  .reader-bezel{
    position:absolute;inset:8px;border-radius:18px;
    background:linear-gradient(180deg,#0a0d18,#0a0d18);
    border:1px solid rgba(255,255,255,.04);
  }
  /* Tap antenna ring — top section */
  .reader-tap{
    position:absolute;top:24px;left:50%;transform:translateX(-50%);
    width:160px;height:130px;
    border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;
    background:radial-gradient(70% 60% at 50% 45%, #141a2e, #080b15 80%);
    border:1px solid rgba(96,165,250,.18);
    overflow:hidden;
  }
  .reader-tap::before{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:80px;height:80px;border-radius:50%;
    border:2px solid rgba(96,165,250,.55);
    box-shadow:0 0 0 6px rgba(96,165,250,.06), inset 0 0 16px rgba(96,165,250,.25);
  }
  .reader-tap::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:18px;height:18px;border-radius:50%;
    background:rgba(96,165,250,.7);
    box-shadow:0 0 18px rgba(96,165,250,.8);
  }
  .ripple{
    position:absolute;left:50%;top:64px;transform:translate(-50%,-50%);
    width:80px;height:80px;border-radius:50%;
    border:2px solid rgba(96,165,250,.6);
    opacity:0;pointer-events:none;
  }
  /* Card slot */
  .reader-slot{
    position:absolute;top:165px;left:50%;transform:translateX(-50%);
    width:170px;height:14px;border-radius:3px;
    background:#020308;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04);
  }
  .reader-slot::after{
    content:"";position:absolute;left:8px;right:8px;top:5px;height:2px;
    background:linear-gradient(90deg,transparent, rgba(96,165,250,.35), transparent);
  }
  /* Screen */
  .reader-screen{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    width:200px;height:108px;border-radius:8px;
    background:#000;
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    text-align:center;padding:0 10px;
  }
  .screen-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;opacity:0;transition:opacity .25s;padding:0 10px}
  .screen-state.on{opacity:1}
  .screen-title{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(217,207,182,.55)}
  .screen-msg{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#f3f4f6;letter-spacing:-.01em}
  .screen-msg.good{color:#7cf2a0}
  .check{
    width:32px;height:32px;border-radius:50%;
    background:#16331f;border:1.5px solid #22c55e;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 18px rgba(34,197,94,.4);
  }
  .check svg{width:18px;height:18px}
  .ellipsis span{display:inline-block;animation:dots 1.4s infinite;opacity:.4}
  .ellipsis span:nth-child(2){animation-delay:.2s}
  .ellipsis span:nth-child(3){animation-delay:.4s}
  @keyframes dots{0%,60%,100%{opacity:.3}30%{opacity:1}}

  /* Hand + phone */
  .hand{
    position:absolute;
    width:280px;height:380px;
    left:50%;bottom:-160px;
    transform:translate(calc(-50% + 200px), 80px) rotate(-12deg);
    transform-origin:bottom center;
    z-index:3;
  }
  .phone{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:130px;height:240px;border-radius:22px;
    background:linear-gradient(160deg,#1a1f2e,#0a0d18);
    border:1.5px solid rgba(255,255,255,.12);
    box-shadow:
      0 20px 40px -10px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.1);
    overflow:hidden;
  }
  .phone-screen{
    position:absolute;inset:5px;border-radius:18px;
    background:radial-gradient(80% 60% at 50% 30%, #1a2a52, #050811);
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:10px;padding:14px 8px;
  }
  .phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:99px;background:#000}
  .pay-icon{
    width:46px;height:46px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 22px rgba(96,165,250,.55);
  }
  .pay-icon svg{width:22px;height:22px;color:#fff}
  .pay-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;color:#fff}
  .pay-amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:var(--accent)}
  .pay-sub{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:rgba(217,207,182,.45)}

  /* Wrist */
  .wrist{
    position:absolute;left:50%;top:170px;transform:translateX(-50%);
    width:130px;height:240px;
    background:linear-gradient(180deg, #c9986b 0%, #a87a52 60%, #8a6240 100%);
    border-radius:50% 50% 6px 6px / 18% 18% 4% 4%;
    box-shadow:inset -10px 0 20px rgba(0,0,0,.25), inset 10px 0 18px rgba(255,255,255,.08);
  }
  .wrist::before{
    content:"";position:absolute;top:-2px;left:8px;right:8px;height:14px;
    border-radius:99px;background:rgba(255,255,255,.06);
  }

  /* Animation phases for scene 1 */
  @keyframes phoneApproach{
    0%   { transform: translate(calc(-50% + 200px), 80px) rotate(-12deg); }
    35%  { transform: translate(calc(-50% + 90px), 30px) rotate(-8deg); }
    55%  { transform: translate(calc(-50% + 50px), -40px) rotate(-4deg); }
    72%  { transform: translate(calc(-50% + 50px), -50px) rotate(-4deg); }
    100% { transform: translate(calc(-50% + 50px), -50px) rotate(-4deg); }
  }
  @keyframes rippleOut{
    0%   { opacity:0; transform:translate(-50%,-50%) scale(.4); }
    8%   { opacity:.7; }
    50%  { opacity:0; transform:translate(-50%,-50%) scale(2.8); }
    100% { opacity:0; }
  }
  @keyframes screenIdle  { 0%, 60% { opacity:1 } 62%, 100% { opacity:0 } }
  @keyframes screenAcc   { 0%, 60% { opacity:0 } 62%, 80% { opacity:1 } 82%, 100% { opacity:0 } }
  @keyframes screenDisp  { 0%, 80% { opacity:0 } 82%, 98% { opacity:1 } }
  @keyframes ledPulse    { 0%,55%,90%,100%{ box-shadow:0 0 18px rgba(96,165,250,.8); background:rgba(96,165,250,.7)}
                           62%,80%{ box-shadow:0 0 22px rgba(34,197,94,.9); background:#22c55e } }

  .scene1.playing .hand{ animation: phoneApproach 6s ease-in-out infinite; }
  .scene1.playing .ripple{ animation: rippleOut 6s ease-out infinite; animation-delay:0s }
  .scene1.playing .ripple.r2{ animation-delay:.5s }
  .scene1.playing .ripple.r3{ animation-delay:1s }
  .scene1.playing .reader-tap::after{ animation: ledPulse 6s ease-in-out infinite; }
  .scene1.playing .s-idle  { animation: screenIdle 6s ease-in-out infinite; }
  .scene1.playing .s-acc   { animation: screenAcc 6s ease-in-out infinite; }
  .scene1.playing .s-disp  { animation: screenDisp 6s ease-in-out infinite; }

  /* ===== SCENE 2: DASHBOARD ===== */
  .scene2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px}
  .scene2 .hand2{
    position:absolute;
    width:340px;height:560px;
    left:50%;top:50%;
    transform:translate(-50%,-46%);
    z-index:2;
  }
  .phone2{
    position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:300px;height:600px;border-radius:42px;
    background:linear-gradient(160deg,#1a1f2e,#0a0d18);
    border:2px solid rgba(255,255,255,.12);
    box-shadow:0 40px 80px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1);
    overflow:hidden;
  }
  .phone2-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:99px;background:#000;z-index:5}
  .phone2-screen{
    position:absolute;inset:8px;border-radius:36px;
    background:#0a0d18;
    overflow:hidden;
  }
  .wrist2{
    position:absolute;left:50%;top:520px;transform:translateX(-50%);
    width:240px;height:240px;
    background:linear-gradient(180deg, #c9986b 0%, #a87a52 70%, #8a6240 100%);
    border-radius:50% 50% 0 0 / 22% 22% 0 0;
    box-shadow:inset -16px 0 30px rgba(0,0,0,.25), inset 16px 0 24px rgba(255,255,255,.08);
    z-index:1;
  }

  /* App slides inside phone2 */
  .app{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .35s ease}
  .app.on{opacity:1}
  .app-bar{
    height:50px;display:flex;align-items:flex-end;justify-content:space-between;
    padding:8px 18px 8px;color:rgba(255,255,255,.85);font-family:'JetBrains Mono',monospace;font-size:10px;
  }
  .app-tabs{
    position:absolute;bottom:0;left:0;right:0;
    height:62px;
    background:rgba(10,13,24,.95);
    border-top:1px solid rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:space-around;padding:0 8px 14px;
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(217,207,182,.4);
  }
  .tab.active{color:var(--accent)}
  .tab svg{width:18px;height:18px}

  /* App 1: Earnings */
  .earnings-body{flex:1;padding:14px 18px 70px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
  .e-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:rgba(255,255,255,.6)}
  .e-amount{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:42px;color:#fff;
    letter-spacing:-.02em;line-height:1;
  }
  .e-amount .num{display:inline-block;min-width:0}
  .e-delta{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'JetBrains Mono',monospace;font-size:11px;color:#7cf2a0;
    background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);
    padding:3px 8px;border-radius:99px;width:fit-content;
  }
  .chart{
    flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    border-radius:16px;padding:14px;position:relative;min-height:140px;
  }
  .chart-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(217,207,182,.5);margin-bottom:8px}
  .bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:100px;padding-top:14px}
  .bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent));border-radius:3px 3px 0 0;height:0;transition:height 1.2s cubic-bezier(.2,.8,.2,1)}
  .e-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
  }
  .e-row-l{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(217,207,182,.65)}
  .e-row-r{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:#fff}
  .coin-pop{
    position:absolute;left:50%;top:80px;transform:translate(-50%,-50%);
    pointer-events:none;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:#7cf2a0;
    opacity:0;
  }

  /* App 2: Inventory */
  .inv-body{flex:1;padding:14px 18px 70px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
  .inv-row{
    display:flex;align-items:center;gap:10px;
    padding:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
  }
  .inv-icon{
    width:32px;height:32px;border-radius:8px;
    background:rgba(96,165,250,.15);border:1px solid rgba(96,165,250,.3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .inv-mid{flex:1;min-width:0}
  .inv-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;color:#fff;margin-bottom:4px}
  .inv-meter{height:5px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
  .inv-fill{height:100%;background:#22c55e;border-radius:99px;width:0;transition:width 1s ease}
  .inv-fill.warn{background:var(--signal-400)}
  .inv-fill.low{background:#ef4444}
  .inv-pct{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(217,207,182,.7);width:34px;text-align:right;flex-shrink:0}
  .inv-row.alert{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.06);animation:alertPulse 1.4s ease-in-out infinite}
  @keyframes alertPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.12)}}
  .alert-tag{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#fca5a5;background:rgba(239,68,68,.15);padding:2px 6px;border-radius:99px;border:1px solid rgba(239,68,68,.3)}

  /* App 3: Reorder */
  .reorder-body{flex:1;padding:14px 18px 70px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
  .ro-card{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    border-radius:14px;padding:14px;
  }
  .ro-line{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
  .ro-line:last-child{border-bottom:0}
  .ro-name{font-family:'Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.85)}
  .ro-qty{font-family:'JetBrains Mono',monospace;font-size:11px;color:#fff}
  .ro-total{display:flex;align-items:center;justify-content:space-between;padding-top:10px;margin-top:6px;border-top:1px solid rgba(255,255,255,.1)}
  .ro-total-l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(217,207,182,.55)}
  .ro-total-r{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:#fff}
  .ro-btn{
    margin-top:6px;
    padding:14px;border-radius:99px;
    background:var(--accent);color:#070b18;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
    text-align:center;position:relative;overflow:hidden;
    border:none;
  }
  .ro-btn .placed{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
    background:#22c55e;color:#062014;opacity:0;transition:opacity .3s;
  }
  .ro-btn.placed .placed{opacity:1}
  .finger{
    position:absolute;width:34px;height:34px;left:50%;top:50%;
    transform:translate(-50%,-50%);pointer-events:none;
    opacity:0;
  }
  .finger svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}

  /* Scene 2 master timeline */
  /* 16s loop: 0-5 earnings, 5-10 inventory, 10-15 reorder, 15-16 hold */
  @keyframes appEarnings  { 0%, 28% { opacity:1 } 32%, 100% { opacity:0 } }
  @keyframes appInv       { 0%, 28% { opacity:0 } 32%, 58% { opacity:1 } 62%, 100% { opacity:0 } }
  @keyframes appReorder   { 0%, 58% { opacity:0 } 62%, 100% { opacity:1 } }

  @keyframes barGrow1{ 0%,5%{height:0} 22%,32%{height:30%} 32.1%,100%{height:0} }
  @keyframes barGrow2{ 0%,5%{height:0} 22%,32%{height:55%} 32.1%,100%{height:0} }
  @keyframes barGrow3{ 0%,5%{height:0} 22%,32%{height:42%} 32.1%,100%{height:0} }
  @keyframes barGrow4{ 0%,5%{height:0} 22%,32%{height:78%} 32.1%,100%{height:0} }
  @keyframes barGrow5{ 0%,5%{height:0} 22%,32%{height:62%} 32.1%,100%{height:0} }
  @keyframes barGrow6{ 0%,5%{height:0} 22%,32%{height:88%} 32.1%,100%{height:0} }
  @keyframes barGrow7{ 0%,5%{height:0} 22%,32%{height:100%} 32.1%,100%{height:0} }

  @keyframes coinFloat{
    0%,8%{opacity:0;transform:translate(-50%,-50%) translateY(0)}
    12%{opacity:1}
    25%{opacity:1;transform:translate(-50%,-50%) translateY(-30px)}
    32%,100%{opacity:0;transform:translate(-50%,-50%) translateY(-40px)}
  }

  @keyframes meter1{ 32%{width:0} 50%,58%{width:78%} 62%,100%{width:0} }
  @keyframes meter2{ 32%{width:0} 50%,58%{width:55%} 62%,100%{width:0} }
  @keyframes meter3{ 32%{width:0} 50%,58%{width:18%} 62%,100%{width:0} }
  @keyframes meter4{ 32%{width:0} 50%,58%{width:8%} 62%,100%{width:0} }

  @keyframes fingerTap{
    0%,82%{opacity:0;transform:translate(-50%,-50%) scale(1)}
    85%{opacity:1;transform:translate(-50%,-30%) scale(1.08)}
    90%{opacity:1;transform:translate(-50%,-50%) scale(.85)}
    93%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    97%,100%{opacity:0}
  }
  @keyframes btnPlace{
    0%,90%{}
    93%,100%{}
  }

  .scene2.playing .e-app  { animation: appEarnings 16s ease-in-out infinite }
  .scene2.playing .i-app  { animation: appInv 16s ease-in-out infinite }
  .scene2.playing .r-app  { animation: appReorder 16s ease-in-out infinite }
  .scene2.playing .b1{ animation:barGrow1 16s ease-in-out infinite }
  .scene2.playing .b2{ animation:barGrow2 16s ease-in-out infinite }
  .scene2.playing .b3{ animation:barGrow3 16s ease-in-out infinite }
  .scene2.playing .b4{ animation:barGrow4 16s ease-in-out infinite }
  .scene2.playing .b5{ animation:barGrow5 16s ease-in-out infinite }
  .scene2.playing .b6{ animation:barGrow6 16s ease-in-out infinite }
  .scene2.playing .b7{ animation:barGrow7 16s ease-in-out infinite }
  .scene2.playing .coin-pop{ animation:coinFloat 16s ease-out infinite }
  .scene2.playing .m1{ animation:meter1 16s ease-in-out infinite }
  .scene2.playing .m2{ animation:meter2 16s ease-in-out infinite }
  .scene2.playing .m3{ animation:meter3 16s ease-in-out infinite }
  .scene2.playing .m4{ animation:meter4 16s ease-in-out infinite }
  .scene2.playing .finger{ animation:fingerTap 16s ease-in-out infinite }

  /* Reorder placed state */
  @keyframes placeBtn{
    0%,92%{}
    94%,100%{}
  }
  .ro-btn .ro-default,.ro-btn .placed{display:flex;align-items:center;justify-content:center;gap:8px}
  .ro-btn .ro-default{position:relative;z-index:1}
  @keyframes placedShow{
    0%,92%{opacity:0}
    95%,100%{opacity:1}
  }
  .scene2.playing .placed{ animation: placedShow 16s ease-in-out infinite }

  /* paused state shows current frame */
  .scene1:not(.playing) *, .scene2:not(.playing) *{ animation-play-state:paused !important }

  /* Spec sheet */
  .spec{
    margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;
  }
  .spec span{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(217,207,182,.5);padding:4px 10px;border:1px solid rgba(255,255,255,.08);border-radius:99px;
  }
  .header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}

  /* Badge centered atop animation containers (tagline-style) */
  .badge{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:5;
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:999px;
    background:rgba(7,11,24,.78); border:1px solid rgba(96,165,250,.35);
    font-family:'Space Grotesk', system-ui, sans-serif; font-weight:600;
    font-size:11px; letter-spacing:.01em; line-height:1.35;
    color:var(--accent); backdrop-filter:blur(8px);
    max-width:calc(100% - 28px);
    text-align:center;
    white-space:normal;
  }
  @media (min-width:768px){
    .badge{ font-size:12px; padding:8px 20px; }
  }
  .badge .dot{
    width:6px; height:6px; border-radius:999px;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    flex-shrink:0;
  }