.tanweer-coming-soon {
    --navy: #0B1F33;
    --blue: #146CC1;
    --cyan: #18B7D4;
    --amber: #F4B63C;
    --white: #FFFFFF;
    --muted: #AAB8C5;

    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 24px;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(24,183,212,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(20,108,193,.15),
            transparent 35%
        ),
        var(--navy);

    color: var(--white);
    font-family: "Cairo", sans-serif;
    direction: rtl;
}

.tanweer-coming-soon *,
.tanweer-coming-soon *::before,
.tanweer-coming-soon *::after {
    box-sizing: border-box;
}

.tanweer-coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 64px 64px;
    pointer-events: none;
}

.tw-shell {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
}

.tw-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: clamp(70px, 10vh, 130px);
}

.tw-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tw-symbol {
    position: relative;
    width: 42px;
    height: 54px;
}

.tw-symbol::before,
.tw-symbol::after {
    content: "";
    position: absolute;

    width: 22px;
    height: 31px;

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    transform: skewX(-19deg);
}

.tw-symbol::before {
    right: 5px;
    top: 0;
}

.tw-symbol::after {
    left: 5px;
    bottom: 0;
}

.tw-brand-name {
    line-height: 1.1;
}

.tw-brand-name strong {
    display: block;
    color: #fff;

    font-size: 25px;
    font-weight: 800;
    letter-spacing: .04em;
}

.tw-brand-name span {
    display: block;

    margin-top: 6px;

    color: var(--muted);
    font-size: 11px;
    letter-spacing: .12em;

    direction: ltr;
}

.tw-status {
    display: flex;
    align-items: center;
    gap: 10px;

    direction: ltr;

    color: var(--muted);
    font-size: 12px;
    letter-spacing: .08em;
}

.tw-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--amber);

    box-shadow:
        0 0 0 6px rgba(244,182,60,.09);
}

.tw-main {
    display: grid;
    grid-template-columns:
        minmax(0,1.45fr)
        minmax(250px,.55fr);

    align-items: end;
    gap: clamp(45px,8vw,120px);
}

.tw-kicker {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;

    color: var(--cyan);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;

    direction: ltr;
}

.tw-kicker::before {
    content: "";

    width: 52px;
    height: 2px;

    background: var(--amber);
}

.tw-title {
    margin: 0;

    max-width: 850px;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: clamp(54px,8.5vw,122px);
    font-weight: 800;

    line-height: .92;
    letter-spacing: -.045em;
}

.tw-title span {
    display: block;
}

.tw-title .accent {
    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.65);

    direction: ltr;
}

.tw-description {
    max-width: 690px;

    margin: 36px 0 0;

    color: var(--muted);

    font-size: clamp(15px,1.5vw,18px);
    line-height: 2;
}

.tw-description strong {
    color: #fff;
}

.tw-side {
    padding-inline-start: 30px;

    border-inline-start:
        1px solid rgba(255,255,255,.13);
}

.tw-side-number {
    display: block;

    margin-bottom: 18px;

    color: var(--amber);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;

    direction: ltr;
}

.tw-side h2 {
    margin: 0 0 17px;

    color: #fff;

    font-family: "Cairo", sans-serif;
    font-size: 20px;
    font-weight: 700;

    direction: ltr;
    text-align: left;
}

.tw-side p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;

    direction: ltr;
    text-align: left;
}

.tw-services {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
    margin-top: 26px;

    direction: ltr;
}

.tw-services span {
    padding: 7px 11px;

    border:
        1px solid rgba(255,255,255,.13);

    color: #D8E2EA;

    font-size: 10px;
    letter-spacing: .04em;
}

.tw-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-top: clamp(75px,12vh,150px);
    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.11);

    color: #7890A3;

    font-size: 11px;

    direction: ltr;
}

.tw-progress {
    width: min(370px,45%);
}

.tw-progress-text {
    display: flex;
    justify-content: space-between;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 10px;
}

.tw-progress-line {
    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.1);
}

.tw-progress-line::after {
    content: "";

    position: absolute;
    inset-block: 0;
    left: 0;

    width: 64%;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan),
            var(--amber)
        );
}

.tw-code {
    position: absolute;

    left: -6px;
    bottom: -50px;

    z-index: -1;

    color:
        rgba(255,255,255,.025);

    font-size:
        clamp(180px,30vw,430px);

    font-weight: 800;
    line-height: .75;

    direction: ltr;
    user-select: none;
}

@media (max-width: 900px) {

    .tw-main {
        grid-template-columns: 1fr;
    }

    .tw-side {
        max-width: 520px;
    }
}

@media (max-width: 600px) {

    .tanweer-coming-soon {
        min-height: 100svh;

        padding:
            26px 20px;
    }

    .tw-top {
        margin-bottom: 70px;
    }

    .tw-status {
        display: none;
    }

    .tw-brand-name strong {
        font-size: 20px;
    }

    .tw-brand-name span {
        font-size: 8px;
    }

    .tw-title {
        font-size:
            clamp(48px,15vw,70px);

        line-height: .98;
    }

    .tw-description {
        margin-top: 26px;

        font-size: 14px;
    }

    .tw-side {
        padding-inline-start: 18px;
    }

    .tw-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .tw-progress {
        width: 100%;
    }

    .tw-code {
        display: none;
    }
}