:root{
--bg-primary:#0d0714;
--bg-glass:rgba(13,7,20,0.72);
--surface-tile:#18121e;
--border-sharp:#23202d;

--accent-neon-violet:#c084fc;
--accent-pink:#ff3ecf;
--accent-lime:#baff3c;

--text-primary:#f6f6ff;
--text-secondary:#bcb3d5;
--text-link:#c084fc;

--button-primary-bg:#c084fc;
--button-primary-text:#0d0714;
--button-secondary-bg:#18121e;
--button-secondary-text:#c084fc;

--font-heading:Orbitron,"Segoe UI","Arial Black",sans-serif;
--font-body:Inter,"Segoe UI",Arial,sans-serif;

--fs-1:clamp(2rem,4vw,2.8rem);
--fs-2:clamp(1.75rem,3vw,2.2rem);
--fs-3:1.5rem;
--fs-4:1.125rem;
--fs-5:1rem;
--fs-6:0.875rem;

--space-1:0.5rem;
--space-2:1rem;
--space-3:1.5rem;
--space-4:2.5rem;
--space-5:4rem;

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

--border-width:2px;
--radius:0px;

--transition-fast:120ms linear;
}

@media(min-width:768px){
:root{
--container-pad:2rem;
}
}

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

html,body{
height:100%;
}

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

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

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

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

a:hover{
color:var(--accent-lime);
}

:focus-visible{
outline:2px solid var(--accent-neon-violet);
outline-offset:2px;
}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
text-transform:uppercase;
letter-spacing:0.04em;
font-weight:700;
color:var(--text-primary);
line-height:1.2;
margin-block-end:var(--space-2);
}

h1{font-size:var(--fs-1);}
h2{font-size:var(--fs-2);}
h3{font-size:var(--fs-3);}
h4{font-size:var(--fs-4);}
h5{font-size:var(--fs-5);}
h6{font-size:var(--fs-6);}

p{
margin-block-end:var(--space-2);
color:var(--text-secondary);
}

ul,ol{
margin-block-end:var(--space-2);
padding-inline-start:1.25rem;
}

li{
margin-block-end:0.25rem;
}

blockquote{
margin-block-end:var(--space-3);
padding-left:var(--space-2);
border-left:2px solid var(--accent-neon-violet);
color:var(--text-secondary);
}

hr{
border:none;
border-top:1px solid var(--border-sharp);
margin-block:var(--space-4);
}

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

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

@media(max-width:600px){
.section{
padding-block:calc(var(--space-5)*0.7);
}
}

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

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

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

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

.flex-col{
flex-direction:column;
}

.flex-wrap{
flex-wrap:wrap;
}

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

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

.tile{
background:var(--bg-glass);
backdrop-filter:blur(12px);
border:var(--border-width) solid var(--border-sharp);
padding:var(--space-3);
position:relative;
}

.tile::before{
content:"";
position:absolute;
inset:0;
border-left:2px solid var(--accent-neon-violet);
pointer-events:none;
}

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

.surface{
background:var(--surface-tile);
border:var(--border-width) solid var(--border-sharp);
padding:var(--space-3);
}

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.75rem 1.25rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.04em;
cursor:pointer;
border:var(--border-width) solid transparent;
transition:all var(--transition-fast);
}

.btn-primary{
background:var(--button-primary-bg);
color:var(--button-primary-text);
}

.btn-primary:hover{
box-shadow:0 0 6px var(--accent-pink);
}

.btn-secondary{
background:var(--button-secondary-bg);
color:var(--button-secondary-text);
border-color:var(--accent-neon-violet);
}

.btn-secondary:hover{
box-shadow:0 0 6px var(--accent-lime);
}

.btn:active{
transform:translateY(-2px);
}

.input,
.textarea,
.select{
width:100%;
padding:0.65rem 0.75rem;
background:var(--surface-tile);
border:var(--border-width) solid var(--border-sharp);
color:var(--text-primary);
}

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

.card-group{
display:flex;
flex-direction:column;
gap:var(--space-3);
}

.nav-toggle{
display:flex;
flex-direction:column;
gap:var(--space-2);
}

.footer{
padding-block:var(--space-3);
border-top:1px solid var(--border-sharp);
color:var(--text-secondary);
}

.glow-hover{
transition:box-shadow var(--transition-fast);
}

.glow-hover:hover{
box-shadow:0 0 6px var(--accent-pink);
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

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