#demo .glow{background:radial-gradient(520px 320px at 8% 22%,rgba(229,72,77,.2),transparent 70%),radial-gradient(520px 300px at 38% 4%,rgba(255,197,49,.14),transparent 70%),radial-gradient(520px 300px at 70% 4%,rgba(255,106,43,.16),transparent 70%),radial-gradient(560px 340px at 94% 30%,rgba(93,187,99,.2),transparent 70%)}
#demo .tabs{display:flex;justify-content:center;gap:12px;margin-top:44px;flex-wrap:wrap}
#demo .tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:99px;border:2px solid var(--line);background:rgba(16,21,29,.85);color:#C9D2E0;font:700 20px/1 Inter,sans-serif;cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.2,1),background-color .16s,border-color .16s}
#demo .tab i{width:12px;height:12px;border-radius:50%;background:var(--c)}
#demo .tab[aria-selected=true]{color:#fff;border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,#0b1018)}
#demo .tab:active{transform:scale(.97)}
#demo .tab:focus-visible,#demo .add:focus-visible,#demo .sz:focus-visible,#demo .go:focus-visible,#demo .act:focus-visible,#demo .mn:focus-visible{outline:3px solid var(--ouro-c);outline-offset:2px}
#demo .stage{display:grid;grid-template-columns:440px 1fr;gap:40px;margin-top:34px;align-items:start}
#demo .lab{font:500 15px/1 'DejaVu Sans Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--aco);margin-bottom:14px;display:flex;align-items:center;gap:10px}
#demo .lab::before{content:"";width:8px;height:8px;background:var(--ouro)}
#demo .phone{width:440px;height:800px;border-radius:50px;padding:12px;background:linear-gradient(160deg,#2b3647,#10151d 40%,#1d2736);border:2px solid #3a4d6b;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px color-mix(in srgb,var(--acc) 22%,transparent)}
#demo .scr{height:100%;border-radius:38px;overflow:hidden;background:#090d13;display:flex;flex-direction:column;position:relative}
#demo .notch{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:104px;height:26px;border-radius:99px;background:#000;z-index:3}
#demo .top{padding:44px 20px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 26%,#0b1018),#090d13);border-bottom:1px solid #1d2838}
#demo .brand{display:flex;align-items:center;gap:12px}
#demo .brand img{width:40px;height:40px;object-fit:contain}
#demo .brand h3{font:800 24px/1.1 'Inter Display',Inter,sans-serif}
#demo .brand small{display:flex;align-items:center;gap:7px;font:600 14px/1 Inter;color:#86efac;margin-top:4px}
#demo .brand small::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E}
#demo .list{flex:1;overflow-y:auto;padding:10px 14px;scrollbar-width:thin;scrollbar-color:#2b3647 transparent}
#demo .it{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #161e2b}
#demo .it:last-child{border:0}
#demo .it img{width:70px;height:70px;border-radius:16px;object-fit:cover}
#demo .it h4{font:800 20px/1.15 'Inter Display',Inter,sans-serif}
#demo .it p{font:400 14.5px/1.35 Inter;color:#9AA6B8;margin-top:3px}
#demo .pr{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
#demo .sz{min-width:44px;height:44px;border-radius:12px;border:2px solid #2d3a52;background:#0d131c;color:#C9D2E0;font:700 16px Inter;cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
#demo .sz[aria-pressed=true]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,#0d131c);color:#fff}
#demo .sz:active,#demo .add:active,#demo .go:active,#demo .act:active,#demo .mn:active{transform:scale(.97)}
#demo .val{font:800 19px 'Inter Display',Inter;color:var(--ouro-c)}
#demo .add{width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:#10080a;font:800 28px/1 Inter;cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
#demo .cart{padding:12px 16px 16px;background:#0d131c;border-top:1px solid #243044}
#demo .cart h5{font:700 15px Inter;color:#9AA6B8;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
#demo .cl{display:flex;align-items:center;gap:8px;min-height:44px;font:500 17px Inter;color:#E3E9F3}
#demo .cl span{flex:1}
#demo .cl b{font:800 17px Inter;color:#fff}
#demo .mn{width:44px;height:44px;border-radius:50%;border:2px solid #2d3a52;background:#0b1018;color:#fff;font:800 22px/1 Inter;cursor:pointer}
#demo .empty{font:400 16px Inter;color:#6f7d93;padding:8px 0 4px}
#demo .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed #2b3a52;margin-top:6px;padding-top:10px;font:600 18px Inter;color:#C9D2E0}
#demo .tot b{font:800 28px 'Inter Display';color:var(--ouro-c)}
#demo .go{width:100%;min-height:52px;margin-top:10px;border:0;border-radius:14px;font:800 19px Inter;color:#1a1204;background:linear-gradient(180deg,#F2DC95,#D4AE55 55%,#B58A35);cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
#demo .go:disabled{opacity:.4;cursor:not-allowed}
#demo .conf{padding:16px 18px 18px;background:#0d131c;border-top:1px solid #243044;text-align:center}
#demo .conf .ck{width:52px;height:52px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 28px Inter;color:#04170c;background:#22C55E;box-shadow:0 0 0 6px rgba(34,197,94,.18)}
#demo .conf h5{font:800 24px/1.15 'Inter Display';margin-top:10px;text-transform:none;letter-spacing:0;color:#fff}
#demo .conf p{font:500 17px/1.4 Inter;color:#C9D2E0;margin-top:6px}
#demo .conf .rs{margin-top:10px;padding:10px 12px;border-radius:12px;background:#111a27;border:1px solid #25324a;font:500 16px/1.4 Inter;color:#E3E9F3;text-align:left}
#demo .conf .rs b{display:block;font:800 20px 'Inter Display';color:var(--ouro-c);margin-top:4px}
#demo .conf .go{margin-top:12px;background:transparent;color:#fff;border:2px solid var(--acc)}
#demo [hidden]{display:none!important}
#demo .st{min-height:22px;margin-top:8px;font:700 15px Inter;color:#86efac;text-align:center}
#demo .mon{width:100%}
#demo .bez{border-radius:22px;padding:14px;background:linear-gradient(160deg,#2b3647,#10151d 40%,#1d2736);border:2px solid #3a4d6b;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#demo .ms{height:740px;border-radius:12px;overflow:hidden;background:radial-gradient(800px 400px at 80% 0,#16202f,transparent 70%),#0A0E14;padding:22px 22px 18px;display:flex;flex-direction:column}
#demo .mh{display:flex;align-items:center;justify-content:space-between;gap:12px}
#demo .mh .l{display:flex;align-items:center;gap:12px}
#demo .mh img{height:38px}
#demo .mh h3{font:800 28px 'Inter Display'}
#demo .live{font:700 15px Inter;color:#22C55E;border:2px solid #1d6b3d;border-radius:99px;padding:7px 14px;background:#0d2a1a}
#demo .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
#demo .sk{border-radius:16px;padding:12px 16px;background:linear-gradient(180deg,#141b28,#0e131c);border:1px solid #25324a}
#demo .sk small{font:600 14px Inter;color:#9AA6B8}
#demo .sk b{display:block;font:800 28px/1.1 'Inter Display';margin-top:2px;white-space:nowrap}
#demo .sk b.au{background:linear-gradient(180deg,#F2DC95,#C9A24B);-webkit-background-clip:text;background-clip:text;color:transparent}
#demo .cols{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;min-height:0}
#demo .col{border-radius:18px;background:#0f1520;border:1px solid #25324a;border-top:4px solid var(--cc);padding:12px;display:flex;flex-direction:column;min-height:0}
#demo .col h5{display:flex;justify-content:space-between;align-items:center;font:800 20px 'Inter Display';margin-bottom:10px}
#demo .col h5 b{font:800 15px Inter;color:#10151d;background:var(--cc);border-radius:99px;min-width:28px;text-align:center;padding:3px 8px}
#demo .cards{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2b3647 transparent;display:flex;flex-direction:column;gap:10px;padding:2px 2px 4px}
#demo .o{border-radius:14px;background:#151e2d;border:1px solid #243248;padding:12px 13px;flex:0 0 auto}
#demo .o.mine{border-color:var(--ouro);background:linear-gradient(180deg,#1d2433,#151e2d);box-shadow:0 0 0 1px rgba(242,220,149,.25),0 10px 30px rgba(201,162,75,.18)}
#demo .o.in{animation:pop .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:none}}
#demo .oh{display:flex;justify-content:space-between;align-items:baseline}
#demo .oh b{font:800 22px 'Inter Display'}
#demo .oh em{font:500 14px Inter;font-style:normal;color:#9AA6B8}
#demo .badge{display:inline-block;margin-top:6px;font:700 12px/1 'DejaVu Sans Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#1a1204;background:linear-gradient(180deg,#F2DC95,#C9A24B);border-radius:6px;padding:5px 8px}
#demo .it2{font:500 16px/1.35 Inter;color:#D6DEEB;margin-top:6px}
#demo .ov{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:8px;gap:6px 8px}
#demo .ov strong{font:800 19px Inter;color:var(--ouro-c);white-space:nowrap}
#demo .ov span{font:600 13px Inter;color:#86efac;border:1px solid #1d6b3d;background:#0d2a1a;border-radius:99px;padding:3px 10px;white-space:nowrap}
#demo .act{width:100%;min-height:44px;margin-top:10px;border-radius:12px;border:2px solid var(--cc);background:color-mix(in srgb,var(--cc) 18%,#0f1520);color:#fff;font:800 16px Inter;cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.2,1)}
#demo .none{font:400 15px Inter;color:#5f6d83;text-align:center;padding:18px 4px}
#demo .stand{width:150px;height:46px;margin:0 auto;background:linear-gradient(180deg,#2b3647,#10151d);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
#demo .base{width:300px;height:12px;margin:0 auto;border-radius:99px;background:linear-gradient(180deg,#2b3647,#10151d)}
#demo .note{text-align:center;margin-top:30px;font:500 16px 'DejaVu Sans Mono',monospace;letter-spacing:.14em;color:var(--prata);text-transform:uppercase}
#demo .cta{text-align:center;margin-top:30px}
#demo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){#demo .o.in{animation:fade .2s linear both}
@keyframes fade{from{opacity:0}to{opacity:1}}
#demo .tab,#demo .sz,#demo .add,#demo .go,#demo .act,#demo .mn,#demo .btn{transition:none}}
/* ===== responsivo ===== */
@media (max-width:1100px){
#demo.sec{padding:72px 32px 78px}
#demo h2{font-size:52px}
#demo .stage{grid-template-columns:minmax(0,1fr);gap:38px}
#demo .phone{width:100%;max-width:440px;margin:0 auto}
#demo .lab{justify-content:center}
#demo .ms{height:auto;min-height:0}
#demo .cards{overflow:visible}
#demo .stand,#demo .base{display:none}
}
@media (max-width:900px){
#demo.sec{padding:60px 22px 68px}
#demo h2{font-size:42px}
#demo .sub{font-size:22px}
#demo .tabs{margin-top:32px}
#demo .tab{padding:0 20px;font-size:18px}
}
@media (max-width:600px){
#demo.sec{padding:52px 16px 60px}
#demo h2{font-size:34px}
#demo .sub{font-size:19px}
#demo .kicker{font-size:12px;letter-spacing:.14em;line-height:1.5}
#demo .tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
#demo .tab{justify-content:center;min-height:48px;padding:0 10px;font-size:16px;gap:8px}
#demo .stage{margin-top:26px;gap:30px}
#demo .phone{height:auto;padding:9px;border-radius:40px}
#demo .scr{height:auto;border-radius:32px;overflow:clip}
#demo .cart{position:sticky;bottom:0;z-index:4;box-shadow:0 -16px 22px rgba(9,13,19,.92)}
#demo .conf{position:sticky;bottom:0;z-index:4}
#demo .live{white-space:nowrap}
#demo .list{overflow:visible;padding:8px 12px}
#demo .it{grid-template-columns:62px 1fr auto;gap:10px}
#demo .it img{width:62px;height:62px;border-radius:14px}
#demo .it h4{font-size:19px}
#demo .it p{font-size:15px}
#demo .brand h3{font-size:22px}
#demo .ms{padding:14px 12px 14px;border-radius:10px}
#demo .bez{padding:10px;border-radius:18px}
#demo .mh h3{font-size:21px}
#demo .mh img{height:32px}
#demo .live{font-size:13px;padding:6px 11px}
#demo .stats{grid-template-columns:1fr 1fr;gap:10px}
#demo .sk:nth-child(2){grid-column:1/-1;order:-1}
#demo .sk b{font-size:26px}
#demo .cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:14px -12px 0;padding:0 12px 6px;scroll-padding-left:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#demo .cols::-webkit-scrollbar{display:none}
#demo .col{flex:0 0 84%;scroll-snap-align:start}
#demo .col h5{font-size:19px}
#demo .it2{font-size:16px}
#demo .hint{display:flex;justify-content:center;gap:8px;margin-top:10px}
#demo .note{font-size:12px;letter-spacing:.08em;margin-top:24px}
#demo .btn{font-size:20px;padding:18px 22px;width:100%;justify-content:center}
}

#demo.sec{overflow:clip}