:root{
--color-bg-primary:#0B0C10;
--color-surface-secondary:#1F2833;
--color-surface-hover:#232B36;
--color-text-primary:#FFFFFF;
--color-text-muted:#B0B5BE;
--color-accent:#CCFF00;
--color-divider:rgba(204,255,0,0.20);

--font-heading:"Montserrat Alternates","Arial Black",Arial,sans-serif;
--font-body:"Inter",Arial,sans-serif;
--font-mono:"Roboto Mono",monospace;

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

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

--container-max:1200px;
--gutter-desktop:1.5rem;
--gutter-mobile:1rem;

--notch:10px;

--border-accent:2px solid var(--color-accent);
--transition-fast:0.1s ease;
}

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

html,body{
height:100%;
}

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

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

img{
object-fit:cover;
}

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

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

button{
cursor:pointer;
}

ul,ol{
list-style:none;
}

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

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-sm);}
h6{font-size:var(--fs-base);}

p{
font-size:var(--fs-base);
color:var(--color-text-primary);
margin-block-end:var(--space-2);
}

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

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

li{
margin-block-end:0.4em;
}

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

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

@media(max-width:700px){
.container{
padding-inline:var(--gutter-mobile);
}
}

.section{
padding-block:var(--space-4);
position:relative;
}

.surface{
background:var(--color-surface-secondary);
padding:var(--space-3);
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}

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

.stack > *{
margin-block-end:var(--space-2);
}

.stack > *:last-child{
margin-block-end:0;
}

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

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

@media(max-width:700px){
.grid{
grid-template-columns:1fr;
}
}

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

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

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

.media-frame{
position:relative;
width:100%;
overflow:hidden;
background:var(--color-surface-secondary);
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}

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

.ratio-16x9{
aspect-ratio:16/9;
}

.ratio-4x3{
aspect-ratio:4/3;
}

.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.7em 1.4em;
font-family:var(--font-heading);
font-size:var(--fs-sm);
text-transform:uppercase;
font-style:italic;
border:var(--border-accent);
color:var(--color-accent);
background:transparent;
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
transition:all var(--transition-fast);
}

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

.button:focus{
outline:none;
border:var(--border-accent);
}

.label{
display:inline-block;
padding:0.3em 0.6em;
font-family:var(--font-heading);
font-size:var(--fs-xs);
text-transform:uppercase;
color:#000;
background:var(--color-accent);
clip-path:polygon(var(--notch) 0,100% 0,100% 100%,0 100%);
}

.divider{
width:100%;
height:2px;
background:linear-gradient(120deg,transparent, var(--color-divider), transparent);
margin-block:var(--space-3);
}

.card{
background:var(--color-surface-secondary);
padding:var(--space-3);
transition:transform var(--transition-fast),background var(--transition-fast);
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
}

.card:hover{
transform:scale(1.03);
background:var(--color-surface-hover);
}

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

.mono{
font-family:var(--font-mono);
}

.number-badge{
font-family:var(--font-mono);
font-size:var(--fs-lg);
color:var(--color-accent);
}

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

p,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span {
  overflow-wrap: anywhere;
  word-break: normal;
}

.btn,
.btn-outline {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  line-height: 1.35;
}