:root{ --gold:#ffce3a;--gold-soft:#e0a82a;--ember:#ff6a1a;--yellow:#ffe24d; --purple:#2b0633;--cream:#fff3df;--cream-dim:#e8cdb0; --surface-1:linear-gradient(160deg,rgba(34,24,42,.55),rgba(20,14,26,.6)); --surface-2:linear-gradient(160deg,rgba(42,30,52,.7),rgba(26,18,34,.72)); --surface-border:rgba(255,206,58,.1); --surface-border-hover:rgba(255,206,58,.26); --surface-inset:rgba(255,255,255,.035); --surface-inset-border:rgba(255,255,255,.06); --fb: min(135vw, 730px);--fire: 122%;--disc: 64%;--pie: 85%;--btn: 13%; --pointer-h: 9.5%;--pointer-top: 14.5%;--label-top: 4%;--init-rot: -22.5deg; --extrude:drop-shadow(.5px .5px 0 #7a2a08) drop-shadow(1px 1px 0 #6a2207) drop-shadow(1.5px 1.5px 0 #5a1c06) drop-shadow(2px 2px 0 #4a1705) drop-shadow(2px 3px 4px rgba(0,0,0,.5)); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--cream);background:#0e0512;overflow-x:hidden;-webkit-font-smoothing:antialiased} :root{--wheel-top:clamp(96px,13vh,140px);--wheel-left:50%;--zw:min(110vw,52svh,600px);--zeus-bottom:-3vh;--zeus-left:50%;--zeus-tx:-50%;--zeus-rot:-4deg} .hero{position:relative;overflow:hidden;height:100svh;min-height:560px;isolation:isolate;padding:64px 8px 40px} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:4;pointer-events:none;background:linear-gradient(0deg,#0e0512 0%,rgba(14,5,18,.7) 45%,transparent 100%)} .scene-bg{position:absolute;inset:0;z-index:-2;background:url('img/main-bg.webp') center bottom/cover} .scene-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(6,3,14,.35) 74%,rgba(6,3,14,.72) 100%),linear-gradient(180deg,rgba(8,4,18,.62) 0%,rgba(8,4,18,.16) 24%,transparent 40%),linear-gradient(0deg,#0e0512 0%,rgba(14,5,18,0) 18%)} .wisp{position:absolute;bottom:-6%;z-index:0;pointer-events:none;width:min(80vw,1100px);height:auto;filter:drop-shadow(0 0 40px rgba(255,180,80,.15))} .wisp-l{left:-12vw;opacity:.85;animation:wispDriftL 13s ease-in-out infinite} .wisp-r{right:-12vw;opacity:.85;animation:wispDriftR 16s ease-in-out infinite} @keyframes wispDriftL{0%,100%{transform:translate(0,0)}50%{transform:translate(38px,-16px)}} @keyframes wispDriftR{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,-13px)}} @keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}} .hero-decor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));animation:decoFloat 7s ease-in-out infinite} .decor-d{display:none} @keyframes decoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(.3deg)}} @media(min-width:860px){.decor-m{display:none}.decor-d{display:block}} @media(prefers-reduced-motion:reduce){.hero-decor{animation:none}} .head{position:absolute;z-index:10;pointer-events:none;margin:0;text-align:center;left:50%;transform:translateX(-50%);top:clamp(88px,13vh,120px);width:max-content;max-width:94vw} .head h1{font-family:"Russo One",sans-serif;font-weight:400;margin:0;line-height:.95;text-transform:uppercase;letter-spacing:.01em} .head .l1{display:block;color:var(--cream);font-size:clamp(26px,7vw,40px);text-shadow:0 -1px 0 rgba(255,255,255,.35),.5px .5px 0 rgba(90,40,20,.55),1px 1px 0 rgba(70,30,15,.45),1px 2px 3px rgba(0,0,0,.5)} .head .l2{display:block;font-size:clamp(24px,6.4vw,52px);margin-top:.08em;white-space:nowrap;background:linear-gradient(180deg,#fff7e6 0%,var(--gold) 48%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--extrude)} .head h1.plain{display:block;font-weight:700;font-size:clamp(30px,8.4vw,52px);background:linear-gradient(180deg,#fff7e6 0%,var(--gold) 48%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--extrude)} .firebox{position:absolute;left:var(--wheel-left);top:var(--wheel-top);transform:translateX(-50%);width:var(--fb);height:var(--fb);z-index:1} .composition{position:absolute;inset:0;z-index:2;pointer-events:none} .model{position:absolute;left:var(--zeus-left);bottom:var(--zeus-bottom);transform:translateX(var(--zeus-tx)) rotate(var(--zeus-rot));transform-origin:bottom center;z-index:3;width:var(--zw);height:auto;margin:0;pointer-events:none;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));animation:floatyC 7.5s ease-in-out infinite} @keyframes floatyC{0%,100%{transform:translate(var(--zeus-tx),0) rotate(var(--zeus-rot))}50%{transform:translate(var(--zeus-tx),-6px) rotate(var(--zeus-rot))}} .wheel-front{position:absolute;left:var(--wheel-left);top:var(--wheel-top);transform:translateX(-50%);width:var(--fb);height:var(--fb);z-index:5;pointer-events:none} .wheel-front .centerBtn,.wheel-front .pointer{pointer-events:auto} @media(min-width:860px){:root{--fb:min(69vw,98svh,1040px);--fire:122%;--wheel-top:clamp(80px,14vh,180px);--wheel-left:33%;--zw:min(62vw,900px);--zeus-bottom:-4vh;--zeus-left:69%}.head{top:clamp(78px,11vh,118px)}.head .l1{font-size:clamp(28px,3.2vw,46px)}.head .l2{font-size:clamp(36px,4.4vw,62px)}.head h1.plain{font-size:clamp(36px,4.4vw,62px)}} .fire{position:absolute;left:50%;top:50%;width:var(--fire);height:var(--fire);transform:translate(-50%,calc(-50% - 4px));transform-origin:center;z-index:2;pointer-events:none;animation:flicker 2.6s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(255,110,30,.45))} @keyframes flicker{0%,100%{opacity:.92}50%{opacity:1}} .wheelArea{position:absolute;left:50%;top:50%;width:var(--disc);height:var(--disc);transform:translate(-50%,-50%);z-index:1} .disc{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))} .rock{position:absolute;inset:0;z-index:2;transform-origin:center center;animation:rock 3.6s ease-in-out infinite} @keyframes rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} .wheel{position:absolute;left:50%;top:50%;width:var(--pie);height:var(--pie);transform:translate(-50%,-50%) rotate(var(--init-rot));transform-origin:center center;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden} .wheel .pie{position:absolute;inset:0;width:100%;height:100%;display:block} .spoke{position:absolute;inset:0;pointer-events:none} .spoke .label{position:absolute;left:50%;top:var(--label-top);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:.92;font-family:"Nunito",sans-serif;font-weight:900;white-space:nowrap;letter-spacing:.01em} .spoke .label-fs .fs-num{font-size:clamp(26px,7.2vw,46px);font-weight:900} .spoke .label-fs .fs-unit{font-size:clamp(18px,4.8vw,32px);font-weight:900;letter-spacing:.03em;margin-top:.04em} .spoke .label-long{white-space:normal;text-align:center;width:clamp(60px,15vw,102px);font-size:clamp(10px,2.7vw,16px);font-weight:800;line-height:1.06;text-transform:uppercase;letter-spacing:.02em} .spoke .label.dark{color:#2b0633;text-shadow:0 1px 1px rgba(255,255,255,.3);-webkit-text-stroke:.8px #2b0633} .spoke .label.light{color:var(--yellow);text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 6px rgba(255,180,40,.4);-webkit-text-stroke:.8px var(--yellow)} .centerBtn{position:absolute;left:50%;top:50%;width:var(--btn);aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:5;border:0;padding:0;cursor:pointer;border-radius:50%;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 50% 36%,#4a1152 0%,#2a0730 56%,#160419 100%);box-shadow:0 0 0 3px var(--gold-soft),0 0 0 6px #4a1140,0 6px 16px rgba(0,0,0,.6),inset 0 2px 6px rgba(255,210,120,.25),inset 0 -7px 14px rgba(0,0,0,.55),0 0 26px rgba(255,140,40,.45)} .centerBtn .txt{color:var(--yellow);font-family:"Nunito",sans-serif;font-weight:800;font-size:clamp(11px,3.2vw,18px);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 1px 2px #000,0 0 8px rgba(255,170,40,.6);pointer-events:none} .centerBtn::after{content:"";position:absolute;inset:-8%;border-radius:50%;z-index:-1;box-shadow:0 0 0 0 rgba(255,130,30,.55);animation:pulse 2.1s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,130,30,.5)}70%{box-shadow:0 0 0 20px rgba(255,130,30,0)}100%{box-shadow:0 0 0 0 rgba(255,130,30,0)}} .centerBtn:hover{filter:brightness(1.08)}.centerBtn:active{transform:translate(-50%,-50%) scale(.95)}.centerBtn.is-spinning{cursor:default}.centerBtn.is-spinning::after{animation:none}.centerBtn:focus-visible{outline:3px solid #ffe08a;outline-offset:5px} .pointer{position:absolute;left:50%;top:var(--pointer-top);height:var(--pointer-h);width:auto;transform:translateX(-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 4px 7px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,170,40,.5))} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .modal{position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:16px;background:rgba(10,3,8,.78);backdrop-filter:blur(3px)} .modal.open{display:grid;animation:fade .25s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .wincard{position:relative;width:min(92vw,440px);aspect-ratio:487/614;animation:wpop .45s cubic-bezier(.2,1.35,.4,1)} @keyframes wpop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}} .wincard .frameimg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill} .wincard .frame-a{animation:shimmer 2.6s ease-in-out infinite} @keyframes shimmer{0%,100%{opacity:.42}50%{opacity:1}} .win-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:14% 12% 17%;text-align:center} .wintitle{margin:1% 0 0;font-family:"Russo One",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1;font-size:clamp(25px,7.8vw,38px);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6),0 0 14px rgba(255,255,255,.35)} .prize{margin-top:8%;display:flex;flex-direction:column;align-items:center;font-family:"Russo One",sans-serif;line-height:1;color:#ffd84a;animation:prizepulse 1.8s ease-in-out infinite} .prize .prize-num{font-size:clamp(64px,20vw,104px);line-height:.9;background:linear-gradient(180deg,#fff7e6 0%,#ffd84a 52%,#ff9a1a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(120,60,10,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.5))} .prize .prize-unit{margin-top:3%;font-family:"Russo One",sans-serif;font-size:clamp(32px,9.4vw,48px);line-height:1.02;text-transform:uppercase;letter-spacing:.02em;color:#ffd84a;text-shadow:0 2px 0 rgba(120,60,10,.6),0 3px 8px rgba(0,0,0,.7),0 0 14px rgba(255,170,40,.4)} .prize .prize-text{font-size:clamp(22px,6.5vw,34px);text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.6),0 0 16px rgba(255,170,40,.6)} .prize.grand .prize-num{filter:drop-shadow(0 3px 0 rgba(120,60,10,.55)) drop-shadow(0 0 18px rgba(255,150,40,.7))} @keyframes prizepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} .desc{margin-top:3.5%;font-weight:700;line-height:1.35;max-width:92%;font-size:clamp(11px,3.1vw,13px);color:#f1e3ca;text-shadow:0 1px 3px rgba(0,0,0,.7)} .code{margin-top:3.5%;font-family:"Russo One",sans-serif;letter-spacing:.1em;font-size:clamp(15px,4.6vw,20px);color:#2a1404;background:linear-gradient(180deg,#ffce3a,#e0a82a);padding:8px 16px;border-radius:10px;border:2px dashed rgba(80,30,4,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .claim{margin-top:auto;width:82%;position:relative;border:0;padding:0;cursor:pointer;background:none;aspect-ratio:371/98;display:flex;align-items:center;justify-content:center;animation:claimpulse 1.7s ease-in-out infinite;transition:transform .12s ease} .claim .claim-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;transition:opacity .22s ease} .claim .claim-bg-hover{opacity:0}.claim:hover .claim-bg-hover{opacity:1} .claim .claim-txt{position:relative;z-index:1;pointer-events:none;transform:translateY(46%);line-height:1;font-family:"Russo One",sans-serif;text-transform:uppercase;white-space:nowrap;color:#6e1c0a;font-size:clamp(13px,4vw,18px);letter-spacing:.03em;text-shadow:0 1px 0 rgba(255,240,180,.55)} .claim::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:url('img/btn.webp') center/100% 100% no-repeat;mask:url('img/btn.webp') center/100% 100% no-repeat;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);background-size:260% 100%;background-repeat:no-repeat;animation:sheen 2.7s ease-in-out infinite} @keyframes sheen{0%{background-position:135% 0}55%,100%{background-position:-135% 0}} @keyframes claimpulse{0%,100%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,180,40,.3))}50%{filter:drop-shadow(0 9px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,195,70,.85))}} .claim:hover .claim-bg{filter:brightness(1.08)}.claim:active{transform:translateY(2px) scale(.99)}.claim:focus-visible{outline:3px solid #ffe08a;outline-offset:4px;border-radius:10px} #confetti{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none;display:none}#confetti.on{display:block} @media(prefers-reduced-motion:reduce){.fire,.rock,.centerBtn::after,.wincard,.frame-a,.prize,.claim,.claim::after,.modal.open,.model,.wisp{animation:none}} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,34px);position:relative;z-index:1} .section{position:relative;padding:clamp(46px,7vw,84px) 0} /* section backgrounds defined in unified block below */ .divider-glow{height:1px;background:linear-gradient(90deg,transparent,rgba(255,200,120,.35),transparent)} .sec-head{text-align:center;max-width:760px;margin:0 auto clamp(26px,4vw,46px)} .eyebrow2{display:inline-block;font-family:"Russo One",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--gold);background:rgba(255,180,40,.08);border:1px solid rgba(255,180,40,.28);padding:6px 14px;border-radius:999px;margin-bottom:14px} .sec-deco{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 22px;max-width:320px} .sec-deco .line{height:1px;width:64px;background:linear-gradient(90deg,transparent,rgba(255,206,58,.55))} .sec-deco .line.r{background:linear-gradient(90deg,rgba(255,206,58,.55),transparent)} .sec-deco .star{flex:0 0 auto;width:26px;height:26px;color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,180,40,.5))} .sec-deco .star svg{width:100%;height:100%;display:block} h2.sh{font-family:"Russo One",sans-serif;font-weight:400;line-height:1.1;margin:0 0 12px;font-size:clamp(24px,4.4vw,40px);color:var(--cream)} h2.sh .g{background:linear-gradient(180deg,#fff7e6,var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent} .sec-head p{font-size:clamp(14px,2.5vw,17px);color:var(--cream-dim);line-height:1.6;margin:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:"Nunito",sans-serif;font-weight:800;border:0;border-radius:12px;padding:13px 22px;font-size:15px;text-decoration:none;transition:transform .12s,filter .12s;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-gold{background:linear-gradient(180deg,#ffd24a,#ff7a18);color:#3a1604;box-shadow:0 8px 20px rgba(255,110,20,.35)} .btn-gold:hover{filter:brightness(1.06)} .btn-ghost{background:rgba(255,255,255,.03);color:var(--cream);border:1.5px solid rgba(255,200,120,.32)} .btn-ghost:hover{border-color:rgba(255,200,120,.6);background:rgba(255,200,120,.07)} .btn-sm{padding:10px 16px;font-size:14px;border-radius:10px} .btn-block{width:100%} .grid{display:grid;gap:clamp(14px,1.8vw,22px)} .cols-5{grid-template-columns:repeat(5,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:1000px){.cols-5{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.cols-5,.cols-3{grid-template-columns:repeat(2,1fr)}.cols-2{grid-template-columns:1fr}} @media(max-width:480px){.cols-5,.cols-4,.cols-3{grid-template-columns:1fr}} .card2{background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:18px;padding:22px;box-shadow:0 18px 40px rgba(0,0,0,.32)} .ic{width:22px;height:22px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.8}.ic-lg{width:30px;height:30px} .topnav{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(13,5,18,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,200,120,.15);transition:transform .3s var(--ease,cubic-bezier(.2,.7,.2,1))} .topnav.nav-hidden{transform:translateY(-100%)} .nav-inner{max-width:1180px;margin:0 auto;padding:11px clamp(14px,4vw,34px);display:flex;align-items:center;gap:18px} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none} .brand-logo{width:210px;height:50px;object-fit:contain;display:block;transition:opacity .15s} .brand:hover .brand-logo{opacity:.88} .nav-links{display:flex;gap:6px;margin:0 auto;list-style:none;padding:0} .nav-links a{color:var(--cream-dim);text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 12px;border-radius:9px;transition:.15s} .nav-links a:hover{color:var(--cream);background:rgba(255,200,120,.08)} .nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto} .pts-badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;color:var(--yellow);background:rgba(255,180,40,.1);border:1px solid rgba(255,180,40,.3);padding:7px 12px;border-radius:999px} @media(max-width:880px){.nav-links{display:none}} @media(max-width:760px){.pts-badge{display:none}.nav-actions .nav-cabinet{display:none !important}.nav-inner{padding:8px 14px;gap:10px;min-height:56px}.nav-actions{margin-left:auto;gap:8px}.brand-logo{width:150px;height:40px}.nav-actions .btn{font-size:13px;padding:10px 14px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center}} @media(max-width:360px){.brand-logo{width:130px;height:35px}.nav-actions .btn{font-size:12px;padding:8px 11px}.nav-inner{padding:7px 10px;gap:8px}} .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:26px} .chip{font-weight:800;font-size:13px;color:var(--cream-dim);cursor:pointer;background:rgba(255,255,255,.03);border:1px solid rgba(255,200,120,.2);padding:8px 15px;border-radius:999px;transition:.15s} .chip:hover{color:var(--cream);border-color:rgba(255,200,120,.5)} .chip.on{color:#2a0e04;background:linear-gradient(180deg,var(--gold),var(--gold-soft));border-color:transparent} .prod{background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:18px;padding:16px;display:flex;flex-direction:column;box-shadow:0 14px 32px rgba(0,0,0,.3);transition:transform .16s,border-color .16s} .prod:hover{transform:translateY(-4px);border-color:rgba(255,200,120,.4)} .prod .tag{align-self:flex-start;font-size:11px;font-weight:800;color:#2a0e04;background:linear-gradient(180deg,var(--gold),var(--ember));padding:3px 9px;border-radius:7px} .prod .tag.muted{color:var(--cream);background:rgba(255,255,255,.08)} .device{width:104px;height:150px;margin:14px auto 12px;border-radius:18px;position:relative;background:linear-gradient(160deg,#2a2333,#14101d);border:2px solid rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)} .device::before{content:"";position:absolute;inset:7px;border-radius:12px;background:var(--scr,linear-gradient(150deg,#3a2a5a,#1a1430))} .device::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:30px;height:5px;border-radius:6px;background:rgba(0,0,0,.5)} .prod-title{font-weight:800;font-size:15.5px;color:var(--cream);margin:2px 0 8px;line-height:1.25} .specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .specs span{font-size:11.5px;color:var(--cream-dim);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:3px 8px;border-radius:7px} .rating{font-size:12.5px;color:var(--yellow);font-weight:700;margin-bottom:8px}.rating .muted{color:var(--cream-dim);font-weight:600} .price{display:flex;align-items:baseline;gap:8px;margin-top:auto} .price b{font-family:"Russo One",sans-serif;font-size:19px;color:var(--cream)} .price .old{font-size:13px;color:#9b8aa6;text-decoration:line-through} .pts-row{font-size:12px;color:var(--gold);font-weight:700;margin:4px 0 12px} .prod-foot{display:flex;gap:8px} .icon-btn{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,200,120,.22);cursor:pointer;color:var(--gold)} .icon-btn:hover{background:rgba(255,200,120,.1)} .catalog-more{text-align:center;margin-top:30px} .coll{position:relative;overflow:hidden;border-radius:20px;padding:24px;min-height:168px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;text-decoration:none;border:1px solid var(--surface-border);background:var(--surface-1);box-shadow:0 16px 36px rgba(0,0,0,.32);transition:transform .16s,border-color .16s,background .16s} .coll:hover{transform:translateY(-4px)} .coll::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))} .coll .ci{position:relative;z-index:1;font-size:30px;margin-bottom:auto} .coll .ttl{position:relative;z-index:1;margin:10px 0 4px;font-family:"Russo One",sans-serif;font-weight:400;font-size:19px} .coll p{position:relative;z-index:1;margin:0;font-size:13px;opacity:.92} .coll .go{position:relative;z-index:1;margin-top:10px;font-weight:800;font-size:13px;color:#ffe7b0} .promo-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;border-radius:24px;padding:clamp(22px,3.4vw,40px);overflow:hidden;position:relative;background:var(--surface-1);border:1px solid var(--surface-border);box-shadow:0 24px 60px rgba(0,0,0,.4);transition:background .4s ease,border-color .3s ease} .promo-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 130% at 88% 12%,rgba(255,120,30,.16),transparent 46%);opacity:0;transition:opacity .45s ease} .promo-hero:hover::after{opacity:1} .promo-hero:hover{border-color:var(--surface-border-hover)} .promo-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,180,40,.4),transparent 70%);filter:blur(8px)} .promo-hero .pl{position:relative;z-index:1} .promo-hero .ttl{font-family:"Russo One",sans-serif;font-weight:400;font-size:clamp(22px,3.4vw,34px);margin:6px 0 10px;color:#fff;line-height:1.15} .promo-hero p{margin:0 0 18px;color:#ffe1c4;font-size:15px;line-height:1.5;max-width:460px} .promo-badge{display:inline-block;font-weight:800;font-size:12px;color:#3a0e04;background:linear-gradient(180deg,var(--gold),var(--ember));padding:5px 12px;border-radius:999px} .promo-hero .pr{position:relative;z-index:1;display:grid;gap:10px} .pcoupon{background:rgba(0,0,0,.28);border:1px dashed rgba(255,210,120,.6);border-radius:14px;padding:14px 16px;text-align:center} .pcoupon .big{font-family:"Russo One",sans-serif;font-size:26px;color:var(--gold)} .pcoupon .sm{font-size:12px;color:#ffe1c4} @media(max-width:760px){.promo-hero{grid-template-columns:1fr}} .deal{background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px} .deal .d-off{font-family:"Russo One",sans-serif;font-size:30px;color:var(--ember)} .deal .d-name{font-weight:800;color:var(--cream)}.deal .d-sub{font-size:13px;color:var(--cream-dim)} .deal .d-timer{margin-top:6px;font-size:12px;font-weight:700;color:var(--yellow)} .table-scroll{overflow-x:auto;border-radius:16px;border:1px solid rgba(255,200,120,.15);margin-top:8px} table.ctable{width:100%;border-collapse:collapse;min-width:560px;font-size:14px} table.ctable th,table.ctable td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)} table.ctable thead th{background:linear-gradient(180deg,#2a1206,#1c0b06);color:var(--cream);font-family:"Russo One",sans-serif;font-weight:400;font-size:14.5px;position:sticky;top:0} table.ctable thead th.best{background:linear-gradient(180deg,#6a3a06,#3a1f04);color:#ffe7b0} table.ctable tbody th{font-weight:700;color:var(--cream-dim);background:var(--surface-inset)} table.ctable td{color:var(--cream)} table.ctable tr:last-child td,table.ctable tr:last-child th{border-bottom:0} table.ctable .y{color:#7be08a;font-weight:800} table.ctable .price-c{font-family:"Russo One",sans-serif;color:var(--gold)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px} .stat{text-align:center;padding:20px 12px;border-radius:16px;background:var(--surface-1);border:1px solid rgba(255,200,120,.13)} .stat b{display:block;font-family:"Russo One",sans-serif;font-size:clamp(22px,3.4vw,30px);background:linear-gradient(180deg,#fff7e6,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(.5px .5px 0 #6a2207) drop-shadow(1px 1px 0 #4a1705) drop-shadow(1px 2px 3px rgba(0,0,0,.45))} .stat span{font-size:13px;color:var(--cream-dim)} @media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}} .review{display:flex;flex-direction:column;gap:10px} .review .top{display:flex;align-items:center;gap:12px} .ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:"Russo One",sans-serif;color:#2a0e04;font-size:18px;background:linear-gradient(150deg,var(--gold),var(--ember))} .review .nm{font-weight:800;color:var(--cream);font-size:15px} .review .stars{color:var(--gold);font-size:13px;letter-spacing:1px} .review p{margin:0;color:var(--cream-dim);font-size:14px;line-height:1.55} .review .dt{font-size:12px;color:#8a7a96} .ic-card{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--surface-1);border:1px solid rgba(255,200,120,.13)} .ic-card .icw{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(255,180,40,.1);border:1px solid rgba(255,180,40,.28)} .ic-card .ttl{margin:0 0 5px;font-size:16px;color:var(--cream)}.ic-card p{margin:0;font-size:13.5px;color:var(--cream-dim);line-height:1.5} .check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px} .check-list li{display:flex;gap:11px;align-items:flex-start;color:var(--cream-dim);font-size:14.5px;line-height:1.5} .check-list .ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(123,224,138,.14);color:#7be08a;font-size:13px;font-weight:900;margin-top:1px} .check-list b{color:var(--cream)} .legal-note{margin-top:22px;padding:16px 18px;border-radius:14px;font-size:12.5px;color:#c4b3cf;background:var(--surface-inset);border:1px solid rgba(255,255,255,.06);line-height:1.6} .verify-box{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .verify-box input{flex:1;min-width:180px;background:rgba(0,0,0,.3);border:1px solid rgba(255,200,120,.25);border-radius:12px;padding:13px 16px;color:var(--cream);font-size:15px;font-family:inherit} .verify-box input::placeholder{color:#8a7a96} .verify-box input:focus{outline:2px solid rgba(255,200,120,.5);border-color:transparent} .pay{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 14px;border-radius:16px;background:var(--surface-1);border:1px solid rgba(255,200,120,.13)} .pay .pm{width:54px;height:38px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:13px;color:#2a0e04;background:linear-gradient(160deg,#ffe6a6,var(--gold))} .pay b{font-size:14.5px;color:var(--cream)}.pay span{font-size:12.5px;color:var(--cream-dim)} /* old .sup styles removed - replaced by sup-card */ .faq{max-width:820px;margin:0 auto} details.q{background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:14px;padding:2px 18px;margin-bottom:12px} details.q summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:800;color:var(--cream);font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:12px} details.q summary::-webkit-details-marker{display:none} details.q summary::after{content:"";width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--surface-border);background:var(--surface-inset);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffce3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-size:12px 12px;background-position:center;background-repeat:no-repeat;transition:transform .28s var(--ease),border-color .28s var(--ease)} details.q[open] summary::after{transform:rotate(180deg);border-color:var(--surface-border-hover)} details.q p{margin:0 0 16px;color:var(--cream-dim);font-size:14px;line-height:1.6} footer.legal{background:#0a0410;border-top:1px solid rgba(255,200,120,.15);padding:clamp(40px,6vw,64px) 0 24px} .foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:34px} .foot-brand .brand{margin-bottom:12px}.foot-brand .brand-logo{width:160px;height:38px} .foot-brand p{color:var(--cream-dim);font-size:13.5px;line-height:1.6;max-width:300px;margin:0 0 14px} .foot-soc{display:flex;gap:16px} .foot-soc a{width:auto;height:auto;display:grid;place-items:center;color:var(--gold)} .foot-soc a:hover{color:#ffe16a} .foot-col .ttl-h{font-family:"Russo One",sans-serif;font-weight:400;font-size:14px;color:var(--cream);margin:0 0 14px} .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .foot-col a{color:var(--cream-dim);text-decoration:none;font-size:13.5px}.foot-col a:hover{color:var(--cream)} .foot-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between} .foot-bottom .cp{font-size:12.5px;color:#8a7a96;line-height:1.6;max-width:680px} .pay-icons{display:flex;gap:7px;flex-wrap:wrap} .pay-icons span{font-size:10.5px;font-weight:800;color:#2a0e04;background:linear-gradient(160deg,#ffe6a6,var(--gold));padding:5px 9px;border-radius:6px} @media(max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}} @media(max-width:480px){.foot-cols{grid-template-columns:1fr}} .mobnav{display:none} @media(max-width:760px){body{padding-bottom:78px}.mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:14;justify-content:space-around;align-items:flex-end;padding:9px 4px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(13,5,18,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(255,200,120,.2);box-shadow:0 -8px 24px rgba(0,0,0,.4)}.mn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#b79fc4;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}.mn svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mn-sport svg{width:20px;height:20px;fill:currentColor;stroke:none}.mn-gift svg{stroke-width:1.4}.mn:active{color:var(--cream)}.mn-center{color:var(--gold)}.mn-center .mc{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-top:-30px;margin-bottom:1px;border:4px solid #0e0512;background:linear-gradient(180deg,var(--yellow),var(--ember));box-shadow:0 8px 22px rgba(255,110,20,.55);animation:mcPulse 3.4s ease-out infinite} @keyframes mcPulse{0%{box-shadow:0 8px 22px rgba(255,110,20,.55),0 0 0 0 rgba(255,180,60,.4)}70%{box-shadow:0 8px 22px rgba(255,110,20,.55),0 0 0 12px rgba(255,180,60,0)}100%{box-shadow:0 8px 22px rgba(255,110,20,.55),0 0 0 0 rgba(255,180,60,0)}} @media(prefers-reduced-motion:reduce){.mn-center .mc{animation:none}}.mn-center .mc svg{width:28px;height:28px;fill:#3a1004;stroke:none}} :root{--ease:cubic-bezier(.2,.7,.2,1);--shadow-hov:0 26px 54px rgba(0,0,0,.5);--glow-hov:0 0 0 1px rgba(255,200,120,.5),0 0 36px rgba(255,140,40,.20)} .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .75s var(--ease);transition-delay:var(--rd,0s);will-change:opacity,transform} .reveal.in{opacity:1;transform:none} .card2,.prod,.coll,.ic-card,.pay,.sup,.deal,.stat,.review{transition:transform .22s var(--ease),box-shadow .26s ease,border-color .22s ease} .card2:hover,.prod:hover,.coll:hover,.ic-card:hover,.pay:hover,.sup:hover,.deal:hover,.stat:hover,.review:hover{transform:translateY(-5px);box-shadow:var(--shadow-hov),var(--glow-hov);border-color:rgba(255,200,120,.55)} .coll:hover::after{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.32))} .promo-hero{transition:box-shadow .26s ease}.promo-hero:hover{box-shadow:0 30px 64px rgba(0,0,0,.5),0 0 50px rgba(255,140,40,.28)} .chip,.icon-btn,.btn,.nav-links a,.foot-col a,.foot-soc a{transition:all .18s var(--ease)} .foot-soc a svg{width:34px;height:34px} details.q{transition:border-color .2s ease,box-shadow .2s ease} details.q:hover{border-color:rgba(255,200,120,.4)} details.q[open]{box-shadow:0 0 0 1px rgba(255,200,120,.3),0 14px 30px rgba(0,0,0,.3)} @media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none}} .section{background:#0c0410;padding:clamp(48px,7vw,90px) 0} .section.alt{background:linear-gradient(180deg,#0e0613 0%,#0c0410 100%)} .section:not(.hero)::before{content:"";position:absolute;top:0;left:0;right:0;height:70px;background:linear-gradient(180deg,rgba(12,4,16,.5),transparent);pointer-events:none;z-index:0} .section:not(.hero)::after{content:"";position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(0deg,rgba(10,4,14,.5),transparent);pointer-events:none;z-index:0} .section.deep{background:radial-gradient(ellipse 120% 80% at 50% 0%,#140a1e 0%,#0c0410 55%)} .sec-head{text-align:center;max-width:760px;margin:0 auto clamp(28px,4vw,46px);padding:0 16px} .sec-head .eyebrow2{display:none} .sec-head h2.sh{font-family:"Russo One",sans-serif;font-weight:400;color:var(--cream);font-size:clamp(26px,4.6vw,42px);line-height:1.12;margin:0 0 14px;letter-spacing:.005em} .sec-head h2.sh .g{background:linear-gradient(180deg,#fff7e6 0%,var(--gold) 48%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .sec-head p{color:#9c8fa6;font-size:clamp(14px,2.4vw,16.5px);line-height:1.55;margin:0;max-width:620px;margin-left:auto;margin-right:auto} .card2,.prod,.deal,.ic-card,.pay,.sup,.stat,.review,.coll,details.q,.verify-box,.promo-hero{background:var(--surface-1);border:1px solid var(--surface-border);border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.32)} .promo-hero{background:var(--surface-1)} .coll{padding:22px;min-height:auto;color:var(--cream);justify-content:flex-start;border:1px solid var(--surface-border);background:var(--surface-1)}.coll::after{display:none} .coll:hover{transform:translateY(-4px);border-color:var(--surface-border-hover);background:var(--surface-2)} .coll .coll-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}.coll .coll-tx{min-width:0} .coll .ci{flex:0 0 auto;width:auto;height:auto;display:flex;align-items:center;justify-content:center;margin:0 0 14px;color:var(--gold);background:none;border:0;box-shadow:none}.coll .ci svg{width:36px;height:36px} .coll:hover .ci{background:none;border:0} .coll .ttl{color:var(--cream);font-size:17px;margin:0 0 4px} .coll p{color:#9c8fa6;font-size:13px;margin:0;line-height:1.4} .coll .go{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,206,58,.1);color:var(--gold);font-size:13px;font-weight:800} .mb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .pcard{position:relative;min-height:172px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon body" "line line" "link link";column-gap:20px;row-gap:18px;padding:26px 28px 22px;border:1px solid var(--surface-border);border-radius:18px;background:var(--surface-1);box-shadow:0 22px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.03);overflow:hidden;isolation:isolate;text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease} .pcard::before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(255,206,58,.14),transparent 32%,rgba(255,106,26,.07));opacity:0;transition:opacity .22s ease;z-index:-1} .pcard:hover{transform:translateY(-3px);border-color:var(--surface-border-hover);background:var(--surface-2);box-shadow:0 28px 75px rgba(0,0,0,.48),0 0 30px rgba(255,206,58,.07),inset 0 1px 0 rgba(255,255,255,.04)} .pcard:hover::before{opacity:1} .pcard__icon{grid-area:icon;flex:0 0 auto;display:grid;place-items:center;color:var(--gold)} .pcard__icon svg{width:56px;height:56px;color:var(--gold);filter:drop-shadow(0 3px 8px rgba(255,180,40,.22))} .pcard__body{grid-area:body;align-self:center;min-width:0} .pcard__body .ttl{margin:0 0 8px;font-family:"Russo One",sans-serif;font-weight:400;font-size:20px;line-height:1.14;letter-spacing:-.01em;color:var(--cream)} .pcard__body p{margin:0;color:#a99db3;font-size:15px;line-height:1.45;font-weight:700} .pcard__line{grid-area:line;height:1px;background:linear-gradient(90deg,rgba(255,206,58,.22),rgba(255,255,255,.08),transparent)} .pcard__link{grid-area:link;display:inline-flex;width:max-content;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-size:14px;line-height:1;font-weight:800;transition:gap .2s ease,color .2s ease} .pcard__link:hover{gap:13px;color:#ffe26b} .pcard__link span{font-size:17px} @media(max-width:1100px){.mb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.mb-grid{grid-template-columns:1fr;gap:16px}.pcard{padding:22px 20px 20px;column-gap:16px;row-gap:16px}.pcard__icon svg{width:52px;height:52px}} .ic-card{padding:22px;gap:14px} .ic-card .icw{width:44px;height:44px;border-radius:12px;background:rgba(255,200,120,.08);border:1px solid rgba(255,200,120,.22);color:var(--gold)} .ic-card .ttl{font-size:16px;font-weight:800}.ic-card p{color:#9c8fa6} .pay,.sup{padding:24px 16px;gap:12px} .pay .pm,.sup .pm{width:auto;height:auto;min-width:54px;padding:8px 12px;background:transparent;border:none;border-radius:0;color:var(--gold);font-family:"Russo One",sans-serif;font-weight:400;font-size:18px;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center} .sup .pm{padding:0;min-width:auto}.sup .pm svg{width:30px;height:30px} .pay b,.sup b{font-size:15px;color:var(--cream);font-weight:800} .pay span,.sup span{font-size:13px;color:#9c8fa6} .deal{padding:20px}.deal .d-off{color:var(--gold)} .stat{padding:22px 14px}.stat b{color:var(--gold)}.stat span{color:#9c8fa6} .review{padding:20px}.review p{color:#c5b5cb} .chip{background:var(--surface-1);border:1px solid rgba(255,200,120,.18);color:#c5b5cb;padding:8px 14px;border-radius:999px} .chip:hover{border-color:rgba(255,200,120,.45);color:var(--cream)} .chip.on{background:linear-gradient(180deg,var(--gold),var(--gold-soft));color:#2a0e04;border-color:transparent;font-weight:800} details.q{padding:0;overflow:hidden} details.q summary{padding:18px 22px;font-size:15.5px;color:var(--cream);font-weight:700;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center} details.q summary::-webkit-details-marker{display:none} details.q summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffce3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} details.q[open] summary::after{transform:rotate(180deg)} details.q > *:not(summary){padding:0 22px 18px;color:#9c8fa6;font-size:14px;line-height:1.55} .verify-box{padding:22px} .legal{background:#0a030d;border-top:1px solid rgba(255,200,120,.1)} .section + .section{box-shadow:none} .article-card{background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.32);padding:clamp(24px,4vw,42px);max-width:860px;margin:0 auto;line-height:1.7;color:#c5b5cb} .article-card > *:first-child{margin-top:0}.article-card > *:last-child{margin-bottom:0} .article-card h3{font-family:"Russo One",sans-serif;font-weight:400;color:var(--cream);font-size:clamp(20px,2.6vw,26px);line-height:1.25;margin:32px 0 14px;padding-left:14px;border-left:3px solid var(--gold)} .article-card h4{font-family:"Nunito",sans-serif;font-weight:800;color:var(--gold);font-size:clamp(15px,1.9vw,17px);text-transform:uppercase;letter-spacing:.06em;margin:24px 0 8px} .article-card p{margin:0 0 14px;font-size:clamp(14.5px,1.9vw,16px);color:#c5b5cb} .article-card p:last-child{margin-bottom:0} .article-card a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,200,120,.4)} .article-card a:hover{border-bottom-color:var(--gold)} .article-card strong,.article-card b{color:var(--cream);font-weight:800} .author-block{max-width:860px;margin:24px auto 0;background:var(--surface-1);border:1px solid rgba(255,200,120,.13);border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.32);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:clamp(20px,3vw,36px);align-items:start} .author-main{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-right:clamp(0px,2vw,20px);border-right:1px solid rgba(255,200,120,.1)} .author-avatar{width:80px;height:80px;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,200,120,.25),0 0 24px rgba(255,140,40,.15);background:rgba(42,30,52,.5)} .author-avatar img{width:100%;height:100%;object-fit:cover;display:block} .author-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9c8fa6} .author-name{font-family:"Russo One",sans-serif;color:var(--cream);font-size:clamp(16px,2.2vw,19px);line-height:1.2;margin:-4px 0 0;text-transform:uppercase;letter-spacing:.02em} .author-role{font-size:13px;color:#9c8fa6;line-height:1.35} .author-social{display:flex;gap:8px;margin-top:6px} .author-social a{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--gold);transition:all .18s var(--ease)} .author-social a:hover{background:rgba(255,200,120,.18);box-shadow:0 0 14px rgba(255,140,40,.3);transform:translateY(-2px)} .author-bio .ttl-h{font-family:"Nunito",sans-serif;font-weight:800;color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px} .author-bio p{color:#c5b5cb;font-size:14.5px;line-height:1.65;margin:0 0 16px} .author-credits{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px 18px} .author-credits li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9c8fa6} .author-credits li svg{color:var(--gold);flex:none} .author-credits time{color:var(--cream);font-weight:700} .moderator-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:rgba(255,200,120,.05);border:1px solid rgba(255,200,120,.15);border-radius:12px;font-size:13px;color:#c5b5cb;line-height:1.5} .moderator-note svg{color:var(--gold);flex:none;margin-top:1px} .moderator-note b{color:var(--cream);font-weight:800} @media(max-width:880px){.author-block{grid-template-columns:1fr;gap:18px}.author-main{padding-right:0;padding-bottom:18px;border-right:none;border-bottom:1px solid rgba(255,200,120,.1);flex-direction:row;flex-wrap:nowrap;align-items:center;gap:14px}.author-avatar{width:64px;height:64px}.author-info{flex:1;min-width:0}.author-name{font-size:15px}.author-social{margin-top:6px;flex-wrap:wrap}} @media(max-width:380px){.author-avatar{width:54px;height:54px}.author-avatar img{width:54px;height:54px}.author-name{font-size:14px}.author-role{font-size:12px}} .review-carousel{position:relative;margin:32px -4px 0} .rc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 4px 18px;scroll-behavior:smooth} .rc-track::-webkit-scrollbar{display:none} .rc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(15,7,23,.85);border:1px solid rgba(255,200,120,.25);color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:all .18s var(--ease);backdrop-filter:blur(6px)} .rc-prev{left:-8px}.rc-next{right:-8px} .rc-nav:hover{background:rgba(255,200,120,.18);border-color:var(--gold);box-shadow:0 0 18px rgba(255,140,40,.4);color:#fff7e6;transform:translateY(-50%) scale(1.06)} .rc-nav:disabled{opacity:.35;cursor:default;box-shadow:none}.rc-nav:disabled:hover{background:rgba(15,7,23,.85);transform:translateY(-50%)} .rc-dots{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap} .rc-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,200,120,.25);border:none;padding:0;cursor:pointer;transition:all .2s var(--ease)} .rc-dots button.on{background:var(--gold);width:24px;border-radius:5px} @media(max-width:880px){.rc-track{grid-auto-columns:calc((100% - 16px)/2)}.rc-nav{display:none}} @media(max-width:560px){.rc-track{grid-auto-columns:88%}} .app-gallery{position:relative;margin:32px -4px 0} .app-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:8px 4px 22px;scroll-behavior:smooth} .app-track::-webkit-scrollbar{display:none} .app-shot{scroll-snap-align:start;flex:0 0 260px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .25s var(--ease)} .app-shot:hover{transform:translateY(-6px)} .app-img{width:260px;height:540px;display:block;object-fit:contain;background:transparent;border:none;border-radius:0;filter:drop-shadow(0 16px 28px rgba(0,0,0,.5));transition:filter .25s ease} .app-shot:hover .app-img{filter:drop-shadow(0 20px 32px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(255,140,40,.22))} .app-caption{font-size:14px;font-weight:700;color:var(--cream);text-align:center;letter-spacing:.01em;line-height:1.2} /* ---- Кнопки магазинов: анимированный контур при наведении ---- */ .app-stores{display:flex;justify-content:center;gap:20px;margin-top:36px;flex-wrap:wrap;align-items:center} .store-btn{ display:inline-flex;align-items:center;gap:14px; padding:15px 32px 15px 22px;min-width:224px; border-radius:10px;text-decoration:none;position:relative; background:#050208; transition:all .4s var(--ease); overflow:visible; } .store-btn:active{transform:translateY(0) scale(.97)} /* SVG-обводка бегущая по контуру */ /* пульсация свечения */ .store-btn::before{ content:"";position:absolute;inset:-3px;border-radius:13px; pointer-events:none; animation:store-pulse 2.6s ease-in-out infinite; } @keyframes store-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.005)}} .store-btn__icon{flex:none;display:grid;place-items:center;position:relative;z-index:1} .store-btn__icon svg{display:block} .store-btn__text{display:flex;flex-direction:column;line-height:1.1;position:relative;z-index:1} .store-btn__top{font-size:11px;color:rgba(255,255,255,.75);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .store-btn__bottom{font-size:20px;color:#fff;font-family:"Russo One",sans-serif;font-weight:400;letter-spacing:.01em;margin-top:3px} /* ── Apple: синий/голубой ── */ .store-btn--apple{ border:2px solid rgba(70,160,255,.5); box-shadow: 0 0 4px 1px rgba(70,160,255,.45), 0 0 14px 2px rgba(50,140,255,.3), 0 0 32px 4px rgba(40,120,255,.15), inset 0 0 8px rgba(70,160,255,.05); } .store-btn--apple:hover{ transform:translateY(-3px); border-color:rgba(100,190,255,.7); box-shadow: 0 0 6px 2px rgba(80,180,255,.6), 0 0 18px 4px rgba(50,150,255,.4), 0 0 40px 6px rgba(40,120,255,.2), 0 10px 28px rgba(0,0,0,.5), inset 0 0 10px rgba(70,160,255,.06); } .store-btn--apple::before{ box-shadow: 0 0 8px 2px rgba(70,160,255,.4), 0 0 22px 4px rgba(50,140,255,.2), 0 0 44px 6px rgba(40,120,255,.1); } /* ── Google: золотой/огненный ── */ .store-btn--google{ border:2.5px solid #d4a420; box-shadow: 0 0 4px 1px rgba(255,200,40,.6), 0 0 14px 2px rgba(255,170,20,.4), 0 0 32px 4px rgba(255,140,10,.2), inset 0 0 8px rgba(255,200,40,.05); } .store-btn--google:hover{ transform:translateY(-3px); border-color:#f0c030; box-shadow: 0 0 6px 2px rgba(255,210,50,.7), 0 0 18px 4px rgba(255,180,30,.45), 0 0 40px 6px rgba(255,140,10,.25), 0 10px 28px rgba(0,0,0,.5), inset 0 0 10px rgba(255,200,40,.06); } .store-btn--google::before{ box-shadow: 0 0 8px 2px rgba(255,200,40,.4), 0 0 22px 4px rgba(255,160,20,.25), 0 0 44px 6px rgba(255,120,0,.12); } @media(max-width:560px){ .store-btn{padding:13px 24px 13px 18px;min-width:190px;gap:11px} .store-btn__bottom{font-size:17px} .store-btn__icon svg{width:26px;height:26px} } @media(prefers-reduced-motion:reduce){.store-btn::before{animation:none}} @media(max-width:560px){.app-shot{flex-basis:220px}.app-img{width:220px;height:460px}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #collections,#promo,#social,#trust,#security,#payment,#guide,#account,#support{content-visibility:auto;contain-intrinsic-size:1px 800px} .model,.fire,.rock,.claim,.wisp,.hero-decor{will-change:transform} img.app-img{aspect-ratio:260/540}.author-avatar img{aspect-ratio:1/1} @supports(content-visibility:auto){.section{content-visibility:auto;contain-intrinsic-size:auto 800px}} /* ===================== АККОРДЕОН АККАУНТА (НОВЫЙ БЛОК) ===================== */ /* ===== НОВАЯ РАСКЛАДКА АККАУНТА ===== */ .acct-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start; } /* ===== ОСНОВНАЯ ПАНЕЛЬ (левая) ===== */ .acct-panel{ padding:22px; border-radius:22px; background:var(--surface-1); border:1px solid var(--surface-border); box-shadow:0 24px 60px rgba(0,0,0,.35); display:grid; gap:18px; } /* --- Шапка профиля --- */ .profile-head{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; } .profile-ava{ width:62px;height:62px;border-radius:50%; display:grid;place-items:center; font-family:"Russo One",sans-serif;font-size:24px;color:#2a0e04; background:linear-gradient(180deg,var(--gold),var(--ember)); box-shadow:0 0 0 3px rgba(255,200,120,.15),0 12px 28px rgba(255,133,47,.25); animation:ava-glow 3s ease-in-out infinite; } @keyframes ava-glow{ 0%,100%{box-shadow:0 0 0 3px rgba(255,200,120,.15),0 12px 28px rgba(255,133,47,.25)} 50%{box-shadow:0 0 0 5px rgba(255,200,120,.22),0 12px 32px rgba(255,133,47,.35),0 0 20px rgba(255,180,60,.12)} } .profile-info h2{ margin:0;font-family:"Russo One",sans-serif;font-weight:400; font-size:clamp(16px,2.4vw,20px);color:var(--cream);letter-spacing:.01em; } .profile-info .profile-city{ margin:3px 0 0;color:#9c8fa6;font-size:13.5px;font-weight:600; } .profile-badge{ padding:9px 14px;border-radius:999px; background:rgba(255,190,89,.08);border:1px solid rgba(255,190,89,.16); font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#ffd9a0; animation:badge-shimmer 4s ease-in-out infinite; } @keyframes badge-shimmer{ 0%,100%{border-color:rgba(255,190,89,.16);background:rgba(255,190,89,.08)} 50%{border-color:rgba(255,190,89,.3);background:rgba(255,190,89,.12)} } /* --- Метрики --- */ .top-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .metric{ padding:14px;border-radius:16px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.08); transition:all .22s var(--ease); position:relative; overflow:hidden; } .metric::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,200,120,.06),transparent 60%); opacity:0;transition:opacity .3s ease; } .metric:hover{ border-color:rgba(255,200,120,.25); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3); } .metric:hover::before{opacity:1} .metric small{display:block;color:#9c8fa6;font-size:11.5px;font-weight:700;margin-bottom:6px;position:relative} .metric strong{font-size:1.05rem;line-height:1.1;position:relative;color:var(--cream)} /* --- Аккордеон --- */ .acc-list{display:grid;gap:8px} .acc{ border:1px solid rgba(255,200,120,.08); border-radius:16px; background:var(--surface-inset); overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease; } .acc:hover{border-color:rgba(255,200,120,.2)} .acc.open{ border-color:rgba(255,200,120,.25); box-shadow:0 0 0 1px rgba(255,200,120,.08),0 12px 28px rgba(0,0,0,.25); } .acc-btn{ width:100%;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:14px 16px; background:none;border:none;color:var(--cream);cursor:pointer;text-align:left; transition:background .15s ease; font-family:inherit; } .acc-btn:hover{background:rgba(255,200,120,.03)} .acc-main{display:flex;align-items:center;gap:12px;min-width:0} .acc-icon{display:grid;place-items:center;flex:none;color:var(--gold);font-size:26px;transition:all .22s var(--ease)} .acc-icon svg{width:26px;height:26px} .acc:hover .acc-title{font-weight:800;font-size:14.5px;line-height:1.15;color:var(--cream)} .acc-sub{font-size:12px;color:#9c8fa6;margin-top:2px;font-weight:600} .acc-side{display:flex;align-items:center;gap:10px;flex:none} .acc-value{ padding:6px 11px;border-radius:999px; background:rgba(255,200,120,.08);border:1px solid var(--surface-border); font-size:12px;font-weight:800;color:#ffd59a; white-space:nowrap; } .acc-arrow{ width:26px;height:26px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.03); transition:transform .3s var(--ease),background .2s ease; color:#9c8fa6;font-size:14px; } .acc.open .acc-arrow{ transform:rotate(180deg); background:rgba(255,200,120,.08); color:var(--gold); } /* Плавное раскрытие аккордеона */ .acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease),opacity .3s ease; opacity:0; } .acc.open .acc-panel{ grid-template-rows:1fr; opacity:1; } .acc-panel-inner{overflow:hidden} .acc-content{ padding:0 16px 16px; display:grid;gap:12px; } /* Мини-карточки внутри аккордеона */ .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .mini-card{ padding:13px 14px;border-radius:14px; background:var(--surface-1); border:1px solid var(--surface-border); transition:all .2s var(--ease); } .mini-card:hover{ border-color:rgba(255,200,120,.18); transform:translateY(-1px); } .mini-card small{display:block;color:#9c8fa6;font-size:11px;font-weight:700;margin-bottom:5px} .mini-card strong{font-size:14.5px;color:var(--cream)} /* Детальный список */ .detail-list{display:grid;gap:6px} .detail{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:10px 13px;border-radius:12px; background:var(--surface-inset); border:1px solid rgba(255,255,255,.03); font-size:13.5px; transition:background .15s ease; } .detail:hover{background:rgba(255,200,120,.03)} .detail span{color:#9c8fa6;font-weight:600} .detail b{font-weight:800;color:var(--cream)} /* ===== БОКОВАЯ ПАНЕЛЬ (правая) ===== */ .side-panel{ display:grid;gap:16px;align-content:start; padding:22px;border-radius:22px; background:linear-gradient(180deg,var(--surface-inset),rgba(255,255,255,.008)); border:1px solid var(--surface-border); box-shadow:0 24px 60px rgba(0,0,0,.35); } .side-panel .ttl{ margin:0;font-family:"Russo One",sans-serif;font-weight:400; font-size:clamp(17px,2.2vw,22px);color:var(--cream); } .side-panel > p{margin:0;color:#9c8fa6;font-size:13.5px;line-height:1.5} /* Прогресс-бар */ .progress-wrap{ padding:18px;border-radius:18px; background:rgba(255,200,120,.03); border:1px solid rgba(255,200,120,.1); display:grid;gap:10px; } .progress-head{display:flex;justify-content:space-between;align-items:end;gap:12px} .progress-head strong{ font-family:"Russo One",sans-serif;font-size:clamp(22px,2.6vw,28px); background:linear-gradient(180deg,#fff7e6,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent; } .progress-head .progress-note{color:#9c8fa6;font-weight:700;font-size:13px} .bar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;position:relative} .bar i{ display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--ember)); box-shadow:0 0 16px rgba(255,145,48,.2); transition:width 1.6s var(--ease); } .bar.animated i{width:var(--bar-w,64%)} /* Пульсирующий конец полоски */ .bar i::after{ content:"";position:absolute;right:0;top:0;bottom:0;width:14px; border-radius:0 999px 999px 0; background:rgba(255,255,255,.4); animation:bar-pulse 2s ease-in-out infinite; } @keyframes bar-pulse{ 0%,100%{opacity:.3}50%{opacity:.7} } .progress-caption{font-size:12.5px;color:#9c8fa6;margin-top:2px;font-weight:600} /* Перк-метрики */ .perks{display:grid;gap:10px} .perk{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 16px;border-radius:16px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.08); transition:all .22s var(--ease); } .perk:hover{ border-color:rgba(255,200,120,.22); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.25); } .perk strong{font-size:14px;color:var(--cream);display:block} .perk span{color:#9c8fa6;font-size:12.5px;display:block;margin-top:2px} .perk b{ color:var(--gold);font-size:14px;white-space:nowrap; font-family:"Russo One",sans-serif;font-weight:400; } /* Рекомендации */ .reco-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .reco-tag{ font-size:12.5px;color:var(--cream-dim); background:rgba(255,255,255,.03); border:1px solid var(--surface-border); padding:8px 14px;border-radius:999px;font-weight:700; transition:all .2s var(--ease); cursor:default; } .reco-tag:hover{ border-color:rgba(255,200,120,.35); color:var(--cream); background:rgba(255,200,120,.06); } /* CTA-кнопка */ .btn-gold-block{ display:flex;align-items:center;justify-content:center; width:100%;padding:15px 22px;border:0;border-radius:14px; font-family:"Nunito",sans-serif;font-weight:800;font-size:15px; color:#3a1604;cursor:pointer;text-decoration:none; background:linear-gradient(180deg,#ffd24a,#ff7a18); box-shadow:0 8px 24px rgba(255,110,20,.3); transition:all .18s var(--ease); position:relative;overflow:hidden; } .btn-gold-block:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 12px 30px rgba(255,110,20,.4); } .btn-gold-block:active{transform:translateY(1px)} /* Блик по кнопке */ .btn-gold-block::after{ content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%); background-size:260% 100%;background-repeat:no-repeat; animation:btn-sheen 3.2s ease-in-out infinite; } @keyframes btn-sheen{ 0%{background-position:135% 0} 55%,100%{background-position:-135% 0} } /* ===== REVEAL ANIMATION ===== */ .reveal-acct{ opacity:0;transform:translateY(18px); transition:opacity .6s ease,transform .7s var(--ease); } .reveal-acct.in{opacity:1;transform:none} /* ===== RESPONSIVE ===== */ @media(max-width:960px){ .acct-layout{grid-template-columns:1fr} .top-metrics{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .acct-panel,.side-panel{padding:16px;border-radius:18px} .top-metrics{grid-template-columns:1fr} .mini-grid{grid-template-columns:1fr} .profile-head{grid-template-columns:auto 1fr} .profile-badge{grid-column:1/-1;justify-self:start} .acc-btn{padding:12px 13px} .acc-content{padding:0 13px 13px} .acc-side .acc-value{display:none} } @media(prefers-reduced-motion:reduce){ .profile-ava,.profile-badge,.bar i,.btn-gold-block::after{animation:none} .bar i{transition:none;width:var(--bar-w,64%)} .acc-panel{transition:none} .reveal-acct{opacity:1;transform:none;transition:none} } /* ===================== ПЛАТЁЖНЫЙ БЛОК С АККОРДЕОНОМ (НОВЫЙ) ===================== */ /* Фильтр-категории */ .pay-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px} .pay-cat{ display:inline-flex;align-items:center;gap:7px; padding:10px 16px;border-radius:999px; background:var(--surface-inset);border:1px solid var(--surface-border); color:#c5b5cb;font-weight:800;font-size:13px;cursor:pointer; transition:all .22s var(--ease);position:relative;overflow:hidden; } .pay-cat::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,200,120,.08),transparent 60%); opacity:0;transition:opacity .25s ease; } .pay-cat:hover{border-color:rgba(255,200,120,.3);color:var(--cream);transform:translateY(-1px)} .pay-cat:hover::before{opacity:1} .pay-cat.active{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#2a0e04;border-color:transparent; } .pay-cat .pay-cat-count{ padding:3px 7px;border-radius:999px;font-size:11px;font-weight:900; background:rgba(255,255,255,.15);color:inherit; transition:background .2s ease; } .pay-cat.active .pay-cat-count{background:rgba(0,0,0,.12)} /* Группа методов */ .pay-group{ margin-bottom:16px;border-radius:20px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.08); overflow:hidden; transition:border-color .25s ease,box-shadow .25s ease; } .pay-group:hover{border-color:rgba(255,200,120,.18)} .pay-group.pay-hidden{display:none} .pay-group-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 20px;cursor:pointer; transition:background .15s ease; } .pay-group-head:hover{background:rgba(255,200,120,.025)} .pay-group-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:var(--cream)} .pay-group-count{ padding:5px 10px;border-radius:999px; background:rgba(255,200,120,.08);border:1px solid var(--surface-border); font-size:11.5px;font-weight:800;color:#ffd59a; } .pay-group-arrow{ width:28px;height:28px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.03);color:#9c8fa6; transition:transform .3s var(--ease),background .2s ease,color .2s ease; font-size:14px;flex:none; } .pay-group.open .pay-group-arrow{transform:rotate(180deg);background:rgba(255,200,120,.08);color:var(--gold)} /* Контент группы — плавное раскрытие */ .pay-group-body{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease),opacity .3s ease; opacity:0; } .pay-group.open .pay-group-body{grid-template-rows:1fr;opacity:1} .pay-group-inner{overflow:hidden} .pay-group-content{padding:0 20px 18px} /* Сетка карточек оплаты */ .pay-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} /* Карточка метода оплаты */ .pay-method{ position:relative; padding:16px 14px 14px;border-radius:16px; background:var(--surface-1); border:1px solid rgba(255,200,120,.06); display:grid;gap:8px;align-content:start; overflow:hidden;cursor:default; transition:all .22s var(--ease); } .pay-method::after{ content:"";position:absolute;right:-18px;bottom:-22px; width:72px;height:72px;border-radius:50%; background:radial-gradient(circle,rgba(255,182,72,.06),transparent 70%); transition:opacity .3s ease;opacity:0; } .pay-method:hover{ border-color:rgba(255,200,120,.25); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.3),0 0 20px rgba(255,140,40,.08); } .pay-method:hover::after{opacity:1} .pay-method.pay-extra{display:none} .pay-method.pay-extra.pay-shown{display:grid} /* Лого метода */ .pay-logo{ display:inline-flex;align-items:center;justify-content:center; padding:8px 12px;border-radius:12px;min-height:42px; background:rgba(255,200,120,.06);border:1px solid rgba(255,200,120,.1); font-family:"Russo One",sans-serif;font-weight:400;font-size:14px; color:var(--gold);letter-spacing:.02em; transition:all .22s var(--ease); } .pay-method:hover .pay-logo{ background:rgba(255,200,120,.1); box-shadow:0 0 14px rgba(255,180,60,.12); } .pay-method-badge{ padding:4px 8px;border-radius:999px; background:linear-gradient(180deg,var(--ember),#d91a14); font-size:10.5px;font-weight:800;color:#fff;white-space:nowrap; animation:badge-pulse 2.4s ease-in-out infinite; } @keyframes badge-pulse{0%,100%{opacity:.85}50%{opacity:1}} .pay-method .ttl{margin:0;font-size:14px;font-weight:800;color:var(--cream);line-height:1.2} .pay-method p{margin:0;font-size:12.5px;color:#9c8fa6;line-height:1.4} .pay-chip{ display:inline-block;padding:5px 9px;border-radius:999px; background:var(--surface-inset);border:1px solid rgba(255,255,255,.05); font-size:11px;color:#c5b5cb;font-weight:700; transition:border-color .2s ease; } .pay-method:hover .pay-chip{border-color:rgba(255,200,120,.15)} /* Кнопка "Показать ещё" внутри группы */ .pay-more-btn{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;margin-top:10px;padding:10px; border-radius:12px;border:1px dashed rgba(255,200,120,.15); background:transparent;color:var(--gold); font-family:inherit;font-weight:700;font-size:13px; cursor:pointer;transition:all .2s var(--ease); } .pay-more-btn:hover{ background:rgba(255,200,120,.04);border-color:rgba(255,200,120,.3); transform:translateY(-1px); } .pay-more-btn svg{transition:transform .25s var(--ease)} .pay-more-btn.expanded svg{transform:rotate(180deg)} /* Юр. примечание */ .pay-legal{ margin-top:18px;padding:16px 20px;border-radius:16px; background:var(--surface-inset);border:1px solid rgba(255,200,120,.06); text-align:center;font-size:13px;color:#9c8fa6;line-height:1.55; } .pay-legal strong{color:var(--cream)} /* Responsive */ @media(max-width:760px){ .pay-cards{grid-template-columns:repeat(2,1fr)} .pay-group-head{padding:14px 16px} .pay-group-content{padding:0 16px 14px} } @media(max-width:480px){ .pay-cards{grid-template-columns:1fr} } /* ===================== ОТЗЫВЫ ИГРОКОВ — РЕДИЗАЙН ===================== */ /* Стат-бар с иконками */ .rev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px} .rev-stat{ display:flex;align-items:center;gap:14px; padding:18px 20px;border-radius:14px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.15); transition:all .22s var(--ease); } .rev-stat:hover{border-color:rgba(255,200,120,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)} .rev-stat-icon{width:52px;height:52px;flex:none;border-radius:50%; display:grid;place-items:center; color:var(--gold);} .rev-stat-icon svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .rev-stat-val{font-family:"Russo One",sans-serif;font-size:clamp(20px,3vw,28px);color:var(--gold);line-height:1} .rev-stat-val .star{color:var(--gold);font-size:.7em;vertical-align:middle} .rev-stat-label{font-size:12.5px;color:#9c8fa6;margin-top:3px} @media(max-width:760px){.rev-stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.rev-stats{grid-template-columns:1fr}} /* Карточка отзыва — редизайн */ .rv{ scroll-snap-align:start; background:var(--surface-1); border:1.5px solid rgba(255,200,120,.14); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.35); padding:0;display:flex;flex-direction:column; min-height:100%; transition:transform .22s var(--ease),box-shadow .26s ease,border-color .22s ease; } .rv:hover{transform:translateY(-4px);border-color:rgba(255,200,120,.35);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 20px rgba(255,140,40,.1)} /* Шапка карточки: аватар + имя */ .rv-head{display:flex;align-items:center;gap:14px;padding:20px 20px 0} .rv-ava{ width:56px;height:56px;flex:none;border-radius:50%; display:grid;place-items:center; background:linear-gradient(150deg,#2a1a3a,#1a0e28); border:2px solid rgba(160,120,220,.4); box-shadow:0 0 12px rgba(140,100,200,.15); overflow:hidden; } .rv-ava svg{width:32px;height:32px} .rv-info{flex:1;min-width:0} .rv-name{display:flex;align-items:center;gap:8px} .rv-name .ttl{margin:0;font-family:"Russo One",sans-serif;font-weight:400;font-size:17px;color:var(--cream);letter-spacing:.01em} .rv-verified{width:20px;height:20px;border-radius:50%;background:rgba(120,100,200,.2);border:1px solid rgba(140,120,220,.4);display:grid;place-items:center;flex:none} .rv-verified svg{width:12px;height:12px;stroke:#a88ce0;fill:none;stroke-width:2.5} .rv-city{font-size:13px;color:#9c8fa6;margin-top:2px;display:flex;align-items:center;gap:4px} .rv-city svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} /* Данные — таблица */ .rv-data{padding:16px 20px;display:grid;gap:6px} .rv-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)} .rv-row:last-child{border-bottom:none} .rv-row-label{color:#9c8fa6;display:flex;align-items:center;gap:6px} .rv-row-label svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none;color:var(--gold)} .rv-row-val{font-weight:800;color:var(--cream);text-align:right} .rv-row-val.gold{color:var(--gold)} /* Цитата */ .rv-quote{ padding:16px 20px 14px;margin:0 14px; border-top:1px solid rgba(255,200,120,.08); position:relative;flex:1; } .rv-quote::before{ content:"\201C";position:absolute;left:4px;top:8px; font-family:Georgia,serif;font-size:42px;line-height:1; color:var(--gold);opacity:.4; } .rv-quote p{margin:0 0 0 28px;font-size:13px;line-height:1.55;color:#9c8fa6;font-style:italic} /* Звёзды */ .rv-stars{padding:0 20px 18px;font-size:16px;color:var(--gold);letter-spacing:3px} /* Карусель переопределения */ .rev-carousel{position:relative;margin:0 -4px} .rev-track{ display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/3); gap:14px;overflow-x:auto;overflow-y:visible; scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none; padding:4px 4px 18px;scroll-behavior:smooth; } .rev-track::-webkit-scrollbar{display:none} @media(max-width:880px){.rev-track{grid-auto-columns:calc((100% - 14px)/2)}} @media(max-width:560px){.rev-track{grid-auto-columns:90%}} /* Стрелки */ .rev-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;border-radius:50%; background:rgba(14,8,22,.9);border:1.5px solid rgba(255,200,120,.2); color:var(--gold);display:grid;place-items:center;cursor:pointer; transition:all .2s var(--ease);backdrop-filter:blur(6px); } .rev-prev{left:-6px}.rev-next{right:-6px} .rev-nav:hover{background:var(--surface-border);border-color:rgba(255,200,120,.5);box-shadow:0 0 16px rgba(255,140,40,.3);transform:translateY(-50%) scale(1.06)} .rev-nav:disabled{opacity:.3;cursor:default}.rev-nav:disabled:hover{background:rgba(14,8,22,.9);transform:translateY(-50%)} /* Точки */ .rev-dots{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap} .rev-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,200,120,.2);border:none;padding:0;cursor:pointer;transition:all .22s var(--ease)} .rev-dots button.on{background:var(--gold);width:26px;border-radius:5px} /* ===================== ДОВЕРИЕ — РЕДИЗАЙН ===================== */ /* Щит над заголовком */ .trust-shield{display:flex;justify-content:center;margin-bottom:14px} .trust-shield-icon{display:grid;place-items:center;} .trust-shield-icon svg{width:48px;height:48px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Двухколоночная раскладка */ .trust-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} @media(max-width:820px){.trust-layout{grid-template-columns:1fr}} /* Чек-лист (левая колонка) */ .trust-checks{display:grid;gap:16px;align-content:start} .trust-check{display:flex;gap:14px;align-items:flex-start} .trust-ck{ flex:none; display:grid;place-items:center;margin-top:2px; } .trust-ck svg{width:22px;height:22px;stroke:#5cc86a;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .trust-check-text b{color:var(--cream);font-weight:800;font-size:15px} .trust-check-text b .gold{color:var(--gold);font-weight:800} .trust-check-text span{display:block;color:#9c8fa6;font-size:13.5px;margin-top:3px;line-height:1.45} /* Карточки (правая колонка, 2×2) */ .trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.trust-cards{grid-template-columns:1fr}} .trust-card{ padding:22px;border-radius:16px; background:var(--surface-1); border:1px solid rgba(255,200,120,.1); position:relative;overflow:hidden; transition:all .22s var(--ease); display:grid;grid-template-columns:auto 1fr;column-gap:18px; grid-template-areas:"icon title" "icon text";align-items:start; } .trust-card .trust-card-icon{grid-area:icon;align-self:center} .trust-card .ttl{grid-area:title} .trust-card p{grid-area:text} .trust-card::before{ content:"";position:absolute;top:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,120,.35),transparent); transition:opacity .3s ease; } .trust-card::after{ content:"";position:absolute;bottom:0;left:10%;right:10%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,120,.2),transparent); opacity:0;transition:opacity .3s ease; } .trust-card:hover{ border-color:rgba(255,200,120,.25); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.3),0 0 16px rgba(255,140,40,.06); } .trust-card:hover::after{opacity:1} .trust-card-icon{display:grid;place-items:center;color:var(--gold);} .trust-card-icon svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .trust-card .ttl{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--cream)} .trust-card p{margin:0;font-size:13.5px;color:#9c8fa6;line-height:1.45} /* Юридическая плашка с иконкой */ .trust-legal{ display:flex;align-items:center;gap:14px; margin-top:24px;padding:16px 20px;border-radius:14px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.1); font-size:13px;color:#9c8fa6;line-height:1.55; } .trust-legal-icon{width:34px;height:34px;flex:none;border-radius:50%; display:grid;place-items:center;} .trust-legal-icon svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ===================== ПОДДЕРЖКА — РЕДИЗАЙН ===================== */ /* Сетка каналов: 1 крупный + 3 обычных */ .sup-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:12px;margin-bottom:28px} @media(max-width:960px){.sup-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.sup-grid{grid-template-columns:1fr}} /* Базовая карточка канала — компакт */ .sup-card{ padding:18px 16px;border-radius:14px; background:var(--surface-1); border:1px solid var(--surface-border); display:flex;flex-direction:column;align-items:center; text-align:center;gap:4px; transition:all .22s var(--ease); position:relative;overflow:hidden; } .sup-card:hover{ border-color:rgba(255,200,120,.25); transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 14px rgba(255,140,40,.06); } /* Иконка — чистая, без контейнера */ .sup-hex{ width:auto;height:auto;margin-bottom:8px; display:grid;place-items:center; background:transparent;border:none; } .sup-hex svg{width:36px;height:36px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .sup-card b{font-size:15px;color:var(--cream);font-weight:800} .sup-card .sup-detail{font-size:13px;color:var(--cream);font-weight:700;margin-top:1px} .sup-card .sup-sub{font-size:11.5px;color:#9c8fa6} /* Стрелки убраны */ .sup-arrow{display:none} /* Главный канал — компакт */ .sup-card.sup-primary{ border:1.5px solid rgba(255,200,120,.3); background:linear-gradient(180deg,rgba(255,200,120,.04),rgba(255,200,120,.01)); box-shadow:0 0 16px rgba(255,160,40,.08); padding:20px 16px; } .sup-card.sup-primary::before{ content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,120,.5),transparent); } .sup-card.sup-primary::after{ content:"";position:absolute;bottom:0;left:15%;right:15%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,120,.25),transparent); } .sup-card.sup-primary .sup-hex svg{width:44px;height:44px;stroke:var(--gold)} .sup-primary-label{ align-self:flex-start;display:flex;align-items:center;gap:5px; font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);margin-bottom:4px; } .sup-primary-label svg{width:12px;height:12px;fill:var(--gold);stroke:none} .sup-status{ display:flex;align-items:center;gap:6px; margin-top:6px;padding:8px 14px;border-radius:999px; background:rgba(255,200,120,.05);border:1px solid var(--surface-border); font-size:11.5px;font-weight:700;color:var(--cream-dim); } .sup-status-dot{ width:8px;height:8px;border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(255,200,40,.5); animation:dot-pulse 1.6s ease-in-out infinite; } @keyframes dot-pulse{0%,100%{opacity:.6}50%{opacity:1}} /* Нижняя полоса доверия */ .sup-trust-bar{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; border-radius:14px;overflow:hidden; border:1px solid rgba(255,200,120,.08); margin-bottom:36px; } .sup-trust-item{ display:flex;align-items:center;gap:10px; padding:16px 18px; background:var(--surface-1); font-size:13px;color:var(--cream-dim);font-weight:700; transition:background .2s ease; } .sup-trust-item:hover{background:rgba(255,200,120,.03)} .sup-trust-icon{width:32px;height:32px;flex:none;border-radius:50%; display:grid;place-items:center;} .sup-trust-icon svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media(max-width:760px){.sup-trust-bar{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.sup-trust-bar{grid-template-columns:1fr}} /* ===================== БЕЗОПАСНОСТЬ — РЕДИЗАЙН ===================== */ /* 6 карточек безопасности */ .sec-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:28px} @media(max-width:1000px){.sec-cards{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.sec-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:400px){.sec-cards{grid-template-columns:1fr}} .sec-card{ padding:22px 16px 16px;border-radius:16px; background:var(--surface-1); border:1px solid rgba(255,200,120,.1); display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; transition:all .22s var(--ease);position:relative; } .sec-card:hover{border-color:rgba(255,200,120,.28);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.3)} .sec-card-icon{display:grid;place-items:center;margin-bottom:4px} .sec-card-icon svg{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .sec-card .ttl{margin:0;font-size:13.5px;font-weight:800;color:var(--cream);line-height:1.25} .sec-card p{margin:0;font-size:11.5px;color:#9c8fa6;line-height:1.4} .sec-card-badge{ display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px; font-size:11px;font-weight:700;color:var(--gold); } .sec-card-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2} /* Два блока проверки: IMEI + Промокод */ .sec-checks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px} @media(max-width:760px){.sec-checks{grid-template-columns:1fr}} .sec-check-box{ padding:24px;border-radius:16px; background:var(--surface-1); border:1px solid var(--surface-border); transition:border-color .2s ease; } .sec-check-box:hover{border-color:rgba(255,200,120,.2)} .sec-check-box .ttl{margin:0 0 4px;font-size:17px;font-weight:800;color:var(--cream)} .sec-check-box > p{margin:0 0 16px;font-size:13px;color:#9c8fa6} .sec-input-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap} .sec-input-row input{ flex:1;min-width:0; background:rgba(0,0,0,.3);border:1px solid rgba(255,200,120,.15); border-radius:12px;padding:13px 16px; color:var(--cream);font-size:14px;font-family:inherit; transition:border-color .2s ease; } .sec-input-row input::placeholder{color:#6a5a76} .sec-input-row input:focus{outline:none;border-color:rgba(255,200,120,.4);box-shadow:0 0 12px rgba(255,200,120,.08)} .sec-input-icon{ position:relative;display:flex;align-items:center; } .sec-input-icon::before{ content:"";position:absolute;left:14px; width:18px;height:18px; background:rgba(255,200,120,.15);border-radius:50%; } .sec-input-row input{padding-left:16px} .sec-check-btn{ flex:none;padding:13px 22px;border-radius:12px;border:none; background:linear-gradient(180deg,#ffd24a,#ff7a18); color:#3a1604;font-family:inherit;font-weight:800;font-size:14px; cursor:pointer;transition:all .18s var(--ease);white-space:nowrap; } .sec-check-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .sec-check-btn:active{transform:translateY(0) scale(.98)} @media(max-width:520px){ .sec-input-row{flex-direction:column} .sec-input-row input{width:100%;min-width:100%} .sec-check-btn{width:100%;padding:14px;text-align:center} } /* Мини-бейджи под инпутом */ .sec-badges{display:flex;gap:10px 16px;flex-wrap:wrap} @media(max-width:520px){ .sec-check-box{padding:18px 16px} .sec-check-box .ttl{font-size:15px} .sec-badges{gap:8px 14px} .sec-badge{font-size:11px} } .sec-badge{ display:flex;align-items:center;gap:6px; font-size:11.5px;font-weight:700;color:#9c8fa6; } .sec-badge svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.8;flex:none} /* Нижняя полоса сертификатов */ .sec-certs{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:22px 26px;border-radius:16px; background:var(--surface-inset); border:1px solid rgba(255,200,120,.08); } .sec-certs-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .sec-certs-left span{ font-size:12px;font-weight:800;color:#9c8fa6; letter-spacing:.04em;text-transform:uppercase; padding:6px 12px;border-radius:8px; background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); } .sec-certs-right{display:flex;align-items:center;gap:14px} .sec-certs-right a{ width:38px;height:38px;border-radius:10px; display:grid;place-items:center; background:rgba(255,200,120,.06);border:1px solid var(--surface-border); color:var(--gold);text-decoration:none; transition:all .2s var(--ease); } .sec-certs-right a:hover{background:var(--surface-border);border-color:rgba(255,200,120,.3);transform:translateY(-2px)} .sec-certs-right a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8} @media(max-width:760px){.sec-certs{flex-direction:column;align-items:flex-start;gap:14px}} /* Всплывашка подтверждения промокода */ .promo-toast{ position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8); z-index:25;padding:32px 44px;border-radius:20px; background:#0e0816;border:2px solid rgba(80,200,100,.4); box-shadow:0 0 30px rgba(80,200,100,.15),0 20px 50px rgba(0,0,0,.5); display:none;flex-direction:column;align-items:center;gap:12px;text-align:center; opacity:0;transition:all .35s var(--ease); } .promo-toast.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)} .promo-toast-icon{ width:64px;height:64px;border-radius:50%; display:grid;place-items:center; background:rgba(80,200,100,.12);border:2px solid rgba(80,200,100,.35); animation:toast-pop .5s cubic-bezier(.2,1.3,.4,1); } @keyframes toast-pop{from{transform:scale(0)}to{transform:scale(1)}} .promo-toast-icon svg{width:32px;height:32px;stroke:#5cc86a;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .promo-toast .ttl{margin:0;font-size:18px;color:var(--cream);font-weight:800} .promo-toast p{margin:0;font-size:14px;color:#9c8fa6} .promo-toast-code{ font-family:"Russo One",sans-serif;font-size:16px;letter-spacing:.08em; color:#5cc86a;padding:8px 20px;border-radius:10px; background:rgba(80,200,100,.08);border:1px dashed rgba(80,200,100,.3); } .promo-toast-close{ margin-top:4px;padding:10px 28px;border-radius:10px;border:none; background:rgba(255,255,255,.06);color:var(--cream); font-family:inherit;font-weight:700;font-size:13px;cursor:pointer; transition:background .15s ease; } .promo-toast-close:hover{background:rgba(255,255,255,.1)} .promo-overlay{ position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.6);backdrop-filter:blur(3px); display:none;opacity:0;transition:opacity .25s ease; } .promo-overlay.show{display:block;opacity:1} /* ---- Сворачиваемая статья (SEO: весь текст в DOM) ---- */ .article-collapse{position:relative;max-height:220px;overflow:hidden;transition:max-height .6s var(--ease)} .article-collapse::after{ content:"";position:absolute;bottom:0;left:0;right:0;height:100px; background:linear-gradient(180deg,transparent 0%,rgba(20,14,26,.96) 85%); pointer-events:none;transition:opacity .4s ease; } .article-collapse.expanded::after{opacity:0} .article-expand-btn{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%;margin-top:16px;padding:14px; border-radius:12px;border:1px solid rgba(255,200,120,.15); background:rgba(255,200,120,.04); color:var(--gold);font-family:inherit;font-weight:800;font-size:14px; cursor:pointer;transition:all .22s var(--ease); } .article-expand-btn:hover{ background:rgba(255,200,120,.08);border-color:rgba(255,200,120,.3); transform:translateY(-1px); } .article-expand-btn svg{width:16px;height:16px;stroke:currentColor;fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; transition:transform .3s var(--ease)} .article-expand-btn.expanded svg{transform:rotate(180deg)} /* ---- Футер: аккордеон колонок на мобильных ---- */ @media(max-width:760px){ .foot-cols{gap:0} .foot-brand{margin-bottom:18px} .foot-col{border-top:1px solid rgba(255,200,120,.08)} .foot-col .ttl-h{ margin:0;padding:14px 0;cursor:pointer; display:flex;justify-content:space-between;align-items:center; } .foot-col .ttl-h::after{ content:"";width:22px;height:22px;flex:none;border-radius:50%; border:1px solid var(--surface-border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffce3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-size:11px 11px;background-position:center;background-repeat:no-repeat; transition:transform .28s var(--ease),border-color .28s var(--ease); } .foot-col.foot-open .ttl-h::after{transform:rotate(180deg);border-color:var(--surface-border-hover)} .foot-col ul{ max-height:0;overflow:hidden; transition:max-height .35s var(--ease),opacity .25s ease; opacity:0;margin:0; } .foot-col.foot-open ul{ max-height:300px;opacity:1; padding-bottom:12px; } } /* ---- Кнопка «Наверх» ---- */ .to-top{ position:fixed;right:22px;bottom:92px;z-index:15; width:48px;height:48px;border-radius:50%; display:grid;place-items:center;cursor:pointer; background:rgba(14,5,18,.85); border:1.5px solid rgba(255,200,120,.25); backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 12px rgba(255,160,40,.08); color:var(--gold); opacity:0;transform:translateY(20px); pointer-events:none; transition:all .35s var(--ease); } .to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto} .to-top:hover{ border-color:rgba(255,200,120,.5); box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 20px rgba(255,160,40,.15); transform:translateY(-3px); } .to-top:active{transform:translateY(0) scale(.92)} .to-top svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:760px){.to-top{right:16px;bottom:86px;width:44px;height:44px}.to-top svg{width:20px;height:20px}}