:root{
    --bg:#0c0c0e;
    --surface:#141416;
    --surface2:#1c1c20;
    --border:rgba(255,255,255,0.08);
    --border2:rgba(255,255,255,0.14);
    --text:#f0ede8;
    --muted:#9896a0;
    --accent:#a78bfa;
    --accent2:#d946ef;
    --tag-bg:rgba(167,139,250,0.1);
    --tag-border:rgba(167,139,250,0.25);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
background:var(--bg);
color:var(--text);
font-family:'DM Sans',sans-serif;
overflow-x:hidden;
}
body::before{
content:'';
position:fixed;
inset:0;
background:
radial-gradient(circle at top left, rgba(168,85,247,0.18), transparent 35%),
radial-gradient(circle at bottom right, rgba(217,70,239,0.15), transparent 35%);
z-index:-1;
}
.navbar{
position:sticky;
top:0;
z-index:100;
backdrop-filter:blur(14px);
background:rgba(12,12,14,0.82);
border-bottom:1px solid var(--border);
}
.nav-inner{
max-width:1200px;
margin:auto;
padding:18px 32px;
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
color:var(--text);
}
.logo img{
width:52px;
height:52px;
border-radius:14px;
object-fit:cover;
box-shadow:0 0 25px rgba(168,85,247,0.4);
}
.logo-title{
font-family:'Syne',sans-serif;
font-weight:800;
font-size:24px;
}
.logo-sub{
font-size:11px;
color:var(--muted);
letter-spacing:0.12em;
text-transform:uppercase;
}
.nav-links{
display:flex;
gap:24px;
}
.nav-links a{
text-decoration:none;
color:var(--muted);
transition:0.2s;
}
.nav-links a:hover{color:white}
.hero{
max-width:1200px;
margin:auto;
padding:120px 32px 90px;
}/* NAVBAR */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    backdrop-filter: blur(14px);
    background: rgba(12, 12, 14, 0.72);

    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-inner {
    max-width: 1250px;

    margin: auto;

    padding: 16px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

/* LOGO */

.logo {
    display: flex;
    align-items: center;

    gap: 14px;

    text-decoration: none;
}

.logo img {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.logo-title {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 700;

    color: #fff;

    line-height: 1;
}

.logo-sub {
    font-size: 12px;

    color: #8f8f98;

    margin-top: 3px;
}

/* LINKS */

.nav-links {
    display: flex;
    align-items: center;

    gap: 14px;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    color: #cfcfd6;

    transition: 0.2s ease;
}

.nav-links a:hover {
    background: rgba(255,255,255,0.06);

    color: #fff;
}

/* MOBILE MENU BUTTON */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    background: transparent;

    border: none;

    cursor: pointer;

    position: relative;
}

.menu-toggle span {
    position: absolute;

    left: 10px;

    width: 24px;
    height: 2px;

    background: white;

    transition: 0.3s ease;
}

.menu-toggle span:nth-child(1) {
    top: 14px;
}

.menu-toggle span:nth-child(2) {
    top: 21px;
}

.menu-toggle span:nth-child(3) {
    top: 28px;
}

/* ANIMATION */

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 21px;
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 21px;
}

/* MOBILE */

@media (max-width: 850px) {

    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        flex-direction: column;
        align-items: flex-start;

        padding: 18px 24px;

        background: #111114;

        border-bottom: 1px solid rgba(255,255,255,0.06);

        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        width: 100%;
    }

    .logo-sub {
        display: none;
    }

    .nav-inner {
        padding: 14px 18px;
    }
}
.hero-badge{
display:inline-flex;
padding:6px 14px;
border-radius:999px;
background:var(--tag-bg);
border:1px solid var(--tag-border);
color:var(--accent);
font-size:12px;
margin-bottom:28px;
font-family:'DM Mono',monospace;
}
.hero h1{
font-family:'Syne',sans-serif;
font-size:clamp(52px,8vw,92px);
line-height:0.95;
letter-spacing:-0.05em;
margin-bottom:28px;
max-width:850px;
}
.hero h1 span{color:var(--accent)}
.hero p{
max-width:700px;
color:var(--muted);
font-size:18px;
line-height:1.8;
}
.socials{
display:flex;
gap:14px;
margin-top:26px;
}
.socials a{
text-decoration:none;
color:var(--muted);
border:1px solid var(--border);
padding:10px 16px;
border-radius:12px;
}
.section{
max-width:1200px;
margin:auto;
padding:0 32px 80px;
}
.section-title{
font-family:'Syne',sans-serif;
font-size:42px;
margin-bottom:12px;
}
.section-desc{
color:var(--muted);
line-height:1.8;
}
.resource-grid{
margin-top:34px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:22px;
}
.resource-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:24px;
padding:28px;
transition:0.25s;
}
.resource-card:hover{
transform:translateY(-6px);
border-color:var(--border2);
}
.resource-badge{
display:inline-flex;
margin-bottom:18px;
padding:4px 10px;
border-radius:999px;
background:var(--tag-bg);
border:1px solid var(--tag-border);
color:var(--accent);
font-size:11px;
font-family:'DM Mono',monospace;
}
.resource-title{
font-family:'Syne',sans-serif;
font-size:30px;
line-height:1.15;
margin-bottom:16px;
}
.resource-desc{
color:var(--muted);
line-height:1.8;
margin-bottom:24px;
}
.resource-btn{
display:inline-flex;
text-decoration:none;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:white;
padding:12px 18px;
border-radius:14px;
font-weight:700;
}
.footer{
border-top:1px solid var(--border);
max-width:1200px;
margin:auto;
padding:40px 32px;
display:flex;
justify-content:space-between;
color:var(--muted);
}
.footer strong{color:white}
.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.72);
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}
.modal{
width:100%;
max-width:480px;
background:var(--surface);
border:1px solid var(--border2);
border-radius:24px;
padding:32px;
}
.modal h2{
font-family:'Syne',sans-serif;
font-size:34px;
margin-bottom:14px;
}
.modal p{
color:var(--muted);
line-height:1.8;
margin-bottom:24px;
}
.form-group{margin-bottom:18px}
.form-group label{
display:block;
margin-bottom:8px;
color:var(--muted);
}
.form-group input{
width:100%;
background:#0f0f12;
border:1px solid var(--border);
border-radius:14px;
padding:14px;
color:white;
}
.submit-btn{
width:100%;
border:none;
cursor:pointer;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:white;
padding:14px;
border-radius:14px;
font-weight:700;
}
.resource-wrapper{
max-width:1200px;
margin:auto;
padding:40px 20px 100px;
}
@media(max-width:768px){
.hero{padding-top:70px}
.hero h1{font-size:58px}
.nav-inner{padding:18px 20px}
.hero,.section,.footer{padding-left:20px;padding-right:20px}
.footer{flex-direction:column;gap:10px}
}