/* ===== tokens: hitam / putih / abu-abu ===== */
:root{--r:16px;--ease:cubic-bezier(.2,.7,.2,1);--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
[data-theme=dark]{--bg:#0a0a0a;--surface:#141414;--surface-2:#1d1d1d;--line:#2a2a2a;--text:#f4f4f4;--muted:#9a9a9a;--accent:#f4f4f4;--on-accent:#0a0a0a;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--orb:rgba(255,255,255,.06);--shade:rgba(0,0,0,.6)}
[data-theme=light]{--bg:#f4f4f4;--surface:#fff;--surface-2:#ebebeb;--line:#dcdcdc;--text:#0a0a0a;--muted:#6a6a6a;--accent:#0a0a0a;--on-accent:#fff;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--orb:rgba(0,0,0,.06);--shade:rgba(0,0,0,.5)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100dvh;display:flex;flex-direction:column}
body::before{content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(38% 38% at 18% 22%,var(--orb),transparent 70%),radial-gradient(34% 34% at 82% 72%,var(--orb),transparent 70%);animation:drift 26s ease-in-out infinite alternate}
main{flex:1}
a{color:var(--text)}
h1,h2,h3{line-height:1.2;margin:0}
p{margin:0}
.icon{width:20px;height:20px;flex:none}
.container{width:100%;max-width:1120px;margin:0 auto;padding:20px 16px 20px}
.center{text-align:center}.muted{color:var(--muted)}.sm{font-size:13px}.mt{margin-top:14px}.grow{flex:1;min-width:0}.dim{opacity:.25}.right{text-align:right}
.theme-anim,.theme-anim *{transition:background-color .35s,color .35s,border-color .35s!important}

@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.14)}}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes fill{from{transform:translateX(-100%)}to{transform:none}}
@keyframes float{from{transform:translate(0,0)}to{transform:translate(40px,-30px)}}

/* scroll reveal (hanya aktif jika JS jalan) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.nav-in{max-width:1120px;margin:0 auto;padding:0 16px;height:64px;display:flex;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:.4px;text-decoration:none;color:var(--text)}
.logo .icon{transition:transform .4s var(--ease)}.logo:hover .icon{transform:rotate(-12deg) scale(1.15)}
.menu{display:flex;gap:2px;margin:0 auto}
.menu a{position:relative;padding:8px 12px;font-weight:600;font-size:14px;text-decoration:none;color:var(--muted);transition:color .2s}
.menu a::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:hover,.menu a.active{color:var(--text)}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1)}
.menu-auth{display:none}
.nav-actions,.auth-desktop{display:flex;align-items:center;gap:8px}
.nav-actions form,.menu-auth form{margin:0}
.icon-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.icon-btn:hover{background:var(--surface-2);transform:scale(1.07)}
.i-sun,.i-moon{position:absolute;transition:transform .5s var(--ease),opacity .3s}
[data-theme=dark] .i-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme=light] .i-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.burger{display:none;gap:4px;align-content:center}
.burger i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ===== announcement ===== */
.announce{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;padding:9px 16px;font-size:14px;font-weight:600;text-align:center;background:var(--accent);color:var(--on-accent);animation:up .6s var(--ease) both}
.announce a{padding:3px 14px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none;background:var(--on-accent);color:var(--accent);transition:transform .25s var(--ease)}
.announce a:hover{transform:scale(1.06)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--on-accent);animation:ping 1.8s infinite;color:var(--on-accent)}

/* ===== buttons & forms ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);cursor:pointer;font:inherit;font-weight:700;padding:10px 20px;border-radius:12px;text-decoration:none;background:var(--accent);color:var(--on-accent);transition:transform .25s var(--ease),box-shadow .25s,background .2s,opacity .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .icon{width:18px;height:18px;transition:transform .3s var(--ease)}.btn:hover .icon{transform:translateX(3px)}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:10px}.btn-lg{padding:14px 28px;font-size:15px}.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2);box-shadow:none}
.btn.is-loading{pointer-events:none;opacity:.75}
.btn.is-loading::after{content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:2px;transition:gap .25s var(--ease),border-color .2s}
.link-arrow:hover{gap:10px;border-color:var(--accent)}.link-arrow .icon{width:16px;height:16px}
.inp{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
.inp::placeholder{color:var(--muted)}
.inp:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(128,128,128,.22)}
textarea.inp{resize:vertical}
.row{display:flex;gap:10px;align-items:center}
.lbl{display:block;margin:16px 0 6px;font-size:14px;font-weight:600}.lbl em{color:var(--bad);font-style:normal}
.chk{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px;color:var(--muted)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}
.gbtn{gap:10px}

/* ===== alerts, badges ===== */
.alert{padding:12px 16px;margin-bottom:14px;border-radius:12px;background:var(--surface);border-left:3px solid var(--muted);animation:up .5s var(--ease) both}
.alert.err{border-left-color:var(--bad);color:var(--bad)}.alert.ok{border-left-color:var(--ok);color:var(--ok)}
.badge{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--surface-2)}
.b-gray{color:var(--muted)}.b-warning{color:var(--warn)}.b-info{color:var(--text)}.b-success{color:var(--ok)}.b-danger{color:var(--bad)}
.page-title{font-size:clamp(24px,3.6vw,32px);font-weight:800;margin:10px 0 18px}
.blk{margin-bottom:34px}.blk h3{font-size:17px;margin-bottom:14px}

/* ===== hero ===== */
.hero{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:16/7;min-height:280px;background:#111;margin-top:6px;animation:up .8s var(--ease) both}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide.on img{animation:kb 10s ease-out both}
.slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--shade),rgba(0,0,0,.12))}
.slide-text{position:absolute;left:5%;bottom:13%;max-width:580px;color:#fff;z-index:2}
.slide-text h1{font-size:clamp(24px,4.2vw,44px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.slide-text p{margin-bottom:18px;opacity:.9}
.slide-text .btn{background:#fff;color:#0a0a0a;border-color:#fff}
.slide.on .slide-text>*{animation:up .8s var(--ease) both}
.slide.on .slide-text>*:nth-child(2){animation-delay:.12s}
.slide.on .slide-text>*:nth-child(3){animation-delay:.24s}
.slide-default{background:#0c0c0c;overflow:hidden}
.slide-default::before,.slide-default::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);background:#fff;opacity:.09;animation:float 9s ease-in-out infinite alternate}
.slide-default::before{width:340px;height:340px;right:8%;top:-8%}
.slide-default::after{width:260px;height:260px;right:30%;bottom:-20%;animation-duration:12s}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.4);cursor:pointer;transition:width .4s var(--ease),background .3s}
.dots button.on{width:26px;background:#fff}

/* ===== sections ===== */
.sec{margin-top:56px}
.sec-title{text-align:center;font-size:clamp(21px,3vw,30px);font-weight:800;margin-bottom:26px;letter-spacing:-.3px}
.live{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;vertical-align:middle;background:var(--ok);animation:ping 1.8s infinite}

/* marquee: otomatis bergeser ke kiri (rev = ke kanan) */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq.full{margin-inline:calc(50% - 50vw)}
.marq .track{display:flex;width:max-content;animation:marq var(--dur,40s) linear infinite;will-change:transform}
.marq.rev .track{animation-direction:reverse}
.marq:hover .track{animation-play-state:paused}
.grp{display:flex;gap:14px;padding-right:14px}
.chip{display:flex;align-items:center;gap:12px;min-width:230px;padding:12px 18px;border-radius:14px;background:var(--surface);transition:transform .3s var(--ease),background .2s}
.chip:hover{transform:translateY(-4px);background:var(--surface-2)}
.chip b{display:block}.chip small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.rvc{width:300px;flex:none;padding:18px 20px;border-radius:16px;background:var(--surface);transition:transform .3s var(--ease),background .2s}
.rvc:hover{transform:translateY(-4px);background:var(--surface-2)}
.rvc p{margin:8px 0;white-space:normal}.rvc small{color:var(--muted)}
.ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:none}
.ava.lg{width:48px;height:48px}
.ava-t{display:grid;place-items:center;font-weight:800;color:var(--text)}
.stars-static{color:#fbbf24;letter-spacing:2px}

/* kenapa harus kami */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px 34px}
.why-item{padding-top:16px;border-top:1px solid var(--line);transition:border-color .3s,transform .35s var(--ease)}
.why-item:hover{border-color:var(--accent);transform:translateY(-4px)}
.why-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.why-top .icon{width:26px;height:26px;transition:transform .4s var(--ease)}.why-item:hover .why-top .icon{transform:scale(1.2) rotate(-8deg)}
.why-top span{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.why-item h3{font-size:18px;margin-bottom:6px}.why-item p{color:var(--muted)}

/* leaderboard */
.board{list-style:none;margin:0 auto;padding:0;max-width:680px}
.board li{display:flex;align-items:center;gap:14px;padding:14px 6px;border-bottom:1px solid var(--line);transition:padding .3s var(--ease),background .25s,border-radius .25s}
.board li:hover{padding-left:16px;padding-right:16px;background:var(--surface);border-radius:12px}
.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--surface-2);color:var(--muted);flex:none}
.rank.r1{background:#fbbf24;color:#3a2a00}.rank.r2{background:#cbd5e1;color:#1e293b}.rank.r3{background:#d97706;color:#fff}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.tabs a{padding:7px 16px;border-radius:99px;text-decoration:none;font-size:14px;font-weight:600;color:var(--muted);background:var(--surface);transition:all .25s var(--ease)}
.tabs a:hover{color:var(--text)}.tabs a.on{background:var(--accent);color:var(--on-accent)}

/* komunitas */
.cta{text-align:center;padding:44px 20px;border-radius:24px;background:var(--surface)}
.cta h2{font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* testimoni */
.sum-rate{display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding:6px 0 22px;border-bottom:1px solid var(--line)}
.sum-rate .big{font-size:52px;font-weight:800}.sum-rate .big small{font-size:18px;color:var(--muted)}
.sum-rate .grow{min-width:220px}
.bar{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.bar i{flex:1;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}.bar u{display:block;height:100%;background:var(--accent);border-radius:6px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rv{padding:20px;border-radius:var(--r);background:var(--surface);transition:transform .3s var(--ease)}
.rv:hover{transform:translateY(-4px)}
.rv p{margin:8px 0}.rv small{color:var(--muted)}

/* list pesanan */
.list .ord{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:16px 4px;border-bottom:1px solid var(--line)}
.ord small{display:block}

/* faq */
.faqs{max-width:760px}
.faq{border-bottom:1px solid var(--line);padding:16px 2px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--muted);transition:transform .35s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:10px;color:var(--muted);animation:up .4s var(--ease) both}

/* ===== stepper ===== */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:10px;margin:10px 0 32px}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:76px;text-align:center}
.st i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;border:1px solid var(--line);transition:all .4s var(--ease)}
.st i .icon{width:16px;height:16px}
.st.on i,.st.done i{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.st.on i{animation:pop .5s var(--ease)}.st.on{color:var(--text);font-weight:700}
.st-line{width:clamp(28px,12vw,100px);height:2px;margin-top:17px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.st-line.done::after{content:'';position:absolute;inset:0;background:var(--accent);animation:fill .7s var(--ease)}

/* ===== top up / checkout ===== */
.buy-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.who{display:flex;align-items:center;gap:10px;margin-top:12px;min-height:26px;font-weight:600}
.who img{width:44px;height:44px;border-radius:50%}
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pkg{position:relative;display:block}
.pkg input{position:absolute;opacity:0;inset:0}
.pkg span{display:flex;flex-direction:column;align-items:center;padding:16px 10px;border-radius:14px;background:var(--surface);cursor:pointer;border:1px solid transparent;transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s}
.pkg span b{font-size:22px;line-height:1.1}.pkg span em{font-style:normal;font-size:12px;color:var(--muted)}
.pkg span small{margin-top:6px;font-size:13px;font-weight:600}
.pkg:hover span{transform:translateY(-4px);border-color:var(--line)}
.pkg input:checked+span{background:var(--accent);color:var(--on-accent);animation:pop .4s var(--ease)}
.pkg input:checked+span em{color:inherit;opacity:.7}
.pkg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.summary{position:sticky;top:84px;padding:24px;border-radius:var(--r);background:var(--surface)}
.summary h3{margin-bottom:14px;font-size:17px}
.summary dl,.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 14px}
.summary dt{color:var(--muted)}.summary dd{margin:0;font-weight:700;text-align:right;word-break:break-word}
.summary .btn{margin-top:10px}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;margin-bottom:6px;border-top:1px solid var(--line);font-weight:700}
.total b{font-size:22px}
.item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--surface)}
.item small{display:block}
.wa{display:flex;gap:8px;align-items:stretch}
.wa span{display:grid;place-items:center;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700}
.method{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--accent)}
.method small{display:block}.method .tick{color:var(--ok)}

/* ===== tagihan ===== */
.banner{display:flex;align-items:center;gap:14px;padding:18px 20px;margin-bottom:14px;border-radius:var(--r);background:var(--surface);border-left:4px solid var(--st,var(--muted))}
.banner small{display:block;color:var(--muted)}
.bn-gray{--st:var(--muted)}.bn-warning{--st:var(--warn)}.bn-info{--st:var(--text)}.bn-success{--st:var(--ok)}.bn-danger{--st:var(--bad)}
.bn-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--st)}
.bn-warning .bn-ico .icon{animation:spin 6s linear infinite}
.icon-btn.spin .icon{animation:spin .8s linear}
.notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;margin-bottom:24px;border-radius:var(--r);background:var(--surface)}
.notice small{display:block;color:var(--muted)}
.cd-wrap{text-align:right}.cd-wrap b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:var(--bad)}
.cd-bar{flex-basis:100%;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.cd-bar i{display:block;height:100%;width:100%;background:var(--accent);transition:width 1s linear}
.inv-grid{display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{padding:12px 14px;border-radius:12px;background:var(--surface)}
.tile small{display:block;color:var(--muted);font-size:12px}.tile b{font-size:14px}
.idrow{display:flex;align-items:center;gap:8px}
.copy{position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:color .2s,background .2s}
.copy:hover{background:var(--surface-2);color:var(--text)}
.copy .icon{position:absolute;width:15px;height:15px;transition:transform .3s var(--ease),opacity .2s}
.copy .icon:last-child{opacity:0;transform:scale(.3);color:var(--ok)}
.copy.ok .icon:first-child{opacity:0;transform:scale(.3)}.copy.ok .icon:last-child{opacity:1;transform:none}
.pay-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px;border-radius:var(--r);background:var(--surface);text-align:center}
.pay-box form{width:100%}
.qris{width:260px;max-width:100%;border-radius:14px;background:#fff;padding:10px}
.deadline{margin-top:12px;padding:14px 18px;border-radius:12px;background:var(--surface-2);border-left:3px solid var(--bad)}
.deadline small{display:block;color:var(--bad);font-weight:600}
.inv-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px;position:relative}
.stars input{position:absolute;opacity:0;width:0;height:0}
.stars label{font-size:32px;line-height:1;color:var(--line);cursor:pointer;transition:transform .2s var(--ease),color .2s}
.stars label:hover{transform:scale(1.2)}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#fbbf24}

/* auth */
.auth{max-width:420px;margin:20px auto 0}
.auth .page-title{margin-bottom:6px}.auth .muted{margin-bottom:20px}

/* ===== footer, fab ===== */
.foot{margin-top:70px;background:var(--surface);border-top:1px solid var(--line)}
.foot-in{max-width:1120px;margin:0 auto;padding:46px 16px 34px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
.foot h4{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot a{display:block;padding:4px 0;text-decoration:none;color:var(--text);opacity:.8;transition:opacity .2s,transform .25s var(--ease)}
.foot a:hover{opacity:1;transform:translateX(5px)}
.foot .logo{display:inline-flex;padding:0;opacity:1}.foot .logo:hover{transform:none}
.foot-brand p{margin:12px 0 16px;color:var(--muted);max-width:340px}
.pay{display:flex;align-items:center;gap:10px}
.pay span{padding:4px 12px;border-radius:8px;font-weight:800;font-size:13px;letter-spacing:.08em;background:var(--accent);color:var(--on-accent)}
.pay small{color:var(--muted)}
.foot-bar{max-width:1120px;margin:0 auto;padding:18px 16px 26px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.cs-fab{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;font-weight:700;font-size:14px;text-decoration:none;background:var(--accent);color:var(--on-accent);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.cs-fab:hover{transform:translateY(-3px) scale(1.04)}
.to-top{position:fixed;right:18px;bottom:76px;z-index:40;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .35s var(--ease)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--surface-2)}

/* ===== responsive ===== */
@media(max-width:900px){
  .buy-grid,.inv-grid{grid-template-columns:1fr;gap:10px}
  .summary{position:static}
  .foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .burger{display:grid}
  .auth-desktop{display:none}
  .nav-actions{margin-left:auto}
  .menu{position:absolute;left:0;right:0;top:64px;margin:0;display:flex;flex-direction:column;gap:0;padding:6px 16px 18px;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .35s var(--ease),visibility .3s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .menu a::after{display:none}
  .menu.open a{animation:up .4s var(--ease) both}
  .menu.open a:nth-child(2){animation-delay:.04s}.menu.open a:nth-child(3){animation-delay:.08s}
  .menu.open a:nth-child(4){animation-delay:.12s}.menu.open a:nth-child(5){animation-delay:.16s}.menu.open a:nth-child(6){animation-delay:.2s}
  .menu-auth{display:flex;gap:8px;padding-top:14px}
  .hero{aspect-ratio:auto;height:320px;border-radius:20px}
  .slide-text{left:6%;right:6%;bottom:16%}
  .container{padding-top:12px}
  .sec{margin-top:44px}
}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr}
  .inv-actions{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .cs-fab span{display:none}.cs-fab{padding:13px}
  .chip{min-width:200px}.rvc{width:260px}
  .row{flex-wrap:nowrap}
  .st{min-width:62px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}