:root {
    /* Brand */
    --accent: #0598a2;
    --accent-2: #33d3cf;
    --accent-700: #047a7e;
    /* Backgrounds (black / grey) */
    --bg-0: #000000; /* page base */
    --bg-1: #0d0d0d; /* secondary background (hero/footer) */
    /* Surfaces */
    --surface: #121212; /* panels, sections */
    --card: #1b1b1b; /* cards */
    --glass: rgba(255,255,255,0.03);
    /* Typography / neutrals */
    --text: #E6EEF8;
    --muted: #9AA3A3;
    --muted-2: #6B7272;
    /* Semantic */
    --success: #10b981;
    --danger: #f87171;
    --max-width: 1200px;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 1rem;
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(13,13,13,0.6));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem;
}

.brand {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text);
    text-decoration: none;
    flex-direction: column;
    display: flex;
}

.nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .nav a {
        color: var(--muted);
        text-decoration: none;
        padding: .4rem .6rem;
        border-radius: 6px;
    }

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

    .nav .cta {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: white;
        padding: .5rem .9rem;
        border-radius: 8px;
        box-shadow: 0 8px 30px rgba(4,122,126,0.12);
    }

.mobile-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 1.2rem;
}

/* hero */
.hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 520px);
    gap: 2rem;
    align-items: center;
}

.hero-copy h1 {
    font-size: 2.4rem;
    margin: 0 0 .5rem;
    color: var(--text);
}

.lead {
    color: var(--muted);
    margin-bottom: 1rem;
}

.hero-cta {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    align-items: center;
}

    .hero-cta input {
        padding: .6rem .8rem;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.04);
        background: transparent;
        color: var(--text);
        min-width: 0;
    }

    .hero-cta .btn {
        padding: .65rem .9rem;
    }

.hero-media img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}

/* sections */
.how-it-works h2, .features h2, .pricing h2, .testimonials h2, .contact h2 {
    color: var(--text);
    margin-bottom: 1rem;
}

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

.card {
    background: var(--card);
    padding: 1.2rem;
    border-radius: 10px;
    color: var(--muted-2);
    border: 1px solid rgba(255,255,255,0.02);
    max-width: 33%;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.feature {
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
}


@media (max-width:900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-content: center;
}

.pricing-card {
    background: var(--surface);
    padding: 1.2rem;
    border-radius: 12px;
    text-align: center;
    color: var(--muted-2);
    border: 1px solid rgba(255,255,255,0.02);
}

    .pricing-card.featured {
        border: 1px solid rgba(4,122,126,0.18);
        box-shadow: 0 14px 50px rgba(4,122,126,0.06);
    }

.price {
    font-size: 1.6rem;
    color: var(--text);
    margin: 0.5rem 0 1rem;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--muted-2);
}

/* testimonials */
.test-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
}

.testimonial {
    background: var(--card);
    padding: 1rem;
    border-radius: 8px;
    color: var(--muted-2);
}

/* contact form */
.contact-form {
    margin-top: 1rem;
    background: var(--card);
    padding: 1rem;
    border-radius: 10px;
}

.form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: .8rem;
}

    .form-row label {
        color: var(--muted-2);
        margin-bottom: .3rem;
        font-size: .9rem;
    }

    .form-row input, .form-row textarea {
        padding: .6rem .8rem;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.04);
        background: transparent;
        color: var(--text);
    }

    .form-row textarea {
        min-height: 100px;
        resize: vertical;
    }

.field-validation {
    color: var(--danger);
    font-size: .9rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.faq-title h2 {
    font-size: 2.6rem;
    line-height: 1.05;
    margin: 0;
    color: var(--text);
}

.faq-items details {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.02);
    padding: 1rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.faq-items summary {
    cursor: pointer;
    font-weight: 700;
    margin: 0;
    list-style: none;
    outline: none;
    color: var(--text);
}
    /* hide native marker and add custom caret */
    .faq-items summary::-webkit-details-marker {
        display: none;
    }

    .faq-items summary::before {
        content: "\25BC";
        display: inline-block;
        margin-right: .6rem;
        transform-origin: 50% 45%;
        color: var(--accent);
        transition: transform .18s ease;
        font-size: .9rem;
    }

.faq-items details[open] summary::before {
    transform: rotate(0deg);
    /* caret stays same direction to match provided design */
}

.faq-items p {
    margin: .7rem 0 0;
    color: var(--muted-2);
}

@media (max-width:900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-title {
        margin-bottom: 1rem;
    }
}

/* buttons */
.btn {
    border: 0;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
}

    .btn.primary {
        background: linear-gradient(90deg, var(--accent), var(--accent-2));
        color: white;
        padding: .6rem .9rem;
        box-shadow: 0 12px 40px rgba(4,122,126,0.14);
    }

    .btn.outline {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.06);
        color: var(--muted-2);
        padding: .6rem .9rem;
    }

/* footer */
.site-footer {
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.02);
    margin-top: 3rem;
    background-color: #0598a2;
    /*linear-gradient(180deg, rgba(13,13,13,0.6), rgba(0,0,0,0.6));*/
}

.footer-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
}

.foot-brand {
    flex-direction: row;
    display: grid;
    grid-template-columns: 1fr min-content;
}
    .foot-brand p.subtitle {
        color: black;
        font-weight: bold;
    }

#rights-reserved {
    white-space: nowrap;
    align-self: end;
    align-content: end;
    justify-content: end;
    align-self: end;
    align-items: end;
    justify-items: end;
}


.foot-detail {
    display: grid;
    grid-template-columns: auto auto;
}

    .foot-detail div {
    }

/* ensure footer links in .foot-detail are white and accessible */
.site-footer .foot-detail a,
.site-footer .footer-links a,
.site-footer .foot-brand a {
    color: #FFFFFF;
    text-decoration: none;
}

    .site-footer .foot-detail a:hover,
    .site-footer .footer-links a:hover,
    .site-footer .foot-brand a:hover {
        /*color: var(--accent);*/
        text-decoration: underline;
    }

/* utilities */
.success {
    margin-top: 1rem;
    padding: .6rem .8rem;
    background: linear-gradient(90deg, rgba(16,185,129,0.12), rgba(16,185,129,0.05));
    color: #D8FBE6;
    border-radius: 8px;
}

/* responsive */
@media (max-width:900px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .pricing-grid, .feature-grid, .test-grid {
        grid-template-columns: 1fr;
    }

    .nav {
        position: absolute;
        right: 1rem;
        top: 64px;
        background: rgba(13,13,13,0.95);
        padding: 1rem;
        flex-direction: column;
        display: none;
        border-radius: 8px;
    }

        .nav.open {
            display: flex;
        }

    .mobile-toggle {
        display: block;
    }
}