* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', Arial, sans-serif;
}

body {
background: radial-gradient(circle at top, #0f172a, #020617);
color: #e5e7eb;
line-height: 1.6;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: rgba(15,23,42,0.85);
backdrop-filter: blur(12px);
}

.logo {
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
}

nav a {
color: #e5e7eb;
margin-left: 20px;
text-decoration: none;
font-size: 14px;
}

.hero {
padding: 120px 40px 80px;
max-width: 1100px;
margin: auto;
}

.hero h1 {
font-size: 44px;
margin-bottom: 20px;
line-height: 1.2;
}

.hero p {
font-size: 18px;
opacity: 0.9;
max-width: 820px;
}

.section {
padding: 80px 40px;
max-width: 1100px;
margin: auto;
}

.section h2 {
font-size: 32px;
margin-bottom: 20px;
}

.section p {
max-width: 900px;
opacity: 0.85;
font-size: 17px;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
margin-top: 40px;
}

.card {
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border-radius: 18px;
padding: 30px;
border: 1px solid rgba(255,255,255,0.14);
}

.card h3 {
margin-bottom: 12px;
font-size: 18px;
}

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

.cta h2 {
font-size: 34px;
margin-bottom: 20px;
}

.cta p {
font-size: 18px;
opacity: 0.9;
margin-bottom: 30px;
}

.cta a {
display: inline-block;
padding: 14px 34px;
border-radius: 30px;
background: linear-gradient(90deg,#38bdf8,#818cf8);
color: #020617;
text-decoration: none;
font-weight: 600;
}

.footer {
text-align: center;
padding: 40px;
opacity: 0.6;
}