/*
 * Hero — pixel-oriented reconstruction of the supplied TehranWeb reference.
 */

html body .tw-home-sequence > .tw-reference-hero.tw-section {
    position: relative;
    isolation: isolate;
    min-height: max(37.5rem, min(49.5vw, 100svh));
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    background: #03111d !important;
    color: #fff;
}

html body .tw-home-sequence > .tw-reference-hero.tw-section::before,
html body .tw-home-sequence > .tw-reference-hero.tw-section::after {
    content: none !important;
    display: none !important;
}

.tw-reference-hero__media {
    position: absolute;
    z-index: -3;
    inset: 0 auto 0 0;
    width: 55.3%;
    overflow: hidden;
    background: #08131c;
}

.tw-reference-hero__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    filter: saturate(.96) contrast(1.04) brightness(.92);
    transform: scale(1.012);
}

.tw-reference-hero__shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(2,13,22,.04) 0%,
            rgba(2,13,22,.10) 37%,
            rgba(2,13,22,.70) 53%,
            #03111d 63%,
            #03111d 100%),
        linear-gradient(180deg, rgba(2,13,22,.12) 0%, rgba(2,13,22,0) 28%, rgba(2,13,22,.12) 100%);
}

.tw-reference-hero__layout {
    min-height: inherit;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: stretch;
    direction: ltr;
}

.tw-reference-hero__content {
    grid-column: 2;
    direction: rtl;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding: clamp(7.4rem, 9vw, 9.2rem) clamp(.5rem, 2vw, 1.75rem) clamp(1rem, 2.2vw, 2rem) clamp(1.2rem, 3vw, 3rem);
}

.tw-reference-hero__eyebrow {
    margin: 0 0 clamp(.7rem, 1vw, 1rem);
    color: #fff;
    font-size: clamp(.86rem, .92vw, 1rem);
    font-weight: 800;
    line-height: 1.8;
}

.tw-reference-hero__title {
    margin: 0;
    max-width: 100%;
    color: #fff;
    font-size: clamp(2.8rem, 4.25vw, 4.35rem);
    font-weight: 950;
    line-height: 1.18;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.tw-reference-hero__title-line,
.tw-reference-hero__title-white {
    display: block;
}

.tw-reference-hero__title-cyan,
.tw-reference-hero__title-gold {
    display: inline;
}

.tw-reference-hero__title-cyan { color: #13c7e7; }
.tw-reference-hero__title-gold { color: #e5ad38; }
.tw-reference-hero__title-white { color: #fff; }

.tw-reference-hero__description {
    max-width: 43rem;
    margin: clamp(1.1rem, 1.6vw, 1.55rem) 0 0 auto;
    color: rgba(255,255,255,.92);
    font-size: clamp(.94rem, 1.08vw, 1.11rem);
    font-weight: 500;
    line-height: 2;
}

.tw-reference-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(.75rem, 1.1vw, 1.05rem);
    margin-top: clamp(1.35rem, 2vw, 1.85rem);
}

.tw-reference-hero__button {
    min-height: 3.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .72rem 1.55rem;
    border-radius: .55rem;
    font-size: clamp(.86rem, .95vw, 1rem);
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.tw-reference-hero__button > svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-reference-hero__button--primary {
    color: #07131b;
    border: 1px solid #f0ba47;
    background: linear-gradient(180deg, #f8c551 0%, #e6ad34 100%);
    box-shadow: 0 .55rem 1.5rem rgba(228,170,49,.18), inset 0 1px 0 rgba(255,255,255,.34);
}

.tw-reference-hero__button--secondary {
    color: #fff;
    border: 1px solid #0dc0dc;
    background: rgba(2,17,29,.35);
    box-shadow: inset 0 0 0 1px rgba(13,192,220,.04);
}

.tw-reference-hero__button:hover { transform: translateY(-1px); }
.tw-reference-hero__button--primary:hover { box-shadow: 0 .7rem 1.8rem rgba(228,170,49,.25); }
.tw-reference-hero__button--secondary:hover { background: rgba(7,50,62,.55); }

.tw-reference-hero__play {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #16c9e8;
    color: #06202a;
    box-shadow: 0 0 1.2rem rgba(22,201,232,.22);
}

.tw-reference-hero__play svg {
    width: .95rem;
    height: .95rem;
    fill: currentColor;
    stroke: none;
}

.tw-reference-hero__features {
    width: min(100%, 42.5rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0;
    margin: auto 0 0 auto;
    padding-top: clamp(.9rem, 1.35vw, 1.25rem);
    border-top: 1px solid rgba(255,255,255,.10);
}

.tw-reference-hero__feature {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .78rem;
    padding-inline: clamp(.65rem, 1.2vw, 1.1rem);
    color: #fff;
}

.tw-reference-hero__feature + .tw-reference-hero__feature {
    border-inline-start: 1px solid rgba(255,255,255,.10);
}

.tw-reference-hero__feature-icon {
    flex: 0 0 auto;
    width: 2.55rem;
    height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #e4ad35;
    background: rgba(6,24,36,.78);
    border: 1px solid rgba(228,173,53,.22);
}

.tw-reference-hero__feature-icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-reference-hero__feature-icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.tw-reference-hero__feature-copy {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.tw-reference-hero__feature-copy strong {
    color: #fff;
    font-size: clamp(.68rem, .76vw, .8rem);
    font-weight: 800;
    line-height: 1.65;
}

.tw-reference-hero__feature-copy small {
    color: rgba(255,255,255,.68);
    font-size: clamp(.58rem, .65vw, .7rem);
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 1120px) {
    html body .tw-home-sequence > .tw-reference-hero.tw-section {
        min-height: 42rem;
    }
    .tw-reference-hero__layout { grid-template-columns: 42% 58%; }
    .tw-reference-hero__media { width: 51%; }
    .tw-reference-hero__content { padding-inline-start: 1rem; }
    .tw-reference-hero__title { font-size: clamp(2.65rem, 5vw, 3.7rem); }
}

@media (max-width: 900px) {
    html body .tw-home-sequence > .tw-reference-hero.tw-section {
        min-height: auto;
    }

    .tw-reference-hero__media {
        position: relative;
        inset: auto;
        width: 100%;
        height: min(68vw, 29rem);
        z-index: 0;
    }

    .tw-reference-hero__shade {
        z-index: 1;
        background: linear-gradient(180deg, rgba(3,17,29,.08) 0%, #03111d 96%);
    }

    .tw-reference-hero__layout {
        position: relative;
        z-index: 2;
        display: block;
        min-height: 0;
    }

    .tw-reference-hero__content {
        padding: 2.3rem 0 2rem;
    }

    .tw-reference-hero__description { margin-inline: 0; }
    .tw-reference-hero__features { margin-top: 2.2rem; }
}

@media (max-width: 620px) {
    .tw-reference-hero__media { height: 75vw; }
    .tw-reference-hero__title { font-size: clamp(2.15rem, 10vw, 3rem); }
    .tw-reference-hero__actions { display: grid; grid-template-columns: 1fr; }
    .tw-reference-hero__button { width: 100%; }
    .tw-reference-hero__features {
        grid-template-columns: 1fr;
        border-top: 1px solid rgba(255,255,255,.10);
    }
    .tw-reference-hero__feature {
        justify-content: flex-start;
        padding: .85rem 0;
    }
    .tw-reference-hero__feature + .tw-reference-hero__feature {
        border-inline-start: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }
}

/* v2 mobile composition: follows the approved reference mockup. */
@media (max-width: 900px) {
    .tw-reference-hero__media {
        height: min(62vw, 25rem);
    }

    .tw-reference-hero__content {
        padding-top: 2rem;
    }

    .tw-reference-hero__eyebrow,
    .tw-reference-hero__title,
    .tw-reference-hero__description {
        text-align: center;
    }

    .tw-reference-hero__description {
        margin-inline: auto;
        max-width: 38rem;
    }

    .tw-reference-hero__actions {
        width: min(100%, 31rem);
        margin-inline: auto;
    }
}

@media (max-width: 620px) {
    .tw-reference-hero__media {
        height: 62vw;
        min-height: 13rem;
        max-height: 20rem;
    }

    .tw-reference-hero__content {
        padding: 1.7rem .15rem 1.45rem;
    }

    .tw-reference-hero__eyebrow {
        margin-bottom: .55rem;
        font-size: .78rem;
    }

    .tw-reference-hero__title {
        font-size: clamp(2rem, 10.7vw, 2.9rem);
        line-height: 1.16;
    }

    .tw-reference-hero__description {
        margin-top: .9rem;
        font-size: .86rem;
        line-height: 1.9;
    }

    .tw-reference-hero__actions {
        gap: .62rem;
        margin-top: 1.15rem;
    }

    .tw-reference-hero__button {
        min-height: 3.1rem;
        border-radius: .5rem;
        font-size: .84rem;
    }

    .tw-reference-hero__features {
        width: 100%;
        grid-template-columns: repeat(3,minmax(0,1fr));
        margin-top: 1.25rem;
        padding-top: .9rem;
    }

    .tw-reference-hero__feature {
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: .38rem;
        padding: .25rem .35rem;
        text-align: center;
    }

    .tw-reference-hero__feature + .tw-reference-hero__feature {
        border-top: 0;
        border-inline-start: 1px solid rgba(255,255,255,.10);
    }

    .tw-reference-hero__feature-icon {
        width: 2.2rem;
        height: 2.2rem;
    }

    .tw-reference-hero__feature-icon svg,
    .tw-reference-hero__feature-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .tw-reference-hero__feature-copy {
        justify-items: center;
    }

    .tw-reference-hero__feature-copy strong {
        font-size: .61rem;
        line-height: 1.45;
    }

    .tw-reference-hero__feature-copy small {
        font-size: .53rem;
        line-height: 1.35;
    }
}