:root{
  --bg:#07111f;
  --bg-soft:#0d1828;
  --bg-elev:#111f34;
  --card:#0f1b2d;
  --card-2:#13233a;
  --text:#eff5ff;
  --muted:#9fb2d3;
  --line:rgba(163,184,217,.16);
  --line-strong:rgba(163,184,217,.26);
  --brand:#66b2ff;
  --brand-2:#7a6cff;
  --success:#30c48d;
  --warning:#f0b44d;
  --danger:#f06a7b;
  --shadow:0 18px 60px rgba(2,8,20,.38);
  --radius:22px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
color:var(--text);
background:
radial-gradient(circle at top left, rgba(102,178,255,.14), transparent 26%),
radial-gradient(circle at top right, rgba(122,108,255,.14), transparent 24%),
linear-gradient(180deg,#08111d 0%,#0b1422 38%,#08111d 100%);
}

a{
color:inherit;
text-decoration:none
}

img{
max-width:100%
}

/* WRAP */

.wrap{
width:min(1720px,96%);
margin:0 auto
}

.page-shell{
padding:0 0 56px
}

/* NAVBAR */

.topbar{
position:sticky;
top:0;
z-index:50;
background:rgba(6,12,22,.78);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:18px 0
}

.brand{
display:flex;
align-items:center;
gap:14px;
color:#fff;
font-weight:800;
font-size:22px
}

.brand-mark{
width:42px;
height:42px;
border-radius:14px;
display:grid;
place-items:center;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
box-shadow:0 10px 30px rgba(102,178,255,.25);
font-size:14px;
font-weight:900;
letter-spacing:.08em
}

.menu{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap
}

.menu a{
padding:10px 14px;
border-radius:12px;
color:#dce8ff
}

.menu a:hover,
.menu a.active{
background:rgba(255,255,255,.05)
}

/* HERO */

.hero{
padding:90px 0 40px
}

.hero-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:28px
}

.hero-copy{
padding:44px
}

.hero h1{
font-size:clamp(3.4rem,6vw,6.4rem);
line-height:1;
margin:18px 0 16px;
max-width:13ch
}

.hero p{
margin:0;
color:#c3d3ed;
font-size:20px;
line-height:1.8;
max-width:72ch
}

.gradient-text{
background:linear-gradient(90deg,#fff,#dce7ff 35%,#8ab8ff 82%);
-webkit-background-clip:text;
background-clip:text;
color:transparent
}

/* BUTTONS */

.cta{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:28px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:48px;
padding:14px 20px;
border-radius:14px;
border:1px solid transparent;
font-weight:800;
cursor:pointer;
transition:.18s ease
}

.btn:hover{
transform:translateY(-1px)
}

.btn-primary{
color:#fff;
background:linear-gradient(135deg,var(--brand),var(--brand-2))
}

.btn-outline{
border-color:var(--line-strong);
background:rgba(255,255,255,.03);
color:#eef5ff
}

/* SECTIONS */

.section{
padding:60px 0
}

.section-head{
display:flex;
justify-content:space-between;
gap:20px;
align-items:end;
margin-bottom:30px
}

.section-head h2{
font-size:42px;
line-height:1.08;
margin:0 0 10px
}

.lead{
margin:0;
color:#b8cae7;
font-size:18px;
line-height:1.8
}

/* GRID */

.grid{
display:grid;
gap:22px
}

.plans{
grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}

.plans-wide{
grid-template-columns:repeat(3,minmax(0,1fr))
}

/* CARDS */

.card{
padding:32px;
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
border:1px solid var(--line);
box-shadow:var(--shadow)
}

.plan-card{
padding:34px
}

.plan-top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:start
}

/* PRICE */

.price{
display:flex;
align-items:baseline;
gap:8px;
margin:14px 0 16px;
font-size:48px;
font-weight:900
}

.price span{
font-size:16px;
color:var(--muted);
font-weight:600
}

/* PLAN SPECS */

.clean{
list-style:none;
padding:0;
margin:0
}

.clean li{
display:flex;
justify-content:space-between;
gap:18px;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.06);
color:#deebff
}

.clean li span:last-child{
color:#9bb0d1
}

/* TAG */

.tag{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
font-size:11px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
background:rgba(122,108,255,.18);
color:#d2caff;
border:1px solid rgba(122,108,255,.28)
}

.tag.alt{
background:rgba(102,178,255,.14);
color:#bae0ff;
border-color:rgba(102,178,255,.28)
}

/* FOOTER */

.site-footer{
margin-top:80px;
padding:40px 20px;
border-top:1px solid var(--line);
}

.footer-inner{
max-width:1200px;
margin:0 auto;
text-align:center;
}

.footer-nav{
display:flex;
justify-content:center;
gap:32px;
flex-wrap:wrap;
margin-bottom:18px;
}

.footer-nav a{
font-size:14px;
color:#9fb2d3;
transition:.15s;
}

.footer-nav a:hover{
color:#ffffff;
}

.footer-copy{
font-size:13px;
color:#7f93b3;
}

/* RESPONSIVE */

@media (max-width:1200px){

.hero-grid{
grid-template-columns:1fr
}

.plans-wide{
grid-template-columns:1fr
}

}

@media (max-width:760px){

.hero{
padding-top:60px
}

.hero h1{
font-size:clamp(2.8rem,10vw,4rem)
}

.section-head h2{
font-size:32px
}

.price{
font-size:38px
}

.wrap{
width:94%
}

.footer-nav{
gap:18px
}

}