@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Premium Promo / cinematic UI */
.promo-lab{position:relative;overflow:hidden;padding:38px 42px!important;border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 48%,rgba(0,245,212,.035))!important;box-shadow:0 35px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)!important;isolation:isolate;font-family:'DM Sans',Inter,system-ui,sans-serif}
.promo-lab:before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.08) 48%,transparent 62%);transform:translateX(-120%);animation:promoSheen 8s cubic-bezier(.22,.61,.36,1) infinite;pointer-events:none;z-index:-1}
.promo-lab:after{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(0,245,212,.12),transparent 67%);filter:blur(10px);pointer-events:none}
.promo-lab-head{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:start!important}
.promo-lab-head>div:first-child{min-width:0}
.promo-lab .kicker{display:block;margin:0 0 15px;font:700 10px/1 'Space Grotesk',Inter,sans-serif;letter-spacing:.24em;color:rgba(0,245,212,.82)}
.promo-lab h2{margin:0!important;font:600 clamp(34px,4vw,54px)/.98 'Space Grotesk',Inter,sans-serif!important;letter-spacing:-.055em;color:#fff}
.promo-lab-head p{display:block!important;max-width:650px!important;margin:15px 0 0!important;color:rgba(255,255,255,.52)!important;font:400 14px/1.7 'DM Sans',Inter,sans-serif!important;letter-spacing:.005em}
.promo-status{min-width:122px;padding:11px 13px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(0,0,0,.22);display:flex!important;align-items:center;gap:8px;justify-content:center;white-space:nowrap}
.promo-status i{width:6px!important;height:6px!important;margin:0!important;background:var(--cyan)!important;box-shadow:0 0 14px var(--cyan)!important}
.promo-status span{font:700 9px/1 'Space Grotesk',sans-serif;letter-spacing:.18em;color:rgba(255,255,255,.56)}
.promo-form{position:relative;margin-top:30px!important}
.promo-input-wrap{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:0!important;padding:6px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:15px!important;background:rgba(0,0,0,.30)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 55px rgba(0,0,0,.25)!important;transition:border-color .35s,box-shadow .35s,transform .35s}
.promo-input-wrap:focus-within{border-color:rgba(0,245,212,.42)!important;box-shadow:0 0 0 4px rgba(0,245,212,.035),0 22px 65px rgba(0,0,0,.32),0 0 40px rgba(0,245,212,.06)!important;transform:translateY(-1px)}
.promo-input-wrap>span{padding:0 13px;color:rgba(0,245,212,.68);font:700 10px/1 'Space Grotesk',sans-serif;letter-spacing:.15em}
.promo-input-wrap input{min-width:0;height:54px;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:600 16px/1 'Space Grotesk',sans-serif!important;letter-spacing:.08em;text-transform:uppercase}
.promo-input-wrap input::placeholder{color:rgba(255,255,255,.28);letter-spacing:.12em}
.promo-input-wrap button{position:relative;height:54px;padding:0 22px!important;border:1px solid rgba(0,245,212,.45)!important;border-radius:11px!important;background:linear-gradient(135deg,#00f5d4,#00cdb8)!important;color:#03100e!important;font:700 10px/1 'Space Grotesk',sans-serif!important;letter-spacing:.12em;box-shadow:0 0 30px rgba(0,245,212,.12),inset 0 1px 0 rgba(255,255,255,.35)!important;cursor:pointer;overflow:hidden;transition:.35s}
.promo-input-wrap button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.5) 48%,transparent 70%);transform:translateX(-120%);transition:.5s}
.promo-input-wrap button:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,245,212,.18),0 0 35px rgba(0,245,212,.12)!important}
.promo-input-wrap button:hover:before{transform:translateX(120%)}
.promo-result{min-height:20px!important;margin-top:12px!important;color:rgba(255,255,255,.46)!important;font:500 11px/1.5 'DM Sans',sans-serif!important;letter-spacing:.02em}
.promo-result.error{color:#ff8f9d!important}

/* Full-screen premium activation sequence */
.promo-particles{position:fixed!important;inset:0!important;z-index:99999!important;pointer-events:none!important;display:block!important;background:radial-gradient(circle at 50% 50%,rgba(0,245,212,.05),transparent 32%);animation:promoSceneFade 4.6s ease forwards}
.promo-particles:before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 30px #fff,0 0 90px rgba(0,245,212,.9);transform:translate(-50%,-50%) scale(.2);animation:promoCore 1.05s cubic-bezier(.16,1,.3,1) forwards}
.promo-particles .particle{position:absolute;width:3px!important;height:3px!important;border-radius:50%;padding:0!important;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9),0 0 18px rgba(0,245,212,.7);animation:premiumParticle 1.25s cubic-bezier(.12,.72,.16,1) forwards!important}
.promo-particles .success-mark{position:absolute;left:50%;top:50%;width:112px;height:112px;border:1px solid rgba(0,245,212,.35);border-radius:50%;display:grid;place-items:center;color:#fff;font:400 62px/1 'DM Sans',sans-serif;text-shadow:0 0 28px rgba(0,245,212,.65);box-shadow:0 0 80px rgba(0,245,212,.15),inset 0 0 35px rgba(0,245,212,.08);transform:translate(-50%,-50%) scale(.2);opacity:0;animation:premiumCheck 1.1s 1.15s cubic-bezier(.16,1,.3,1) forwards}
.promo-particles .success-mark:before{content:"";position:absolute;inset:-14px;border:1px solid rgba(0,245,212,.12);border-radius:50%;animation:checkRing 1.8s 1.3s ease-out forwards}
.promo-particles .coin-burst{position:absolute;left:50%;top:calc(50% + 112px);transform:translate(-50%,20px);opacity:0;color:#fff;font:700 18px/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-shadow:0 0 25px rgba(0,245,212,.5);animation:coinReveal .85s 2.25s cubic-bezier(.16,1,.3,1) forwards}
.promo-particles .balance-particle{position:absolute;color:var(--cyan);font:700 11px/1 'Space Grotesk',sans-serif;opacity:0;animation:coinParticle 1s 2.35s cubic-bezier(.16,1,.3,1) forwards!important}
@keyframes promoSheen{0%,55%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@keyframes promoSceneFade{0%,78%{opacity:1}100%{opacity:0}}
@keyframes promoCore{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{transform:translate(-50%,-50%) scale(1.4);opacity:1}100%{transform:translate(-50%,-50%) scale(.15);opacity:0}}
@keyframes premiumParticle{0%{transform:translate(0,0) scale(1.7);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes premiumCheck{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-25deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(4deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes checkRing{0%{transform:scale(.5);opacity:0}35%{opacity:1}100%{transform:scale(1.45);opacity:0}}
@keyframes coinReveal{0%{opacity:0;transform:translate(-50%,20px) scale(.8);letter-spacing:.3em}100%{opacity:1;transform:translate(-50%,0) scale(1);letter-spacing:.13em}}
@keyframes coinParticle{0%{opacity:0;transform:translate(0,0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.promo-lab.is-processing .promo-input-wrap{animation:promoPress .55s cubic-bezier(.2,.8,.2,1)}
.promo-lab.is-success .promo-input-wrap{border-color:rgba(0,245,212,.55)!important;box-shadow:0 0 0 4px rgba(0,245,212,.035),0 0 60px rgba(0,245,212,.12)!important}
@keyframes promoPress{0%{transform:scale(1)}35%{transform:scale(.985)}100%{transform:scale(1)}}
@media(max-width:700px){.promo-lab{padding:28px 20px!important}.promo-lab-head{grid-template-columns:1fr;gap:18px}.promo-status{justify-self:start}.promo-input-wrap{grid-template-columns:1fr!important;padding:10px!important;gap:8px!important}.promo-input-wrap>span{padding:4px 4px 0}.promo-input-wrap input{height:48px;padding:0 4px}.promo-input-wrap button{width:100%;height:50px}.promo-particles .success-mark{width:90px;height:90px;font-size:48px}.promo-particles .coin-burst{font-size:13px;top:calc(50% + 88px)}}
