:root {

    --bg-primary: #020617;
    --bg-secondary: #0f172a;

    --card-bg: rgba(15, 23, 42, 0.65);

    --border-color: rgba(255,255,255,0.08);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;

    --accent-primary: #3b82f6;
    --accent-secondary: #8b5cf6;

    --success: #22c55e;

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;

    --shadow:
        0 25px 60px rgba(0,0,0,0.45);

    --transition:
        0.25s ease;

}



* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    min-height: 100vh;

    background:
        var(--bg-primary);

    color:
        var(--text-primary);

    font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    overflow-x: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button {

    font-family: inherit;

    cursor: pointer;

}



img {

    max-width: 100%;

    display: block;

}



/* ===================================================== */
/* Background */
/* ===================================================== */


.background {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

}



.gradient {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .35;

}



.gradient.one {

    width: 500px;

    height: 500px;

    background:
        #2563eb;

    top: -200px;

    left: -150px;

    animation:
        float 12s infinite alternate;

}



.gradient.two {

    width: 600px;

    height: 600px;

    background:
        #9333ea;

    right: -200px;

    top: 200px;

    animation:
        float 15s infinite alternate-reverse;

}



.gradient.three {

    width: 400px;

    height: 400px;

    background:
        #06b6d4;

    bottom: -150px;

    left: 40%;

    animation:
        float 18s infinite alternate;

}



.noise {

    position: absolute;

    inset: 0;

    opacity: .04;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



.grid {

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mask-image:
        linear-gradient(
            black,
            transparent
        );

}



@keyframes float {

    from {

        transform:
            translateY(0)
            scale(1);

    }


    to {

        transform:
            translateY(80px)
            scale(1.15);

    }

}





/* ===================================================== */
/* Announcement */
/* ===================================================== */


.announcement {

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:12px 20px;

    border-bottom:
        1px solid var(--border-color);

    background:
        rgba(15,23,42,.65);

    backdrop-filter:
        blur(20px);

    font-size:.9rem;

}



.announcement-pill {

    padding:
        4px 10px;

    border-radius:
        999px;

    background:
        rgba(59,130,246,.15);

    color:
        #60a5fa;

    font-size:.75rem;

    font-weight:700;

}



.announcement-text {

    color:
        var(--text-secondary);

}



.announcement-link {

    color:
        #60a5fa;

    font-weight:
        600;

}





/* ===================================================== */
/* Navbar */
/* ===================================================== */


.header {

    position:
        sticky;

    top:0;

    z-index:100;

}



.navbar {

    max-width:
        1280px;

    margin:
        auto;

    padding:
        20px 30px;

    display:flex;

    justify-content:
        space-between;

    align-items:center;

    background:
        rgba(2,6,23,.55);

    backdrop-filter:
        blur(25px);

}



.logo {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:
        1.4rem;

    font-weight:
        800;

}



.logo img {

    width:
        38px;

    height:
        38px;

    border-radius:
        10px;

}



.nav-links {

    list-style:none;

    display:flex;

    align-items:center;

    gap:30px;

}



.nav-links a {

    color:
        var(--text-secondary);

    transition:
        var(--transition);

}



.nav-links a:hover {

    color:
        white;

}



.github-button {

    padding:
        10px 18px;

    border:
        1px solid var(--border-color);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.05);

}





.mobile-toggle {

    display:none;

}





/* ===================================================== */
/* Hero */
/* ===================================================== */


.hero {

    padding:
        100px 30px 80px;

}



.hero-container {

    max-width:
        1280px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:center;

}



.hero-badge {

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
        8px 15px;

    border-radius:
        999px;

    border:
        1px solid var(--border-color);

    background:
        rgba(255,255,255,.05);

    color:
        var(--text-secondary);

    margin-bottom:
        30px;

}



.hero-dot {

    width:
        8px;

    height:
        8px;

    background:
        var(--success);

    border-radius:
        50%;

}



.hero h1 {

    font-size:
        clamp(3rem,6vw,5rem);

    line-height:
        1.05;

    letter-spacing:
        -0.05em;

}



.gradient-text {

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #c084fc
        );

    -webkit-background-clip:
        text;

    color:
        transparent;

}



.hero p {

    margin-top:
        30px;

    max-width:
        600px;

    color:
        var(--text-secondary);

    font-size:
        1.15rem;

    line-height:
        1.8;

}

/* ===================================================== */
/* Hero Buttons */
/* ===================================================== */


.hero-buttons {

    display:flex;

    gap:16px;

    margin-top:
        40px;

}



.button {

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:
        14px 28px;

    border-radius:
        999px;

    font-weight:
        700;

    transition:
        var(--transition);

}



.button.primary {

    background:
        linear-gradient(
            135deg,
            var(--accent-primary),
            var(--accent-secondary)
        );

    color:white;

    box-shadow:
        0 15px 40px rgba(59,130,246,.35);

}



.button.primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px rgba(59,130,246,.5);

}



.button.secondary {

    border:
        1px solid var(--border-color);

    background:
        rgba(255,255,255,.05);

}



.button.secondary:hover {

    background:
        rgba(255,255,255,.1);

}



.button.full {

    width:100%;

}





/* ===================================================== */
/* Hero Stats */
/* ===================================================== */


.hero-stats {

    display:flex;

    gap:45px;

    margin-top:
        60px;

}



.hero-stats h3 {

    font-size:
        2rem;

}



.hero-stats span {

    color:
        var(--text-secondary);

    font-size:
        .9rem;

}





/* ===================================================== */
/* Terminal */
/* ===================================================== */


.terminal-window {

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-large);

    overflow:hidden;

    background:
        rgba(15,23,42,.75);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(20px);

}



.terminal-header {

    height:
        45px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        0 20px;

    border-bottom:
        1px solid var(--border-color);

}



.terminal-header span {

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

}



.terminal-header .red {

    background:#ef4444;

}



.terminal-header .yellow {

    background:#eab308;

}



.terminal-header .green {

    background:#22c55e;

}



.terminal-body {

    padding:
        30px;

}



.terminal-body pre,
.terminal-large pre,
.code-right pre {

    font-family:
        "JetBrains Mono",
        monospace;

    color:
        #cbd5e1;

    line-height:
        1.8;

    overflow:auto;

}





/* ===================================================== */
/* Sections */
/* ===================================================== */


.section {

    max-width:
        1280px;

    margin:
        auto;

    padding:
        100px 30px;

}



.section-header {

    text-align:center;

    max-width:
        750px;

    margin:
        0 auto 60px;

}



.section-tag {

    display:inline-block;

    padding:
        7px 15px;

    border-radius:
        999px;

    background:
        rgba(59,130,246,.15);

    color:
        #60a5fa;

    font-size:
        .8rem;

    font-weight:
        700;

    margin-bottom:
        20px;

}



.section-header h2 {

    font-size:
        clamp(2rem,4vw,3.2rem);

    letter-spacing:
        -.04em;

}



.section-header p {

    margin-top:
        20px;

    color:
        var(--text-secondary);

    line-height:
        1.7;

}





/* ===================================================== */
/* Feature Cards */
/* ===================================================== */


.feature-grid {

    display:grid;

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

    gap:
        25px;

}



.feature-card {

    padding:
        35px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        var(--card-bg);

    backdrop-filter:
        blur(20px);

    transition:
        var(--transition);

}



.feature-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(96,165,250,.4);

}



.feature-icon {

    font-size:
        2rem;

    margin-bottom:
        25px;

}



.feature-card h3 {

    margin-bottom:
        15px;

}



.feature-card p {

    color:
        var(--text-secondary);

    line-height:
        1.7;

}





/* ===================================================== */
/* Install */
/* ===================================================== */


.install-tabs {

    display:flex;

    justify-content:center;

    gap:
        15px;

    margin-bottom:
        30px;

}



.tab {

    padding:
        12px 25px;

    border-radius:
        999px;

    border:
        1px solid var(--border-color);

    background:
        transparent;

    color:
        var(--text-secondary);

}



.tab.active {

    background:
        rgba(59,130,246,.2);

    color:white;

}



.terminal-large {

    position:relative;

    padding:
        35px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        rgba(2,6,23,.8);

}



.copy-button {

    position:absolute;

    top:20px;

    right:20px;

    padding:
        8px 15px;

    border-radius:
        999px;

    border:
        1px solid var(--border-color);

    background:
        rgba(255,255,255,.08);

    color:white;

}





/* ===================================================== */
/* Download Cards */
/* ===================================================== */


.download-grid {

    display:grid;

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

    gap:
        30px;

}



.download-card {

    position:relative;

    padding:
        40px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-large);

    background:
        var(--card-bg);

}



.download-card.featured {

    transform:
        scale(1.05);

}



.download-icon {

    font-size:
        3rem;

    margin-bottom:
        20px;

}



.download-card p {

    color:
        var(--text-secondary);

    line-height:
        1.7;

}



.download-card ul {

    margin:
        25px 0;

    color:
        var(--text-secondary);

    line-height:
        2;

}



.recommended {

    position:absolute;

    top:20px;

    right:20px;

    padding:
        6px 12px;

    border-radius:
        999px;

    background:
        rgba(34,197,94,.15);

    color:
        #4ade80;

    font-size:
        .75rem;

}





/* ===================================================== */
/* Code Showcase */
/* ===================================================== */


.code-showcase {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        50px;

    align-items:center;

}



.code-right {

    padding:
        35px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-large);

    background:
        rgba(2,6,23,.8);

}





/* ===================================================== */
/* Platforms */
/* ===================================================== */


.platform-grid {

    display:grid;

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

    gap:
        25px;

}



.platform {

    text-align:center;

    padding:
        35px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,.04);

}



.platform p {

    color:
        var(--text-secondary);

    margin-top:
        10px;

}
/* ===================================================== */
/* Statistics */
/* ===================================================== */


.stats-grid {

    display:grid;

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

    gap:
        25px;

}



.stat-card {

    text-align:center;

    padding:
        35px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        var(--card-bg);

}



.stat-card h3 {

    font-size:
        3rem;

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #c084fc
        );

    -webkit-background-clip:
        text;

    color:
        transparent;

}



.stat-card p {

    color:
        var(--text-secondary);

    margin-top:
        10px;

}





/* ===================================================== */
/* Timeline */
/* ===================================================== */


.timeline {

    max-width:
        850px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:
        30px;

}



.timeline-item {

    display:flex;

    gap:
        25px;

    padding:
        30px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,.04);

}



.timeline-number {

    min-width:
        60px;

    height:
        60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--accent-primary),
            var(--accent-secondary)
        );

    font-weight:
        800;

}



.timeline-item p {

    color:
        var(--text-secondary);

    margin-top:
        10px;

    line-height:
        1.7;

}





/* ===================================================== */
/* Documentation */
/* ===================================================== */


.docs-card {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:
        40px;

    padding:
        50px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-large);

    background:
        linear-gradient(
            135deg,
            rgba(59,130,246,.15),
            rgba(139,92,246,.15)
        );

}





/* ===================================================== */
/* FAQ */
/* ===================================================== */


.faq-container {

    max-width:
        850px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:
        15px;

}



.faq-item {

    padding:
        25px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-medium);

    background:
        rgba(255,255,255,.04);

}



.faq-item summary {

    cursor:pointer;

    font-weight:
        700;

    list-style:none;

}



.faq-item summary::-webkit-details-marker {

    display:none;

}



.faq-item p {

    margin-top:
        20px;

    color:
        var(--text-secondary);

    line-height:
        1.7;

}





/* ===================================================== */
/* Community */
/* ===================================================== */


.community-card {

    text-align:center;

    padding:
        80px 40px;

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-large);

    background:
        rgba(255,255,255,.05);

}



.community-card h2 {

    font-size:
        clamp(2rem,4vw,3.5rem);

}



.community-card p {

    margin:
        20px auto 40px;

    color:
        var(--text-secondary);

}



.community-buttons {

    display:flex;

    justify-content:center;

    gap:
        20px;

}





/* ===================================================== */
/* Footer */
/* ===================================================== */


.footer {

    max-width:
        1280px;

    margin:
        auto;

    padding:
        80px 30px 30px;

}



.footer-grid {

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        40px;

}



.footer h4 {

    margin-bottom:
        20px;

}



.footer a {

    display:block;

    color:
        var(--text-secondary);

    margin-bottom:
        12px;

}



.footer a:hover {

    color:white;

}



.footer p {

    color:
        var(--text-secondary);

}



.footer-bottom {

    border-top:
        1px solid var(--border-color);

    margin-top:
        50px;

    padding-top:
        25px;

    text-align:center;

}





/* ===================================================== */
/* Back To Top */
/* ===================================================== */


.back-to-top {

    position:fixed;

    right:30px;

    bottom:30px;

    width:45px;

    height:45px;

    border-radius:
        50%;

    border:
        1px solid var(--border-color);

    background:
        rgba(15,23,42,.8);

    color:white;

    opacity:0;

    pointer-events:none;

    transition:
        var(--transition);

}



.back-to-top.show {

    opacity:1;

    pointer-events:auto;

}





/* ===================================================== */
/* Animations */
/* ===================================================== */


@keyframes fadeUp {

    from {

        opacity:0;

        transform:
            translateY(30px);

    }


    to {

        opacity:1;

        transform:
            translateY(0);

    }

}



.hero-left,
.hero-right {

    animation:
        fadeUp .8s ease forwards;

}





/* ===================================================== */
/* Responsive */
/* ===================================================== */


@media(max-width:1000px) {


    .hero-container,
    .code-showcase {

        grid-template-columns:
            1fr;

    }



    .feature-grid,
    .download-grid,
    .platform-grid {

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

    }



    .stats-grid {

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

    }



    .footer-grid {

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

    }


}




@media(max-width:700px) {


    .navbar {

        padding:
            15px 20px;

    }



    .nav-links {

        display:none;

    }



    .mobile-toggle {

        display:flex;

        flex-direction:column;

        gap:
            5px;

    }



    .mobile-toggle span {

        width:
            25px;

        height:
            3px;

        background:white;

        border-radius:
            10px;

    }



    .hero {

        padding-top:
            60px;

    }



    .hero-buttons,
    .community-buttons {

        flex-direction:column;

    }



    .hero-stats {

        flex-direction:column;

        gap:
            20px;

    }



    .feature-grid,
    .download-grid,
    .platform-grid,
    .stats-grid,
    .footer-grid {

        grid-template-columns:
            1fr;

    }



    .download-card.featured {

        transform:none;

    }



    .docs-card {

        flex-direction:column;

        text-align:center;

    }



}