:root {
    --tw-final-gold: #f1b42b;
    --tw-final-gold-soft: #ffd15f;
    --tw-final-bg: #04111c;
    --tw-final-text: #f7f9fb;
    --tw-final-muted: rgba(235,241,246,.86);
}

/* Stage 08 — final CTA, refined in v0.10.1 to match the approved reference crop more closely. */
.tw-about-final-cta {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 724 / 350;
    min-height: 0;
    overflow: hidden;
    background: var(--tw-final-bg);
    color: var(--tw-final-text);
}

.tw-about-final-cta__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #04111c;
}

.tw-about-final-cta__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.tw-about-final-cta__background--mobile { display: none; }

.tw-about-final-cta__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,10,18,.04) 0 47%, rgba(2,10,18,.42) 58%, rgba(2,10,18,.73) 100%),
        linear-gradient(180deg, rgba(2,10,18,.02), rgba(2,10,18,.04) 55%, rgba(2,10,18,.22) 100%);
    pointer-events: none;
}

.tw-about-final-cta__gold-line { display: none !important; }
.tw-about-final-cta__gold-line--one { display: none !important; }
.tw-about-final-cta__gold-line--two { display: none !important; }

.tw-about-final-cta__container {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.tw-about-final-cta__content {
    position: absolute;
    top: 6.1%;
    right: 4.6%;
    width: 38.2%;
    text-align: right;
    direction: rtl;
}

.tw-about-final-cta__brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75em;
    width: max-content;
    margin-right: 0;
    margin-left: auto;
    margin-bottom: .88em;
    color: rgba(247,249,251,.96);
    font-size: clamp(7px, .72vw, 13px);
    line-height: 1;
    font-weight: 700;
    direction: ltr;
}
.tw-about-final-cta__brand i {
    width: clamp(18px, 2.2vw, 40px);
    height: 2px;
    background: var(--tw-final-gold);
    box-shadow: 0 0 8px rgba(241,180,43,.38);
}

.tw-about-final-cta__title {
    margin: 0 !important;
    color: #fff;
    font-size: clamp(18px, 2.1vw, 40px);
    line-height: 1.14;
    font-weight: 900;
    letter-spacing: -.025em;
    text-shadow: 0 2px 10px rgba(0,0,0,.72);
}
.tw-about-final-cta__title span,
.tw-about-final-cta__title em,
.tw-about-final-cta__title strong { display: inline; }
.tw-about-final-cta__title em {
    color: var(--tw-final-gold);
    font-style: normal;
    font-weight: inherit;
}
.tw-about-final-cta__title strong {
    display: block;
    margin-top: .08em;
    font-weight: inherit;
}

.tw-about-final-cta__text {
    margin: .72em 0 0;
    color: rgba(240,245,248,.9);
    font-size: clamp(8px, .92vw, 17px);
    line-height: 1.85;
    font-weight: 500;
}

.tw-about-final-cta__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.15em;
    margin-top: 1.02em;
    direction: rtl;
}

.tw-about-final-cta__button {
    min-height: clamp(34px, 3.2vw, 58px);
    padding: 0 clamp(14px, 1.7vw, 32px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .85em;
    text-decoration: none !important;
    font-size: clamp(8px, .9vw, 16px);
    line-height: 1;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tw-about-final-cta__button svg {
    width: 1.2em;
    height: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tw-about-final-cta__button--primary {
    color: #07111a !important;
    background: linear-gradient(135deg, #ffd464, #f0b52d);
    box-shadow: 0 10px 26px rgba(240,181,45,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.tw-about-final-cta__button--secondary {
    color: #fff !important;
    border: 1px solid rgba(240,181,45,.7);
    background: rgba(4,15,24,.58);
    box-shadow: inset 0 0 18px rgba(240,181,45,.04);
}
.tw-about-final-cta__button:hover,
.tw-about-final-cta__button:focus-visible { transform: translateY(-2px); }

.tw-about-final-cta__features {
    position: absolute;
    left: 5.0%;
    right: 5.0%;
    bottom: 4.05%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    direction: ltr;
}

.tw-about-final-cta__feature {
    position: relative;
    min-width: 0;
    padding: 0 4%;
    text-align: center;
    direction: rtl;
}
.tw-about-final-cta__feature + .tw-about-final-cta__feature::before {
    content: "";
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(137,180,203,.28) 25%, rgba(137,180,203,.3) 75%, transparent);
}

.tw-about-final-cta__feature-icon {
    width: clamp(24px, 2.8vw, 52px);
    height: clamp(24px, 2.8vw, 52px);
    margin: 0 auto .32em;
    display: grid;
    place-items: center;
    color: var(--tw-final-gold);
    filter: drop-shadow(0 0 7px rgba(240,181,45,.18));
}
.tw-about-final-cta__feature-icon svg,
.tw-about-final-cta__feature-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tw-about-final-cta__feature-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tw-about-final-cta__feature h3 {
    margin: 0 !important;
    color: #fff;
    font-size: clamp(10px, 1.18vw, 22px);
    line-height: 1.2;
    font-weight: 850;
}
.tw-about-final-cta__feature p {
    margin: .32em 0 0;
    color: rgba(235,241,246,.84);
    font-size: clamp(7px, .78vw, 14px);
    line-height: 1.45;
    font-weight: 450;
}

@media (max-width: 767px) {
    .tw-about-final-cta {
        aspect-ratio: auto;
        min-height: 760px;
    }
    /* ACF-only backgrounds: use the mobile ACF image when supplied;
       otherwise keep using the desktop ACF image on mobile. */
    .tw-about-final-cta__background--desktop { display: block; }
    .tw-about-final-cta__background--mobile { display: none; }
    .tw-about-final-cta--has-mobile-bg .tw-about-final-cta__background--desktop { display: none; }
    .tw-about-final-cta--has-mobile-bg .tw-about-final-cta__background--mobile { display: block; }
    .tw-about-final-cta__shade {
        background:
            linear-gradient(180deg, rgba(2,10,18,.05) 0 32%, rgba(2,10,18,.72) 55%, rgba(2,10,18,.93) 100%),
            linear-gradient(90deg, rgba(2,10,18,.08), rgba(2,10,18,.34));
    }
    .tw-about-final-cta__content {
        top: 45%;
        right: 7%;
        left: 7%;
        width: auto;
        text-align: center;
    }
    .tw-about-final-cta__brand { width: max-content; margin-left: auto; margin-right: auto; justify-content: center; }
    .tw-about-final-cta__title { font-size: clamp(28px, 8vw, 42px); }
    .tw-about-final-cta__text { font-size: 14px; line-height: 1.8; }
    .tw-about-final-cta__actions { justify-content: center; flex-wrap: wrap; }
    .tw-about-final-cta__button { min-height: 46px; font-size: 13px; }
    .tw-about-final-cta__features {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 620px 6% 0;
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .tw-about-final-cta__feature + .tw-about-final-cta__feature::before { display: none; }
    .tw-about-final-cta__feature-icon { width: 42px; height: 42px; }
    .tw-about-final-cta__feature h3 { font-size: 18px; }
    .tw-about-final-cta__feature p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .tw-about-final-cta__button { transition: none; }
}

/* v0.10.4 — Final CTA background is ACF-only. No bundled raster fallback. */
.tw-about-final-cta--no-bg .tw-about-final-cta__visual {
    background: var(--tw-final-bg);
}


/* v0.10.5 — approved final CTA spacing only.
   1) Remove the decorative thin gold lines at the bottom.
   2) Halve the gap between the three feature items and the section bottom edge. */
.tw-about-final-cta__gold-line {
    display: none !important;
}

/* v0.10.11 — APPROVED FINAL CTA GEOMETRY, DESKTOP ONLY.
   The approved reference requires all three outer vertical gaps to be 50%
   of the previous live layout. The section height is reduced proportionally
   so the composition becomes compact instead of merely shifting elements. */
@media (min-width: 768px) {
    body.tehranweb-about-template #tw-about-final-cta.tw-about-final-cta {
        /* 1728px viewport => ~657px section height, matching the approved
           half-spacing composition instead of the previous ~864px height. */
        aspect-ratio: 2.63 / 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__visual,
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__container {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__content,
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__content[data-tw-reveal],
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__content[data-tw-reveal].is-visible {
        position: absolute !important;
        /* Previous live top gap ~14%; approved = half in px after section compaction. */
        top: 9.1% !important;
        right: 5.1% !important;
        left: auto !important;
        width: 47% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        text-align: right !important;
        direction: rtl !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__brand {
        width: max-content !important;
        margin: 0 0 1.05em auto !important;
        gap: .75em !important;
        font-size: clamp(8px, .80vw, 14px) !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__brand i {
        width: clamp(22px, 2.6vw, 46px) !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__title {
        margin: 0 !important;
        font-size: clamp(24px, 2.75vw, 49px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.03em !important;
        font-weight: 900 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__title strong {
        margin-top: .11em !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__text {
        margin: 1.12em 0 0 !important;
        max-width: 100% !important;
        font-size: clamp(10px, 1.08vw, 19px) !important;
        line-height: 1.9 !important;
        font-weight: 500 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__actions {
        margin-top: 3.9em !important;
        gap: 1.25em !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__button {
        min-height: clamp(48px, 3.8vw, 64px) !important;
        padding: 0 clamp(22px, 2.15vw, 38px) !important;
        font-size: clamp(10px, 1vw, 17px) !important;
        gap: .9em !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__features,
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__features[data-tw-reveal],
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__features[data-tw-reveal].is-visible {
        position: absolute !important;
        left: 4.2% !important;
        right: 4.2% !important;
        /* Previous live feature-to-bottom gap ~12.8%; approved gap = half in px. */
        bottom: 7.5% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        transform: none !important;
        opacity: 1 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__feature {
        position: relative !important;
        min-width: 0 !important;
        padding: 0 4.2% !important;
        text-align: center !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__feature + .tw-about-final-cta__feature::before {
        content: "" !important;
        position: absolute !important;
        top: 8% !important;
        bottom: 5% !important;
        left: 0 !important;
        width: 1px !important;
        background: linear-gradient(180deg, transparent, rgba(137,180,203,.30) 22%, rgba(137,180,203,.34) 78%, transparent) !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__feature-icon {
        width: clamp(38px, 3.15vw, 56px) !important;
        height: clamp(38px, 3.15vw, 56px) !important;
        margin: 0 auto .42em !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__feature h3 {
        margin: 0 !important;
        font-size: clamp(15px, 1.45vw, 26px) !important;
        line-height: 1.2 !important;
        font-weight: 850 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__feature p {
        margin: .48em 0 0 !important;
        font-size: clamp(9px, .96vw, 17px) !important;
        line-height: 1.5 !important;
        font-weight: 450 !important;
    }

    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__gold-line,
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__gold-line--one,
    body.tehranweb-about-template #tw-about-final-cta .tw-about-final-cta__gold-line--two {
        display: none !important;
    }
}