.header{position:fixed;top:0;right:0;left:0;z-index:50;padding:1rem .75rem;background:hsla(0,0%,100%,.9);box-shadow:0 2px 12px 0 rgba(0,0,0,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header .container{justify-content:space-between;max-width:1200px;margin:0 auto;padding:0}.header .container,.header__left,.header__logo-circle{display:flex;align-items:center}.header__logo-circle{justify-content:center;width:2.5rem;height:2.5rem;margin-right:.5rem;padding:.5rem;background:#ffd100;border-radius:9999px}.header__logo-icon{font-size:1.5rem;color:#fff}.header__logo-text{font-size:2rem;font-weight:700;-webkit-text-fill-color:rgba(0,0,0,0);background:linear-gradient(90deg,#08f,#ff6b00);-webkit-background-clip:text;background-clip:text}.header__nav{display:none}.header__nav a{font-size:1rem;font-weight:500;text-decoration:none;color:#222;cursor:pointer;transition:color .18s}.header__nav a:active{color:#08f}@media(hover:hover){.header__nav a:hover{color:#08f}}.header__nav span{font-size:1rem;font-weight:500;color:#222;cursor:pointer;transition:color .18s}.header__nav span:active{color:#08f}@media(hover:hover){.header__nav span:hover{color:#08f}}@media(width >= 768px){.header__nav{display:flex;gap:1.5rem;align-items:center}}.header__actions{display:flex;gap:.75rem;align-items:center}.header__sign-in{display:none}@media(width >= 768px){.header__sign-in{display:inline-block;padding:.5rem 1.25rem;font-weight:500;color:#08f;background:#fff;border:2px solid #08f;border-radius:9999px;cursor:pointer;transition:all .18s}.header__sign-in:active{color:#fff;background:#08f}}@media(width >= 768px)and (hover:hover){.header__sign-in:hover{color:#fff;background:#08f}}.header__play-now{padding:.5rem 1.25rem;font-size:1rem;font-weight:500;color:#fff;background:#ffd100;border:none;border-radius:9999px;box-shadow:0 4px 16px 0 rgba(255,209,0,.18);cursor:pointer;transition:all .18s,box-shadow .18s}.header__play-now:active{background:rgb(229.5,188.1,0);box-shadow:0 6px 24px 0 rgba(255,209,0,.22);transform:scale(1.05)}@media(hover:hover){.header__play-now:hover{background:rgb(229.5,188.1,0);box-shadow:0 6px 24px 0 rgba(255,209,0,.22);transform:scale(1.05)}}.header__play-now:focus{outline:none;box-shadow:0 0 0 2px #ffd100}.card{transition:box-shadow .18s cubic-bezier(.4,0,.2,1);padding:2rem;background:#fff;border-radius:2rem;box-shadow:0 8px 32px 0 rgba(0,0,0,.1)}.card:active{box-shadow:0 12px 40px 0 rgba(0,0,0,.13);transform:translateY(-6px)}@media(hover:hover){.card:hover{box-shadow:0 12px 40px 0 rgba(0,0,0,.13);transform:translateY(-6px)}}