/* ===== AMAZON SLIDES CSS ===== */

/* ---- FORM / LOADING / ERROR ---- */
.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.login-form .form-input { text-align: left; }
.login-form .btn-primary { max-width: none; }
.mode-toggle { display: flex; gap: 0.5rem; margin-top: 1rem; width: 100%; max-width: 360px; }
.mode-btn { flex: 1; padding: 0.6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: center; }
.mode-btn.active { border-color: var(--pink); background: rgba(255,0,110,0.12); color: #fff; }
.mode-btn:hover:not(.active) { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.loading-content { text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.spinner { width: 48px; height: 48px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--pink); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.loading-sub { font-size: 0.85rem; color: rgba(255,255,255,0.35); margin-top: 0.5rem; }
.loading-steps { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.loading-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.3); transition: all 0.3s; }
.loading-step.active { color: rgba(255,255,255,0.8); }
.loading-step.done { color: var(--pink); }
.loading-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: all 0.3s; flex-shrink: 0; }
.loading-step.active .loading-step-dot { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.loading-step.done .loading-step-dot { background: var(--pink); }
.error-content { text-align: center; padding: 2rem; max-width: 400px; }
.error-content h2 { font-family: 'Space Grotesk', sans-serif; margin-bottom: 1rem; color: var(--pink); }
.error-content p { color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; line-height: 1.5; }

/* ---- PROGRESS DOTS ---- */
.slide-progress { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 100; opacity: 0; transition: opacity 0.3s; }
.slide-progress.visible { opacity: 1; }
.slide-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; }
.slide-dot.active { background: #fff; width: 22px; border-radius: 3px; }

.slide-inner { overflow: hidden; position: relative; }

.s-bg-intro    { background: linear-gradient(135deg, #007BFF, #00C6FF) !important; }
.s-bg-orders   { background: linear-gradient(135deg, #FF5733, #FFC300) !important; }
.s-bg-spent    { background: linear-gradient(135deg, #28A745, #20C997) !important; }
.s-bg-avg      { background: linear-gradient(135deg, #6F42C1, #E83E8C) !important; }
.s-bg-freq     { background: linear-gradient(135deg, #FD7E14, #FFC107) !important; }
.s-bg-extremes { background: linear-gradient(135deg, #DC3545, #FD7E14) !important; }
.s-bg-tiers    { background: linear-gradient(135deg, #17A2B8, #007BFF) !important; }
.s-bg-peak     { background: linear-gradient(135deg, #FFC107, #FF5733) !important; }
.s-bg-months   { background: linear-gradient(135deg, #20C997, #28A745) !important; }
.s-bg-items    { background: linear-gradient(135deg, #E83E8C, #6F42C1) !important; }
.s-bg-prime    { background: linear-gradient(135deg, #007BFF, #17A2B8) !important; }
.s-bg-yoy      { background: linear-gradient(135deg, #FFC300, #FD7E14) !important; }
.s-bg-addiction{ background: linear-gradient(135deg, #DC3545, #FF5733) !important; }
.s-bg-persona  { background: linear-gradient(135deg, #6F42C1, #007BFF) !important; }

.s-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 400px; }
.s-watermark { position: absolute; bottom: 1.2rem; right: 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 2px; color: rgba(255,255,255,0.25); z-index: 2; }
.s-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 5px; color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; text-transform: uppercase; }
.s-big-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(3.5rem, 14vw, 7rem); font-weight: 700; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.s-big-text { font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; }
.s-caption { font-size: 1rem; color: rgba(255,255,255,0.8); margin-top: 0.5rem; }
.s-subtitle { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 500; max-width: 320px; line-height: 1.4; color: rgba(255,255,255,0.9); }
.s-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.5rem, 10vw, 4rem); font-weight: 700; margin-bottom: 1rem; text-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.s-roast { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-top: 1.5rem; max-width: 320px; line-height: 1.5; font-style: italic; background: rgba(0,0,0,0.2); padding: 0.8rem 1.2rem; border-radius: 12px; backdrop-filter: blur(10px); }
.s-next { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-size: 1.2rem; cursor: pointer; padding: 0.6rem 1.8rem; border-radius: 50px; transition: all 0.3s; z-index: 10; font-family: 'Space Grotesk', sans-serif; }
.s-next:hover { border-color: rgba(255,255,255,0.8); color: #fff; background: rgba(255,255,255,0.25); }

.s-split { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; }
.s-split-box { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.15); padding: 1.2rem 1.5rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); }
.s-split-num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700; }
.s-split-label { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 1px; }
.s-split-vs { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; color: rgba(255,255,255,0.5); font-weight: 700; }

.s-year-row { display: flex; gap: 1rem; margin: 0.5rem 0; }
.s-year-box { display: flex; flex-direction: column; align-items: center; background: rgba(0,0,0,0.15); padding: 1rem 1.5rem; border-radius: 14px; backdrop-filter: blur(10px); min-width: 80px; border: 1px solid rgba(255,255,255,0.15); }
.s-year-num { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; }
.s-year-label { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }

.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; max-width: 300px; margin: 0.5rem 0; }
.tier-box { background: rgba(0,0,0,0.15); border-radius: 14px; padding: 1rem; text-align: center; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.tier-box .tier-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.6rem; display: block; color: #fff; }
.tier-box .tier-label { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 0.2rem; }

.month-bars { width: 100%; max-width: 340px; margin: 0.5rem 0; }
.month-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; opacity: 0; }
.month-bar-label { font-size: 0.7rem; color: rgba(255,255,255,0.7); width: 28px; text-align: right; font-family: 'Space Grotesk', sans-serif; }
.month-bar-track { flex: 1; height: 20px; background: rgba(0,0,0,0.15); border-radius: 5px; overflow: hidden; }
.month-bar-fill { height: 100%; background: rgba(255,255,255,0.4); border-radius: 5px; opacity: 0; }
.month-bar-count { font-size: 0.7rem; color: rgba(255,255,255,0.6); width: 24px; font-family: 'Space Grotesk', sans-serif; }

.top-list { text-align: left; width: 100%; max-width: 340px; margin: 0.5rem 0; }
.top-list-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; opacity: 0; background: rgba(0,0,0,0.12); border-radius: 8px; margin-bottom: 0.25rem; backdrop-filter: blur(4px); }
.top-list-rank { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; min-width: 20px; }
.top-list-name { color: rgba(255,255,255,0.9); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }

.meter-bar-wrap { width: 100%; max-width: 300px; }
.meter-bar { width: 100%; height: 24px; background: rgba(0,0,0,0.2); border-radius: 12px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, #38ef7d, #FFBE0B, #FF6B35, #FF006E, #e63946); border-radius: 12px; transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); width: 0%; }
.meter-labels { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.6rem; color: rgba(255,255,255,0.5); font-family: 'Space Grotesk', sans-serif; }

.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

/* ---- INTRO SCENE (scaled 2-3x) ---- */
.intro-card { position: absolute; top: 12%; right: 6%; width: 350px; height: 220px; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); border-radius: 20px; box-shadow: 0 25px 70px rgba(0,0,0,0.5); }
.intro-card::before { content: ''; position: absolute; top: 45px; left: 35px; width: 68px; height: 50px; background: linear-gradient(135deg, #ffd700, #daa520); border-radius: 8px; border: 2px solid rgba(255,215,0,0.4); }
.intro-card::after { content: '2222  2222  2222  4832'; position: absolute; bottom: 50px; left: 35px; right: 35px; color: rgba(255,255,255,0.6); font-size: 22px; letter-spacing: 4px; font-family: 'Courier New', monospace; }
.intro-bag { position: absolute; bottom: 15%; left: 8%; width: 220px; height: 280px; background: linear-gradient(180deg, #fff, #f0f0f0); border-radius: 0 0 14px 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
.intro-bag::before { content: ''; position: absolute; top: -40px; left: 50px; width: 120px; height: 55px; border: 9px solid rgba(0,0,0,0.3); border-bottom: none; border-radius: 55px 55px 0 0; }
.intro-bag::after { content: ''; position: absolute; top: 40%; left: 50%; transform: translateX(-50%); width: 90px; height: 10px; background: rgba(0,0,0,0.1); border-radius: 5px; box-shadow: 0 24px 0 rgba(0,0,0,0.07), 0 48px 0 rgba(0,0,0,0.04); }
.intro-box { position: absolute; top: 55%; left: 55%; width: 240px; height: 180px; background: linear-gradient(180deg, #c67a34, #a0602a); border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); transform: translate(-50%, -50%) rotate(-8deg); }
.intro-box::before { content: ''; position: absolute; top: 40%; left: -5%; right: -5%; height: 28px; background: rgba(255,220,150,0.6); border: 2px solid rgba(200,170,100,0.3); }
.intro-box::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 40%; background: rgba(0,0,0,0.15); }

/* ---- ORDERS SCENE (scaled 2x) ---- */
.orders-box { position: absolute; background: linear-gradient(180deg, #c67a34, #a0602a); border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,0.35); }
.orders-box::before { content: ''; position: absolute; top: 42%; left: -6px; right: -6px; height: 24px; background: rgba(255,220,150,0.55); }
.orders-box::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 42%; background: rgba(0,0,0,0.12); }
.ob-1 { left: 5%; width: 180px; height: 150px; }
.ob-2 { left: 22%; width: 130px; height: 110px; }
.ob-3 { left: 40%; width: 200px; height: 170px; }
.ob-4 { left: 58%; width: 110px; height: 90px; }
.ob-5 { left: 75%; width: 160px; height: 130px; }
.ob-6 { left: 88%; width: 140px; height: 120px; }

/* ---- SPENT SCENE (scaled 2x) ---- */
.spent-card { position: absolute; width: 360px; height: 225px; border-radius: 20px; box-shadow: 0 25px 65px rgba(0,0,0,0.4); }
.spent-card::before { content: ''; position: absolute; top: 40px; left: 30px; width: 65px; height: 46px; background: linear-gradient(135deg, #ffd700, #daa520); border-radius: 7px; }
.spent-card::after { content: '2222  2222'; position: absolute; bottom: 35px; left: 30px; color: rgba(255,255,255,0.5); font-size: 20px; letter-spacing: 4px; font-family: 'Courier New', monospace; }
.sc-1 { top: 8%; left: 5%; background: linear-gradient(135deg, #e63946, #d62828); }
.sc-2 { bottom: 15%; right: 3%; background: linear-gradient(135deg, #1d3557, #457b9d); width: 310px; height: 195px; }
.spent-receipt { position: absolute; top: -80%; width: 130px; background: #fff; border-radius: 0 0 3px 3px; }
.spent-receipt::before { content: ''; position: absolute; top: 35px; left: 18px; right: 18px; height: 7px; background: rgba(0,0,0,0.15); border-radius: 3px; box-shadow: 0 22px 0 rgba(0,0,0,0.1), 0 44px 0 rgba(0,0,0,0.08), 0 66px 0 rgba(0,0,0,0.06), 0 88px 0 rgba(0,0,0,0.1), 0 110px 0 rgba(0,0,0,0.06); }
.spent-receipt::after { content: ''; position: absolute; bottom: 50px; left: 18px; right: 18px; height: 3px; background: rgba(0,0,0,0.2); border-top: 2px dashed rgba(0,0,0,0.15); padding-top: 6px; }
.sr-1 { left: 18%; height: 450px; }
.sr-2 { left: 55%; height: 360px; }
.sr-3 { left: 78%; height: 320px; }

/* ---- AVG ORDER SCENE (scaled 2x) ---- */
.avg-tag { position: absolute; background: #FFD700; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); box-shadow: 0 14px 40px rgba(0,0,0,0.25); transform-origin: top center; }
.avg-tag::before { content: '$'; position: absolute; top: 25%; left: 50%; transform: translateX(-50%); font-size: 48px; font-weight: 700; color: rgba(0,0,0,0.5); font-family: 'Space Grotesk', sans-serif; }
.avg-tag::after { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border: 3px solid rgba(0,0,0,0.3); border-radius: 50%; background: transparent; }
.at-1 { top: 10%; right: 12%; width: 170px; height: 230px; }
.at-2 { bottom: 12%; left: 8%; width: 140px; height: 190px; background: #FF6B6B; }
.at-3 { top: 45%; left: 60%; width: 115px; height: 155px; background: #4ECDC4; }
.avg-receipt { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 220px; height: 600px; background: rgba(255,255,255,0.12); border-radius: 6px; }
.avg-receipt::before { content: ''; position: absolute; top: 35px; left: 25px; right: 25px; height: 8px; background: rgba(255,255,255,0.15); border-radius: 3px; box-shadow: 0 28px 0 rgba(255,255,255,0.1), 0 56px 0 rgba(255,255,255,0.08), 0 84px 0 rgba(255,255,255,0.06), 0 112px 0 rgba(255,255,255,0.04); }

/* ---- FREQUENCY SCENE (scaled 2x) ---- */
.freq-door { position: absolute; bottom: 0; right: 10%; width: 180px; height: 360px; background: linear-gradient(180deg, #8B4513, #654321); border-radius: 10px 10px 0 0; box-shadow: 0 0 50px rgba(0,0,0,0.35); }
.freq-door::before { content: ''; position: absolute; top: 45%; right: 20px; width: 18px; height: 18px; background: #FFD700; border-radius: 50%; box-shadow: 0 0 14px #FFD700; }
.freq-pkg { position: absolute; bottom: 0; background: linear-gradient(180deg, #c67a34, #a0602a); border-radius: 5px; box-shadow: 0 7px 20px rgba(0,0,0,0.35); }
.freq-pkg::before { content: ''; position: absolute; top: 42%; left: -3px; right: -3px; height: 18px; background: rgba(255,220,150,0.5); }
.fp-1 { right: 22%; width: 120px; height: 100px; }
.fp-2 { right: 30%; width: 90px; height: 76px; }
.fp-3 { right: 15%; width: 140px; height: 110px; }
.freq-truck { position: absolute; bottom: 5%; width: 300px; height: 170px; background: linear-gradient(180deg, #fff, #e8e8e8); border-radius: 10px; box-shadow: 0 14px 35px rgba(0,0,0,0.3); }
.freq-truck::before { content: ''; position: absolute; right: -90px; bottom: 0; width: 100px; height: 120px; background: linear-gradient(180deg, #2196F3, #1565C0); border-radius: 10px; }
.freq-truck::after { content: ''; position: absolute; bottom: -22px; left: 38px; width: 44px; height: 44px; background: #333; border-radius: 50%; box-shadow: 220px 0 0 #333, 286px 0 0 #333; }

/* ---- EXTREMES SCENE (scaled 2x) ---- */
.extremes-big { position: absolute; top: 8%; right: 5%; width: 320px; height: 320px; background: linear-gradient(135deg, #2d2d2d, #1a1a1a); border-radius: 8px; box-shadow: 0 25px 80px rgba(0,0,0,0.5); }
.extremes-big::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 100%; background: linear-gradient(180deg, #FFD700, #FFA500); }
.extremes-big::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 36px; background: linear-gradient(90deg, #FFD700, #FFA500); }
.extremes-small { position: absolute; bottom: 15%; left: 15%; width: 90px; height: 75px; background: #c67a34; border-radius: 5px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.extremes-small::before { content: ''; position: absolute; top: 42%; left: -4px; right: -4px; height: 12px; background: rgba(255,220,150,0.5); }
.extremes-vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border: 5px solid rgba(255,255,255,0.4); border-radius: 50%; }
.extremes-vs::before { content: 'VS'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.7); font-weight: 700; font-size: 24px; font-family: 'Space Grotesk', sans-serif; }

/* ---- TIERS SCENE (scaled 2x) ---- */
.tiers-bag { position: absolute; bottom: 0; background: rgba(255,255,255,0.85); border-radius: 0 0 10px 10px; box-shadow: 0 9px 25px rgba(0,0,0,0.18); }
.tiers-bag::before { content: ''; position: absolute; top: -28px; left: 25%; width: 50%; height: 36px; border: 7px solid rgba(0,0,0,0.2); border-bottom: none; border-radius: 36px 36px 0 0; }
.tb-1 { left: 5%; width: 140px; height: 180px; }
.tb-2 { left: 25%; width: 180px; height: 240px; background: rgba(255,255,200,0.85); }
.tb-3 { left: 50%; width: 160px; height: 200px; background: rgba(200,230,255,0.85); }
.tb-4 { left: 72%; width: 200px; height: 280px; background: rgba(255,200,200,0.85); }

/* ---- PEAK SCENE (scaled 2x) ---- */
.peak-calendar { position: absolute; top: 8%; right: 8%; width: 260px; height: 300px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.peak-calendar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 65px; background: #e63946; border-radius: 16px 16px 0 0; }
.peak-calendar::after { content: ''; position: absolute; top: 90px; left: 28px; width: 22px; height: 22px; background: rgba(0,0,0,0.15); border-radius: 3px; box-shadow: 36px 0 0 rgba(0,0,0,0.15), 72px 0 0 rgba(0,0,0,0.15), 108px 0 0 rgba(0,0,0,0.15), 144px 0 0 rgba(0,0,0,0.15), 0 36px 0 rgba(0,0,0,0.15), 36px 36px 0 rgba(0,0,0,0.15), 72px 36px 0 rgba(0,0,0,0.15), 108px 36px 0 #e63946, 144px 36px 0 rgba(0,0,0,0.15), 0 72px 0 rgba(0,0,0,0.15), 36px 72px 0 rgba(0,0,0,0.15), 72px 72px 0 rgba(0,0,0,0.15), 108px 72px 0 rgba(0,0,0,0.15), 144px 72px 0 rgba(0,0,0,0.15); }
.peak-cart { position: absolute; bottom: 12%; left: 10%; width: 220px; height: 150px; border: 8px solid rgba(255,255,255,0.7); border-top: none; border-radius: 0 0 20px 20px; }
.peak-cart::before { content: ''; position: absolute; top: -55px; right: -18px; width: 90px; height: 55px; border: 8px solid rgba(255,255,255,0.7); border-bottom: none; border-left: none; border-radius: 0 20px 0 0; }
.peak-cart::after { content: ''; position: absolute; bottom: -28px; left: 28px; width: 30px; height: 30px; background: rgba(255,255,255,0.7); border-radius: 50%; box-shadow: 130px 0 0 rgba(255,255,255,0.7); }

/* ---- MONTHS SCENE (scaled 2x) ---- */
.months-bag { position: absolute; bottom: 0; background: rgba(255,255,255,0.15); border-radius: 0 0 6px 6px; }
.months-bag::before { content: ''; position: absolute; top: -20px; left: 20%; width: 60%; height: 28px; border: 5px solid rgba(255,255,255,0.15); border-bottom: none; border-radius: 26px 26px 0 0; }
.mb-1 { left: 5%; width: 90px; --h: 220px; }
.mb-2 { left: 18%; width: 90px; --h: 380px; }
.mb-3 { left: 31%; width: 90px; --h: 150px; }
.mb-4 { left: 44%; width: 90px; --h: 490px; }
.mb-5 { right: 31%; width: 90px; --h: 280px; }
.mb-6 { right: 18%; width: 90px; --h: 340px; }
.mb-7 { right: 5%; width: 90px; --h: 190px; }

/* ---- ITEMS SCENE (scaled 2x) ---- */
.items-belt { position: absolute; bottom: 15%; left: 0; right: 0; height: 14px; background: rgba(255,255,255,0.2); }
.items-belt::before { content: ''; position: absolute; bottom: -10px; left: 5%; width: 26px; height: 26px; background: rgba(255,255,255,0.3); border-radius: 50%; box-shadow: 72px 0 0 rgba(255,255,255,0.3), 144px 0 0 rgba(255,255,255,0.3), 216px 0 0 rgba(255,255,255,0.3), 288px 0 0 rgba(255,255,255,0.3), 360px 0 0 rgba(255,255,255,0.3), 432px 0 0 rgba(255,255,255,0.3); }
.items-pkg { position: absolute; bottom: 20%; background: linear-gradient(180deg, #c67a34, #a0602a); border-radius: 5px; box-shadow: 0 7px 20px rgba(0,0,0,0.35); }
.items-pkg::before { content: ''; position: absolute; top: 42%; left: -3px; right: -3px; height: 14px; background: rgba(255,220,150,0.5); }
.ip-1 { width: 100px; height: 84px; }
.ip-2 { width: 130px; height: 110px; }
.ip-3 { width: 80px; height: 70px; }

/* ---- PRIME SCENE (scaled ~1.7x) ---- */
.prime-membership { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 440px; height: 280px; background: linear-gradient(135deg, #00A8E1, #232F3E); border-radius: 24px; box-shadow: 0 35px 100px rgba(0,0,0,0.5), 0 0 50px rgba(0,168,225,0.35); }
.prime-membership::before { content: 'prime'; position: absolute; top: 45px; left: 35px; color: #fff; font-size: 48px; font-weight: 700; font-style: italic; font-family: 'Space Grotesk', sans-serif; letter-spacing: -2px; }
.prime-membership::after { content: ''; position: absolute; bottom: 45px; right: 45px; width: 50px; height: 28px; border-left: 6px solid #FFD700; border-bottom: 6px solid #FFD700; transform: rotate(-45deg); }
.prime-pkg { position: absolute; background: linear-gradient(180deg, #c67a34, #a0602a); border-radius: 5px; box-shadow: 0 7px 20px rgba(0,0,0,0.3); }
.prime-pkg::before { content: ''; position: absolute; top: 42%; left: -3px; right: -3px; height: 10px; background: rgba(255,220,150,0.5); }
.pp-1 { top: 10%; left: 8%; width: 100px; height: 84px; }
.pp-2 { bottom: 10%; right: 8%; width: 120px; height: 100px; }
.pp-3 { top: 25%; right: 5%; width: 80px; height: 70px; }

/* ---- YOY SCENE (scaled 2x) ---- */
.yoy-bar { position: absolute; bottom: 8%; background: rgba(255,255,255,0.25); border-radius: 10px 10px 0 0; }
.yoy-bar::after { content: attr(data-year); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.5); font-size: 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.yb-1 { left: 15%; width: 100px; --target-h: 190px; }
.yb-2 { left: 42%; width: 100px; --target-h: 340px; }
.yb-3 { left: 70%; width: 100px; --target-h: 460px; }
.yoy-line { position: absolute; bottom: 8%; left: 15%; right: 15%; height: 5px; background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.5)); }

/* ---- ADDICTION SCENE (scaled ~1.9x) ---- */
.addiction-cart-shape { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 260px; height: 170px; border: 10px solid rgba(255,255,255,0.7); border-top: none; border-radius: 0 0 28px 28px; }
.addiction-cart-shape::before { content: ''; position: absolute; top: -65px; right: -28px; width: 100px; height: 65px; border: 10px solid rgba(255,255,255,0.7); border-bottom: none; border-left: none; border-radius: 0 28px 0 0; }
.addiction-cart-shape::after { content: ''; position: absolute; bottom: -34px; left: 28px; width: 38px; height: 38px; background: rgba(255,255,255,0.7); border-radius: 50%; box-shadow: 148px 0 0 rgba(255,255,255,0.7); }
.addiction-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 4px solid rgba(255,255,255,0.2); border-radius: 50%; }
.ar-1 { width: 300px; height: 300px; }
.ar-2 { width: 450px; height: 450px; }
.ar-3 { width: 600px; height: 600px; }

/* ---- PERSONA SCENE (scaled up) ---- */
.persona-glow { position: absolute; top: 50%; left: 50%; width: 600px; height: 700px; background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%); transform: translate(-50%, -50%); }
.persona-confetti { position: absolute; width: 24px; height: 60px; border-radius: 12px; }
.pc-1 { top: 10%; left: 10%; background: #FFD700; }
.pc-2 { top: 15%; right: 15%; background: #FF006E; width: 16px; height: 40px; }
.pc-3 { bottom: 20%; left: 15%; background: #3A86FF; }
.pc-4 { bottom: 10%; right: 10%; background: #38ef7d; width: 20px; height: 50px; }
.pc-5 { top: 40%; left: 5%; background: #FF006E; width: 16px; height: 40px; }
.pc-6 { top: 30%; right: 5%; background: #FFD700; }

/* ---- ELEMENT ENTRANCE ---- */
.anim-in { opacity: 0; }

/* ---- MOBILE (proportionally scaled) ---- */
@media (max-width: 480px) {
    .s-big-num { font-size: clamp(3rem, 12vw, 5rem); }
    .s-split { flex-direction: column; gap: 0.5rem; }
    .s-split-vs { display: none; }
    .s-year-row { gap: 0.6rem; }
    .s-year-box { padding: 0.7rem 1rem; min-width: 65px; }
    .s-year-num { font-size: 1.5rem; }
    .s-next { bottom: 2.5rem; }
    .intro-card { width: 180px; height: 115px; }
    .intro-bag { width: 140px; height: 180px; }
    .intro-box { width: 150px; height: 115px; }
    .extremes-big { max-width: 200px; max-height: 200px; width: 42vw; height: 42vw; }
    .prime-membership { max-width: 280px; width: 60vw; height: 175px; }
    .prime-membership::before { font-size: 36px; }
    .freq-truck { max-width: 200px; width: 42vw; height: 115px; }
    .peak-calendar { width: 170px; height: 195px; }
    .peak-cart { width: 170px; height: 115px; }
    .addiction-cart-shape { width: 180px; height: 115px; }
    .addiction-ring.ar-1 { width: 45vw; height: 45vw; }
    .addiction-ring.ar-2 { width: 65vw; height: 65vw; }
    .addiction-ring.ar-3 { width: 85vw; height: 85vw; max-width: 400px; max-height: 400px; }
    .persona-glow { width: 80vw; height: 90vh; }
    .persona-confetti { width: 16px; height: 40px; }
    .spent-card { width: 180px; height: 115px; }
    .sc-2 { width: 160px; height: 100px; }
    .ob-1, .ob-3, .ob-5 { width: 120px; height: 100px; }
    .ob-2, .ob-4, .ob-6 { width: 90px; height: 75px; }
    .at-1 { width: 130px; height: 175px; }
    .at-2 { width: 105px; height: 140px; }
    .at-3 { width: 85px; height: 115px; }
    .tb-1 { width: 100px; height: 130px; }
    .tb-2 { width: 130px; height: 170px; }
    .tb-3 { width: 115px; height: 145px; }
    .tb-4 { width: 145px; height: 200px; }
}

/* ---- SMALL MOBILE ---- */
@media (max-width: 360px) {
    .intro-card { width: 135px; height: 86px; }
    .intro-bag { width: 105px; height: 135px; }
    .intro-box { width: 112px; height: 86px; }
    .extremes-big { max-width: 150px; max-height: 150px; }
    .prime-membership { max-width: 210px; height: 130px; }
    .prime-membership::before { font-size: 28px; }
    .freq-truck { max-width: 150px; height: 86px; }
    .peak-calendar { width: 128px; height: 146px; }
    .peak-cart { width: 128px; height: 86px; }
    .addiction-cart-shape { width: 135px; height: 86px; }
    .addiction-ring.ar-1 { width: 34vw; height: 34vw; }
    .addiction-ring.ar-2 { width: 50vw; height: 50vw; }
    .addiction-ring.ar-3 { width: 68vw; height: 68vw; }
    .persona-glow { width: 75vw; height: 85vh; }
    .spent-card { width: 135px; height: 86px; }
    .sc-2 { width: 120px; height: 75px; }
}