/* TREN — home (cinematic) — shared by index.html and aplikacija/ */
@font-face{font-family:Geist;src:url(/fonts/Geist-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/Geist-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/Geist-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--night:#000;--paper:#fff;--tx:#10131a;--tx2:#5b6472;--tx-inv:#f5f5f7;--tx2-inv:#a1a1a6;--line:rgba(255,255,255,.12);--blue:#006efe;--yellow:#ffc21a;--shell:1100px;--ease:cubic-bezier(.16,1,.3,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html,body{overflow-x:clip}
body{font-family:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--night);color:var(--tx-inv);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* type */
.display{font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.6rem,8vw,6.4rem)}
.h2{font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2rem,5.6vw,4.2rem)}
.h3{font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.4rem,3vw,2.2rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--tx2-inv);max-width:42ch;line-height:1.45}
.kicker{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2-inv)}
.lines>span{display:block}
.tag{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;letter-spacing:.1em;padding:.4em .75em;border-radius:999px;border:1px solid var(--line);color:var(--tx-inv);vertical-align:middle;margin-left:.4em}
.tag.plan{border-color:rgba(0,110,254,.55);color:var(--blue)}
.tag.beta{border-color:rgba(0,110,254,.65);color:#5aa2ff}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;padding:.9em 1.5em;border-radius:999px;background:var(--paper);color:#000;transition:transform .22s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--tx-inv);border:1px solid rgba(255,255,255,.25)}
/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.logo{display:flex;align-items:center;gap:10px}
.logo .roundel{width:30px;height:30px}
.logo .word{height:20px;width:auto}
.hdr nav{display:flex;gap:26px;font-size:.9rem;color:var(--tx2-inv)}
.hdr nav a:hover{color:var(--tx-inv)}
.hdr .btn{padding:.55em 1.1em;font-size:.85rem}
@media(max-width:720px){.hdr nav{display:none}}
.progress{position:fixed;inset:0 0 auto 0;height:2px;background:var(--paper);transform-origin:0 50%;transform:scaleX(0);z-index:60;opacity:.85}
/* pinned beats */
.runway{position:relative}
.runway .stage{position:sticky;top:0;height:100svh;overflow:clip;display:grid;place-items:center}
/* aurora: pre-blurred gradients, transform only */
.aurora{position:absolute;inset:-20%;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora .a{left:5%;top:10%;width:60vw;height:60vw;background:radial-gradient(closest-side,rgba(0,110,254,.32),rgba(0,110,254,.08) 45%,transparent 70%)}
.aurora .b{right:0;top:30%;width:50vw;height:50vw;background:radial-gradient(closest-side,rgba(0,110,254,.10),transparent 70%)}
.aurora .c{left:30%;bottom:-10%;width:55vw;height:55vw;background:radial-gradient(closest-side,rgba(120,170,255,.18),transparent 70%)}
@keyframes auroraA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,6%) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes auroraB{0%{transform:translate(0,0)}50%{transform:translate(-10%,8%) scale(1.08)}100%{transform:translate(0,0)}}
@keyframes auroraC{0%{transform:translate(0,0)}50%{transform:translate(6%,-10%) scale(.94)}100%{transform:translate(0,0)}}
.aurora .a{animation:auroraA 18s ease-in-out infinite}.aurora .b{animation:auroraB 22s ease-in-out infinite}.aurora .c{animation:auroraC 26s ease-in-out infinite}
/* network canvas */
.net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* HERO */
.hero .runway{height:340vh}
.hero .stage{align-content:start;padding-top:14vh;text-align:center}
.hero .copy{position:relative;z-index:2}
.hero .display{margin-bottom:14px}
.hero .tail{font-size:clamp(1.2rem,2.6vw,1.8rem);font-weight:500;color:var(--tx2-inv)}
.hero .tail b{color:var(--tx-inv)}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hero .mock{position:absolute;left:50%;top:55%;translate:-50% -50%;z-index:2;width:min(1080px,92vw);margin:0;transform-origin:50% 50%}
.hero .mock img{border-radius:22px;box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
/* flight: 20 KM travels from the left phone to the right one while you scroll */
.hero .mock{container-type:inline-size}
.flight{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;left:35%;top:-4cqw;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;padding:12px 22px 12px 12px;border-radius:999px;background:#fff;color:#000;font-weight:700;font-size:clamp(1rem,2.6cqw,1.7rem);letter-spacing:-.01em;box-shadow:0 0 0 6px rgba(0,110,254,.18),0 18px 60px rgba(0,110,254,.55),0 0 0 1px rgba(0,0,0,.06);opacity:0;white-space:nowrap}
.chip img{width:1.9em;height:1.9em;border-radius:.5em}
.dot{position:absolute;left:35%;top:-4cqw;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--blue);box-shadow:0 0 16px 4px rgba(0,110,254,.7);opacity:0}
.ping{position:absolute;left:65%;top:-4.5cqw;width:90px;height:90px;margin:-45px;border-radius:50%;border:2px solid var(--blue);box-shadow:0 0 30px rgba(0,110,254,.6);opacity:0;transform:scale(0)}
.got{position:absolute;left:65%;top:-4.5cqw;transform:translate(-50%,-140%);padding:8px 16px;font-size:clamp(.8rem,1.6cqw,1.1rem)!important;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:clamp(.7rem,1.3cqw,.95rem);white-space:nowrap;opacity:0}
@keyframes fly{0%{opacity:0;transform:translate(0,6cqw) scale(.35)}12%{opacity:1;transform:translate(1cqw,0) scale(1)}50%{transform:translate(15cqw,-8cqw) scale(1.18)}86%{opacity:1;transform:translate(30cqw,-.5cqw) scale(1)}100%{opacity:0;transform:translate(30cqw,2cqw) scale(.7)}}
@keyframes pingOut{0%{opacity:.9;transform:scale(0)}100%{opacity:0;transform:scale(2.4)}}
@keyframes gotIn{0%{opacity:0;transform:translate(-50%,-60%) scale(.8)}30%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hero .note{position:absolute;bottom:5vh;left:0;right:0;z-index:2;font-size:.8rem;color:var(--tx2-inv);text-align:center}
.hero .note i{display:none}
/* 0 KM */
.zero .runway{height:220vh}
.zero .stage{text-align:center}
.zero .shell{position:relative;z-index:2}
.zero .big{font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(6rem,24vw,19rem)}
.zero .big em{font-style:normal;color:var(--blue)}
.zero .h2{margin:10px auto 10px;max-width:20ch;font-size:clamp(1.6rem,4vw,3rem)}
.zero .lead{margin:0 auto 34px}
.claims{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.claims span{font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:600;padding:.7em 1.2em;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
/* SEND — interactive swipe */
.send{padding:18vh 0;position:relative;overflow:clip}
.send .grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.send .grid2{grid-template-columns:1fr}}
.send .h2{margin:12px 0 14px}
.panel{position:relative;border-radius:28px;padding:28px;background:#0c0d10;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 100px -40px rgba(0,110,254,.35)}
.wire{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.who{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1a1c22;font-weight:700;font-size:.9rem;flex:none}
.who.me{background:var(--blue)}
.line{position:relative;flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:visible}
.pulse{position:absolute;left:0;top:50%;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 18px 4px rgba(0,110,254,.7);transform:translate(-50%,-50%) scale(0);opacity:0}
.amount{font-weight:700;letter-spacing:-.03em;font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:6px}
.amount small{font-size:.45em;color:var(--tx2-inv);font-weight:600}
.to{color:var(--tx2-inv);margin-bottom:22px}
.track{position:relative;height:64px;border-radius:999px;background:#15171c;border:1px solid rgba(255,255,255,.08);user-select:none;touch-action:pan-y}
.track .hint{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;color:var(--tx2-inv);font-size:.95rem;padding-left:56px;pointer-events:none;transition:opacity .2s}
.knob{position:absolute;left:4px;top:4px;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;cursor:grab;box-shadow:0 6px 20px rgba(0,0,0,.5);touch-action:none}
.knob:active{cursor:grabbing}
.knob img{width:34px;height:34px;border-radius:9px}
.track.done{background:rgba(0,110,254,.18);border-color:rgba(0,110,254,.5)}
.track.done .knob{background:var(--blue)}
.result{margin-top:18px;min-height:1.6em;font-weight:600;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.result.on{opacity:1;transform:none}
.result small{display:block;font-weight:400;color:var(--tx2-inv);font-size:.85rem}
@keyframes travel{0%{transform:translate(-50%,-50%) scale(0);opacity:0}8%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%{opacity:1;left:100%;transform:translate(-50%,-50%) scale(1)}100%{left:100%;opacity:0;transform:translate(-50%,-50%) scale(0)}}
.line.go .pulse{animation:travel .9s cubic-bezier(.4,0,.2,1) forwards}
/* STORY */
.storyHead{text-align:center;padding:20vh 24px 8vh;max-width:860px;margin:0 auto}
.storyHead .lead{margin:18px auto 0}
.story .runway{height:560vh}
.storyGrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;width:min(1100px,calc(100% - 48px));margin:0 auto}
.phone{position:relative;width:min(300px,64vw);aspect-ratio:852/1846;margin:0 auto;border-radius:44px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9),0 0 120px -30px rgba(0,110,254,.35)}
.phone>img{width:100%;height:100%;object-fit:cover}
.ringSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ring{opacity:0}
.ring:first-of-type{opacity:1}
.ring rect{fill:none;stroke:var(--blue);vector-effect:non-scaling-stroke}
.ring .core{stroke-width:3}
.ring .glow{stroke-width:12;opacity:.28}
.caps{position:relative;min-height:46vh}
.cap{position:absolute;inset:0;display:grid;align-content:center;gap:12px;opacity:0}
.cap:first-child{opacity:1}
.cap .num{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;letter-spacing:-.04em;color:rgba(255,255,255,.18);line-height:1}
@media(max-width:820px){
/* Stage nicht mittig fuellen: unter dem Header beginnen, Telefon nach Resthoehe bemessen -
sonst rutscht die Telefon-Oberkante auf echten iPhones unter die Kopfleiste */
.story .stage{padding:68px 0 14px;place-items:stretch center}
.storyGrid{grid-template-columns:1fr;grid-template-rows:auto auto;gap:12px;height:100%;align-content:start;text-align:center}
.phone{width:min(210px,50vw,calc((100svh - 320px)*.4615));height:auto;margin:0 auto;order:0}
.caps{min-height:0;height:206px;order:2}
.cap{align-content:start;justify-items:center}
.cap .num{font-size:1.5rem}
.cap .lead{font-size:.92rem}
}
/* CHAT — money travels like a message */
.chat .runway{height:320vh}
.chat .stage{padding:0 24px}
.chatBox{width:min(560px,100%);display:grid;gap:12px}
.chatHead{text-align:center;margin-bottom:26px}
.chatHead .h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.msg{max-width:86%;padding:12px 16px;border-radius:20px;font-size:1.02rem;line-height:1.4;opacity:0}
.msg.in{background:#1c1e24;border-bottom-left-radius:6px;justify-self:start}
.msg.out{background:var(--blue);color:#fff;border-bottom-right-radius:6px;justify-self:end}
.msg .n{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--tx2-inv);margin-bottom:3px}
.msg.out .n{color:rgba(255,255,255,.7)}
.msg.tx{background:#0f1420;border:1px solid rgba(0,110,254,.45);display:flex;gap:12px;align-items:center;justify-self:stretch;max-width:100%}
.msg.tx img{width:34px;height:34px;border-radius:9px}
.msg.tx b{display:block}.msg.tx small{color:var(--tx2-inv)}
.msg:first-child{opacity:1}
/* SPLIT */
.split .runway{height:280vh}
.split .stage{text-align:center}
.splitWrap{position:relative;width:min(640px,92vw);height:min(360px,60vh);margin:0 auto}
.bill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(260px,60vw);padding:26px 22px;border-radius:24px;background:#fff;color:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.bill .k{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:#5b6472}
.bill .v{font-size:clamp(2rem,6vw,3.2rem);font-weight:700;letter-spacing:-.04em;margin-top:4px}
.part{position:absolute;left:50%;top:50%;width:min(150px,38vw);padding:16px 14px;border-radius:18px;background:#111114;border:1px solid rgba(255,255,255,.1);transform:translate(-50%,-50%) scale(.6);opacity:0}
.part b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.part small{color:var(--tx2-inv);font-size:.82rem}
.split .h2{margin:0 0 10px}
.split .lead{margin:0 auto 28px}
.split .after{margin-top:26px;color:var(--tx2-inv);opacity:0}
/* QR */
.qr{position:relative;height:120svh;overflow:clip}
.qr img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;opacity:.55}
.qr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.35) 70%,#000 100%)}
.qr .copy{position:relative;z-index:2;height:100%;display:grid;align-content:end;padding-bottom:16vh}
.qr .h2{margin:14px 0 12px}
.qr .lead{margin-bottom:22px}
@media(max-width:820px){
/* Markt-Foto auf Mobile: kompakter und besser sichtbar (Eigentuemer-Wunsch 25.08.) */
.qr{height:76svh}
.qr img{opacity:.72}
.qr::after{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.1) 28%,rgba(0,0,0,.28) 72%,#000 100%)}
.qr .copy{padding-bottom:8svh}
}
.steps{display:flex;gap:10px;flex-wrap:wrap}
.steps span{font-size:.9rem;padding:.6em 1em;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line)}
.steps b{color:var(--blue);margin-right:.4em}
/* cards */
.grid{padding:16vh 0}
.grid .h2{max-width:16ch;margin-bottom:48px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{padding:28px 26px 30px;border-radius:22px;background:#111114;border:1px solid rgba(255,255,255,.06)}
.card .kicker{margin-bottom:14px}
.card .h3{margin-bottom:10px;font-size:1.35rem}
.card p{color:var(--tx2-inv);font-size:.98rem}
.card .tag{margin:16px 0 0}
/* bank — daylight */
.bank{background:var(--paper);color:var(--tx);padding:18vh 0}
.bank .kicker,.bank .lead{color:var(--tx2)}
.bank .h2{max-width:18ch;margin:10px 0 20px}
.bank .lead{margin-bottom:56px}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.flow article{padding:26px 0 0;border-top:2px solid var(--tx)}
.flow .num{font-size:.85rem;font-weight:600;color:var(--tx2);letter-spacing:.1em;margin-bottom:10px}
.flow .h3{font-size:1.3rem;margin-bottom:8px}
.flow p{color:var(--tx2)}
.bank .fine{margin-top:48px;font-size:.85rem;color:var(--tx2);max-width:60ch}
.cta{text-align:center}
.cta .runway{height:260vh}
.cta .shell{position:relative;z-index:2}
.cta .bolt{width:clamp(96px,14vw,150px);height:auto;margin:0 auto 34px;border-radius:22%;box-shadow:0 0 120px 10px rgba(0,110,254,.45)}
.cta .display{font-size:clamp(2.2rem,6.4vw,5rem)}
.cta .display b{color:var(--blue)}
.cta .lead{margin:18px auto 34px}
.cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@keyframes fromDeep{0%{opacity:0;transform:scale(.12) translateY(30vh)}55%{opacity:1}100%{opacity:1;transform:none}}
footer{border-top:1px solid rgba(255,255,255,.08);padding:36px 24px 56px;font-size:.85rem;color:var(--tx2-inv)}
footer .in{max-width:var(--shell);margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:space-between}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
/* ---------- motion: scrubbed, native, guarded ---------- */
.rise{opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes forward{0%,36%{transform:scale(.28) translateY(46vh);opacity:0}48%{opacity:1}72%,100%{transform:none;opacity:1}}
@keyframes copyUp{0%,22%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(-40px)}}
@keyframes pushThrough{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.hero .net{transform-origin:50% 60%}
@keyframes zeroIn{0%{opacity:0;transform:scale(.6)}45%,100%{opacity:1;transform:none}}
@keyframes drift{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes swipe{0%{opacity:0;transform:translateX(48px)}22%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-48px)}}
@keyframes swipeFirst{0%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-48px)}}
@keyframes swipeLast{0%{opacity:0;transform:translateX(48px)}22%,100%{opacity:1;transform:none}}
@keyframes ringGlide{
0%,10%{transform:translate(52px,1328px) scale(1,1)}
15%,24.3%{transform:translate(311px,1328px) scale(1,1)}
29.3%,38.6%{transform:translate(570px,1328px) scale(1,1)}
43.6%,52.8%{transform:translate(60px,1572px) scale(3.18,.445)}
57.8%,67.1%{transform:translate(38px,232px) scale(3.37,1.91)}
72.1%,81.4%{transform:translate(240px,1006px) scale(.748,.936)}
86.4%,100%{transform:translate(638px,1006px) scale(.73,.936)}
}
@keyframes popIn{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes partTL{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-150%,-140%) scale(1)}}
@keyframes partTR{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(50%,-140%) scale(1)}}
@keyframes partBL{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-150%,40%) scale(1)}}
@keyframes partBR{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(50%,40%) scale(1)}}
@keyframes billShrink{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(.82);opacity:.55}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoom{from{opacity:0;transform:scale(.72) translateY(40px)}to{opacity:1;transform:none}}
.zoom{opacity:1;transform:none}
@supports (animation-timeline:scroll()){
.progress{animation:grow linear both;animation-timeline:scroll(root block);transform:none}
@media (prefers-reduced-motion:no-preference){
.rise{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
.lines>span{animation:rise linear both;animation-timeline:view()}
.lines>span:nth-child(1){animation-range:entry 8% entry 55%}
.lines>span:nth-child(2){animation-range:entry 18% entry 65%}
.lines>span:nth-child(3){animation-range:entry 28% entry 75%}
.qr img{animation:drift linear both;animation-timeline:view();animation-range:cover}
.hero{timeline-scope:--hero}
.hero .runway{view-timeline:--hero block}
.hero .mock{animation:forward linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
.hero .net,.hero .aurora{animation:pushThrough linear both;animation-timeline:--hero;animation-range:contain 18% contain 40%}
.hero .copy{animation:copyUp linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
.chip{animation:fly linear both;animation-timeline:--hero;animation-range:contain 68% contain 96%}
.dot:nth-of-type(1){animation:fly linear both;animation-timeline:--hero;animation-range:contain 70% contain 98%}
.dot:nth-of-type(2){animation:fly linear both;animation-timeline:--hero;animation-range:contain 72% contain 100%}
.ping{animation:pingOut linear both;animation-timeline:--hero;animation-range:contain 90% contain 100%}
.got{animation:gotIn linear both;animation-timeline:--hero;animation-range:contain 92% contain 100%}
.zero{timeline-scope:--zero}
.zero .runway{view-timeline:--zero block}
.zero .big{animation:zeroIn linear both;animation-timeline:--zero;animation-range:entry 40% contain 50%}
.story{timeline-scope:--story}
.story .runway{view-timeline:--story block}
.cap{animation-timeline:--story;animation-timing-function:linear;animation-fill-mode:both}
.cap:nth-child(1){animation-name:swipeFirst;animation-range:contain 0% contain 14.3%}
.cap:nth-child(2){animation-name:swipe;animation-range:contain 14.3% contain 28.6%}
.cap:nth-child(3){animation-name:swipe;animation-range:contain 28.6% contain 42.9%}
.cap:nth-child(4){animation-name:swipe;animation-range:contain 42.9% contain 57.1%}
.cap:nth-child(5){animation-name:swipe;animation-range:contain 57.1% contain 71.4%}
.cap:nth-child(6){animation-name:swipe;animation-range:contain 71.4% contain 85.7%}
.cap:nth-child(7){animation-name:swipeLast;animation-range:contain 85.7% contain 100%}
.chat{timeline-scope:--chat}
.chat .runway{view-timeline:--chat block}
.msg{animation:popIn linear both;animation-timeline:--chat}
.msg:nth-child(1){animation-range:contain 0% contain 6%}
.msg:nth-child(2){animation-range:contain 14% contain 24%}
.msg:nth-child(3){animation-range:contain 32% contain 42%}
.msg:nth-child(4){animation-range:contain 50% contain 60%}
.msg:nth-child(5){animation-range:contain 66% contain 76%}
.msg:nth-child(6){animation-range:contain 82% contain 92%}
.split{timeline-scope:--split}
.split .runway{view-timeline:--split block}
.split .bill{animation:billIn linear both,billShrink linear both;animation-timeline:--split,--split;animation-range:entry 20% contain 12%,contain 25% contain 70%}
.part{animation-timeline:--split;animation-timing-function:linear;animation-fill-mode:both;animation-range:contain 25% contain 70%}
.part:nth-child(2){animation-name:partTL}.part:nth-child(3){animation-name:partTR}
.part:nth-child(4){animation-name:partBL}.part:nth-child(5){animation-name:partBR}
/* depth: things come forward out of the dark */
.zoom{animation:zoom linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
.story .phone{animation:zoom linear both;animation-timeline:--story;animation-range:entry 30% contain 6%}
.chatHead{animation:zoom linear both;animation-timeline:--chat;animation-range:entry 40% contain 4%}
.split .after{animation:fadeIn linear both;animation-timeline:--split;animation-range:contain 65% contain 85%}
.cta{timeline-scope:--cta}
.cta .runway{view-timeline:--cta block}
.cta .bolt{animation:fromDeep linear both;animation-timeline:--cta;animation-range:contain 0% contain 45%}
.cta .display>span{animation:rise linear both;animation-timeline:--cta}
.cta .display>span:nth-child(1){animation-range:contain 40% contain 58%}
.cta .display>span:nth-child(2){animation-range:contain 48% contain 66%}
.cta .lead{animation:rise linear both;animation-timeline:--cta;animation-range:contain 58% contain 74%}
.cta .actions{animation:rise linear both;animation-timeline:--cta;animation-range:contain 66% contain 82%}
}
}
@supports not (animation-timeline:scroll()){
.cap{position:static;opacity:1}.caps{display:grid;gap:28px}.ringSvg{display:none}
.msg,.part,.split .after{opacity:1}.part{position:static;transform:none;display:inline-block;margin:6px}
}
@media (prefers-reduced-motion:reduce){
.cap{position:static;opacity:1}.caps{display:grid;gap:28px}.ringSvg{display:none}
.msg,.part,.split .after{opacity:1}.part{position:static;transform:none;display:inline-block;margin:6px}
.aurora i{animation:none}
}
/* a11y */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
/* ---------- more scroll-conjuring (all scrubbed, guarded) ---------- */
@keyframes flyL{from{opacity:0;transform:translateX(-60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes flyR{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes photoIn{from{transform:scale(1.18);opacity:.2}to{transform:scale(1);opacity:.55}}
@media(max-width:820px){@keyframes photoIn{from{transform:scale(1.18);opacity:.25}to{transform:scale(1);opacity:.72}}}
@keyframes headIn{from{opacity:0;transform:scale(.86) translateY(30px)}to{opacity:1;transform:none}}
@keyframes reqIn{0%{opacity:0;transform:scale(.6) translateY(24vh)}38%,100%{opacity:1;transform:none}}
@keyframes reqWait{0%,52%{opacity:1}62%,100%{opacity:0}}
@keyframes reqOk{0%,56%{opacity:0;transform:scale(.7)}68%,100%{opacity:1;transform:none}}
@keyframes reqAmt{0%,58%{opacity:0;transform:translateY(18px)}72%,100%{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
/* 0 KM claims fly in from both sides, one after another */
.claims span{animation:flyL linear both;animation-timeline:view();}
.claims span:nth-child(1){animation-range:entry 20% entry 70%}
.claims span:nth-child(2){animation-name:flyR;animation-range:entry 30% entry 80%}
.claims span:nth-child(3){animation-range:entry 40% entry 90%}
.claims span:nth-child(4){animation-name:flyR;animation-range:entry 50% cover 20%}
/* full-bleed photo pushes in from the depth */
.qr img{animation:photoIn linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.steps span{animation:rise linear both;animation-timeline:view()}
.steps span:nth-child(1){animation-range:entry 10% entry 60%}
.steps span:nth-child(2){animation-range:entry 25% entry 75%}
.steps span:nth-child(3){animation-range:entry 40% entry 90%}
/* cards: staggered depth */
.cards .card:nth-child(4n+1){animation-range:entry 5% cover 35%}
.cards .card:nth-child(4n+2){animation-range:entry 12% cover 42%}
.cards .card:nth-child(4n+3){animation-range:entry 19% cover 49%}
.cards .card:nth-child(4n+4){animation-range:entry 26% cover 56%}
/* section heads come forward */
.grid .h2,.bank .h2,.storyHead .h2,.chatHead,.send .h2{animation:headIn linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
.grid .h2>span,.bank .h2>span,.storyHead .h2>span,.send .h2>span{animation:none}
.flow article:nth-child(1){animation-range:entry 10% cover 30%}
.flow article:nth-child(2){animation-range:entry 20% cover 40%}
.flow article:nth-child(3){animation-range:entry 30% cover 50%}
.flow article:nth-child(4){animation-range:entry 40% cover 60%}
/* Zatraži beat */
.req{timeline-scope:--req}
.req .runway{view-timeline:--req block}
.reqCard{animation:reqIn linear both;animation-timeline:--req;animation-range:contain 0% contain 100%}
.reqWait{animation:reqWait linear both;animation-timeline:--req;animation-range:contain 0% contain 100%}
.reqOk{animation:reqOk linear both;animation-timeline:--req;animation-range:contain 0% contain 100%}
.reqAmt{animation:reqAmt linear both;animation-timeline:--req;animation-range:contain 0% contain 100%}
}
}
/* Zatraži beat layout */
.req .runway{height:260vh}
.req .stage{text-align:center}
.req .shell{position:relative;z-index:2;display:grid;gap:26px;justify-items:center}
.req .h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
.reqCard{position:relative;width:min(420px,92vw);text-align:left;background:#fff;color:#000;border-radius:26px;padding:22px 24px;box-shadow:0 50px 120px -40px rgba(0,0,0,.9),0 0 90px -20px rgba(0,110,254,.45)}
.reqCard .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.reqCard .av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#0b0c0f;color:#fff;font-weight:700;font-size:.85rem}
.reqCard .top p{line-height:1.25}.reqCard .top small{color:#5b6472;display:block;font-size:.82rem}
.reqCard .amt{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.reqCard .amt small{font-size:.45em;color:#5b6472;font-weight:600;letter-spacing:0}
.reqCard .note2{color:#5b6472;font-size:.9rem;margin:8px 0 16px}
.reqCard .status{position:relative;height:44px}
.reqWait,.reqOk{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:12px;font-weight:600;font-size:.95rem}
.reqWait{background:#f5f7fa;color:#5b6472}
.reqOk{background:#e6f7ed;color:#0a7a3d;opacity:0}
.reqAmt{position:absolute;right:-14px;top:-14px;padding:8px 14px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,110,254,.5);opacity:0}
@media (prefers-reduced-motion:reduce){.reqWait{display:none}.reqOk,.reqAmt{opacity:1}}
@supports not (animation-timeline:scroll()){.reqWait{display:none}.reqOk,.reqAmt{opacity:1}}
.reqLine{max-width:46ch;color:var(--tx2-inv);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.45;opacity:0}
.reqLine b{color:var(--tx-inv)}
@keyframes reqLine{0%,70%{opacity:0;transform:translateY(16px)}84%,100%{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.reqLine{animation:reqLine linear both;animation-timeline:--req;animation-range:contain 0% contain 100%}}}
@supports not (animation-timeline:scroll()){.reqLine{opacity:1}}
@media (prefers-reduced-motion:reduce){.reqLine{opacity:1}}
.sendBtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:64px;border:0;border-radius:999px;background:#fff;color:#000;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 14px 40px -10px rgba(0,110,254,.55);transition:transform .2s var(--ease),background .3s,color .3s}
.sendBtn img{width:28px;height:28px;border-radius:8px}
.sendBtn:hover{transform:translateY(-1px)}
.sendBtn:active{transform:scale(.98)}
.sendBtn.sent{background:var(--blue);color:#fff}
@media (min-width:1100px){@keyframes fly{0%{opacity:0;transform:translate(0,6cqw) scale(.35)}12%{opacity:1;transform:translate(1cqw,0) scale(1)}50%{transform:translate(15cqw,-5.5cqw) scale(1.15)}86%{opacity:1;transform:translate(30cqw,-.5cqw) scale(1)}100%{opacity:0;transform:translate(30cqw,2cqw) scale(.7)}}}
/* cards: rise out of the floor like a deck, one by one (perspective flip) */
.cards{perspective:1400px;perspective-origin:50% 0%}
@keyframes cardIn{0%{opacity:0;transform:translateY(160px) scale(.62) rotateX(26deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.cards .card{animation-name:cardIn;transform-origin:50% 100%}
.cards .card:nth-child(4n+1){animation-range:entry 0% cover 38%}
.cards .card:nth-child(4n+2){animation-range:entry 8% cover 46%}
.cards .card:nth-child(4n+3){animation-range:entry 16% cover 54%}
.cards .card:nth-child(4n+4){animation-range:entry 24% cover 62%}
.grid .h2{animation-range:entry 5% cover 30%}
.grid .lead{animation:rise linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
}
}
/* ---------- DECK beats: text settles, cards come forward from nowhere, with stops ---------- */
.deck .runway{height:460vh}
.deck .stage{align-content:center}
.deck .shell{position:relative;z-index:2;display:grid;gap:clamp(18px,3vh,36px)}
.deckHead{text-align:center;max-width:860px;margin:0 auto}
.deckHead .h2{font-size:clamp(1.8rem,4.6vw,3.6rem)}
.deckHead .lead{margin:12px auto 0}
.deckCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;perspective:1400px;perspective-origin:50% 30%}
.deckCards .card{min-height:0}
.card.dk{opacity:0}
.deckWaves{position:relative;display:grid;perspective:1400px;perspective-origin:50% 30%}
.wave{grid-area:1/1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;opacity:0}
.wave .card{opacity:0}
.deck .fine{text-align:center;margin:0 auto;max-width:70ch;opacity:0}
@media(max-width:820px){.deckCards{gap:10px}.deckCards .card{padding:16px 16px 18px}.deckCards .card .h3{font-size:1.05rem;margin-bottom:6px}.deckCards .card p{font-size:.86rem}.deckCards .card .kicker{margin-bottom:8px;font-size:.68rem}.wave{grid-template-columns:1fr;gap:10px}.wave .card{padding:14px 16px}.wave .card .h3{font-size:1.05rem}.wave .card p{font-size:.86rem}.deck .runway{height:520vh}}
@keyframes deckIn{0%{opacity:0;transform:translateZ(-900px) translateY(80px) scale(.5)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes waveIn{0%{opacity:0;transform:translateZ(-700px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes waveOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateZ(300px) scale(1.08)}}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.deck{timeline-scope:--deck}
.deck .runway{view-timeline:--deck block}
.deckHead .h2>span,.deckHead .kicker,.deckHead .lead{animation:rise linear both;animation-timeline:--deck}
.deckHead .kicker{animation-range:contain 0% contain 5%}
.deckHead .h2>span:nth-child(1){animation-range:contain 1% contain 7%}
.deckHead .h2>span:nth-child(2){animation-range:contain 3% contain 9%}
.deckHead .lead{animation-range:contain 5% contain 11%}
.card.dk{animation:deckIn linear both;animation-timeline:--deck;transform-origin:50% 50%}
.deckCards .card:nth-child(1){animation-range:contain 16% contain 26%}
.deckCards .card:nth-child(2){animation-range:contain 36% contain 46%}
.deckCards .card:nth-child(3){animation-range:contain 56% contain 66%}
.deckCards .card:nth-child(4){animation-range:contain 76% contain 86%}
/* waves: three at a time, each card a beat behind the previous */
.wave{animation:waveIn linear both,waveOut linear both;animation-timeline:--deck,--deck}
.wave .card{animation:deckIn linear both;animation-timeline:--deck}
.wave:nth-child(1){animation-range:contain 12% contain 14%,contain 36% contain 42%}
.wave:nth-child(1) .card:nth-child(1){animation-range:contain 12% contain 20%}
.wave:nth-child(1) .card:nth-child(2){animation-range:contain 18% contain 26%}
.wave:nth-child(1) .card:nth-child(3){animation-range:contain 24% contain 32%}
.wave:nth-child(2){animation-range:contain 42% contain 44%,contain 66% contain 72%}
.wave:nth-child(2) .card:nth-child(1){animation-range:contain 42% contain 50%}
.wave:nth-child(2) .card:nth-child(2){animation-range:contain 48% contain 56%}
.wave:nth-child(2) .card:nth-child(3){animation-range:contain 54% contain 62%}
.wave:nth-child(3){animation-range:contain 72% contain 74%,contain 200% contain 201%}
.wave:nth-child(3) .card:nth-child(1){animation-range:contain 72% contain 80%}
.wave:nth-child(3) .card:nth-child(2){animation-range:contain 78% contain 86%}
.wave:nth-child(3) .card:nth-child(3){animation-range:contain 84% contain 92%}
.deck .fine{animation:rise linear both;animation-timeline:--deck;animation-range:contain 90% contain 97%}
}
}
@supports not (animation-timeline:scroll()){.card.dk,.wave,.wave .card,.deck .fine{opacity:1}.deckWaves{display:grid;gap:14px}.wave{grid-area:auto}}
@media (prefers-reduced-motion:reduce){.card.dk,.wave,.wave .card,.deck .fine{opacity:1}.deckWaves{display:grid;gap:14px}.wave{grid-area:auto}}
.hero .stage{user-select:none;-webkit-user-select:none}
.hero .stage .btn,.hero .stage a{user-select:auto}
/* SEND as a pinned beat: text settles, the panel comes out of the dark, then you interact */
.send{padding:0}
.send .runway{height:260vh}
.send .grid2{position:relative;z-index:2}
.send .panel{transform-origin:50% 50%}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.send{timeline-scope:--send}
.send .runway{view-timeline:--send block}
.send .kicker,.send .h2>span,.send .lead{animation:rise linear both;animation-timeline:--send}
.send .kicker{animation-range:contain 0% contain 6%}
.send .h2>span:nth-child(1){animation-range:contain 2% contain 9%}
.send .h2>span:nth-child(2){animation-range:contain 5% contain 12%}
.send .lead{animation-range:contain 8% contain 15%}
.send .h2{animation:none}
.send .panel{animation:deckIn linear both;animation-timeline:--send;animation-range:contain 18% contain 40%}
}
}
/* rings: one per function, fades exactly with its caption — no gliding across the screen */
@keyframes ringShow{0%{opacity:0}22%,78%{opacity:1}100%{opacity:0}}
@keyframes ringFirst{0%,78%{opacity:1}100%{opacity:0}}
@keyframes ringLast{0%{opacity:0}22%,100%{opacity:1}}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.ring{animation-timeline:--story;animation-timing-function:linear;animation-fill-mode:both}
.ring:nth-of-type(1){animation-name:ringFirst;animation-range:contain 0% contain 14.3%}
.ring:nth-of-type(2){animation-name:ringShow;animation-range:contain 14.3% contain 28.6%}
.ring:nth-of-type(3){animation-name:ringShow;animation-range:contain 28.6% contain 42.9%}
.ring:nth-of-type(4){animation-name:ringShow;animation-range:contain 42.9% contain 57.1%}
.ring:nth-of-type(5){animation-name:ringShow;animation-range:contain 57.1% contain 71.4%}
.ring:nth-of-type(6){animation-name:ringShow;animation-range:contain 71.4% contain 85.7%}
.ring:nth-of-type(7){animation-name:ringLast;animation-range:contain 85.7% contain 100%}
}
}
/* send flow */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:999px;background:#15171c;border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.segBtn{border:0;border-radius:999px;padding:10px 0;background:transparent;color:var(--tx2-inv);font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .25s,color .25s}
.segBtn.on{background:#fff;color:#000}
.stepLabel{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--tx2-inv);margin:0 0 8px}
.contacts{display:grid;gap:8px}
.contact{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:16px;background:#15171c;border:1px solid rgba(255,255,255,.08);color:var(--tx-inv);font:inherit;cursor:pointer;transition:transform .2s var(--ease),background .25s,border-color .25s}
.contact:hover{background:#1b1e25;border-color:rgba(0,110,254,.5);transform:translateY(-1px)}
.contact strong{display:block;font-size:.98rem}.contact small{color:var(--tx2-inv);font-size:.82rem}
.contact .who{width:42px;height:42px;font-size:.82rem}
.toRow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-8px 0 16px}
.toRow strong{font-size:1.05rem}.toRow small{color:var(--tx2-inv)}
.amountRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.amountRow .amount{margin:0}
.quick{display:flex;gap:6px}
.quick button{border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--tx-inv);font:inherit;font-weight:700;padding:8px 12px;border-radius:999px;cursor:pointer}
.quick button.on{background:#fff;color:#000;border-color:#fff}
.msgField{padding:12px 14px;border-radius:14px;background:#15171c;border:1px solid rgba(255,255,255,.08);margin-bottom:16px;min-height:2.9em;outline:none}
.msgField:focus{border-color:rgba(0,110,254,.6)}
.backBtn{display:block;margin:12px auto 0;border:0;background:transparent;color:var(--tx2-inv);font:inherit;font-size:.9rem;cursor:pointer}
.rCap2{margin-top:14px;font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--tx2-inv);text-align:center}
.step{animation:stepFade .35s var(--ease)}
@keyframes stepFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- mobile fit (375×812): everything pinned must sit fully inside the viewport ---------- */
@media (max-width:640px){
.send .stage{align-content:start;padding-top:74px}
.send .grid2{gap:14px}
.send .lead{display:none}
.send .h2{font-size:1.7rem}
.panel{padding:18px 16px}
.seg{margin-bottom:12px}.segBtn{padding:9px 0;font-size:.9rem}
.contact{padding:8px 10px}.contact .who{width:38px;height:38px}
.contacts{gap:6px}
.sendBtn{height:56px}
.msgField{min-height:2.4em;margin-bottom:12px}
.amountRow{margin-bottom:10px}
.reqCard,.reqLine{width:min(420px,100%)}
.chat .stage{align-content:start;padding-top:74px}
.chatHead{margin-bottom:12px}.chatHead .h2{font-size:1.45rem}
.chatBox{gap:8px}.msg{padding:9px 12px;font-size:.9rem;max-width:90%}.msg.tx img{width:28px;height:28px}
.part{width:112px;padding:12px 10px}.part b{font-size:1.1rem}
.bill{width:min(220px,62vw);padding:20px 16px}
}
@media (max-width:640px){
@keyframes partTL{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-112%,-135%) scale(1)}}
@keyframes partTR{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(12%,-135%) scale(1)}}
@keyframes partBL{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-112%,35%) scale(1)}}
@keyframes partBR{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(12%,35%) scale(1)}}
}
@media (max-width:640px){
.deck .stage{align-content:start;padding-top:70px}
.deckHead .h2{font-size:1.55rem}.deckHead .lead{display:none}.deckHead .kicker{margin-bottom:4px}
.deck .shell{gap:14px}
.wave{gap:8px}.wave .card{padding:12px 14px}.wave .card .h3{font-size:1rem;margin-bottom:4px}.wave .card p{font-size:.82rem}.wave .card .kicker{margin-bottom:6px;font-size:.66rem}.wave .card .tag{margin-top:8px}
.deck .fine{display:none}
.deckCards .card{padding:12px 12px 14px}
}
@keyframes billIn{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (max-width:640px){
.got{left:62%;white-space:normal;max-width:58vw;text-align:center;font-size:.72rem;padding:6px 10px;line-height:1.25}
.reqAmt{right:8px;top:-12px;padding:6px 10px;font-size:.9rem}
.zero .big{font-size:clamp(5rem,26vw,7rem)}
}