*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#000}
body{overflow:hidden;font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif}
#app{position:relative;width:100%;height:100dvh;min-height:560px;background:#000;overflow:hidden}
#app:before{content:"";position:absolute;inset:0;background:
radial-gradient(ellipse at 50% 55%,rgba(91,30,0,.40) 0%,rgba(50,12,0,.24) 27%,rgba(5,1,0,0) 61%),
linear-gradient(90deg,rgba(0,0,0,.18),transparent 50%,rgba(0,0,0,.18));
opacity:0;animation:bgIn 1.15s ease 1.75s forwards}
@keyframes bgIn{to{opacity:1}}

.intro{position:absolute;inset:0;z-index:10;background:#000;animation:introFade .45s ease 3.55s forwards;pointer-events:none}
@keyframes introFade{to{background:transparent}}
.logo{position:absolute;left:50%;top:48.5%;transform:translate(-50%,-50%);height:62px;display:flex;align-items:center;white-space:nowrap;
font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:39px;font-weight:900;letter-spacing:3.2px;
animation:logoMove 1.05s cubic-bezier(.2,.85,.2,1) 2.05s forwards}
.letter{display:inline-block;color:#f5f5f5;opacity:0;transform:translateY(7px);animation:type .17s ease forwards}
.l1{animation-delay:.20s}.l2{animation-delay:.38s}.l3{animation-delay:.56s}
.l4{animation-delay:.74s}.l5{animation-delay:.92s}.l6{animation-delay:1.10s}.l7{animation-delay:1.28s}
.red{color:#f30b18}
.gap{width:9px}
.under{position:absolute;height:2px;left:0;bottom:4px;width:0;background:#ef0b16;box-shadow:0 0 7px rgba(239,11,22,.55);animation:underIn .32s ease 1.43s forwards}
.badge{position:absolute;right:-40px;top:50%;width:31px;height:31px;display:grid;place-items:center;
font-family:Arial,sans-serif;font-size:17px;font-weight:900;color:#fff;background:#168df5;clip-path:polygon(50% 0%,61% 8%,75% 5%,82% 17%,95% 23%,92% 37%,100% 50%,92% 63%,95% 77%,82% 83%,75% 95%,61% 92%,50% 100%,39% 92%,25% 95%,18% 83%,5% 77%,8% 63%,0% 50%,8% 37%,5% 23%,18% 17%,25% 5%,39% 8%);box-shadow:0 0 8px #078dff,0 0 20px rgba(7,141,255,.75);
opacity:0;transform:translateY(-50%) scale(.6);animation:badgeIn .25s ease 1.48s forwards}
@keyframes type{to{opacity:1;transform:none}}
@keyframes underIn{to{width:58px}}
@keyframes badgeIn{to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes logoMove{
0%{left:50%;top:48.5%;transform:translate(-50%,-50%) scale(1)}
100%{left:14px;top:14px;transform:translate(0,0) scale(.50)}
}


.access{position:absolute;z-index:4;left:50%;top:56.5%;transform:translate(-50%,-50%);width:100%;text-align:center;opacity:0;
animation:accessIn .55s ease 3.35s forwards}
@keyframes accessIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.copy{color:#bdbdbd;font-size:12px;line-height:1.65;letter-spacing:2.7px;font-weight:600;text-shadow:0 1px 5px #000}
.copy b{color:#f1f1f1;font-weight:800}
.down{margin-top:19px;margin-bottom:15px;color:#d4d4d4;font-size:17px;line-height:1}
.bot-button{position:relative;width:178px;height:62px;border:0;border-radius:34px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:linear-gradient(180deg,#159cf5,#0879e5);color:white;cursor:pointer;
box-shadow:0 0 11px rgba(0,143,255,.9),0 0 27px rgba(0,111,255,.35),inset 0 1px rgba(255,255,255,.45);
animation:buttonGlow 1.9s ease-in-out infinite}
.bot-button:before{content:"";position:absolute;inset:-4px;border-radius:38px;border:1px solid rgba(0,150,255,.32);animation:buttonRing 1.9s ease-in-out infinite}
.bot-button:active{transform:scale(.94)}
.button-check{width:21px;height:21px;display:grid;place-items:center;font:900 12px Arial;color:#1688ed;background:#fff;clip-path:polygon(50% 0%,61% 8%,75% 5%,82% 17%,95% 23%,92% 37%,100% 50%,92% 63%,95% 77%,82% 83%,75% 95%,61% 92%,50% 100%,39% 92%,25% 95%,18% 83%,5% 77%,8% 63%,0% 50%,8% 37%,5% 23%,18% 17%,25% 5%,39% 8%)}
.bot-button>span:last-child{font-size:10px;line-height:1.08;letter-spacing:1.5px;font-weight:900;text-align:left}
@keyframes buttonGlow{50%{box-shadow:0 0 18px rgba(0,157,255,1),0 0 38px rgba(0,111,255,.48),inset 0 1px rgba(255,255,255,.5)}}
@keyframes buttonRing{50%{transform:scale(1.055);opacity:.15}}
@media(min-width:700px){
 .logo{font-size:43px}.copy{font-size:13px}.bot-button{width:200px;height:70px}
}