*{
margin:0;
padding:0;
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
font-family:'Inter',Arial,sans-serif;
background:#070a12;
color:#fff;
overflow-x:hidden;
line-height:1.6}
img{
max-width:100%;
display:block}
a{
text-decoration:none;
color:inherit}
button{
border:none;
outline:none;
cursor:pointer;
font-family:inherit}
:root{
--primary:#00e0ff;
--primary-2:#ff3d8b;
--accent:#ffd166;
--dark:#070a12;
--panel:#101522;
--text-soft:#aeb9cb;
--border:rgba(255,255,255,.12);
--shadow:0 24px 70px rgba(0,0,0,.42);
--glow:0 0 38px rgba(0,224,255,.35)}
.container{
width:100%;
max-width:1180px;
margin:auto;
padding:0 20px}
.section{
padding:96px 0}
.header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
backdrop-filter:blur(24px);
background:rgba(7,10,18,.82);
border-bottom:1px solid rgba(255,255,255,.08)}
.header .container{
height:72px;
display:flex;
align-items:center;
justify-content:space-between}
.logo{
display:flex;
align-items:center;
gap:10px}
.logo img{
width:46px;
height:46px;
border-radius:10px}
.logo span{
font-size:22px;
font-weight:900;
letter-spacing:0;
color:#fff}
.nav{
display:flex;
align-items:center;
gap:34px}
.nav a{
color:#d7deeb;
font-size:14px;
font-weight:700;
transition:.25s}
.nav a:hover{
color:#fff}
.header-download-btn,.btn-primary,.btn-download{
background:linear-gradient(135deg,var(--primary),#2d7dff 52%,var(--primary-2));
color:#06101d;
box-shadow:0 12px 34px rgba(0,224,255,.22)}
.header-download-btn{
padding:11px 20px;
border-radius:8px;
font-weight:900;
font-size:14px}
.mobile-menu-btn{
display:none;
width:42px;
height:42px;
background:none;
flex-direction:column;
justify-content:center;
gap:5px}
.mobile-menu-btn span{
width:24px;
height:2px;
background:#fff;
transition:.3s}
.mobile-menu{
display:none;
position:fixed;
top:72px;
left:0;
width:100%;
background:#0d1320;
z-index:998;
border-bottom:1px solid var(--border)}
.mobile-menu.active{
display:block}
.mobile-menu a{
display:block;
padding:16px 22px;
border-bottom:1px solid rgba(255,255,255,.07);
color:#edf4ff;
font-weight:800}
.hero{
position:relative;
min-height:calc(100vh - 72px);
margin-top:72px;
display:flex;
align-items:center;
overflow:hidden;
padding:54px 0}
.hero-bg{
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(90deg,rgba(7,10,18,.96),rgba(7,10,18,.72)),radial-gradient(circle at 78% 18%,rgba(0,224,255,.34),transparent 34%),radial-gradient(circle at 86% 78%,rgba(255,61,139,.26),transparent 32%),linear-gradient(135deg,#07152c,#160a1d 52%,#05070c)}
.hero-bg:after{
content:"";
position:absolute;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:46px 46px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%)}
.hero-container{
display:grid;
grid-template-columns:1.02fr .98fr;
gap:48px;
align-items:center}
.hero-badge,.section-kicker{
display:inline-flex;
align-items:center;
width:max-content;
padding:8px 12px;
border-radius:8px;
background:rgba(255,209,102,.12);
border:1px solid rgba(255,209,102,.34);
color:#ffe5a6;
font-size:12px;
font-weight:900;
letter-spacing:0;
text-transform:uppercase}
.hero-badge{
margin-bottom:18px}
.hero h1{
max-width:680px;
font-size:58px;
line-height:1.02;
font-weight:900;
margin-bottom:18px}
.hero-description{
max-width:620px;
font-size:20px;
color:#d3ddec;
margin-bottom:28px}
.hero-buttons{
display:flex;
gap:14px;
margin-bottom:20px}
.btn-primary,.btn-secondary,.btn-download{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:56px;
padding:16px 26px;
border-radius:8px;
font-size:16px;
font-weight:900;
transition:.25s}
.btn-primary:hover,.btn-download:hover,.header-download-btn:hover{
transform:translateY(-2px);
box-shadow:0 16px 44px rgba(0,224,255,.36)}
.btn-secondary{
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.07);
color:#fff}
.download-icon{
width:22px;
height:22px;
flex-shrink:0;
animation:downloadFloat 2s ease-in-out infinite}
@keyframes downloadFloat{
0%,100%{
transform:translateY(0)}
50%{
transform:translateY(4px)}
}
.age-notice{
display:grid;
gap:4px;
max-width:650px;
padding:14px 16px;
margin-bottom:18px;
border:1px solid rgba(255,209,102,.28);
border-left:4px solid var(--accent);
border-radius:8px;
background:rgba(255,209,102,.08);
color:#e5edf8;
font-size:13px}
.age-notice strong{
color:#ffe5a6}
.hero-features{
display:flex;
flex-wrap:wrap;
gap:10px}
.hero-features span{
padding:8px 12px;
border:1px solid rgba(255,255,255,.13);
border-radius:8px;
background:rgba(255,255,255,.06);
color:#dce7f6;
font-size:13px;
font-weight:800}
.hero-visual{
position:relative;
min-height:620px;
display:flex;
align-items:center;
justify-content:center}
.tv-frame{
position:relative;
width:min(100%,430px);
padding:0;
border:1px solid rgba(255,255,255,.16);
border-radius:8px;
background:#090d17;
box-shadow:var(--shadow),var(--glow);
overflow:hidden}
.tv-frame img{
position:relative;
z-index:2;
width:100%;
max-height:620px;
object-fit:cover;
margin:auto;
filter:drop-shadow(0 18px 38px rgba(0,0,0,.55))}
.app-chip{
position:absolute;
left:18px;
bottom:26px;
z-index:3;
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:8px;
background:rgba(7,10,18,.86);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 16px 42px rgba(0,0,0,.35)}
.app-chip img{
width:52px}
.app-chip strong,.app-chip span{
display:block}
.app-chip strong{
font-size:17px}
.app-chip span{
color:#b7c4d8;
font-size:12px}
.section-heading{
text-align:center;
margin-bottom:44px}
.section-heading .section-kicker{
margin:0 auto 12px}
.section-heading h2,.premium-copy h2,.download-box h2{
font-size:42px;
line-height:1.12;
font-weight:900;
margin-bottom:14px}
.section-heading p,.premium-copy p,.download-box p{
color:var(--text-soft);
max-width:720px;
margin:auto}
.features{
background:#090e18}
.features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.feature-card,.review-card,.unlock-panel,.download-box,.faq-item{
border:1px solid var(--border);
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
box-shadow:0 18px 50px rgba(0,0,0,.18)}
.feature-card{
padding:26px;
border-radius:8px;
transition:.25s}
.feature-card:hover{
transform:translateY(-4px);
border-color:rgba(0,224,255,.36)}
.feature-icon{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
margin-bottom:18px;
border-radius:8px;
background:rgba(0,224,255,.12);
border:1px solid rgba(0,224,255,.26);
color:#7df0ff;
font-weight:900}
.feature-card h3{
font-size:21px;
line-height:1.25;
margin-bottom:10px}
.feature-card p,.review-card p{
color:var(--text-soft)}
.premium-section{
padding:96px 0;
background:linear-gradient(135deg,#101522,#07111d 58%,#1a0c18)}
.premium-grid{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:38px;
align-items:center}
.premium-copy p{
margin:0 0 24px}
.premium-copy .section-kicker{
margin-bottom:14px}
.unlock-panel{
border-radius:8px;
padding:18px}
.unlock-row{
display:flex;
justify-content:space-between;
gap:16px;
padding:18px;
border-bottom:1px solid rgba(255,255,255,.09)}
.unlock-row:last-child{
border-bottom:none}
.unlock-row span{
color:#eaf2ff;
font-weight:800}
.unlock-row strong{
color:#7df0ff;
white-space:nowrap}
.screenshotSwiper{
padding-bottom:54px}
.swiper-slide{
display:flex;
justify-content:center}
.swiper-slide img{
width:260px;
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,.5)}
.swiper-pagination-bullet{
background:#fff!important}
.reviews{
background:#090e18}
.reviews-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.review-card{
border-radius:8px;
padding:26px}
.stars{
color:#ffd166;
margin-bottom:14px;
font-size:18px;
letter-spacing:0}
.review-card p{
margin-bottom:16px}
.review-card span{
color:#dce7f6;
font-weight:800}
.download-section{
padding:100px 0}
.download-box{
position:relative;
overflow:hidden;
border-radius:8px;
text-align:center;
padding:58px 34px;
background:radial-gradient(circle at 20% 20%,rgba(0,224,255,.18),transparent 32%),radial-gradient(circle at 84% 78%,rgba(255,61,139,.18),transparent 34%),linear-gradient(145deg,rgba(21,29,46,.98),rgba(8,13,24,.98))}
.download-box .section-kicker{
margin:0 auto 14px}
.download-box p{
margin-bottom:30px}
.download-info{
display:flex;
justify-content:center;
gap:18px;
margin-bottom:32px}
.download-info div{
min-width:138px;
padding:14px 18px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
background:rgba(255,255,255,.055)}
.download-info strong,.download-info span{
display:block}
.download-info strong{
font-size:16px}
.download-info span{
color:#bfc8d8;
font-size:14px}
.btn-download{
min-width:280px;
min-height:62px;
margin-bottom:18px;
font-size:18px}
.download-box small{
display:block;
max-width:760px;
margin:auto;
color:#c9d3e4}
.faq-list{
max-width:900px;
margin:auto}
.faq-item{
margin-bottom:12px;
border-radius:8px;
overflow:hidden}
.faq-question{
width:100%;
padding:20px;
background:transparent;
color:#fff;
text-align:left;
font-size:17px;
font-weight:900}
.faq-answer{
display:none;
padding:0 20px 20px;
color:#bfc8d8}
.footer{
padding:46px 0;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
background:#070a12}
.footer img{
width:76px;
margin:auto auto 16px}
.footer p{
color:#9ca8bb;
margin-bottom:16px}
.footer-links{
display:flex;
justify-content:center;
gap:22px}
.footer-links a{
color:#d3ddec}
@media (max-width:992px){
.hero{
min-height:auto;
padding:36px 0 64px}
.hero-container,.premium-grid{
grid-template-columns:1fr}
.hero-content{
text-align:center}
.hero h1,.hero-description,.age-notice{
margin-left:auto;
margin-right:auto}
.hero-buttons,.hero-features{
justify-content:center}
.hero-visual{
min-height:auto}
.features-grid,.reviews-grid{
grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
.nav,.header-download-btn{
display:none}
.mobile-menu-btn{
display:flex}
.container{
padding:0 16px}
.section,.premium-section{
padding:64px 0}
.hero{
padding:22px 0 38px}
.hero-container{
gap:22px}
.hero-badge{
margin-bottom:12px;
font-size:11px}
.hero h1{
font-size:38px;
line-height:1.05;
margin-bottom:12px}
.hero-description{
font-size:16px;
margin-bottom:18px}
.hero-buttons{
flex-direction:column;
gap:10px;
margin-bottom:14px}
.btn-primary,.btn-secondary,.btn-download{
width:100%;
min-height:54px;
padding:15px 18px}
.age-notice{
padding:12px 13px;
font-size:12px;
text-align:left}
.hero-features{
gap:8px}
.hero-features span{
flex:1 1 100%;
padding:8px 10px}
.hero-visual{
min-height:auto}
.tv-frame{
width:min(100%,330px)}
.tv-frame img{
max-height:480px}
.app-chip{
left:10px;
bottom:8px;
padding:9px 10px}
.app-chip img{
width:42px}
.section-heading{
margin-bottom:32px}
.section-heading h2,.premium-copy h2,.download-box h2{
font-size:30px}
.features-grid,.reviews-grid{
grid-template-columns:1fr}
.feature-card,.review-card{
padding:22px}
.unlock-row{
padding:15px 4px}
.download-box{
padding:38px 20px}
.download-info{
flex-direction:column;
gap:10px}
.download-info div{
width:100%}
.swiper-slide img{
width:220px}
.faq-question{
padding:17px;
font-size:16px}
.faq-answer{
padding:0 17px 17px}
.footer-links{
flex-wrap:wrap;
gap:14px}
}
@media (max-width:420px){
.header .container{
height:64px}
.mobile-menu{
top:64px}
.hero{
margin-top:64px}
.logo img{
width:40px;
height:40px}
.logo span{
font-size:20px}
.hero h1{
font-size:33px}
.hero-description{
font-size:15px}
.hero-visual{
min-height:auto}
.tv-frame img{
max-height:400px}
}