/* VPN for $5 – Styles (mobile-first) */
:root{
  --bg: #0b1020; --fg:#e6ecff; --muted:#a9b4d0;
  --primary:#4f7cf9; --primary-2:#7b5cf4; --accent:#24d8ff;
  --success:#1ac886; --glass:rgba(255,255,255,.08); --glass-border:rgba(255,255,255,.18);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--fg); background:var(--bg); line-height:1.55}
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.06; background:url('../img/noise.png') repeat; background-size:256px 256px}
.container{max-width:1200px; margin:auto; padding:0 24px}

header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.5) 70%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.logo-mark{width:28px; height:28px; border-radius:8px; background: conic-gradient(from 220deg, var(--primary), var(--accent), var(--primary-2), var(--primary)); box-shadow:0 6px 14px rgba(79,124,249,.45)}
.logo-text{font-weight:800}
nav ul{list-style:none; display:flex; gap:20px; padding:0; margin:0}
nav a{color:var(--muted); text-decoration:none; font-weight:600}
nav a:hover{color:var(--fg)}
#burger{display:none; background:none; border:1px solid var(--glass-border); color:var(--fg); border-radius:10px; padding:8px 10px}
@media (max-width: 900px){ nav ul{display:none} #burger{display:inline-flex} }
.mobile-menu{display:none; background:rgba(11,16,32,.98); position:fixed; inset:64px 0 auto 0; border-top:1px solid var(--glass-border); padding:12px 24px; z-index:49}
.mobile-menu a{display:block; padding:14px 8px; color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06)}

.hero{position:relative; overflow:hidden}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; padding:64px 0}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr; gap:28px; padding:40px 0} }
.blob{position:absolute; filter:blur(40px); opacity:.35}
.blob.tl{width:520px; height:520px; top:-140px; left:-120px; background: radial-gradient(closest-side, #7b5cf4, transparent 70%)}
.blob.br{width:620px; height:620px; bottom:-220px; right:-180px; background: radial-gradient(closest-side, #24d8ff, transparent 70%)}
.hero h1{font-size:clamp(28px,4.5vw,52px); margin:0 0 12px}
.hero p.sub{color:var(--muted); font-size:clamp(16px,2.2vw,20px); margin:0 0 18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px}
.badge{padding:8px 12px; border:1px solid var(--glass-border); border-radius:999px; background:var(--glass); font-size:13px}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.btn{appearance:none; border:none; padding:12px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px; box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(90deg, var(--primary), var(--accent)); color:white}
.btn.secondary{background:rgba(255,255,255,.08); color:var(--fg); border:1px solid var(--glass-border)}
.btn.ghost{background:transparent; border:1px solid var(--glass-border); color:var(--fg)}
.mock{align-self:center; justify-self:center}
.phone{width:min(340px, 80vw); aspect-ratio:9/19.5; border-radius:40px; padding:14px; background:linear-gradient(180deg,#0e1328,#121938); border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 60px rgba(0,0,0,.6)}
.screen{border-radius:28px; overflow:hidden; width:100%; height:100%; background:linear-gradient(180deg,#1b284d,#1e2f62)}
.screen-inner{padding:16px}
.status{display:flex; justify-content:space-between; color:#cde1ff; font-size:12px}
.app-title{margin:12px 0 8px; font-weight:800}
.app-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:12px; margin-top:10px}
.app-btn{display:block; text-align:center; padding:10px 12px; border-radius:12px; background:linear-gradient(90deg,#4f7cf9,#24d8ff); color:white; font-weight:800; margin-top:12px; text-decoration:none}
.app-foot{display:flex; justify-content:space-between; font-size:11px; color:#a9b4d0; margin-top:8px}
.app-img{width:100%; height:100%; object-fit:cover; display:block}

.section{position:relative; padding:56px 0}
.section .wave{position:absolute; inset:auto 0 -1px 0}
.section .wave svg{display:block; width:100%}
.section-header{max-width:820px}
.section h2{font-size:clamp(22px,3.5vw,36px); margin:0 0 8px}
.section p.lead{color:var(--muted); margin:0 0 8px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} }
.card{background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16)}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .pricing{grid-template-columns:1fr} }
.price-card{position:relative}
.price-card.most::after{content:'Most Popular'; position:absolute; top:-12px; right:16px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:white; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800}
.price{font-size:28px; font-weight:900; margin:8px 0}
ul.features{list-style:none; padding:0; margin:10px 0}
ul.features li{display:flex; gap:8px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08)}
ul.features li:last-child{border-bottom:none}
li .yes{color:var(--success)} li .no{color:#8892b0}
form{display:grid; gap:12px; margin-top:12px}
label{font-weight:700}
input, textarea{width:100%; padding:12px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--fg)}
textarea{min-height:120px; resize:vertical}
footer{border-top:1px solid rgba(255,255,255,.08); padding:24px 0; color:var(--muted)}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--fg)}