:root{
--color-surface-primary:#09050E;
--color-surface-secondary:#180F25;
--color-surface-glass:rgba(24,15,37,0.72);
--color-text-primary:#EAE6ED;
--color-text-secondary:#B6AFC5;
--color-accent-primary:#9D4EDD;
--color-border-premium:rgba(234,230,237,0.12);
--color-shadow-deep:rgba(24,15,37,0.85);
--color-success:#44FFB3;
--color-warning:#FFD700;

--font-heading:'UnifrakturCook','IM Fell English SC',serif;
--font-body:'Inter','Helvetica Neue',Arial,sans-serif;

--text-xxl:3.5rem;
--text-xl:2.25rem;
--text-lg:1.5rem;
--text-md:1.125rem;
--text-base:1rem;
--text-sm:0.875rem;

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

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

--container-max:1200px;

--shadow-deep:0 24px 60px var(--color-shadow-deep);

--transition-fast:180ms ease;
}

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

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

body{
min-height:100%;
background:var(--color-surface-primary);
color:var(--color-text-primary);
font-family:var(--font-body);
font-size:var(--text-base);
line-height:1.6;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}

body.nav-open{
overflow:hidden;
}

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

img{
object-fit:cover;
}

a{
color:inherit;
text-decoration:none;
transition:color var(--transition-fast),opacity 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);
line-height:1.2;
letter-spacing:0.02em;
}

h1{
font-size:clamp(2.5rem,5vw,var(--text-xxl));
margin-block-end:var(--space-3);
}

h2{
font-size:clamp(2rem,4vw,var(--text-xl));
margin-block-end:var(--space-3);
}

h3{
font-size:var(--text-lg);
margin-block-end:var(--space-2);
}

h4{
font-size:var(--text-md);
margin-block-end:var(--space-2);
}

h5,h6{
font-size:var(--text-base);
margin-block-end:var(--space-1);
}

p{
font-size:var(--text-base);
color:var(--color-text-secondary);
margin-block-end:var(--space-3);
}

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

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

blockquote{
margin-block-end:var(--space-4);
padding:var(--space-3);
background:var(--color-surface-glass);
border:1px solid var(--color-border-premium);
border-left:2px solid var(--color-accent-primary);
}

hr{
border:none;
height:1px;
background:var(--color-border-premium);
margin-block:var(--space-4);
}

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

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:clamp(var(--space-3),4vw,var(--space-5));
}

.section{
padding-block:clamp(var(--space-4),6vw,var(--space-6));
}

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

.surface-glass{
background:var(--color-surface-glass);
backdrop-filter:blur(10px);
}

.panel{
background:var(--color-surface-glass);
border:1px solid var(--color-border-premium);
box-shadow:var(--shadow-deep);
padding:clamp(var(--space-3),3vw,var(--space-4));
border-radius:var(--radius-1);
}

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

.card{
background:var(--color-surface-glass);
border:1px solid var(--color-border-premium);
box-shadow:var(--shadow-deep);
border-radius:var(--radius-1);
overflow:hidden;
transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);
}

.card:hover{
transform:scale(1.02);
border-color:var(--color-accent-primary);
}

.card-body{
padding:var(--space-3);
}

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

.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-1);
padding:0.6em 1.4em;
font-family:var(--font-heading);
font-size:var(--text-sm);
text-transform:uppercase;
letter-spacing:0.08em;
background:var(--color-accent-primary);
color:var(--color-text-primary);
border:1px solid transparent;
border-radius:var(--radius-0);
transition:box-shadow var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);
}

.button:hover{
box-shadow:0 0 12px var(--color-accent-primary);
transform:translateY(-1px);
}

.button:active{
transform:translateY(0);
}

.button-ghost{
background:transparent;
border:1px solid var(--color-accent-primary);
}

.input,
textarea,
select{
width:100%;
background:var(--color-surface-secondary);
border:1px solid var(--color-border-premium);
padding:0.6em 0.8em;
border-radius:var(--radius-0);
transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}

.input:focus,
textarea:focus,
select:focus{
border-color:var(--color-accent-primary);
box-shadow:0 0 8px var(--color-accent-primary);
}

.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-wrap{
flex-wrap:wrap;
}

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

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

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

.text-uppercase{
text-transform:uppercase;
letter-spacing:0.08em;
}

.line-accent{
height:2px;
width:100%;
background:var(--color-accent-primary);
box-shadow:0 0 8px var(--color-accent-primary);
}

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

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

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