:root{
--bg-primary:#030712;
--bg-secondary:#0f172a;
--surface-elevated:#1e293b;
--border-metallic:#334155;
--accent-cyan:#06b6d4;
--accent-amber:#ffd369;
--text-primary:#f1f5f9;
--text-secondary:#94a3b8;
--error:#ff3b3f;

--font-heading:Orbitron,'Eurostile','Arial Rounded MT Bold',Arial,sans-serif;
--font-body:'Inter','Roboto',Arial,sans-serif;

--fs-h1:clamp(1.9rem,3vw,2.5rem);
--fs-h2:clamp(1.6rem,2.4vw,2rem);
--fs-h3:clamp(1.3rem,2vw,1.5rem);
--fs-h4:1.125rem;
--fs-body:1rem;
--fs-small:0.875rem;

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

--container-max:1180px;
--container-pad:16px;

--radius-0:0px;
--radius-1:2px;

--border-width:2px;
--focus-ring:0 0 0 2px var(--accent-cyan);
}

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

html,body{
height:100%;
}

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

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

svg{
display:block;
}

a{
color:inherit;
text-decoration:none;
transition:color .2s ease;
}

a:hover,
a:focus-visible{
color:var(--accent-cyan);
}

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

button{
cursor:pointer;
}

ul{
list-style:none !important;
}

h1,h2,h3,h4{
font-family:var(--font-heading);
letter-spacing:0.05em;
text-transform:uppercase;
line-height:1.3;
margin-bottom:var(--space-4);
}

h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}

p{
margin-bottom:var(--space-3);
color:var(--text-primary);
}

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

ul,ol{
margin-bottom:var(--space-3);
}

blockquote{
margin-bottom:var(--space-4);
padding-left:var(--space-3);
border-left:var(--border-width) solid var(--border-metallic);
color:var(--text-secondary);
}

:where(h1,h2,h3,h4,p,ul,ol,blockquote):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);
}

@media (max-width:768px){
.section{
padding-block:var(--space-5);
}
}

.panel{
background:var(--bg-secondary);
border:var(--border-width) solid var(--border-metallic);
border-radius:var(--radius-1);
}

.surface{
background:var(--surface-elevated);
border:var(--border-width) solid var(--border-metallic);
border-radius:var(--radius-1);
}

.stack{
display:flex;
flex-direction:column;
gap:var(--space-3);
min-width:0;
}

.row{
display:flex;
flex-wrap:wrap;
gap:var(--space-3);
min-width:0;
}

.row > *{
min-width:0;
}

.center{
display:flex;
align-items:center;
justify-content:center;
}

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

.nav-toggle{
display:flex;
flex-direction:column;
gap:4px;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
padding:10px 16px;
font-family:var(--font-heading);
text-transform:uppercase;
letter-spacing:0.05em;
border:var(--border-width) solid var(--accent-cyan);
background:var(--accent-cyan);
color:#000;
transition:all .2s ease;
border-radius:var(--radius-1);
}

.button:hover,
.button:focus-visible{
background:transparent;
color:var(--accent-cyan);
box-shadow:var(--focus-ring);
}

.button.secondary{
border-color:var(--accent-amber);
background:var(--accent-amber);
color:#000;
}

.button.secondary:hover,
.button.secondary:focus-visible{
background:transparent;
color:var(--accent-amber);
}

.input{
width:100%;
padding:10px 12px;
background:var(--bg-secondary);
border:var(--border-width) solid var(--border-metallic);
color:var(--text-primary);
border-radius:var(--radius-1);
}

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

.input:focus{
border-color:var(--accent-cyan);
box-shadow:var(--focus-ring);
}

.card{
display:flex;
flex-direction:column;
gap:var(--space-3);
padding:var(--space-4);
background:var(--surface-elevated);
border:var(--border-width) solid var(--border-metallic);
border-radius:var(--radius-1);
min-width:0;
}

.grid-auto{
display:grid;
gap:var(--space-4);
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.media-frame{
background:var(--surface-elevated);
border:var(--border-width) solid var(--accent-cyan);
padding:var(--space-2);
border-radius:var(--radius-1);
}

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

.text-accent{
color:var(--accent-cyan);
}

.text-amber{
color:var(--accent-amber);
}

.focus-ring:focus-visible{
box-shadow:var(--focus-ring);
outline:none;
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}