/*
 * Public site: landing page and site pages.
 *
 * Built on the application's tokens (colours, radius, spacing) so dark mode
 * and RTL come for free. Logical properties throughout; no letter-spacing,
 * which breaks joined Persian script.
 */

.site {
    --brand: #4f46e5;
    background: var(--c-surface, #fff);
    color: var(--c-text, #101828);
}

.site-container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 20px;
}

.site-container--narrow {
    max-width: 780px;
}

/* Header ---------------------------------------------------------------- */

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--c-surface, #fff) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-block-end: 1px solid var(--c-border, #e4e7ec);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.site-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
}

.site-brand__name {
    font-size: 1.05rem;
}

.site-nav {
    display: flex;
    gap: 20px;
    margin-inline-start: 12px;
}

.site-nav a {
    color: var(--c-text-2, #475467);
    text-decoration: none;
    font-size: 0.95rem;
}

.site-nav a:hover {
    color: var(--brand);
}

.site-header__actions {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
}

@media (max-width: 760px) {
    .site-nav {
        display: none;
    }

    /* On a phone the brand broke over three lines and shoved the buttons
       around, because nothing stopped "SEO Content Engine" from wrapping.
       It now keeps one line and gives way with an ellipsis, while the two
       buttons keep their full labels. */
    .site-header__inner {
        gap: 10px;
        min-height: 56px;
    }

    .site-brand {
        min-width: 0;
        gap: 8px;
    }

    .site-brand__mark {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 15px;
    }

    .site-brand__name {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .site-header__actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .site-header__actions .btn {
        padding-inline: 13px;
        font-size: 0.85rem;
        border-radius: 999px;
        white-space: nowrap;
    }

    .site-header__actions .btn--primary {
        box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 32%, transparent);
    }

    .site-header__actions .btn--ghost {
        padding-inline: 8px;
        color: var(--c-text-2, #475467);
    }
}

/* Below this width the name and both buttons cannot share the row without
   one of them being cut. Truncating it reads badly on an RTL page — the
   ellipsis lands on the front of a Latin name — so the mark carries the
   brand alone and the buttons stay whole. */
@media (max-width: 430px) {
    .site-brand__name {
        display: none;
    }

    .site-header__actions .btn {
        padding-inline: 12px;
    }
}

/* Hero ------------------------------------------------------------------ */

.hero {
    padding-block: 88px 72px;
    background:
        radial-gradient(900px 380px at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
    text-align: center;
}

.hero__inner {
    max-width: 860px;
}

.hero__title {
    margin: 0 0 18px;
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1.35;
}

.hero__subtitle {
    margin: 0 auto 32px;
    max-width: 680px;
    color: var(--c-text-2, #475467);
    font-size: 1.1rem;
    line-height: 1.9;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hero__bonus {
    display: inline-block;
    margin: 22px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: 0.92rem;
    font-weight: 600;
}

.site .btn--primary {
    background: var(--brand);
    border-color: var(--brand);
}

/* Sections -------------------------------------------------------------- */

.site-section {
    padding-block: 72px;
}

.site-section--alt {
    background: var(--c-bg, #f7f8fa);
}

.site-section__title {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
}

.site-section__subtitle,
.site-section__note {
    margin: 0 auto 36px;
    max-width: 640px;
    color: var(--c-text-2, #475467);
    text-align: center;
    line-height: 1.8;
}

.site-section__note {
    margin: 28px auto 0;
    font-size: 0.92rem;
}

/* Steps ----------------------------------------------------------------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.steps__item {
    padding: 24px;
    border: 1px solid var(--c-border, #e4e7ec);
    border-radius: 14px;
    background: var(--c-surface, #fff);
}

.steps__number {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-block-end: 14px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

.steps__title,
.feature__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.steps__body,
.feature__body {
    margin: 0;
    color: var(--c-text-2, #475467);
    line-height: 1.8;
}

/* Features -------------------------------------------------------------- */

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-block-start: 36px;
}

.feature {
    padding: 24px;
    border-radius: 14px;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e4e7ec);
}

.feature__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-block-end: 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
}

/* Prices ---------------------------------------------------------------- */

.prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.price {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--c-border, #e4e7ec);
    border-radius: 14px;
    background: var(--c-surface, #fff);
    text-align: center;
}

.price__words {
    margin: 0;
    color: var(--c-text-2, #475467);
    font-weight: 600;
}

.price__amount {
    margin: 0;
}

.price__number {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--c-text, #101828);
}

.price__unit {
    color: var(--c-text-3, #98a2b3);
    font-size: 0.9rem;
}

/* One price for every length: a single card, centred, rather than a row of
   identical ones. It is the same card, given room and a little weight. */
.prices--one {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
}

.price--one {
    gap: 8px;
    padding: 32px 28px;
    border-color: color-mix(in srgb, var(--brand) 35%, var(--c-border, #e4e7ec));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 14%, transparent);
}

.price--one .price__words {
    color: var(--c-text, #101828);
    font-size: 1.05rem;
}

.price--one .price__number {
    font-size: 2.6rem;
    line-height: 1.15;
}

.price--one .price__lengths {
    margin: 0 0 6px;
    color: var(--c-text-2, #475467);
    font-size: 0.95rem;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

.site-footer__credit {
    color: var(--c-text-3, #98a2b3);
}

.site-footer__icon-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-footer__icon-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* FAQ ------------------------------------------------------------------- */

.faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-start: 32px;
}

.faq__item {
    border: 1px solid var(--c-border, #e4e7ec);
    border-radius: 12px;
    background: var(--c-surface, #fff);
}

.faq__question {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}

.faq__answer {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--c-text-2, #475467);
    line-height: 1.9;
}

/* Call to action -------------------------------------------------------- */

.site-cta {
    padding-block: 64px;
    background: var(--brand);
    color: #fff;
    text-align: center;
}

.site-cta__title {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.site-cta__body {
    margin: 0 0 26px;
    opacity: 0.9;
}

.site-cta__button {
    background: #fff;
    border-color: #fff;
    color: var(--brand);
    font-weight: 700;
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
    padding-block: 48px 24px;
    border-block-start: 1px solid var(--c-border, #e4e7ec);
    background: var(--c-bg, #f7f8fa);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
}

.site-footer__title {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a,
.site-footer__text {
    color: var(--c-text-2, #475467);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.8;
}

.site-footer__links a:hover {
    color: var(--brand);
}

.site-footer__bottom {
    margin-block-start: 36px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--c-border, #e4e7ec);
    color: var(--c-text-3, #98a2b3);
    font-size: 0.85rem;
    text-align: center;
}

/* Site pages ------------------------------------------------------------ */

.page-title {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

.page-meta {
    margin: 0 0 32px;
    color: var(--c-text-3, #98a2b3);
    font-size: 0.9rem;
}

.page-body {
    line-height: 2;
}