* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: Inter, Arial, sans-serif;

    background: #08111f;

    color: #e7edf7;

}



.topbar {

    height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 7%;

    border-bottom: 1px solid #1c2a3d;

    background: rgba(8,17,31,.96);

}



.brand {

    display: flex;

    gap: 12px;

    align-items: center;

}



.brand div:last-child {

    display: flex;

    flex-direction: column;

}



.brand span {

    color: #8290a7;

    font-size: 12px;

}



.logo {

    width: 42px;

    height: 42px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    font-weight: 800;

    color: #07111e;

    background: #45e0b8;

}



nav {

    display: flex;

    gap: 30px;

}



nav a {

    color: #b8c2d1;

    text-decoration: none;

    font-size: 14px;

}



.hero {

    min-height: 520px;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 70px;

    align-items: center;

    padding: 70px 8%;

    background:

        radial-gradient(circle at 75% 20%, #123d4b 0, transparent 30%),

        #08111f;

}



.badge,

.section-title span {

    color: #45e0b8;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 700;

}



.hero h1 {

    font-size: 58px;

    line-height: 1.05;

    margin: 18px 0;

    max-width: 650px;

}



.hero h1 span {

    color: #45e0b8;

}



.hero p {

    max-width: 610px;

    color: #9ba8ba;

    line-height: 1.8;

    font-size: 17px;

}



.hero-buttons {

    margin-top: 32px;

    display: flex;

    gap: 14px;

}



.btn-primary,

.btn-secondary {

    padding: 13px 22px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

}



.btn-primary {

    background: #45e0b8;

    color: #06121b;

}



.btn-secondary {

    border: 1px solid #34465d;

    color: #d9e2ed;

}



.terminal-card {

    background: #050b13;

    border: 1px solid #26364a;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(0,0,0,.35);

}



.terminal-header {

    background: #111c2a;

    padding: 13px 16px;

    display: flex;

    gap: 7px;

    align-items: center;

}



.terminal-header span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #536174;

}



.terminal-header small {

    margin-left: auto;

    color: #78879b;

}



pre {

    padding: 25px;

    color: #ccd7e5;

    line-height: 1.8;

    overflow-x: auto;

}



.sql {

    color: #45e0b8;

}



.success {

    margin: 0 20px 20px;

    padding: 12px;

    border-radius: 7px;

    background: #0b2925;

    color: #45e0b8;

    font-size: 13px;

}



.stats {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    max-width: 1100px;

    margin: -30px auto 40px;

    background: #101b2a;

    border: 1px solid #243348;

    border-radius: 12px;

    position: relative;

}



.stats div {

    padding: 25px;

    text-align: center;

}



.stats strong {

    display: block;

    font-size: 28px;

    color: #45e0b8;

}



.stats span {

    color: #8796aa;

    font-size: 13px;

}



.section {

    padding: 80px 8%;

}



.section-title {

    max-width: 700px;

    margin-bottom: 42px;

}



.section-title h2 {

    font-size: 36px;

    margin: 10px 0;

}



.section-title p {

    color: #8f9db0;

    line-height: 1.7;

}



.grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}



.level-card,

.lab-card {

    border: 1px solid #24344a;

    background: #101b2a;

    border-radius: 12px;

    padding: 23px;

    transition: .2s;

}



.level-card:hover,

.lab-card:hover {

    transform: translateY(-4px);

    border-color: #45e0b8;

}



.level-number {

    color: #45e0b8;

    font-size: 12px;

    font-weight: 700;

}



.level-card h3 {

    margin: 12px 0;

}



.level-card p,

.lab-card p {

    color: #8f9db0;

    line-height: 1.6;

    font-size: 14px;

}



.dark-section {

    background: #060d17;

}



.labs-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}



.lab-icon {

    color: #45e0b8;

    font-weight: 800;

    font-size: 13px;

}



.lab-card small {

    color: #52647b;

}



.loading {

    color: #7f90a6;

}



footer {

    border-top: 1px solid #1c293a;

    padding: 35px 8%;

    display: flex;

    justify-content: space-between;

    color: #748399;

}



@media (max-width: 850px) {

    .hero {

        grid-template-columns: 1fr;

    }



    .hero h1 {

        font-size: 42px;

    }



    .grid,

    .labs-grid {

        grid-template-columns: 1fr;

    }



    .stats {

        grid-template-columns: repeat(2, 1fr);

        margin: 20px;

    }



    nav {

        display: none;

    }

}