:root{
--color-bg-primary:#161718;
--color-surface:#232527;
--color-text-primary:#F3F5F1;
--color-text-secondary:#B3B5B1;
--color-accent:#38FF6C;
--color-border:#353738;
--color-overlay:rgba(22,23,24,0.85);

--font-heading:Oswald,Arial Narrow,sans-serif;
--font-body:Inter,Arial,sans-serif;

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

--space-0:0px;
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:32px;
--space-5:48px;
--space-6:64px;

--container-max:1200px;
--container-pad:24px;

--border-thin:1px solid var(--color-border);
--border-accent:2px solid var(--color-accent);

--radius-none:0px;
--radius-sm:2px;

--transition-fast:100ms linear;
}

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

html{
font-size:16px;
scroll-behavior:smooth;
}

body{
background:var(--color-bg-primary);
color:var(--color-text-primary);
font-family:var(--font-body);
font-size:var(--fs-base);
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
word-break:break-word;
}

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

img{
object-fit:cover;
}

a{
color:var(--color-accent);
text-decoration:none;
transition:var(--transition-fast);
}

a:hover,
a:focus-visible{
outline:2px solid var(--color-accent);
outline-offset:2px;
}

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

button{
cursor:pointer;
text-transform:uppercase;
font-weight:700;
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 var(--space-3);
border:var(--border-accent);
background:transparent;
color:var(--color-text-primary);
transition:var(--transition-fast);
}

button:hover,
button:focus-visible{
background:var(--color-accent);
color:#000;
}

button:active{
background:var(--color-accent);
color:#000;
}

button:disabled{
background:#2a2c2d;
color:#777;
border:1px solid #2a2c2d;
cursor:not-allowed;
}

input,
textarea,
select{
width:100%;
min-height:48px;
padding:0 var(--space-2);
background:var(--color-surface);
border:var(--border-thin);
border-radius:var(--radius-sm);
}

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

h1,
h2,
h3,
h4,
h5,
h6{
font-family:var(--font-heading);
text-transform:uppercase;
line-height:1.1;
letter-spacing:0.02em;
}

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{
color:var(--color-text-primary);
}

small{
font-size:var(--fs-sm);
color:var(--color-text-secondary);
}

ul,
ol{
padding-left:var(--space-3);
}

blockquote{
border-left:4px solid var(--color-accent);
padding-left:var(--space-2);
color:var(--color-text-secondary);
}

h1{margin-bottom:var(--space-4);}
h2{margin-bottom:var(--space-3);}
h3{margin-bottom:var(--space-3);}
h4{margin-bottom:var(--space-2);}
h5{margin-bottom:var(--space-2);}
h6{margin-bottom:var(--space-1);}
p{margin-bottom:var(--space-3);}
ul,
ol{margin-bottom:var(--space-3);}
blockquote{margin-bottom:var(--space-3);}

*:last-child{
margin-bottom:0;
}

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

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

.surface{
background:var(--color-surface);
border:var(--border-thin);
}

.panel{
background:var(--color-surface);
border:var(--border-thin);
padding:var(--space-5);
}

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

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

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

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

.flex{
display:flex;
gap:var(--space-3);
}

.flex-between{
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--space-3);
}

.flex-center{
display:flex;
align-items:center;
justify-content:center;
gap:var(--space-3);
}

.media{
position:relative;
overflow:hidden;
background:var(--color-bg-primary);
}

.media > img,
.media > video{
width:100%;
height:100%;
object-fit:cover;
}

.card{
background:var(--color-surface);
border:var(--border-thin);
display:flex;
flex-direction:column;
min-height:100%;
}

.card-body{
padding:var(--space-4);
display:flex;
flex-direction:column;
gap:var(--space-2);
}

.cta{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding-inline:var(--space-4);
border:var(--border-accent);
text-transform:uppercase;
font-weight:700;
transition:var(--transition-fast);
}

.cta:hover,
.cta:focus-visible{
background:var(--color-accent);
color:#000;
}

.hr{
height:1px;
background:var(--color-border);
width:100%;
}

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

@media (max-width:768px){
:root{
--container-pad:16px;
}

.grid-2,
.grid-3{
grid-template-columns:1fr;
}

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

button,
.cta{
width:100%;
}
}