/* ==============================
   ROOT TOKENS
================================ */

:root{
--bg0:#07070C;
--bg1:#0F0F18;
--bg2:#16161F;
--bg3:#1E1E2A;
--bg4:#252533;

--border:rgba(255,255,255,0.08);
--border-strong:rgba(255,255,255,0.18);

--text-1:#FFFFFF;
--text-2:#A8A8B8;
--text-3:#5C5C70;

--purple:#C084FC;
--pink:#F472B6;
--orange:#FB923C;

--radius:16px;
--ease:cubic-bezier(0.4,0,0.2,1);
}

/* ==============================
   RESET
================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{
font-family:'Plus Jakarta Sans',sans-serif;
background:var(--bg0);
color:var(--text-1);
line-height:1.65;
}

/* ==============================
   GLOBAL CANVAS LAYER
================================ */

.main{
flex:1;
background:var(--bg1);
min-height:100vh;
}

.container{
max-width:1150px;
margin:0 auto;
padding:100px 80px;
}

/* ==============================
   SIDEBAR
================================ */

.layout{
display:flex;
}

.sidebar{
width:260px;
background:var(--bg0);
border-right:1px solid var(--border);
padding:60px 24px;
position:sticky;
top:0;
height:100vh;
}

.sidebar h3{
font-size:12px;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--text-3);
margin-bottom:28px;
}

.sidebar a{
display:block;
text-decoration:none;
color:var(--text-2);
margin-bottom:12px;
font-size:14px;
transition:.2s;
}

.sidebar a:hover,
.sidebar a.active{
color:var(--purple);
}

/* ==============================
   HERO
================================ */

.hero{
margin-bottom:120px;
}

.hero h1{
font-size:clamp(48px,5vw,64px);
font-weight:800;
background:linear-gradient(135deg,var(--purple),var(--pink));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:24px;
}

.hero p{
font-size:18px;
color:var(--text-2);
max-width:700px;
}

/* ==============================
   SECTION BLOCKS
================================ */

.section{
background:var(--bg2);
border:1px solid var(--border);
border-radius:var(--radius);
padding:60px;
margin-bottom:80px;
}

.section h2{
font-size:30px;
margin-bottom:32px;
}

/* ==============================
   CARDS
================================ */

.card{
background:var(--bg3);
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
margin-bottom:24px;
transition:.25s var(--ease);
}

.card:hover{
border-color:var(--border-strong);
background:var(--bg4);
}

/* ==============================
   GRID
================================ */

.grid-2{
display:grid;
gap:24px;
}

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

/* ==============================
   COLOR SYSTEM
================================ */

.color-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:16px;
}

.color-box{
height:100px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-family:'Space Mono',monospace;
font-size:14px;
color:#fff;
}

/* ==============================
   BUTTONS
================================ */

.btn{
padding:12px 22px;
border-radius:12px;
font-weight:700;
border:none;
cursor:pointer;
transition:.25s var(--ease);
}

.btn-primary{
background:linear-gradient(135deg,var(--purple),var(--pink));
color:#fff;
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(168,85,247,.3);
}

.btn-secondary{
background:var(--bg4);
border:1px solid var(--border);
color:#fff;
}

.btn-ghost{
background:transparent;
color:var(--purple);
}

.btn-danger{
background:var(--orange);
color:#fff;
}

/* ==============================
   FORM
================================ */

input{
width:100%;
padding:14px;
background:var(--bg4);
border:1px solid var(--border);
border-radius:12px;
color:#fff;
margin-top:8px;
}

input:focus{
outline:none;
border-color:var(--purple);
}

/* ==============================
   DATA
================================ */

.data-box{
background:var(--bg3);
border:1px solid var(--border);
border-radius:var(--radius);
padding:40px;
text-align:center;
}

.big-number{
font-family:'Space Mono',monospace;
font-size:36px;
color:var(--purple);
display:block;
margin-bottom:8px;
}

.data-label{
font-size:14px;
color:var(--text-2);
}

/* ==============================
   PREMIUM
================================ */

.premium-card{
position:relative;
background:var(--bg3);
border:1px solid var(--border-strong);
border-radius:var(--radius);
padding:40px;
}

.premium-badge{
position:absolute;
top:20px;
right:20px;
background:linear-gradient(135deg,var(--purple),var(--pink));
color:#fff;
padding:4px 12px;
border-radius:20px;
font-size:11px;
}

/* ==============================
   RESPONSIVE
================================ */

@media(max-width:1100px){

.layout{flex-direction:column;}

.sidebar{
width:100%;
height:auto;
border-right:none;
border-bottom:1px solid var(--border);
}

.container{
padding:60px 24px;
}

}