:root {
    --bg: #0b0b0c;
    --panel: #171717;
    --panel-2: #2f2f2f;
    --text: #f4f4f5;
    --muted: #c7c7c7;
    --border: #242424;
    --orange: #f7931a;
    --orange-hover: #ffab3d;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header {
    background: #000;
    border-bottom: 1px solid var(--border);
}

.header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 20px;
}

.navbar {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-logo {
    width: 54px;
    height: 54px;
    display: block;
    object-fit: contain;
    background: transparent;
}

.brand-name {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand-name span {
    color: var(--orange);
}

.navbar-toggler {
    margin-left: auto;
    color: var(--text);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 8px 12px;
    background: #f7931a;
}

.navbar-nav {
    gap: 18px;
    align-items: center;
}

.nav-link {
    color: var(--text) !important;
    font-weight: 700;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--orange) !important;
}

.nav-cta {
    background: var(--orange);
    color: #000 !important;
    border-radius: 999px;
    padding: 10px 18px !important;
}

.nav-cta:hover {
    background: var(--orange-hover);
    color: #000 !important;
}

.logged-in-user {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 20px;
}

h1 {
    font-size: clamp(2.3rem, 7vw, 4.5rem);
    line-height: 1.08;
    margin: 0 0 24px;
    letter-spacing: -0.05em;
}

h2 {
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: -0.04em;
}

p, li {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.55;
}

a {
    color: var(--orange);
}

.card,
section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 32px;
    margin-bottom: 32px;
}

.btn,
.button,
button,
input[type="submit"] {
    display: inline-block;
    background: var(--orange);
    color: #000;
    border: 0;
    border-radius: 12px;
    padding: 14px 22px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--orange-hover);
    color: #000;
}

form {
    max-width: 520px;
}

input,
select,
textarea {
    width: 100%;
    background: #111;
    color: var(--text);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 13px 14px;
    margin: 8px 0 18px;
}

footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
    padding: 28px 20px;
    background: #000;
}

@media (max-width: 700px) {
    .header-inner {
        padding: 14px 18px;
    }

    .brand-logo {
    width: 54px;
    height: 54px;
    display: block;
    object-fit: contain;
    background: transparent;
}

    .brand-name {
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

    .navbar-collapse {
        padding-top: 20px;
    }

    .navbar-nav {
        align-items: stretch;
        gap: 8px;
    }

    .nav-link {
        padding: 12px 0 !important;
        text-align: center;
    }

    .nav-cta {
        margin-top: 6px;
        text-align: center;
    }

    main {
        padding: 54px 20px;
    }

    .card,
    section {
        padding: 28px;
        border-radius: 20px;
    }
}


/* ---------- Card heading fix ---------- */

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    color: #ffffff !important;
    margin-top: 0;
    margin-bottom: 18px;
}

.card p,
section p,
.card li,
section li {
    color: #d7d7d7 !important;
}

.card strong,
section strong {
    color: #ffffff;
}

pre,
code {
    background: #111;
    color: #f7931a;
    border-radius: 8px;
}

.example,
.alert-example,
.voice-example {
    background: #1d1d1d;
    border: 1px solid #333;
    border-left: 4px solid #f7931a;
    border-radius: 12px;
    padding: 18px;
    color: #fff;
    margin: 18px 0;
}



@media (max-width:700px){

    .header-inner{
        padding:10px 20px;
    }

    .brand-logo{
        width:50px;
        height:50px;
    }

    .brand-name{
        font-size:1.4rem;
    }

    .navbar-brand{
        margin-right:24px;
    }

    .nav-menu,
    .nav-links{
        gap:14px;
        padding:10px 0 14px;
    }

    .nav-menu a,
    .nav-links a{
        padding:6px 0;
    }

    section,
    .card{
        margin-bottom:18px;
    }

    .hero-card h1,
    .hero h1{
        font-size:30px;
        line-height:1.1;
    }

    .hero-card p,
    .hero p{
        font-size:16px;
        line-height:1.55;
    }

    .hero-card .btn,
    .hero .btn{
        padding:14px 24px;
    }

}


.example,
.example *,
.alert-example,
.alert-example *,
.voice-example,
.voice-example * {
    color: #fff !important;
}


.home-card p,
.home-card li,
.content-card p,
.content-card li,
.feature-card p,
.feature-card li {
    color: #fff !important;
}


.card blockquote,
.card blockquote * {
    color: #fff !important;
}



/* Admin statistics */

.admin-statistics {
    overflow: hidden;
}

.admin-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #333333;
}

.admin-stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.admin-stat-row span {
    color: #dddddd;
    font-weight: 500;
}

.admin-stat-row strong {
    color: #f7931a;
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 480px) {

    .admin-stat-row {
        gap: 16px;
        padding: 18px 0;
    }

    .admin-stat-row span {
        font-size: 1rem;
    }

    .admin-stat-row strong {
        font-size: 1.35rem;
    }

}