:root{

/* Color System */

--color-bg-primary:#020617;
--color-bg-secondary:#0f172a;
--color-border:#1e293b;

--color-text-primary:#ffffff;
--color-text-secondary:#94a3b8;

--color-accent:#2563eb;
--color-accent-soft:rgba(37,99,235,0.15);


/* Typography */

--font-system:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

--text-xs:12px;
--text-sm:14px;
--text-md:16px;
--text-lg:20px;
--text-xl:32px;
--text-hero:64px;


/* Spacing */

--space-1:6px;
--space-2:10px;
--space-3:16px;
--space-4:24px;
--space-5:40px;
--space-6:80px;


/* Radius */

--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;


/* Layout */

--container-width:1100px;

}

body{
margin:0;
background:var(--color-bg-primary);
color:var(--color-text-primary);
font-family:var(--font-system);
line-height:1.6;
}

.container{
max-width:var(--container-width);
margin:auto;
padding:0 var(--space-4);
}

.section{
padding:var(--space-6) var(--space-4);
}

.section-title{
font-size:var(--text-xl);
margin-bottom:var(--space-3);
}

.section-sub{
color:var(--color-text-secondary);
max-width:700px;
margin-bottom:var(--space-5);
}

.btn{
display:inline-block;
padding:12px 24px;
border-radius:var(--radius-md);
text-decoration:none;
font-size:var(--text-sm);
transition:all .2s;
}

.btn-primary{
background:var(--color-accent);
color:white;
}

.btn-primary:hover{
opacity:.9;
}

.btn-outline{
border:1px solid var(--color-border);
color:var(--color-text-secondary);
}

.btn-outline:hover{
color:white;
border-color:var(--color-accent);
}

.card{
background:var(--color-bg-secondary);
border:1px solid var(--color-border);
padding:var(--space-4);
border-radius:var(--radius-lg);
transition:all .25s;
}

.card:hover{
transform:translateY(-6px);
border-color:#334155;
}


.text-sm{font-size:var(--text-sm);}
.text-md{font-size:var(--text-md);}
.text-lg{font-size:var(--text-lg);}

.text-muted{
color:var(--color-text-secondary);
}