:root{
--color-bg-graphite:#121212;
--color-surface-block:#262626;
--color-text-primary:#E5E5E5;
--color-accent-flame:#E25822;
--color-text-inverse:#121212;
--color-divider-rough:rgba(229,229,229,0.16);
--color-overlay-grain:rgba(229,229,229,0.04);

--font-heading:'Space Grotesk','Oswald',sans-serif;
--font-body:'Inter','Roboto',sans-serif;

--fs-xxl:2.5rem;
--fs-xl:2rem;
--fs-lg:1.5rem;
--fs-md:1.125rem;
--fs-base:1rem;
--fs-sm:0.875rem;

--space-xs:0.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:3rem;
--space-xl:5rem;

--container-max:1100px;
--container-pad:1rem;

--radius-sm:2px;
--radius-md:4px;

--border-rough:1px solid var(--color-divider-rough);
}

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
min-height:100vh;
background:var(--color-bg-graphite);
color:var(--color-text-primary);
font-family:var(--font-body);
font-size:var(--fs-base);
line-height:1.6;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}

img,
picture,
video,
canvas,
svg{
display:block;
max-width:100%;
height:auto;
}

input,
button,
textarea,
select{
font:inherit;
color:inherit;
background:none;
border:none;
outline:none;
}

button{
cursor:pointer;
}

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

ul,
ol{
list-style:none;
}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
font-weight:700;
text-transform:uppercase;
line-height:1.2;
margin-block-end:var(--space-sm);
}

h1{font-size:var(--fs-xxl);}
h2{font-size:var(--fs-xl);}
h3{font-size:var(--fs-lg);}
h4{font-size:var(--fs-md);}
h5{font-size:var(--fs-base);}
h6{font-size:var(--fs-sm);}

p{
margin-block-end:var(--space-sm);
}

ul,
ol{
margin-block-end:var(--space-sm);
padding-left:1.25rem;
}

li{
margin-block-end:var(--space-xs);
}

blockquote{
margin-block-end:var(--space-md);
padding-left:var(--space-sm);
border-left:2px solid var(--color-divider-rough);
}

hr{
border:none;
border-top:var(--border-rough);
margin-block:var(--space-md);
}

section{
padding-block:var(--space-lg);
}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad);
}

.surface{
background:var(--color-surface-block);
position:relative;
border-radius:var(--radius-sm);
}

.surface::after{
content:"";
position:absolute;
inset:0;
background:var(--color-overlay-grain);
pointer-events:none;
}

.stack > * + *{
margin-top:var(--space-sm);
}

.stack-lg > * + *{
margin-top:var(--space-md);
}

.cluster{
display:flex;
flex-wrap:wrap;
gap:var(--space-sm);
align-items:center;
}

.grid{
display:grid;
gap:var(--space-md);
}

.grid-2{
grid-template-columns:repeat(2,minmax(0,1fr));
}

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

@media (max-width:900px){
.grid-2,
.grid-3{
grid-template-columns:1fr;
}
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.75rem 1.25rem;
background:var(--color-accent-flame);
color:var(--color-text-inverse);
font-weight:700;
text-transform:uppercase;
border-radius:var(--radius-sm);
border:1px solid transparent;
transition:transform 0.1s ease, background 0.15s ease;
}

.btn:active{
transform:translateY(1px);
background:#c94d1c;
}

.btn-outline{
background:transparent;
color:var(--color-text-primary);
border:1px solid var(--color-divider-rough);
}

a.link{
position:relative;
}

a.link::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:100%;
height:1px;
background:var(--color-accent-flame);
opacity:0;
transition:opacity 0.2s ease;
}

a.link:hover::after,
a.link:focus-visible::after{
opacity:1;
}

input,
textarea,
select{
width:100%;
padding:0.75rem;
background:var(--color-surface-block);
border:1px solid var(--color-divider-rough);
border-radius:var(--radius-sm);
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--color-accent-flame);
}

.card{
padding:var(--space-md);
background:var(--color-surface-block);
border:var(--border-rough);
border-radius:var(--radius-sm);
position:relative;
}

.card > *:last-child{
margin-bottom:0;
}

.divider{
height:1px;
background:var(--color-divider-rough);
margin-block:var(--space-md);
}

.full-width{
width:100%;
}

.text-center{
text-align:center;
}

.hero{
padding-block:var(--space-xl);
text-align:center;
position:relative;
}

.hero .actions{
display:flex;
flex-wrap:wrap;
gap:var(--space-sm);
justify-content:center;
margin-top:var(--space-md);
}

@media (max-width:600px){
.hero{
padding-block:var(--space-lg);
}
.btn{
width:100%;
}
}