/* =========================================================
   GOFTITO BANNER (under the company marquee)
   The same dark, warm card in both themes: it is Goftito's own look.
========================================================= */

.goftito-banner {
    --gb-gold: #f0c85c;
    --gb-gold-deep: #d79f2c;
    --gb-ink: #f6ecd8;
    --gb-muted: #cbbb9d;
    --gb-line: rgba(240, 200, 92, .26);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    width: 100%;
    margin: 0 0 30px;
    padding: 26px 28px;
    overflow: hidden;
    border: 1px solid rgba(216, 170, 79, .45);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 0%, rgba(240, 200, 92, .20), transparent 38%),
        radial-gradient(circle at 6% 100%, rgba(215, 159, 44, .16), transparent 40%),
        linear-gradient(140deg, #31251a 0%, #231a12 55%, #1a140e 100%);
    box-shadow: 0 22px 46px rgba(7, 27, 51, .16), inset 0 1px 0 rgba(255, 236, 190, .10);
    color: var(--gb-ink);
    font-family: Vazirmatn, Tahoma, "Segoe UI", Arial, sans-serif;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.goftito-banner[hidden] {
    display: none !important;
}

    /* A gold sheen that crosses the card on hover. */
    .goftito-banner::after {
        content: "";
        position: absolute;
        inset: -40% auto -40% -30%;
        z-index: -1;
        width: 22%;
        background: linear-gradient(90deg, transparent, rgba(255, 226, 150, .14), transparent);
        transform: skewX(-18deg) translateX(-120%);
        pointer-events: none;
    }

    .goftito-banner:hover {
        border-color: rgba(240, 200, 92, .75);
        box-shadow: 0 26px 54px rgba(7, 27, 51, .22), inset 0 1px 0 rgba(255, 236, 190, .14);
        transform: translateY(-3px);
    }

        .goftito-banner:hover::after {
            transform: skewX(-18deg) translateX(780%);
            transition: transform 1.1s ease;
        }

    .goftito-banner:focus-visible {
        outline: 3px solid var(--gb-gold);
        outline-offset: 3px;
    }

/* ---------- Copy ---------- */

.gb-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.gb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gb-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--gb-line);
    border-radius: 17px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 236, 190, .14), rgba(255, 255, 255, .03));
    box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}

    .gb-mark img {
        width: 36px;
        height: auto;
    }

.gb-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--gb-gold);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.gb-name {
    display: block;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

    .gb-name small {
        display: inline-block;
        margin: 0 10px;
        color: var(--gb-muted);
        font-family: "Segoe UI", Arial, sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        direction: ltr;
        unicode-bidi: isolate;
    }

.gb-title {
    margin: 2px 0 0;
    background: linear-gradient(100deg, #ffe7a6, var(--gb-gold) 45%, var(--gb-gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.35;
}

.gb-text {
    margin: 0;
    color: var(--gb-muted);
    font-size: 13.5px;
    line-height: 1.95;
}

.gb-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe08a, var(--gb-gold) 50%, var(--gb-gold-deep));
    box-shadow: 0 10px 22px rgba(215, 159, 44, .30);
    color: #2a1f13;
    font-size: 13.5px;
    font-weight: 800;
    transition: gap .3s ease, box-shadow .3s ease;
}

    .gb-cta svg {
        width: 16px;
        height: 16px;
    }

.goftito-banner:hover .gb-cta {
    gap: 14px;
    box-shadow: 0 12px 28px rgba(215, 159, 44, .45);
}

.gb-ltr .gb-cta svg {
    transform: scaleX(-1);
}

/* ---------- Products ---------- */

.gb-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.gb-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(255, 236, 190, .10);
    border-radius: 17px;
    background: linear-gradient(150deg, rgba(255, 245, 222, .075), rgba(255, 245, 222, .025));
    animation: gb-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.1s);
}

    .gb-tile strong {
        display: block;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.5;
    }

    .gb-tile small {
        display: block;
        color: var(--gb-muted);
        font-size: 11px;
        line-height: 1.6;
    }

.gb-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(240, 200, 92, .22), rgba(215, 159, 44, .10));
    color: var(--gb-gold);
}

    .gb-icon svg {
        width: 19px;
        height: 19px;
    }

/* The wide translation tile: a page whose lines turn from one language to the other. */
.gb-tile--wide {
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-block: 12px;
    border-color: rgba(240, 200, 92, .28);
    background: linear-gradient(150deg, rgba(240, 200, 92, .14), rgba(255, 245, 222, .03));
}

.gb-tile__main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.gb-pages {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    direction: ltr;
}

.gb-page {
    display: grid;
    gap: 4px;
    align-content: start;
    width: 42px;
    height: 52px;
    padding: 8px 7px;
    border-radius: 6px;
    background: #fbf5e7;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
}

    .gb-page i {
        display: block;
        height: 3px;
        border-radius: 2px;
        background: #c8b48b;
    }

        .gb-page i:nth-child(1) {
            width: 70%;
            background: #d79f2c;
        }

        .gb-page i:nth-child(3) {
            width: 82%;
        }

        .gb-page i:nth-child(5) {
            width: 60%;
        }

.gb-page--to {
    justify-items: end;
}

    .gb-page--to i {
        transform-origin: right;
        animation: gb-write 3.6s ease-in-out infinite;
    }

        /* Started part-way, so the page is already written when it first shows. */
        .gb-page--to i:nth-child(1) { animation-delay: -2.4s; }
        .gb-page--to i:nth-child(2) { animation-delay: -2.25s; }
        .gb-page--to i:nth-child(3) { animation-delay: -2.1s; }
        .gb-page--to i:nth-child(4) { animation-delay: -1.95s; }
        .gb-page--to i:nth-child(5) { animation-delay: -1.8s; }

.gb-flow {
    width: 18px;
    height: 18px;
    color: var(--gb-gold);
}

@keyframes gb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes gb-write {
    0%, 12% { transform: scaleX(0); }
    40%, 100% { transform: scaleX(1); }
}

/* ---------- Language ---------- */

/* The English page is set in Inter, like the rest of the site in English. */
.gb-ltr {
    direction: ltr;
    text-align: left;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

    .gb-ltr .gb-title {
        letter-spacing: -.01em;
    }

.gb-rtl {
    direction: rtl;
    text-align: right;
}

/* ---------- Narrower main column ----------
   Sized by the width the banner is given, not by the window,
   because the profile sidebar takes part of the window on desktop. */

/* The banner sits between the marquee and the page, so it borrows their
   margins: these values leave the same gap above and below it that the
   site keeps between the marquee and the page at each width
   (16px on desktop, 8px from 721 to 1100px, 10px on phones). */
.gb-wrap {
    container: gb / inline-size;
    width: 100%;
    margin: -38px 0 30px;
}

    .gb-wrap .goftito-banner {
        margin: 0;
    }

@media (max-width: 1100px) {
    .gb-wrap {
        margin: -66px 0 50px;
    }
}

@media (max-width: 720px) {
    .gb-wrap {
        margin-bottom: 52px;
    }
}

@container gb (max-width: 760px) {
    .goftito-banner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@container gb (max-width: 560px) {
    .goftito-banner {
        padding: 20px 18px;
        border-radius: 24px;
    }

    .gb-title {
        font-size: 22px;
    }

    .gb-cta {
        align-self: stretch;
        justify-content: center;
    }
}

/* Phones: tiles stay two to a row with just their names, so the banner
   stays about as tall as the cards around it. */
@container gb (max-width: 400px) {
    .gb-products {
        gap: 8px;
    }

    .gb-tile {
        gap: 8px;
        padding: 9px 10px;
    }

        .gb-tile strong {
            font-size: 12px;
        }

        .gb-tile:not(.gb-tile--wide) small,
        .gb-pages {
            display: none;
        }

    .gb-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

        .gb-icon svg {
            width: 16px;
            height: 16px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .goftito-banner,
    .gb-tile,
    .gb-page--to i {
        animation: none;
        transition: none;
    }

        .goftito-banner:hover {
            transform: none;
        }

            .goftito-banner:hover::after {
                transition: none;
            }
}

/* ---------- Which language shows ----------
   Both banners are rendered; <html data-language> chooses one,
   the same way the brand names in the marquee do. */

.gb-wrap--fa {
    display: none;
}

html[data-language="fa"] .gb-wrap--fa {
    display: block;
}

html[data-language="fa"] .gb-wrap--en {
    display: none;
}