:root {

    --bg: #100b07;
    --card: #1b120c;
    --card-hover: #25170e;

    --orange: #f28c28;
    --orange-light: #ffad55;
    --cream: #ffd6a3;

    --text: #fff7ef;
    --muted: #b9a99d;

}


* {

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

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

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

}


/* BACKGROUND */

.background {

    position: fixed;

    inset: 0;

    z-index: -1;

    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(242,140,40,0.30),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 40%,
        rgba(255,174,85,0.13),
        transparent 30%
    ),

    radial-gradient(
        circle at 50% 90%,
        rgba(242,140,40,0.13),
        transparent 35%
    );

    filter: blur(50px);

}


/* NAVBAR */

nav {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 80px;

}


.logo {

    color: white;

    text-decoration: none;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: -1px;

}


.logo span {

    color: var(--orange);

}


.nav-links {

    display: flex;

    gap: 40px;

}


.nav-links a {

    color: var(--muted);

    text-decoration: none;

    font-weight: 600;

    transition: .25s;

}


.nav-links a:hover {

    color: white;

}


/* HERO */

.hero {

    max-width: 1300px;

    margin: auto;

    padding: 100px 40px;

    display: grid;

    grid-template-columns: 1fr 430px;

    gap: 90px;

    align-items: center;

}


.badge {

    display: inline-block;

    padding: 9px 18px;

    border-radius: 999px;

    background:
        rgba(242,140,40,.12);

    border:
        1px solid rgba(242,140,40,.35);

    color: var(--cream);

    font-size: 14px;

    margin-bottom: 30px;

}


.hero h1 {

    font-size: 78px;

    line-height: 1.02;

    letter-spacing: -4px;

    font-weight: 900;

}


.hero h1 span {

    display: inline-block;

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffd09a
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    padding-bottom: 6px;

}


.hero p {

    margin-top: 30px;

    max-width: 600px;

    font-size: 20px;

    line-height: 1.7;

    color: var(--muted);

}


.buttons {

    display: flex;

    gap: 15px;

    margin-top: 45px;

}


.btn {

    padding: 16px 32px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: .25s;

}


.primary {

    background: var(--orange);

    color: #241106;

    box-shadow:
        0 20px 60px rgba(242,140,40,.32);

}


.primary:hover {

    transform: translateY(-4px);

    background: var(--orange-light);

}


.secondary {

    border:
        1px solid rgba(255,255,255,.15);

    color: white;

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

}


.secondary:hover {

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

}


/* MINI STATS */

.mini-stats {

    display: flex;

    gap: 55px;

    margin-top: 70px;

}


.mini-stats strong {

    display: block;

    font-size: 32px;

    font-weight: 900;

    color: white;

}


.mini-stats div {

    color: var(--muted);

    font-size: 14px;

}


/* DISCORD MOCKUP */

.discord-preview {

    background:
        linear-gradient(
            145deg,
            #21150d,
            #100c09
        );

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 28px;

    padding: 25px;

    box-shadow:
        0 40px 100px rgba(0,0,0,.6);

}


.discord-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

}


.discord-header img {

    width: 55px;

    height: 55px;

    border-radius: 50%;

}


.discord-header p {

    color: #43b581;

    font-size: 13px;

    margin: 0;

}


.message {

    display: flex;

    gap: 14px;

    padding: 15px;

    margin-top: 15px;

    border-radius: 16px;

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

}


.message img {

    width: 45px;

    height: 45px;

    border-radius: 50%;

}


.message p {

    margin: 5px 0 0;

    font-size: 14px;

    color: var(--muted);

}


/* FEATURES */

.features {

    padding: 120px 40px;

    text-align: center;

}


.features h2,
.reviews h2 {

    font-size: 52px;

    letter-spacing: -2px;

    margin-bottom: 60px;

}


.grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap: 25px;

}


.card {

    text-align: left;

    padding: 35px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #21150d,
            #100c09
        );

    border:
        1px solid rgba(255,255,255,.07);

    transition: .3s;

}


.card:hover {

    transform: translateY(-10px);

    background: var(--card-hover);

    border-color:
        rgba(242,140,40,.5);

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);

}


.card span {

    font-size: 40px;

}


.card h3 {

    margin-top: 20px;

    margin-bottom: 12px;

    font-size: 25px;

}


.card p {

    color: var(--muted);

    line-height: 1.6;

}


/* REVIEWS */

.reviews {

    padding: 120px 20px;

    text-align: center;

}


.reviews-row-wrap {

    overflow: hidden;

}


.reviews-row {

    display: flex;

    gap: 20px;

    overflow-x: hidden;

}


.review-card {

    min-width: 330px;

    padding: 25px;

    border-radius: 22px;

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

    border:
        1px solid rgba(255,255,255,.08);

}


.review-avatar {

    width: 55px;

    height: 55px;

    border-radius: 50%;

}


.review-name {

    margin-top: 10px;

    font-weight: 800;

}


.review-stars {

    color: #ffd700;

}


.review-quote {

    color: var(--muted);

    margin-top: 10px;

    line-height: 1.5;

}


/* GITHUB / OPEN SOURCE */

.github-section {

    padding: 60px 40px 120px;

}


.github-card {

    max-width: 1100px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 40px;

    padding: 50px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(242,140,40,.12),
            rgba(255,196,130,.04)
        );

    border:
        1px solid rgba(242,140,40,.25);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transition: .3s;

}


.github-card:hover {

    transform: translateY(-6px);

    border-color:
        rgba(242,140,40,.55);

    box-shadow:
        0 35px 90px rgba(0,0,0,.5);

}


.github-icon {

    min-width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 24px;

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

    color: white;

}


.github-icon svg {

    width: 52px;

    height: 52px;

}


.github-content {

    text-align: left;

}


.github-label {

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 2px;

    color: var(--orange-light);

}


.github-content h2 {

    margin-top: 8px;

    font-size: 42px;

    font-weight: 900;

    letter-spacing: -2px;

}


.github-content h2 span {

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffd09a
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.github-content p {

    max-width: 700px;

    margin-top: 15px;

    color: var(--muted);

    line-height: 1.7;

    font-size: 17px;

}


.github-btn {

    display: inline-block;

    margin-top: 25px;

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

    border:
        1px solid rgba(255,255,255,.15);

    color: white;

}


.github-btn:hover {

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

    transform: translateY(-3px);

}


/* FOOTER */

footer {

    border-top:
        1px solid rgba(255,255,255,.08);

    padding: 50px;

    text-align: center;

    color: #777;

}


/* MOBILE */

@media(max-width:900px) {

    nav {

        padding: 20px;

    }


    .nav-links {

        display: none;

    }


    .hero {

        grid-template-columns: 1fr;

        padding-top: 60px;

    }


    .hero h1 {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .mini-stats {

        gap: 25px;

    }


    .features h2,
    .reviews h2 {

        font-size: 38px;

    }

}


@media(max-width:700px) {

    .github-section {

        padding: 30px 20px 90px;

    }


    .github-card {

        flex-direction: column;

        text-align: center;

        padding: 35px 25px;

    }


    .github-content {

        text-align: center;

    }


    .github-content h2 {

        font-size: 34px;

    }

}

/* ========================================
   CRUMB COMMANDS PAGE
   ======================================== */

.commands-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 25px 100px;
}


/* Commands hero */

.commands-hero {
    text-align: center;
    margin-bottom: 55px;
}


.commands-hero .legal-badge {
    display: inline-block;

    padding: 8px 14px;
    margin-bottom: 20px;

    border: 1px solid rgba(255, 145, 0, 0.25);
    border-radius: 999px;

    background: rgba(255, 145, 0, 0.08);

    color: #ff9d2e;

    font-size: 13px;
    font-weight: 600;
}


.commands-hero h1 {
    margin: 0;

    font-size: clamp(42px, 7vw, 72px);
    font-weight: 900;

    letter-spacing: -2px;

    color: #ffffff;
}


.commands-hero h1 span {
    color: #ff9d2e;
}


.commands-hero > p {
    max-width: 650px;

    margin: 20px auto 0;

    color: #aaaabd;

    font-size: 17px;
    line-height: 1.7;
}


/* Command statistics */

.command-stats {
    display: flex;
    justify-content: center;
    gap: 15px;

    margin-top: 35px;
}


.command-stats > div {
    min-width: 130px;

    padding: 18px 25px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    color: #aaaabd;

    font-size: 13px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.command-stats strong {
    display: block;

    margin-bottom: 4px;

    color: #ff9d2e;

    font-size: 25px;
    font-weight: 800;
}


/* Search */

.command-search {
    margin-bottom: 35px;
}


.search-box {
    display: flex;
    align-items: center;
    gap: 12px;

    max-width: 700px;

    margin: 0 auto;

    padding: 15px 18px;

    background: rgba(255, 255, 255, 0.045);

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 14px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.search-box:focus-within {
    background: rgba(255, 255, 255, 0.06);

    border-color: rgba(255, 157, 46, 0.5);

    box-shadow:
        0 0 0 3px rgba(255, 157, 46, 0.08);
}


.search-box span {
    flex-shrink: 0;

    font-size: 18px;

    opacity: 0.7;
}


.search-box input {
    width: 100%;

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;
}


.search-box input::placeholder {
    color: #77778c;
}


#count {
    margin: 14px 0 0;

    text-align: center;

    color: #77778c;

    font-size: 13px;
}


/* Commands grid */

.commands-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));

    gap: 15px;
}


/* Individual command card */

.command-card {
    position: relative;

    padding: 20px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.command-card:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.055);

    border-color: rgba(255, 157, 46, 0.3);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.2);
}


.command-card h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}


.command-card h3 code {
    padding: 4px 8px;

    border-radius: 7px;

    background: rgba(255, 157, 46, 0.1);

    color: #ff9d2e;

    font-family: monospace;
    font-size: 14px;
}


.command-card p {
    margin: 0;

    color: #9999ac;

    font-size: 13px;

    line-height: 1.6;
}


/* Command category */

.command-category {
    display: inline-block;

    margin-top: 15px;

    padding: 4px 9px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.06);

    color: #88889c;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


/* Empty search result */

.commands-empty {
    grid-column: 1 / -1;

    padding: 70px 20px;

    text-align: center;

    color: #77778c;
}


.commands-empty strong {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 20px;
}


/* Loading state */

.commands-loading {
    grid-column: 1 / -1;

    padding: 70px 20px;

    text-align: center;

    color: #77778c;

    font-size: 14px;
}


/* No JavaScript */

.commands-page noscript {
    display: block;

    max-width: 600px;

    margin: 0 auto 30px;

    padding: 15px 20px;

    border: 1px solid rgba(255, 80, 80, 0.2);

    border-radius: 12px;

    background: rgba(255, 80, 80, 0.06);

    color: #ff9999;

    text-align: center;
}


/* Mobile */

@media (max-width: 700px) {

    .commands-page {
        padding: 55px 16px 80px;
    }


    .commands-hero {
        margin-bottom: 40px;
    }


    .commands-hero h1 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .commands-hero > p {
        font-size: 15px;
    }


    .command-stats {
        gap: 8px;
    }


    .command-stats > div {
        min-width: 0;

        flex: 1;

        padding: 15px 10px;
    }


    .command-stats strong {
        font-size: 21px;
    }


    .commands-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 420px) {

    .command-stats {
        display: grid;

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


    .command-stats > div:last-child {
        grid-column: 1 / -1;
    }

}

/* ========================================
   ANALYTICS CONSENT
   ======================================== */

#analytics-consent-banner {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 99999;

    background:
        linear-gradient(
            145deg,
            #21150d,
            #100c09
        );

    border:
        1px solid rgba(255, 157, 46, 0.22);

    border-radius: 20px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(242, 140, 40, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    animation:
        analytics-banner-in 0.35s ease;
}

.analytics-consent-content {
    max-width: 1200px;
    margin: 0 auto;

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

    gap: 30px;

    padding: 22px 25px;
}

.analytics-consent-text {
    flex: 1;
}

.analytics-consent-text strong {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.analytics-consent-text p {
    margin: 0;

    max-width: 750px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.6;
}

.analytics-consent-buttons {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.analytics-consent-buttons button {
    padding: 10px 20px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* NO */

#analytics-no {
    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    color: var(--muted);
}

#analytics-no:hover {
    transform: translateY(-2px);

    background:
        rgba(255, 255, 255, 0.08);

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

    color: var(--text);
}

/* YES */

#analytics-yes {
    background: var(--orange);

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

    color: #241106;

    box-shadow:
        0 10px 30px rgba(242, 140, 40, 0.22);
}

#analytics-yes:hover {
    transform: translateY(-2px);

    background: var(--orange-light);

    border-color: var(--orange-light);

    box-shadow:
        0 14px 35px rgba(242, 140, 40, 0.30);
}

/* ENTRY ANIMATION */

@keyframes analytics-banner-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE */

@media (max-width: 700px) {

    #analytics-consent-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;

        border-radius: 18px;
    }

    .analytics-consent-content {
        flex-direction: column;
        align-items: stretch;

        gap: 18px;

        padding: 20px;
    }

    .analytics-consent-text p {
        font-size: 13px;
    }

    .analytics-consent-buttons {
        width: 100%;
    }

    .analytics-consent-buttons button {
        flex: 1;

        padding: 11px 16px;
    }
}