:root {
  --bg:#070b18; --bg2:#0d1328; --card:rgba(255,255,255,.045); --card-b:rgba(255,255,255,.09);
  --fg:#eef2ff; --muted:#9aa6c4; --blue:#4f8cff; --mint:#2ee6a6; --violet:#9b6bff; --amber:#ffb84d; --rose:#ff6b8b;
  --grad:linear-gradient(120deg,var(--blue),var(--violet) 55%,var(--mint));
  --r:18px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (min-width:900px) and (min-height:640px) { html { scroll-snap-type:y proximity; } .slide { scroll-snap-align:start; } }
body { margin:0; background:var(--bg); color:var(--fg); font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.6; overflow-x:hidden; }
a { color:inherit; }
img { max-width:100%; }
::selection { background:var(--violet); color:#fff; }

/* ── fon və yuxarı panel ── */
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(1200px 700px at 80% -10%, #16224a 0%, transparent 60%), var(--bg); }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 22s ease-in-out infinite alternate; }
.orb.a { width:520px; height:520px; background:#2b5cff; left:-120px; top:10%; }
.orb.b { width:460px; height:460px; background:#7a3cff; right:-100px; top:45%; animation-delay:-8s; }
.orb.c { width:380px; height:380px; background:#0fd6a0; left:35%; bottom:-140px; opacity:.28; animation-delay:-14s; }
@keyframes drift { to { transform:translate(60px,-50px) scale(1.15); } }
.grain { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
#progress { position:fixed; left:0; top:0; height:3px; width:0; background:var(--grad); z-index:60; }
.topbar { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:22px; padding:12px clamp(14px,4vw,40px); backdrop-filter:blur(14px); background:linear-gradient(180deg,rgba(7,11,24,.85),rgba(7,11,24,0)); }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; text-decoration:none; }
.logo img { width:28px; height:28px; border-radius:7px; }
.topbar nav { display:flex; gap:20px; margin-left:auto; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:.93rem; transition:color .2s; }
.topbar nav a:hover { color:#fff; }
@media (max-width:760px) { .topbar nav a:not(.cta) { display:none; } }
.cta, .btn { display:inline-flex; align-items:center; gap:8px; background:var(--grad); color:#fff !important; font-weight:700; padding:10px 20px; border-radius:999px; text-decoration:none; border:0; cursor:pointer; font-size:.98rem; font-family:inherit; box-shadow:0 10px 30px -10px rgba(91,110,255,.7); transition:transform .2s, box-shadow .2s; }
.cta:hover, .btn:hover { transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(91,110,255,.9); }
.btn.ghost { background:transparent; border:1px solid var(--card-b); box-shadow:none; }
.btn.ghost:hover { background:var(--card); }
.btn.off { background:#222a44; color:var(--muted) !important; box-shadow:none; pointer-events:none; }
.btn.big { padding:14px 28px; font-size:1.05rem; }

/* sağ naviqasiya nöqtələri */
.dots { position:fixed; right:clamp(8px,1.6vw,22px); top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:14px; }
@media (max-width:900px) { .dots { display:none; } }
.dots a { position:relative; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25); transition:all .3s; }
.dots a.on { background:var(--mint); transform:scale(1.5); box-shadow:0 0 14px var(--mint); }
.dots a span { position:absolute; right:22px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:.8rem; background:#111a38; padding:3px 10px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s; }
.dots a:hover span { opacity:1; }

/* ── slaydlar ── */
.slide { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:92px clamp(16px,5vw,64px) 56px; position:relative; }
.inner { width:100%; max-width:1120px; margin:0 auto; }
.eyebrow { display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin-bottom:10px; }
h1 { font-size:clamp(2.4rem,6.4vw,4.8rem); line-height:1.04; letter-spacing:-.035em; margin:0 0 18px; font-weight:800; }
h2 { font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.1; letter-spacing:-.03em; margin:0 0 14px; font-weight:800; }
h3 { margin:0 0 6px; font-size:1.15rem; letter-spacing:-.01em; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:shine 6s linear infinite; }
@keyframes shine { to { background-position:200% 0; } }
.lead { color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.22rem); max-width:620px; }
.center { text-align:center; } .center .lead { margin-left:auto; margin-right:auto; }

/* animasiya: slayd aktiv olanda elementlər gəlir */
.slide .pop { opacity:0; transform:translateY(26px) scale(.98); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--d,0) * 90ms); }
.slide.active .pop, .doc .pop.in { opacity:1; transform:none; }

/* ── hero ── */
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; }
@media (max-width:940px) { .hero-grid { grid-template-columns:1fr; } }
.badge { display:inline-flex; gap:8px; align-items:center; border:1px solid var(--card-b); background:var(--card); padding:6px 14px; border-radius:999px; font-size:.85rem; color:var(--muted); margin-bottom:20px; }
.badge i { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); animation:blink 1.8s infinite; }
@keyframes blink { 50% { opacity:.3; } }
.rot { display:inline-block; min-width:5ch; position:relative; }
.rot::after { content:"|"; color:var(--mint); animation:blink 1s infinite; margin-left:2px; -webkit-text-fill-color:var(--mint); }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.hero-mini { display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.hero-mini div b { display:block; font-size:1.6rem; letter-spacing:-.02em; }
.hero-mini div span { color:var(--muted); font-size:.85rem; }
.stack { position:relative; height:min(460px,56vw); perspective:1200px; }
@media (max-width:940px) { .stack { height:clamp(240px,60vw,380px); } }
.stack .win { position:absolute; width:78%; transition:transform .25s ease-out; will-change:transform; }
.stack .w1 { left:0; top:6%; z-index:2; animation:float 7s ease-in-out infinite; }
.stack .w2 { right:0; top:30%; z-index:3; animation:float 8s ease-in-out -2s infinite; }
.stack .w3 { left:12%; bottom:-4%; z-index:1; opacity:.9; animation:float 9s ease-in-out -4s infinite; }
@keyframes float { 50% { translate:0 -14px; } }
.win { background:#141c3a; border-radius:12px; padding-top:24px; position:relative; box-shadow:0 30px 70px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); overflow:hidden; }
.win::before { content:""; position:absolute; left:11px; top:8px; width:8px; height:8px; border-radius:50%; background:#ff5f57; box-shadow:14px 0 #febc2e, 28px 0 #28c840; }
.win img { display:block; width:100%; height:auto; }
.chip { position:absolute; z-index:5; background:rgba(15,22,48,.85); border:1px solid var(--card-b); backdrop-filter:blur(8px); padding:8px 14px; border-radius:14px; font-size:.85rem; font-weight:700; box-shadow:0 16px 40px -16px #000; animation:float 6s ease-in-out infinite; }
.chip.c1 { right:2%; top:0; color:var(--mint); } .chip.c2 { left:-2%; bottom:22%; color:var(--amber); animation-delay:-3s; } .chip.c3 { right:6%; bottom:2%; color:var(--blue); animation-delay:-1.5s; }
.scroll-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); color:var(--muted); font-size:.8rem; display:flex; flex-direction:column; align-items:center; gap:6px; }
.scroll-hint::after { content:""; width:1px; height:28px; background:linear-gradient(var(--mint),transparent); animation:drop 1.8s infinite; }
@keyframes drop { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }

/* ── problem / nizam ── */
.stage { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 22px; min-height:280px; }
@media (max-width:760px) { .stage { grid-template-columns:repeat(2,1fr); } }
.note { --x:0px; --y:0px; --r:0deg; transform:translate(var(--x),var(--y)) rotate(var(--r)); transition:transform .9s cubic-bezier(.3,1.3,.4,1), background .6s, color .6s, border-color .6s, box-shadow .6s; background:#ffe98a; color:#3b3200; padding:16px 16px 18px; border-radius:6px 6px 14px 6px; font-family:"Caveat","Comic Sans MS",cursive; font-size:1.15rem; line-height:1.25; box-shadow:0 14px 26px -12px rgba(0,0,0,.6); min-height:92px; border:1px solid transparent; }
.note small { display:block; font-family:"Manrope",system-ui,sans-serif; font-size:.74rem; opacity:.7; margin-top:6px; }
.note:nth-child(2n) { background:#ffc9d6; } .note:nth-child(3n) { background:#bfe3ff; }
.tidy .note { transform:none; background:var(--card); color:var(--fg); font-family:inherit; font-size:.98rem; border-color:var(--card-b); box-shadow:0 0 0 1px rgba(46,230,166,.18) inset; border-radius:14px; }
.tidy .note b { color:var(--mint); }
.swap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.swap .cap { color:var(--muted); font-size:.95rem; }

/* ── necə işləyir ── */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; position:relative; }
@media (max-width:860px) { .steps3 { grid-template-columns:1fr; } }
.step { position:relative; background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:26px 22px 22px; backdrop-filter:blur(6px); }
.step .n { position:absolute; top:-18px; left:22px; width:36px; height:36px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-weight:800; box-shadow:0 8px 22px -6px var(--violet); }
.step p { color:var(--muted); margin:0 0 16px; font-size:.95rem; }
.mini { background:rgba(0,0,0,.28); border-radius:12px; padding:12px; font-size:.82rem; min-height:118px; }
.mini .row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.1); } .mini .row:last-child { border:0; }
.mini .row b { color:var(--mint); }
.bars { display:flex; align-items:flex-end; gap:9px; height:94px; }
.bars i { flex:1; border-radius:6px 6px 2px 2px; background:var(--grad); height:0; transition:height 1.1s cubic-bezier(.2,.9,.2,1); transition-delay:calc(var(--i) * 110ms + .5s); }
.slide.active .bars i { height:var(--h); }
.flowline { position:absolute; left:8%; right:8%; top:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--violet),transparent); opacity:.5; }
@media (max-width:860px) { .flowline { display:none; } }

/* ── ekran turu ── */
.tour { display:grid; grid-template-columns:320px 1fr; gap:30px; margin-top:34px; align-items:start; }
@media (max-width:940px) { .tour { grid-template-columns:1fr; } }
.tabs-v { display:flex; flex-direction:column; gap:8px; }
@media (max-width:940px) { .tabs-v { flex-direction:row; overflow-x:auto; padding-bottom:6px; } .tabs-v button { min-width:170px; } }
.tabs-v button { text-align:left; background:var(--card); border:1px solid var(--card-b); color:var(--fg); border-radius:14px; padding:13px 15px; cursor:pointer; font-family:inherit; position:relative; overflow:hidden; transition:background .25s, border-color .25s, transform .25s; }
.tabs-v button:hover { transform:translateX(3px); }
.tabs-v button strong { display:block; font-size:1rem; }
.tabs-v button span { color:var(--muted); font-size:.84rem; display:none; }
.tabs-v button.on { background:rgba(79,140,255,.12); border-color:rgba(79,140,255,.5); }
.tabs-v button.on span { display:block; }
.tabs-v button .bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--grad); }
.tabs-v button.on .bar { animation:fill var(--dur,6s) linear forwards; }
.paused .tabs-v button.on .bar { animation-play-state:paused; }
@keyframes fill { to { width:100%; } }
.viewer { position:relative; }
.viewer .win { width:100%; }
.shots { position:relative; aspect-ratio:1360/820; background:#0b1230; }
.shots img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .6s, transform .9s; cursor:zoom-in; }
.shots img.on { opacity:1; transform:none; }
.viewer .glow { position:absolute; inset:-30px; background:radial-gradient(closest-side, rgba(79,140,255,.35), transparent); z-index:-1; filter:blur(20px); }

/* ── kalkulyator ── */
.calc { display:grid; grid-template-columns:1fr 1.1fr; gap:26px; margin-top:34px; }
@media (max-width:900px) { .calc { grid-template-columns:1fr; } }
.panel { background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:24px; backdrop-filter:blur(8px); }
.ctl { margin-bottom:18px; } .ctl label { display:flex; justify-content:space-between; font-size:.92rem; color:var(--muted); margin-bottom:6px; } .ctl label b { color:var(--fg); }
input[type=range] { width:100%; accent-color:var(--mint); height:6px; }
.res { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.res div { background:rgba(0,0,0,.25); border-radius:14px; padding:12px 14px; } .res small { color:var(--muted); display:block; font-size:.78rem; }
.res b { font-size:1.4rem; letter-spacing:-.02em; } .res .big b { font-size:1.9rem; }
.pos { color:var(--mint); } .neg { color:var(--rose); }
.hbars .hb { display:grid; grid-template-columns:78px 1fr 84px; align-items:center; gap:10px; margin:9px 0; font-size:.85rem; color:var(--muted); }
.hbars .tr { height:14px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; } .hbars .tr i { display:block; height:100%; border-radius:999px; width:0; transition:width .7s cubic-bezier(.2,.9,.2,1); }
.hbars .hb em { font-style:normal; color:var(--fg); text-align:right; font-weight:700; }
.small { font-size:.8rem; color:var(--muted); margin-top:12px; }

/* ── bento ── */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:14px; margin-top:34px; }
@media (max-width:900px) { .bento { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .bento { grid-template-columns:1fr; } }
.tile { --mx:50%; --my:50%; position:relative; overflow:hidden; background:var(--card); border:1px solid var(--card-b); border-radius:var(--r); padding:20px; transition:transform .3s, border-color .3s; }
.tile::before { content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx) var(--my), rgba(124,140,255,.22), transparent 60%); opacity:0; transition:opacity .3s; }
.tile:hover { transform:translateY(-4px); border-color:rgba(155,107,255,.5); } .tile:hover::before { opacity:1; }
.tile .ic { font-size:1.9rem; display:block; margin-bottom:8px; } .tile p { color:var(--muted); font-size:.92rem; margin:0; position:relative; } .tile h3, .tile .ic { position:relative; }
.tile.w2 { grid-column:span 2; } .tile.h2 { grid-row:span 2; }
@media (max-width:560px) { .tile.w2 { grid-column:auto; } .tile.h2 { grid-row:auto; } }
.tile.hot { background:linear-gradient(140deg,rgba(79,140,255,.25),rgba(155,107,255,.2)); }
.tile .tag { display:inline-block; margin-top:10px; font-size:.75rem; padding:3px 10px; border-radius:999px; background:rgba(46,230,166,.14); color:var(--mint); position:relative; }

/* ── yükləmə ── */
.dl2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; }
@media (max-width:760px) { .dl2 { grid-template-columns:1fr; } }
.os { position:relative; text-align:center; background:var(--card); border:1px solid var(--card-b); border-radius:24px; padding:34px 22px; transition:transform .3s, border-color .3s; overflow:hidden; }
.os:hover { transform:translateY(-6px); }
.os.me { border-color:rgba(46,230,166,.6); box-shadow:0 0 50px -14px rgba(46,230,166,.5); }
.os .big-ic { font-size:3.4rem; display:block; margin-bottom:6px; }
.os small { display:block; color:var(--muted); margin:2px 0 18px; }
.os .me-tag { display:none; position:absolute; top:14px; right:14px; font-size:.72rem; font-weight:800; background:var(--mint); color:#04251a; padding:3px 10px; border-radius:999px; }
.os.me .me-tag { display:block; }
#meta { margin-top:18px; color:var(--muted); font-size:.95rem; }

/* ── ətraflı sənəd hissəsi ── */
.doc { background:linear-gradient(180deg,transparent,rgba(13,19,40,.9) 120px); padding:30px clamp(16px,5vw,64px) 40px; }
.doc .inner { max-width:900px; }
.doc section { padding:44px 0 6px; scroll-margin-top:70px; }
.doc h2 { font-size:clamp(1.6rem,3.4vw,2.2rem); }
.sub { color:var(--muted); margin:0 0 20px; }
.doc ol.steps { padding-left:22px; } .doc ol.steps li { margin:7px 0; }
.note-box, .doc .note { background:rgba(255,184,77,.1); border:1px solid rgba(255,184,77,.35); border-radius:12px; padding:12px 16px; margin:14px 0; font-family:inherit; font-size:inherit; min-height:0; color:var(--fg); transform:none; box-shadow:none; }
.doc .tip { background:rgba(79,140,255,.12); border-radius:12px; padding:12px 16px; margin:14px 0; }
code { background:rgba(255,255,255,.1); padding:1px 7px; border-radius:5px; font-size:.9em; }
details { background:var(--card); border:1px solid var(--card-b); border-radius:14px; margin:10px 0; transition:border-color .2s; }
details[open] { border-color:rgba(79,140,255,.45); }
summary { cursor:pointer; padding:15px 18px; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px; }
summary::after { content:"+"; color:var(--mint); font-size:1.3rem; line-height:1; transition:transform .25s; } details[open] summary::after { transform:rotate(45deg); }
summary::-webkit-details-marker { display:none; }
details > div { padding:0 18px 16px; color:#cdd6f0; }
details ol, details ul { padding-left:22px; margin:6px 0; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tabs button { flex:1; padding:10px; border:1px solid var(--card-b); background:var(--card); color:var(--fg); border-radius:12px; font-size:1rem; cursor:pointer; font-family:inherit; }
.tabs button[aria-selected="true"] { border-color:var(--blue); background:rgba(79,140,255,.16); font-weight:700; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--card-b); border-radius:12px; overflow:hidden; }
th,td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--card-b); font-size:.93rem; } td a { color:var(--mint); }
.tw { overflow-x:auto; }
.doc h3 { margin-top:26px; }
footer { text-align:center; color:var(--muted); padding:50px 0 30px; font-size:.9rem; } footer a { color:var(--mint); }
.final { text-align:center; margin-top:50px; padding:44px 20px; border-radius:26px; background:linear-gradient(135deg,rgba(79,140,255,.25),rgba(155,107,255,.22)); border:1px solid var(--card-b); }

#lb { position:fixed; inset:0; background:rgba(3,6,16,.92); display:none; align-items:center; justify-content:center; z-index:80; padding:16px; cursor:zoom-out; }
#lb.on { display:flex; } #lb img { max-width:100%; max-height:100%; border-radius:10px; }
.doc .pop { transition-delay:0s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .slide .pop { opacity:1; transform:none; } html { scroll-behavior:auto; }
}

/* ── barkod ── */
.bc-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
@media (max-width:940px) { .bc-grid { grid-template-columns:1fr; } }
.checks { list-style:none; padding:0; margin:18px 0 0; } .checks li { padding-left:28px; position:relative; margin:9px 0; color:#cdd6f0; }
.checks li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:rgba(46,230,166,.18); color:var(--mint); display:grid; place-items:center; font-size:.75rem; font-weight:800; }
.muted { color:var(--muted); }
.scanner { display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--card); border:1px solid var(--card-b); border-radius:24px; padding:20px; backdrop-filter:blur(8px); position:relative; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); }
@media (max-width:560px) { .scanner { grid-template-columns:1fr; } }
.product { position:relative; background:#f4f6fb; color:#0b1020; border-radius:16px; padding:16px 14px 12px; overflow:hidden; text-align:center; transform:rotate(-2deg); transition:transform .4s, opacity .4s; }
.product.swap-in { animation:slidein .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes slidein { from { transform:translateX(40px) rotate(4deg); opacity:0; } }
.pname { font-weight:800; margin-bottom:8px; font-size:1rem; }
#scBars { width:100%; height:78px; display:block; }
.pcode { font-family:ui-monospace,Menlo,monospace; letter-spacing:.18em; font-size:.82rem; margin-top:4px; }
.laser { position:absolute; left:6%; right:6%; top:30%; height:3px; background:#ff2a4d; box-shadow:0 0 14px 3px rgba(255,42,77,.8); border-radius:3px; opacity:0; }
.laser.go { animation:sweep .9s ease-in-out; }
@keyframes sweep { 0% { opacity:0; transform:translateY(-30px); } 15% { opacity:1; } 50% { transform:translateY(40px); } 85% { opacity:1; } 100% { opacity:0; transform:translateY(-30px); } }
.sc-left small { display:block; margin-top:10px; font-size:.78rem; }
.sc-right { position:relative; display:flex; flex-direction:column; min-height:240px; background:rgba(0,0,0,.25); border-radius:16px; padding:12px; }
.cart-h { font-weight:800; font-size:.9rem; display:flex; justify-content:space-between; margin-bottom:6px; } .cart-h span { background:var(--grad); border-radius:999px; padding:0 9px; font-size:.8rem; }
.cart { flex:1; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.cart .ci { display:flex; justify-content:space-between; font-size:.84rem; padding:7px 10px; background:rgba(255,255,255,.07); border-radius:10px; animation:ci .45s cubic-bezier(.2,.9,.3,1.3); }
.cart .ci b { color:var(--mint); } .cart .ci i { font-style:normal; color:var(--muted); margin-left:6px; }
@keyframes ci { from { opacity:0; transform:translateX(24px) scale(.95); } }
.cart-t { display:flex; justify-content:space-between; border-top:1px dashed var(--card-b); padding-top:8px; margin-top:6px; font-size:1.05rem; }
.flash { position:absolute; right:12px; top:-14px; background:var(--mint); color:#04251a; font-weight:800; padding:4px 12px; border-radius:999px; opacity:0; transform:translateY(6px) scale(.9); transition:all .25s; }
.flash.on { opacity:1; transform:none; }