@charset "UTF-8";
:root{
--bg:#07111f;
--panel:#0c192a;
--line:#1d3046;
--text:#f7fbff;
--muted:#9db0c4;
--blue:#397df4;
--blue-light:#6ca5ff;
--green:#31d17b}
*{
box-sizing:border-box;
margin:0;
padding:0}
html{
background:var(--bg)}
body{
min-height:100vh;
background:radial-gradient(circle at 80% 40%,#102c51 0,transparent 38%),linear-gradient(135deg,#081321 0%,#07111f 58%,#091827 100%);
color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
overflow-x:hidden}
.page-glow{
position:fixed;
inset:0;
pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(to bottom,black,transparent 85%)}
.site-header{
position:relative;
z-index:5;
width:min(1180px,calc(100% - 48px));
height:82px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid rgba(157,176,196,.13)}
.brand{
display:inline-flex;
align-items:center;
gap:11px;
color:#fff;
text-decoration:none;
font-size:16px;
font-weight:800;
letter-spacing:-.2px}
.brand img{
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,.25)}
.store-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
background:none;
cursor:pointer;
transition:opacity .2s ease,transform .2s ease}
.store-badge:hover{
opacity:.85;
transform:translateY(-2px)}
.store-badge:focus-visible{
outline:3px solid #bfdbfe;
outline-offset:4px;
border-radius:5px}
.store-badge img{
display:block;
width:155px;
height:auto}
.hero{
position:relative;
z-index:2;
width:min(1180px,calc(100% - 48px));
min-height:calc(100vh - 82px);
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(460px,.94fr);
align-items:center;
gap:72px;
padding:58px 0 68px}
.hero-copy{
max-width:610px}
.eyebrow{
width:max-content;
display:flex;
align-items:center;
gap:9px;
margin-bottom:24px;
padding:8px 12px;
border:1px solid rgba(108,165,255,.25);
border-radius:999px;
background:rgba(27,60,100,.3);
color:#b9d4ff;
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase}
.status-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 5px rgba(49,209,123,.1),0 0 18px rgba(49,209,123,.8)}
h1{
max-width:650px;
font-size:clamp(46px,5.25vw,72px);
line-height:1.01;
letter-spacing:-.055em;
font-weight:850}
h1 span{
color:var(--blue-light)}
.subtitle{
max-width:590px;
margin-top:24px;
color:var(--muted);
font-size:18px;
line-height:1.62;
letter-spacing:-.01em}
.benefits{
display:grid;
gap:13px;
margin-top:27px;
list-style:none;
color:#dce7f2;
font-size:15px;
font-weight:600}
.benefits li{
display:flex;
align-items:center;
gap:11px}
.benefits svg{
width:20px;
height:20px;
padding:3px;
border-radius:50%;
background:rgba(49,209,123,.14);
fill:none;
stroke:#5ee69a;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round}
.cta-wrap{
display:flex;
align-items:center;
gap:18px;
margin-top:34px}
.cta-button{
min-height:68px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
padding:0 24px;
border:1px solid rgba(255,255,255,.2);
border-radius:15px;
background:linear-gradient(180deg,#4b8dfa 0%,#2e6fe4 100%);
box-shadow:0 14px 36px rgba(27,97,221,.37),inset 0 1px 0 rgba(255,255,255,.25);
color:#fff;
font-family:inherit;
font-size:20px;
font-weight:800;
line-height:1.1;
letter-spacing:-.02em;
white-space:nowrap;
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.cta-button:hover{
transform:translateY(-3px);
filter:brightness(1.08);
box-shadow:0 19px 44px rgba(27,97,221,.48),inset 0 1px 0 rgba(255,255,255,.25)}
.cta-button:active{
transform:translateY(0)}
.cta-button:focus-visible{
outline:3px solid #bfdbfe;
outline-offset:4px}
.chrome-icon{
width:32px;
height:32px;
flex:none;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.arrow-icon{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform .2s ease}
.cta-button:hover .arrow-icon{
transform:translateX(3px)}
.cta-note{
display:flex;
align-items:center;
gap:7px;
color:#91a7bc;
font-size:12px;
font-weight:700;
white-space:nowrap}
.cta-note svg{
width:20px;
height:20px;
fill:none;
stroke:#65dd99;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round}
.disclaimer{
max-width:570px;
margin-top:18px;
color:#667c92;
font-size:11px;
line-height:1.6}
.disclaimer a{
color:#8ca2b9;
text-decoration:underline;
text-underline-offset:2px}
.disclaimer a:hover{
color:#d9e7f5}
.hero-art{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:0}
.art-halo{
position:absolute;
top:5%;
left:10%;
width:80%;
height:75%;
border-radius:50%;
background:rgba(45,117,238,.18);
filter:blur(60px)}
.browser-art{
position:relative;
width:100%;
height:auto;
overflow:visible}
.shield{
transform-origin:310px 285px;
animation:shield-float 4s ease-in-out infinite}
.popup-one{
transform-origin:93px 256px;
animation:popup-float 5s ease-in-out infinite}
.popup-two{
transform-origin:530px 88px;
animation:popup-float 4.5s ease-in-out -1.4s infinite}
.blocked-pill{
animation:pill-glow 3s ease-in-out infinite}
.site-strip{
width:92%;
display:grid;
grid-template-columns:repeat(4,auto);
justify-content:center;
gap:10px;
margin-top:-10px}
.site-strip span{
display:flex;
align-items:center;
gap:7px;
padding:9px 11px;
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
background:rgba(12,25,42,.82);
color:#aabdd0;
font-size:11px;
font-weight:750;
white-space:nowrap}
.dot{
width:7px;
height:7px;
border-radius:50%}
.dot-pink{
background:#f472b6}
.dot-violet{
background:#a78bfa}
.dot-cyan{
background:#22d3ee}
.dot-green{
background:#4ade80}
@keyframes shield-float{
0%,100%{
transform:translateY(0)}
50%{
transform:translateY(-8px)}
}
@keyframes popup-float{
0%,100%{
transform:rotate(-1deg) translateY(0)}
50%{
transform:rotate(1deg) translateY(-7px)}
}
@keyframes pill-glow{
0%,100%{
opacity:.9}
50%{
opacity:1;
filter:drop-shadow(0 0 10px rgba(49,209,123,.25))}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important}
}
@media (max-width:980px){
.hero{
grid-template-columns:1fr;
gap:30px;
padding-top:48px}
.hero-copy{
max-width:720px;
margin:0 auto;
text-align:center}
.eyebrow{
margin-left:auto;
margin-right:auto}
.subtitle,.disclaimer{
margin-left:auto;
margin-right:auto}
.benefits{
width:max-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align:left}
.cta-wrap{
justify-content:center}
.hero-art{
width:min(620px,100%);
margin:0 auto}
.site-strip{
margin-top:-18px}
.browser-art{
max-height:490px}
}
@media (max-width:620px){
.site-header,.hero{
width:min(100% - 30px,1180px)}
.site-header{
height:70px}
.store-badge img{
width:132px}
.hero{
min-height:calc(100vh - 70px);
padding:38px 0 44px;
gap:24px}
h1{
font-size:clamp(40px,12vw,58px)}
.subtitle{
font-size:16px}
.eyebrow{
font-size:10px}
.benefits{
font-size:13px;
gap:10px}
.cta-wrap{
flex-direction:column;
gap:12px}
.cta-button{
width:100%;
min-height:64px;
padding:0 16px;
font-size:18px}
.disclaimer{
margin-top:15px}
.browser-art{
width:112%;
max-width:none}
.site-strip{
width:100%;
grid-template-columns:1fr 1fr;
margin-top:-10px}
.site-strip span{
justify-content:center}
.popup-one,.popup-two{
display:none}
}
@media (max-width:380px){
.brand span{
font-size:14px}
.cta-button{
font-size:16px;
gap:9px}
.chrome-icon{
width:28px;
height:28px}
.site-strip{
gap:7px}
.site-strip span{
padding:8px 6px;
font-size:10px}
}