@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap');
body{margin:0;background:#000;color:#fff;font-family:Arial,sans-serif;overflow-x:hidden}
#app{max-width:760px;margin:auto;padding:30px}
.screen{display:none;opacity:0;transform:translateY(15px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.screen.active{display:block;opacity:1;transform:translateY(0)}
.logo{display:block;width:200px;margin:24px auto;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
h2{text-align:center;margin:20px}
.card{
display:block;
width:84%;
max-width:620px;
margin:18px auto;
border-radius:24px;
cursor:pointer;
transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .28s ease;
}
.card:hover{
transform:translateY(-8px) scale(1.05);
box-shadow:
0 18px 45px rgba(255,0,0,.35),
0 0 30px rgba(255,40,40,.30);
filter:brightness(1.12) saturate(1.08);
}
.card:active{
transform:scale(.95);
filter:brightness(1.18);
transition-duration:.12s;
}
button{background:#111;color:#fff;border:1px solid #444;border-radius:10px;padding:12px 20px;cursor:pointer}

.subtitle{
  text-align:center;
  color:#b8b8b8;
  font-size:15px;
  font-weight:300;
  letter-spacing:1.5px;
  margin:-6px 0 26px;
  opacity:.85;
}
@media(max-width:600px){
  .subtitle{font-size:14px;}
}


.back-image{
    display:block;
    width:220px;
    max-width:60%;
    margin:30px auto 10px;
    cursor:pointer;
    transition:transform .25s ease, opacity .25s ease;
}
.back-image:hover{transform:scale(1.03);}
.back-image:active{transform:scale(.97);opacity:.9;}

.logo{animation:breathe 5.5s ease-in-out infinite !important;}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.card{will-change:transform,filter,box-shadow}
.card:hover{transform:translateY(-10px) scale(1.05)!important;box-shadow:0 18px 50px rgba(255,0,0,.35),0 0 30px rgba(255,50,50,.25)!important;filter:brightness(1.08)}
.stagger{animation:staggerIn .45s cubic-bezier(.22,1,.36,1) both}
@keyframes staggerIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}