:root{--ultramarine-blue:hsl(222, 100%, 55%);--silver-metallic:hsl(240, 4%, 71%);--fiery-rose_12:hsla(354, 86%, 65%, 0.12);--eerie-black-1:hsl(0, 0%, 13%);--eerie-black-2:hsl(0, 0%, 12%);--smokey-black:hsl(40, 100%, 2%);--silver-sand:hsl(240, 4%, 76%);--ocean-green:hsl(161, 50%, 57%);--fiery-rose:hsl(354, 86%, 65%);--alice-blue:hsl(214, 32%, 91%);--davys-gray:hsl(0, 0%, 34%);--blue-ryb:hsl(222, 100%, 45%);--white_50:hsla(0, 0%, 100%, 0.5);--white:hsl(0, 0%, 100%);--onyx-1:hsl(0, 0%, 23%);--onyx-2:hsl(0, 0%, 20%);--ff-poppins:'Poppins',sans-serif;--ff-open-sans:'Open Sans',sans-serif;--fs-1:calc(2.3rem + 2.1vw);--fs-2:calc(2.1rem + 0.9vw);--fs-3:calc(2rem + 0.3vw);--fs-4:2rem;--fs-5:1.8rem;--fs-6:1.5rem;--fs-7:1.4rem;--fs-8:1.3rem;--fs-9:1.2rem;--fw-400:400;--fw-500:500;--fw-600:600;--fw-700:700;--fw-800:800;--section-padding:120px;--shadow:0 10px 30px hsla(0, 0%, 0%, 0.1);--radius-pill:500px;--radius-circle:50%;--radius-5:5px;--radius-8:8px;--radius-16:16px;--transition:0.25s ease;--cubic-in:cubic-bezier(0.51, 0.03, 0.64, 0.28);--cubic-out:cubic-bezier(0.33, 0.85, 0.4, 0.96)}*,::after,::before{margin:0;padding:0;box-sizing:border-box}li{list-style:none}a,button,img,ion-icon,span{display:block}a{color:inherit;text-decoration:none}img{height:auto}button,input{background:0 0;border:none;font:inherit;color:inherit}input,table{width:100%}button{cursor:pointer}ion-icon{pointer-events:none}html{font-family:var(--ff-open-sans);font-size:10px;scroll-behavior:smooth}body{background-color:var(--smokey-black);color:var(--silver-sand);font-size:1.6rem;line-height:1.75;position:relative;overflow-x:hidden}body.active{overflow-y:hidden}#particles-js{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;background:linear-gradient(135deg,#0a0a0a 0,#1a1a2e 50%,#16213e 100%)}.footer,.header,.instruction-card,.promo-card,.stats-card,main{position:relative;z-index:10}.bg-gray{background-color:var(--eerie-black-1);backdrop-filter:blur(10px)}:focus-visible{outline-offset:4px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:#f9f9f9}::-webkit-scrollbar-thumb{background-color:#ccc}::-webkit-scrollbar-thumb:hover{background-color:#b2b2b2}.container{padding-inline:15px}.h1,.h2,.h3{color:var(--white);font-family:var(--ff-poppins);line-height:1.2}.h1{font-size:var(--fs-1);font-weight:var(--fw-800)}.h2{font-size:var(--fs-2)}.h3{font-size:var(--fs-5)}.btn-group{display:flex;align-items:center;flex-wrap:wrap;gap:15px}.btn{max-width:max-content;padding:var(--padding-y,13px) 28px;font-family:var(--ff-poppins);font-weight:var(--fw-500);transition:var(--transition)}.btn-primary{color:var(--white);background-color:var(--ultramarine-blue);font-size:var(--fs-6);border-radius:var(--radius-pill)}.btn-primary:is(:hover,:focus){background-color:var(--blue-ryb);transform:translateY(-2px);box-shadow:0 5px 15px hsla(222,100%,45%,.4)}.btn-secondary{color:var(--white);background-color:transparent;border:2px solid var(--ultramarine-blue);font-size:var(--fs-6);border-radius:var(--radius-pill)}.btn-secondary:is(:hover,:focus){background-color:var(--ultramarine-blue);transform:translateY(-2px)}.w-100{width:100%}.section{padding-block:var(--section-padding)}.section-title{margin-block-end:24px}.text-center{text-align:center}.grid-list{display:grid;gap:30px}.bg-gray{background-color:var(--eerie-black-1)}.btn-link{display:flex;align-items:center;gap:5px;color:var(--white);font-family:var(--ff-poppins);font-size:var(--fs-6);font-weight:var(--fw-500)}.btn-link>*{transition:var(--transition)}.btn-link:is(:hover,:focus){color:var(--ultramarine-blue)}.btn-link:is(:hover,:focus) ion-icon{transform:translateX(5px)}.header{position:fixed;top:0;left:0;width:100%;padding-block:20px;background-color:rgba(10,10,10,.7);backdrop-filter:blur(15px);transition:var(--transition);z-index:100}.header.active{background-color:rgba(20,20,30,.85);padding-block:15px;box-shadow:var(--shadow)}.header .container{display:flex;justify-content:space-between;align-items:center;gap:15px}.header .logo{flex-shrink:0}.navbar-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:30px}.header .btn-group{display:flex;gap:10px;margin-left:auto;flex-shrink:0}.header .btn-primary,.header .btn-secondary{padding:10px 20px;font-size:var(--fs-8);white-space:nowrap}.header .btn-secondary{display:none}.nav-open-btn{color:var(--white_50);font-size:30px;transition:var(--transition)}.nav-open-btn:is(:hover,:focus){color:var(--ultramarine-blue)}.navbar{position:fixed;background-color:rgba(33,33,33,.98);backdrop-filter:blur(10px);color:var(--alice-blue);top:0;right:-400px;max-width:400px;width:100%;height:100vh;padding:40px 16px;z-index:200;visibility:hidden;transition:.25s var(--cubic-in)}.navbar.active{visibility:visible;transform:translateX(-400px);transition:.5s var(--cubic-out)}.nav-close-btn{background-color:var(--fiery-rose_12);color:var(--fiery-rose);font-size:20px;padding:5px;border-radius:var(--radius-circle)}.nav-close-btn ion-icon{--ionicon-stroke-width:45px}.navbar-link{font-family:var(--ff-poppins);font-size:var(--fs-6);padding:8px 16px;transition:var(--transition)}.navbar-link:is(:hover,:focus){color:var(--ultramarine-blue)}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(10,10,10,.8);transition:var(--transition);pointer-events:none;opacity:0;visibility:hidden;z-index:50}.overlay.active{pointer-events:all;opacity:.85;visibility:visible}.hero{padding-block-start:calc(var(--section-padding) + 50px)}.hero .container{display:grid;gap:70px}.hero-text{font-size:var(--fs-4);margin-block:10px 50px}.play-btn{display:flex;align-items:center;gap:10px;font-size:var(--fs-7);font-family:var(--ff-poppins);font-weight:var(--fw-500);transition:var(--transition)}.play-btn .icon{width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--white);border-radius:var(--radius-circle);transition:var(--transition)}.play-btn .span{color:var(--silver-metallic);transition:var(--transition)}.play-btn:is(:hover,:focus) .span{color:var(--white)}.play-btn:is(:hover,:focus) .icon{background-color:var(--white);color:var(--ultramarine-blue)}.promo .section-text{padding-inline:8px;margin-block-end:50px}.promo-card{border-radius:var(--radius-5);padding:40px 25px;transition:var(--transition)}.promo-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px hsla(222,100%,55%,.1)}.promo-card .card-icon{background-color:var(--onyx-1);color:var(--white);width:max-content;font-size:24px;padding:20px;border-radius:var(--radius-circle);margin-block-end:20px}.promo-card .card-icon ion-icon{--ionicon-stroke-width:50px}.promo-card .card-text{color:var(--alice-blue);margin-block:20px 16px}.stats .container{display:grid;gap:50px}.stats .section-text:last-of-type{margin-block:16px}.stats-list{display:grid;gap:15px}.stats-card{padding:17px;border-radius:var(--radius-5);transition:var(--transition)}.stats-card:hover{transform:translateY(-3px);box-shadow:0 5px 20px hsla(222,100%,55%,.15)}.stats-card .card-title{font-size:var(--fs-3);margin-block-end:10px}.stats-card .card-text{font-size:var(--fs-7);color:var(--alice-blue)}.instruction .section-text{margin-block-end:50px}.instruction-card{padding:30px;border-radius:var(--radius-8);transition:var(--transition)}.instruction-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px hsla(222,100%,55%,.1)}.instruction-card .card-icon{background-color:var(--smokey-black);width:50px;height:50px;display:grid;place-items:center;border-radius:var(--radius-circle);margin-block-end:15px;color:var(--ultramarine-blue);font-size:24px}.footer{text-align:center;color:var(--alice-blue);padding-block:40px}.footer-bottom{border-block-start:1px solid var(--eerie-black-2);padding-block:16px}.copyright{line-height:1.3;margin-block-end:16px}.footer-bottom-list{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.footer-bottom-link{transition:var(--transition)}.footer-bottom-link:hover{color:var(--ultramarine-blue)}@media (min-width:575px){.container{max-width:540px;width:100%;margin-inline:auto}}@media (min-width:768px){.container{max-width:720px}.grid-list{grid-template-columns:1fr 1fr}.header .btn-group{gap:12px}.header .btn-secondary{display:flex}.header .btn-primary,.header .btn-secondary{padding:10px 24px;font-size:var(--fs-7)}.stats-list{grid-template-columns:repeat(3,1fr);gap:25px}.footer-bottom{padding-block:26px}.footer-bottom .container{display:flex;justify-content:space-between;align-items:center}.copyright{margin-block-end:0}}@media (min-width:992px){.container{max-width:960px}.grid-list{grid-template-columns:repeat(3,1fr)}:is(.section-title,.section-text).text-center{margin-inline:auto}.section-text.text-center{max-width:60ch}.section-title.text-center{max-width:30ch}.hero .container{grid-template-columns:0.8fr 1fr;align-items:center;gap:25px}.stats .container{grid-template-columns:1fr 1fr;align-items:center}.instruction .grid-list{grid-template-columns:repeat(4,1fr)}}@media (min-width:1200px){.container{max-width:1140px}.nav-open-btn,.navbar-top{display:none}.navbar{all:unset;display:block;margin:0 auto 0 0}.navbar-list{display:flex;gap:5px}.navbar-link{font-weight:var(--fw-600);padding:8px 16px}.header .container{display:flex;align-items:center;justify-content:space-between;gap:30px}.header .btn-group{margin-left:auto}}