:root {
    --bg: #0b0c10;
    --card: #111218;
    --text: #e7e9ee;
    --muted: #a2a8b3;
    --accent: #6ee7b7;
    --accent-ink: #0b3b2f;
    --border: #1a1c24;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem
}

.py-10 {
    padding: 3.5rem 0
}

.site {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    backdrop-filter: saturate(140%) blur(8px);
    position: sticky;
    top: 0;
    z-index: 20
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0
}

.brand {
    display: flex;
    gap: .6rem;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    letter-spacing: .2px
}

    .brand img {
        display: block;
        border-radius: 10px
    }

.nav {
    display: flex;
    gap: 1rem
}

    .nav a {
        color: var(--muted);
        text-decoration: none;
        padding: .5rem .75rem;
        border-radius: .6rem;
        transition: background .15s ease
    }

        .nav a.active, .nav a:hover {
            color: var(--text);
            background: rgba(255,255,255,0.06)
        }

.site-main {
    padding-bottom: 2rem
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.25rem 0
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.muted {
    color: var(--muted)
}

.hero {
    padding: 3.5rem 0 2rem;
    display: grid;
    gap: 1.5rem
}

.hero-text h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    margin: .25rem 0 0
}

.lead {
    color: var(--muted);
    font-size: 1.1rem
}

.cta-row {
    margin-top: 1.25rem
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .7rem 1rem;
    border-radius: .8rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .06s ease, box-shadow .15s ease
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(110,231,183,.2)
    }

/* Center the two-card grid in the container */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* two even columns */
    gap: 1rem;
    /* 👇 this centers the whole grid block */
    max-width: 760px; /* ~ two cards + gap */
    margin-inline: auto; /* center horizontally */
}

/* Stack nicely on mobile */
@media (max-width: 860px) {
    .grid-2 {
        grid-template-columns: 1fr;
        max-width: 600px; /* optional: a softer bound on small screens */
    }
}


.grid-3 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem;
    margin: 1.5rem 0
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15)
}

    .card h2, .card h3 {
        margin: .2rem 0 .4rem
    }

.card-icon {
/*    width: 40px;
    height: 40px;*/
    display: block;
    margin-bottom: .5rem;
    border-radius: 8px; /* nice rounded corners for PNGs */
    object-fit: contain;
}

@media (max-width: 860px) {
    .grid-2 {
        grid-template-columns: 1fr
    }

    .grid-3 {
        grid-template-columns: 1fr
    }

    .footer-inner {
        flex-direction: column;
        gap: .5rem
    }
}