:root{
--color-bg:#0B0C10;
--color-surface:#1F2833;
--color-text:#FFFFFF;
--color-text-secondary:#B6BAC1;
--color-accent:#CCFF00;
--color-border:#2B323C;
--color-inverse:#FFFFFF;

--font-heading:"Montserrat Alternates",Arial,sans-serif;
--font-body:"Inter",Arial,sans-serif;
--font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;

--text-xxl:2.75rem;
--text-xl:2rem;
--text-lg:1.5rem;
--text-md:1.125rem;
--text-base:1rem;
--text-sm:0.875rem;

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

--container-max:1240px;
--container-pad:clamp(1rem,2vw,2.5rem);

--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;

--border-thin:2px;

--transition-fast:150ms ease;
--transition-med:200ms ease;
}

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

html{
font-size:100%;
-webkit-text-size-adjust:100%;
}

body{
min-height:100vh;
background:var(--color-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:var(--text-base);
line-height:1.5;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}

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

img{
object-fit:cover;
}

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

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

button{
cursor:pointer;
}

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

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

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

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

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

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

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

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

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

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

.surface{
background:var(--color-surface);
border:var(--border-thin) solid var(--color-border);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

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

.card{
background:var(--color-surface);
border:var(--border-thin) solid var(--color-border);
padding:var(--space-3);
clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
display:flex;
flex-direction:column;
gap:var(--space-2);
min-width:0;
}

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

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

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

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

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

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

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

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

.justify-between{
justify-content:space-between;
}

.aspect{
position:relative;
width:100%;
overflow:hidden;
}

.aspect > *{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

.aspect-16-9{aspect-ratio:16/9;}
.aspect-3-2{aspect-ratio:3/2;}
.aspect-1-1{aspect-ratio:1/1;}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
min-height:44px;
padding:0 var(--space-3);
background:var(--color-accent);
color:#000;
font-family:var(--font-heading);
font-size:var(--text-sm);
text-transform:uppercase;
font-style:italic;
letter-spacing:0.04em;
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
transition:var(--transition-fast);
white-space:nowrap;
}

.btn:hover{
filter:brightness(1.1);
}

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

.input,textarea,select{
width:100%;
min-height:44px;
padding:0 var(--space-2);
background:var(--color-surface);
border:var(--border-thin) solid var(--color-border);
color:var(--color-text);
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

label{
display:block;
margin-bottom:var(--space-1);
font-size:var(--text-sm);
color:var(--color-text-secondary);
}

.form-group{
display:flex;
flex-direction:column;
gap:var(--space-1);
margin-bottom:var(--space-3);
}

.table{
width:100%;
border-collapse:collapse;
font-family:var(--font-mono);
font-size:var(--text-sm);
}

.table th,.table td{
padding:var(--space-1);
border-bottom:var(--border-thin) solid var(--color-border);
text-align:left;
}

.table tr:last-child td{
border-bottom:none;
}

.badge{
display:inline-flex;
align-items:center;
gap:0.25rem;
padding:0.25rem 0.5rem;
font-size:var(--text-sm);
font-family:var(--font-mono);
background:var(--color-surface);
border:var(--border-thin) solid var(--color-border);
}

.badge-accent{
background:var(--color-accent);
color:#000;
border-color:var(--color-accent);
}

hr{
border:none;
border-top:var(--border-thin) solid var(--color-border);
margin-block:var(--space-4);
}