:root{
--bg:#020b1d;
--panel:#071936;
--panel2:#0a2355;
--blue:#2d84ff;
--gold:#f2bc4d;
--text:#ffffff;
--muted:#c8d6e8;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:var(--bg);
color:var(--text);
font-family:Arial,sans-serif;
padding:18px;
padding-bottom:110px;
overflow-x:hidden;
position:relative;
}

.glow{
position:fixed;
width:400px;
height:400px;
border-radius:50%;
filter:blur(110px);
z-index:-1;
}

.glow-one{
background:rgba(0,102,255,.18);
top:-150px;
left:-120px;
}

.glow-two{
background:rgba(242,188,77,.08);
bottom:-150px;
right:-100px;
}

.site-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
gap:14px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand img{
width:68px;
height:68px;
border-radius:22px;
box-shadow:0 0 28px rgba(0,102,255,.2);
}

.brand-text h1{
font-size:42px;
line-height:1;
}

.brand-text p{
font-size:15px;
line-height:1.4;
color:var(--muted);
max-width:170px;
margin-top:4px;
}

.menu-btn{
width:66px;
height:66px;
border-radius:22px;
border:1px solid rgba(255,255,255,.08);
background:rgba(8,25,56,.95);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
}

.menu-btn span{
width:28px;
height:3px;
background:white;
border-radius:10px;
}

.mobile-menu{
display:none;
flex-direction:column;
gap:12px;
background:#071936;
padding:20px;
border-radius:24px;
margin-bottom:20px;
border:1px solid rgba(255,255,255,.06);
}

.mobile-menu.active{
display:flex;
}

.mobile-menu a{
color:white;
text-decoration:none;
padding:12px 14px;
background:rgba(255,255,255,.04);
border-radius:14px;
font-weight:bold;
}

.hero{
background:
radial-gradient(circle at top right, rgba(45,132,255,.2), transparent 35%),
linear-gradient(135deg,#071a46,#081531);
padding:28px;
border-radius:34px;
border:1px solid rgba(255,255,255,.06);
margin-bottom:30px;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
width:260px;
height:260px;
background:rgba(255,255,255,.03);
border-radius:50%;
top:-80px;
right:-60px;
}

.hero-badge-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:26px;
position:relative;
z-index:2;
}

.badge{
padding:10px 16px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.3px;
}

.red{
background:#f4365a;
}

.blue{
background:#244a9f;
}

.gold{
background:rgba(242,188,77,.12);
border:1px solid rgba(242,188,77,.24);
color:var(--gold);
}

.hero h2{
font-size:54px;
line-height:1;
letter-spacing:-2px;
margin-bottom:22px;
max-width:800px;
position:relative;
z-index:2;
}

.hero p{
font-size:20px;
line-height:1.8;
color:var(--muted);
max-width:700px;
margin-bottom:28px;
position:relative;
z-index:2;
}

.hero-buttons{
display:flex;
gap:14px;
flex-wrap:wrap;
position:relative;
z-index:2;
}

.btn{
padding:16px 24px;
border-radius:16px;
text-decoration:none;
font-weight:bold;
display:inline-flex;
justify-content:center;
align-items:center;
}

.primary{
background:var(--blue);
color:white;
box-shadow:0 14px 28px rgba(45,132,255,.2);
}

.secondary{
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
color:white;
}

.section-title{
margin-bottom:18px;
}

.section-title span,
.membership-label{
display:inline-block;
font-size:12px;
letter-spacing:1px;
font-weight:900;
color:var(--gold);
margin-bottom:10px;
}

.section-title h3,
.membership h3{
font-size:34px;
line-height:1.1;
}

.report-grid,
.feature-grid{
display:grid;
gap:18px;
margin-bottom:30px;
}

.report-card,
.feature-card,
.tracker,
.membership{
background:#071936;
padding:24px;
border-radius:28px;
border:1px solid rgba(255,255,255,.06);
transition:.3s ease;
}

.report-card:hover,
.feature-card:hover{
transform:translateY(-4px);
border-color:rgba(45,132,255,.28);
}

.report-tag{
display:inline-block;
font-size:11px;
font-weight:900;
color:var(--gold);
margin-bottom:14px;
text-transform:uppercase;
}

.report-card h4,
.feature-card h4{
font-size:30px;
line-height:1.1;
margin-bottom:14px;
}

.report-card p,
.feature-card p,
.membership p{
font-size:17px;
line-height:1.8;
color:var(--muted);
}

.icon{
font-size:30px;
margin-bottom:14px;
}

.stats{
display:grid;
gap:14px;
margin-top:20px;
}

.stat-card{
background:rgba(255,255,255,.04);
padding:20px;
border-radius:20px;
}

.stat-card strong{
display:block;
font-size:42px;
margin-bottom:6px;
}

.stat-card span{
color:var(--muted);
}

.membership{
background:
radial-gradient(circle at top right, rgba(45,132,255,.25), transparent 30%),
linear-gradient(135deg,#071936,#0a2b67);
display:flex;
flex-direction:column;
gap:22px;
margin-top:30px;
}

footer{
padding:40px 20px 20px;
text-align:center;
color:#b7c8df;
font-size:15px;
}

.bottom-nav{
position:fixed;
left:14px;
right:14px;
bottom:14px;
background:rgba(3,14,34,.92);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.06);
border-radius:24px;
display:flex;
justify-content:space-around;
padding:14px;
max-width:560px;
margin:auto;
}

.bottom-nav a{
width:44px;
height:44px;
display:flex;
justify-content:center;
align-items:center;
border-radius:14px;
text-decoration:none;
color:white;
font-size:22px;
}

.bottom-nav a.active{
background:rgba(45,132,255,.18);
color:var(--gold);
}

@media(min-width:768px){

body{
padding:28px;
padding-bottom:120px;
}

.hero{
padding:48px;
}

.hero h2{
font-size:74px;
}

.report-grid,
.feature-grid{
grid-template-columns:repeat(3,1fr);
}

.stats{
grid-template-columns:repeat(3,1fr);
}

.membership{
flex-direction:row;
justify-content:space-between;
align-items:center;
}

}

@media(max-width:480px){

.hero h2{
font-size:46px;
}

.hero p{
font-size:18px;
}

.btn{
width:100%;
}

}

.page-hero{
padding:40px 24px;
background:
radial-gradient(circle at top right, rgba(45,132,255,.18), transparent 35%),
linear-gradient(135deg,#071a46,#081531);
border-radius:34px;
margin-bottom:30px;
border:1px solid rgba(255,255,255,.06);
}

.page-label{
display:inline-block;
font-size:12px;
font-weight:900;
letter-spacing:1px;
color:#f2bc4d;
margin-bottom:12px;
}

.page-hero h2{
font-size:52px;
line-height:1;
margin-bottom:20px;
letter-spacing:-2px;
}

.page-hero p{
font-size:20px;
line-height:1.8;
color:#c8d6e8;
max-width:760px;
}

.content-section{
display:grid;
gap:20px;
margin-bottom:40px;
}

.content-card{
background:#071936;
padding:28px;
border-radius:28px;
border:1px solid rgba(255,255,255,.06);
}

.content-card h3{
font-size:32px;
margin-bottom:16px;
}

.content-card p{
font-size:18px;
line-height:1.8;
color:#c8d6e8;
margin-bottom:16px;
}

.content-card ul{
padding-left:22px;
color:#c8d6e8;
line-height:2;
}

@media(max-width:480px){

.page-hero h2{
font-size:42px;
}

.page-hero p{
font-size:18px;
}

.content-card h3{
font-size:28px;
}

}

.stats-grid{
display:grid;
gap:18px;
margin-bottom:30px;
}

.tracker-stat{
background:#071936;
padding:24px;
border-radius:24px;
border:1px solid rgba(255,255,255,.06);
text-align:center;
}

.tracker-stat strong{
display:block;
font-size:48px;
margin-bottom:10px;
}

.tracker-stat span{
color:#c8d6e8;
font-size:16px;
}

.voice-form{
display:flex;
flex-direction:column;
gap:16px;
margin-top:20px;
}

.voice-form input,
.voice-form textarea{
background:#081f4f;
border:1px solid rgba(255,255,255,.08);
padding:16px;
border-radius:16px;
color:white;
font-size:16px;
width:100%;
}

.voice-form textarea{
min-height:160px;
resize:vertical;
}

.voice-form input::placeholder,
.voice-form textarea::placeholder{
color:#aebfd9;
}

@media(min-width:768px){

.stats-grid{
grid-template-columns:repeat(4,1fr);
}

}