*{box-sizing:border-box}
html,body{margin:0;background:#07000a;color:#fff;font-family:"DM Sans",Arial,sans-serif}
body{min-height:100vh;background:
radial-gradient(circle at 50% 15%,rgba(255,38,160,.2),transparent 30%),
radial-gradient(circle at 80% 25%,rgba(113,47,255,.2),transparent 25%),#07000a}
.s-top{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem clamp(.9rem,3vw,2rem);background:rgba(7,0,10,.93);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,145,205,.34)}
.s-brand{font-family:"Sacramento",cursive;font-size:2rem;color:#ff78bd;text-decoration:none}
.s-actions{display:flex;gap:.55rem;flex-wrap:wrap}
.s-actions a{padding:.63rem .82rem;border:1px solid rgba(255,151,208,.42);border-radius:999px;color:#fff;text-decoration:none;font-size:.8rem;font-weight:800}
.s-actions .real{background:linear-gradient(135deg,#ff2f9f,#8d26ff)}
.s-main{max-width:1300px;margin:auto;padding:clamp(1rem,4vw,3rem)}
.s-title small{color:#ff9fce;font-weight:900;letter-spacing:.14em}
.s-title h1{margin:.25rem 0;font-family:"Playfair Display",serif;font-size:clamp(3rem,8vw,7rem);line-height:.92}
.s-title em{font-family:"Sacramento",cursive;color:#ff72bd;font-weight:400}
.s-title p{max-width:820px;color:#dbc3d2;line-height:1.7}
.s-panel{position:relative;overflow:hidden;margin-top:1.2rem;border:1px solid rgba(255,255,255,.15);border-radius:30px;background:linear-gradient(145deg,#1b071e,#09000c);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.s-stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);min-height:690px}
.s-visual{position:relative;overflow:hidden;background:#100010}
.s-slides{position:absolute;inset:0}
.s-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s,transform .7s,filter .35s;transform:scale(1.02)}
.s-slide.active{opacity:1;transform:scale(1)}
.s-slide img{width:100%;height:100%;object-fit:contain;background:#100010}
.s-beams{position:absolute;inset:-20%;opacity:0;pointer-events:none;background:conic-gradient(from 180deg at 50% 10%,transparent 0 8%,rgba(255,92,197,.25) 9% 12%,transparent 13% 22%,rgba(132,92,255,.25) 23% 26%,transparent 27% 100%);transform-origin:50% 10%}
.s-crowd{position:absolute;inset:auto 0 0;height:35%;opacity:.22;pointer-events:none;background:radial-gradient(ellipse at center bottom,rgba(255,80,181,.88),transparent 72%)}
.s-panel.lights-on .s-beams{opacity:1;animation:beams 8s linear infinite}
.s-panel.crowd-on .s-crowd{opacity:.8;animation:crowd 1.4s ease-in-out infinite}
.s-panel.finale-running .s-slide.active{animation:finalePulse .75s ease-in-out infinite alternate}
@keyframes beams{to{transform:rotate(360deg)}}
@keyframes crowd{50%{opacity:.38}}
@keyframes finalePulse{to{filter:brightness(1.32) saturate(1.3)}}
.s-live{position:absolute;top:18px;right:18px;z-index:8;padding:.55rem .72rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(146,0,48,.85);font-size:.62rem;font-weight:900;letter-spacing:.12em;animation:live 1.8s ease-in-out infinite}
@keyframes live{50%{opacity:.6}}
.s-arrow{position:absolute;top:50%;z-index:9;width:48px;height:48px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(24,0,31,.76);color:white;font-size:2rem;cursor:pointer}
.s-arrow.prev{left:14px}.s-arrow.next{right:14px}
.s-dots{position:absolute;z-index:9;left:50%;bottom:18px;display:flex;gap:.5rem;transform:translateX(-50%)}
.s-dots button{width:11px;height:11px;padding:0;border:1px solid #fff;border-radius:50%;background:#ffffff33}
.s-dots button.active{background:#ff72bd;box-shadow:0 0 14px #ff59bc}
.s-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.4rem,4vw,3rem)}
.s-copy>small{color:#ff94cf;font-weight:900;letter-spacing:.14em}
.s-copy h2{margin:.4rem 0;font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3.8rem)}
.s-copy p{color:#d9c0cf;line-height:1.7}
.s-buttons{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0}
.s-buttons button{padding:.8rem 1rem;border:1px solid rgba(255,145,205,.5);border-radius:999px;background:#ffffff0d;color:#fff;font-weight:800;cursor:pointer}
.s-buttons button.primary{background:linear-gradient(135deg,#ff2f9f,#8d26ff)}
.s-buttons button:disabled{opacity:.38;cursor:not-allowed}
.s-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.s-status span{padding:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#ffffff08;font-size:.65rem;letter-spacing:.08em}
.s-status strong{display:block;margin-top:.3rem;font-size:.95rem;letter-spacing:0}
.s-confetti{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.s-confetti i{position:absolute;top:-10%;width:8px;height:14px;border-radius:2px;background:linear-gradient(#fff,#ff5eb3);animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translate3d(var(--drift),115vh,0) rotate(720deg);opacity:.12}}
.s-note{margin-top:1rem;padding:1.2rem;border:1px solid rgba(255,145,205,.3);border-radius:22px;background:#120014}
.s-note h3{margin:.2rem 0}.s-note p{color:#d8c0cf}
@media(max-width:980px){.s-stage{grid-template-columns:1fr}.s-visual{min-height:560px}}
@media(max-width:620px){.s-visual{min-height:440px}.s-status{grid-template-columns:1fr}}