:root{

--bg-primary:#020817;
--bg-secondary:#0f172a;
--bg-card:#111827;

--text-primary:#f8fafc;
--text-secondary:#cbd5e1;
--text-muted:#94a3b8;

--primary:#2563eb;
--primary-hover:#1d4ed8;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--border:rgba(255,255,255,.08);

--radius:18px;
--container:1280px;

}

.container{
width:min(100%,var(--container));
margin:auto;
padding:0 24px;
}

.hero-section,
.hero{
padding:100px 0;
text-align:center;
}

.hero h1,
.hero-section h1{
font-size:clamp(2.2rem,5vw,4.5rem);
line-height:1.1;
margin-bottom:24px;
color:var(--text-primary);
}

.hero p,
.hero-section p{
max-width:850px;
margin:auto;
color:var(--text-secondary);
font-size:1.1rem;
line-height:1.8;
}

.button-group,
.hero-actions{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-top:35px;
}

.button,
.button:link,
.button:visited{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 24px;
border-radius:12px;
font-weight:700;
text-decoration:none;
transition:.2s;
}

.button.primary{
background:var(--primary);
color:#fff;
}

.button.primary:hover{
background:var(--primary-hover);
}

.button.secondary{
background:#1e293b;
color:#fff;
}

.packages,
.category-grid,
.features-grid,
.runtime-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

.card,
.category-card,
.feature-card,
.runtime-card,
.stat-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
}

.price{
font-size:2rem;
font-weight:800;
margin:15px 0;
color:#60a5fa;
}

.section-header{
text-align:center;
margin-bottom:50px;
}

.section-header h2{
font-size:2.5rem;
margin-bottom:15px;
}

.section-header p{
color:var(--text-secondary);
max-width:800px;
margin:auto;
}

.domain-search-box{
background:var(--bg-card);
border:1px solid var(--border);
padding:35px;
border-radius:var(--radius);
}

.domain-search-form{
display:grid;
grid-template-columns:2fr 1fr auto;
gap:15px;
margin-top:25px;
}

.cta-section{
padding:100px 20px;
text-align:center;
}

.cta-section h2{
font-size:3rem;
margin-bottom:20px;
}

@media(max-width:900px){

.domain-search-form{
grid-template-columns:1fr;
}

.hero{
padding:70px 0;
}

.hero h1{
font-size:2.4rem;
}

.section-header h2{
font-size:2rem;
}

}