.spin-site{--spin-blue:#17c9ff;--spin-red:#ff4b2b;--spin-gold:#ffc857;background:radial-gradient(44rem 35rem at 5% 15%,rgba(0,145,255,.16),transparent 72%),radial-gradient(44rem 35rem at 95% 17%,rgba(255,49,24,.14),transparent 72%),#05070c;}
.spin-site::before{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;opacity:.32;}
.spin-hero{min-height:670px;}
.spin-logo{display:block;width:min(360px,78vw);height:auto;margin:0 0 24px;filter:drop-shadow(0 12px 32px rgba(0,0,0,.52));}
.spin-hero h1{font-size:clamp(3.15rem,6.6vw,6.35rem);}
.spin-hero h1 span{background:linear-gradient(95deg,#d8f7ff 3%,var(--spin-blue) 42%,#fff 50%,var(--spin-red) 63%,#ffd27d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.spin-coming{cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.17);background:linear-gradient(120deg,rgba(23,201,255,.16),rgba(255,75,43,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.spin-visual{isolation:isolate;}
.spin-visual::before,.spin-visual::after{position:absolute;z-index:-1;width:320px;height:320px;border-radius:50%;content:"";filter:blur(50px);opacity:.25;}
.spin-visual::before{left:4%;background:var(--spin-blue);}
.spin-visual::after{right:4%;background:var(--spin-red);}
.spin-icon-stage{width:min(380px,82vw);height:min(380px,82vw);border-radius:31%;border-color:rgba(255,255,255,.2);box-shadow:0 45px 110px rgba(0,0,0,.55),-28px 0 80px rgba(23,201,255,.16),28px 0 80px rgba(255,75,43,.14);transform:rotate(-2deg);}
.spin-icon-stage img{width:100%;height:100%;object-fit:cover;}
.spin-impact{position:absolute;z-index:3;width:7px;height:98px;border-radius:99px;background:linear-gradient(transparent,#fff4bf 44%,#fff 52%,#ff9a38 58%,transparent);box-shadow:0 0 18px #fff,0 0 44px rgba(255,142,47,.8);transform:rotate(16deg);pointer-events:none;}
.spin-chip{right:-2%;bottom:5%;border-color:rgba(255,150,80,.3);}
.spin-signals{background:linear-gradient(110deg,rgba(23,201,255,.08),rgba(255,255,255,.025) 48%,rgba(255,75,43,.08));}
.spin-feature-grid .feature-card:first-child{background:linear-gradient(150deg,rgba(23,201,255,.09),rgba(255,255,255,.02));}
.spin-feature-grid .feature-card:nth-child(2){background:linear-gradient(150deg,rgba(255,200,87,.08),rgba(255,255,255,.02));}
.spin-feature-grid .feature-card:last-child{background:linear-gradient(150deg,rgba(255,75,43,.08),rgba(255,255,255,.02));}
.spin-arena-panel{position:relative;min-height:470px;margin:40px 0 110px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:linear-gradient(90deg,rgba(3,7,15,.96) 0%,rgba(3,7,15,.82) 39%,rgba(3,7,15,.15) 72%),url("spin-clash-arena.webp") center/cover no-repeat;box-shadow:0 40px 110px rgba(0,0,0,.42);}
.spin-arena-copy{position:absolute;left:clamp(26px,5vw,68px);top:50%;width:min(480px,calc(100% - 52px));transform:translateY(-50%);}
.spin-arena-copy h2{margin:0 0 18px;font-size:clamp(2.15rem,5vw,4.2rem);line-height:.98;letter-spacing:-.06em;}
.spin-arena-copy p:last-child{max-width:430px;color:var(--muted);font-size:1.02rem;line-height:1.7;}
.spin-arena-top{position:absolute;right:clamp(34px,8vw,118px);top:50%;z-index:1;display:grid;width:clamp(190px,25vw,310px);place-items:center;transform:translateY(-50%);animation:arenaTopFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 30px 22px rgba(0,0,0,.68)) drop-shadow(0 0 28px rgba(255,89,25,.22));}
.spin-arena-top::before{position:absolute;z-index:-1;width:92%;aspect-ratio:1;border-radius:50%;content:"";background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,166,49,.42) 27%,transparent 36% 62%,rgba(255,69,22,.28) 70%,transparent 79%);filter:blur(12px);opacity:.72;animation:arenaTopEnergy 12s linear infinite;}
.spin-arena-top::after{position:absolute;z-index:-1;width:76%;height:23%;border-radius:50%;content:"";background:rgba(0,0,0,.72);filter:blur(18px);transform:translateY(58%);}
.spin-arena-top img{display:block;width:100%;height:auto;transform-origin:50% 54%;animation:arenaTopTurn 7s ease-in-out infinite alternate;will-change:transform;}
@keyframes arenaTopTurn{0%{transform:perspective(700px) rotateY(-13deg) rotate(-2deg)}100%{transform:perspective(700px) rotateY(13deg) rotate(2deg)}}
@keyframes arenaTopEnergy{to{transform:rotate(360deg)}}
@keyframes arenaTopFloat{0%,100%{translate:0 -5px}50%{translate:0 7px}}
.spin-legal-zone{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:820px){.spin-hero{min-height:0}.spin-icon-stage{width:min(330px,78vw);height:min(330px,78vw)}.spin-chip{right:2%}.spin-arena-panel{min-height:520px;background:linear-gradient(0deg,rgba(3,7,15,.97) 0%,rgba(3,7,15,.76) 56%,rgba(3,7,15,.2) 100%),url("spin-clash-arena.webp") 65% center/cover no-repeat}.spin-arena-copy{top:auto;bottom:24px;z-index:2;transform:none}.spin-arena-top{top:25%;right:50%;width:clamp(170px,48vw,235px);transform:translate(50%,-50%)}.spin-legal-zone{grid-template-columns:1fr}}
@media(max-width:520px){.spin-logo{width:250px}.spin-impact{height:68px}.spin-arena-panel{margin-bottom:80px;border-radius:24px}}
@media(prefers-reduced-motion:reduce){.spin-icon-stage{transform:none}.spin-impact{display:none}.spin-arena-top,.spin-arena-top img{animation:none}}