:root{
--color-bg:#151A22;
--color-bg-alt:#222A36;
--color-bg-elev:#2D3746;
--color-border:#3C4655;

--color-text:#F6F5F2;
--color-text-muted:#C2CBD7;

--color-accent-green:#5BBE63;
--color-accent-blue:#4A8DFF;
--color-accent-gold:#D6A437;
--color-accent-purple:#9A5CFF;
--color-error:#FF5C5C;

--color-scrollbar:#2D3746;

--font-heading:'Cinzel', serif;
--font-body:'Inter','Segoe UI',Arial,sans-serif;

--fs-1:clamp(2.2rem,4vw,3.2rem);
--fs-2:clamp(1.9rem,3vw,2.6rem);
--fs-3:clamp(1.6rem,2.5vw,2rem);
--fs-4:clamp(1.3rem,2vw,1.5rem);
--fs-5:1.25rem;
--fs-6:1.0625rem;
--fs-7:0.9375rem;

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

--radius:0.75rem;

--shadow-soft:0 2px 12px rgba(44,52,70,0.18);

--container-max:1240px;
--container-pad:2rem;
}

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

html{
scroll-behavior:smooth;
-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(--fs-6);
line-height:1.6;
text-rendering:optimizeLegibility;
}

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

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

button{
cursor:pointer;
}

ul{
list-style:none !important;
padding:0;
margin:0;
}

a{
color:var(--color-accent-green);
text-decoration:none;
transition:color .2s ease;
}

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

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

h1,h2,h3,h4,h5,h6{
font-family:var(--font-heading);
line-height:1.2;
color:var(--color-text);
letter-spacing:0.02em;
}

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

p{
margin-bottom:var(--space-4);
color:var(--color-text-muted);
}

blockquote{
margin-bottom:var(--space-4);
padding-left:var(--space-4);
border-left:2px solid var(--color-accent-purple);
color:var(--color-text);
}

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

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

@media (max-width:768px){
.container{
padding-inline:1rem;
}
}

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

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

.surface{
background:var(--color-bg-alt);
border:1px solid var(--color-border);
}

.surface-elevated{
background:var(--color-bg-elev);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:var(--shadow-soft);
}

.card{
background:var(--color-bg-elev);
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:var(--space-5);
display:flex;
flex-direction:column;
gap:var(--space-3);
min-width:0;
}

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

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

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

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

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

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

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.75rem 1.25rem;
border-radius:var(--radius);
font-weight:600;
background:var(--color-accent-green);
color:#fff !important;
transition:all .2s ease;
}

.btn:hover{
background:var(--color-accent-blue);
}

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

.btn-outline{
background:transparent;
border:1px solid var(--color-border);
color:var(--color-text);
}

.input{
width:100%;
padding:0.75rem 1rem;
border-radius:var(--radius);
background:var(--color-bg-alt);
border:1px solid var(--color-border);
color:var(--color-text);
}

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

.input:focus{
border-color:var(--color-accent-blue);
}

.progress{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
background:var(--color-accent-green);
z-index:999;
}

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:var(--color-bg);
}

::-webkit-scrollbar-thumb{
background:var(--color-scrollbar);
border-radius:10px;
}

body,html{
overflow-x:hidden;
}