/* _content/AITranslationPlatform.Web/Components/Account/Pages/Home.razor.rz.scp.css */
/* =========================================================
   AI TRANSLATION — PUBLIC LANDING V1
   Token-driven Light / Warm Dark marketing surface.
   ========================================================= */
.home-page[b-w2nmzbtm49] {
    --bg: var(--ui-page,#f7f3ec);
    --surface: var(--ui-surface,#fff);
    --raised: var(--ui-surface-raised,#fffdf8);
    --soft: var(--ui-surface-sunken,#f4eee4);
    --ink: var(--text,#28231d);
    --text2: var(--text-secondary,#655e53);
    --muted: var(--muted,#958a7b);
    --line: var(--ui-line,rgba(73,59,42,.10));
    --line2: var(--ui-line-strong,rgba(73,59,42,.16));
    --accent: var(--ui-accent,#efbf45);
    --accent2: var(--ui-accent-strong,#dca52d);
    --accentSoft: var(--ui-accent-soft,rgba(226,175,46,.13));
    --accentTint: var(--ui-accent-tint,rgba(226,175,46,.075));
    --success: var(--ui-success,#4f9869);
    --successSoft: var(--ui-success-tint,rgba(79,152,105,.10));
    --danger: var(--ui-danger,#b85c59);
    --shadowSm: var(--ui-shadow-sm,0 10px 28px rgba(45,36,25,.07));
    --shadowMd: var(--ui-shadow-md,0 22px 56px rgba(45,36,25,.10));
    min-height: 100vh;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(950px 600px at 7% 0%,var(--accentTint),transparent 62%),radial-gradient(850px 560px at 98% 18%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 63%),var(--bg)
}
.home-page*[b-w2nmzbtm49],
.home-page *[b-w2nmzbtm49]::before,
.home-page *[b-w2nmzbtm49]::after {
        box-sizing: border-box
    }
.home-page a[b-w2nmzbtm49] {
        color: inherit
    }
.public-header[b-w2nmzbtm49] {
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb,var(--bg) 84%,transparent);
    backdrop-filter: blur(20px) saturate(1.15)
}
.public-header__inner[b-w2nmzbtm49] {
    width: min(1320px,calc(100% - 30px));
    min-height: 72px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px
}
.brand[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none
}
.brand__mark[b-w2nmzbtm49] {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--accent2) 28%,transparent);
    border-radius: 14px;
    background: linear-gradient(145deg,var(--accent),var(--accent2));
    color: #34270f;
    box-shadow: 0 12px 26px color-mix(in srgb,var(--accent) 22%,transparent)
}
.brand__mark[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset: -50%;
        background: linear-gradient(120deg,transparent 35%,rgba(255,255,255,.44) 50%,transparent 65%);
        transform: translateX(-90%) rotate(12deg);
        animation: logo-shine-b-w2nmzbtm49 7s ease-in-out infinite
    }
.brand__mark svg[b-w2nmzbtm49] {
        position: relative;
        z-index: 1;
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round
    }
.brand__copy[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column
}
.brand__copy strong[b-w2nmzbtm49] {
        font-size: .72rem;
        font-weight: 900
    }
.brand__copy small[b-w2nmzbtm49] {
        margin-top: 2px;
        color: var(--muted);
        font-size: .47rem;
        font-weight: 700;
        white-space: nowrap
    }
.public-nav[b-w2nmzbtm49] {
    display: flex;
    justify-content: center;
    gap: 25px
}
.public-nav a[b-w2nmzbtm49] {
        position: relative;
        padding: 9px 0;
        color: var(--text2);
        font-size: .81rem;
        font-weight: 760;
        text-decoration: none
    }
.public-nav a[b-w2nmzbtm49]::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 3px;
            width: 0;
            height: 2px;
            border-radius: 99px;
            background: var(--accent2);
            transform: translateX(-50%);
            transition: .18s
        }
.public-nav a:hover[b-w2nmzbtm49] {
            color: var(--ink)
        }
.public-nav a:hover[b-w2nmzbtm49]::after {
                width: 70%
            }
.public-header__actions[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 7px
}
.lang-button[b-w2nmzbtm49],
.signin-button[b-w2nmzbtm49],
.header-cta[b-w2nmzbtm49] {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 11px;
    text-decoration: none;
    font-size: .57rem;
    font-weight: 820;
    transition: .17s
}
.lang-button[b-w2nmzbtm49] {
    min-width: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text2)
}
.signin-button[b-w2nmzbtm49] {
    padding-inline: 13px;
    border: 1px solid var(--line);
    background: color-mix(in srgb,var(--surface) 78%,transparent);
    color: var(--text2)
}
.header-cta[b-w2nmzbtm49] {
    padding-inline: 15px;
    border: 1px solid color-mix(in srgb,var(--accent2) 30%,transparent);
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    color: #34270f;
    box-shadow: 0 9px 22px color-mix(in srgb,var(--accent) 18%,transparent)
}
.lang-button:hover[b-w2nmzbtm49],
.signin-button:hover[b-w2nmzbtm49],
.header-cta:hover[b-w2nmzbtm49] {
        transform: translateY(-1px)
    }
.section[b-w2nmzbtm49] {
    padding: 100px 0
}
/* HERO */
.hero[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    padding: 92px 0 34px
}
.hero h1[b-w2nmzbtm49] {
    margin: 23px 0 19px;
    font-size: clamp(3rem,5.65vw,5.35rem);
    font-weight: 950;
    line-height: 1.055;
    letter-spacing: -.065em
}
.home-page[dir=rtl] .hero h1[b-w2nmzbtm49] {
    letter-spacing: -.025em
}
.hero h1 strong[b-w2nmzbtm49] {
    display: block;
    margin-top: 3px;
    color: transparent;
    background: linear-gradient(110deg,color-mix(in srgb,var(--accent2) 76%,#8d5f18),var(--accent),color-mix(in srgb,var(--accent2) 80%,#9b6d25));
    background-clip: text;
    -webkit-background-clip: text
}
.button[b-w2nmzbtm49] {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 19px;
    border-radius: 14px;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 860;
    transition: .18s
}
.button:hover[b-w2nmzbtm49] {
        transform: translateY(-2px)
    }
/* RESPONSIVE */
@media(max-width:1120px) {
    .public-nav[b-w2nmzbtm49] {
        display: none
    }

    .public-header__inner[b-w2nmzbtm49] {
        grid-template-columns: 1fr auto
    }

    .hero__layout[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .hero__copy[b-w2nmzbtm49] {
        max-width: 820px;
        margin: auto;
        text-align: center
    }

        .eyebrow[b-w2nmzbtm49], .hero__copy > p[b-w2nmzbtm49] {
            margin-inline: auto
        }

    .hero__actions[b-w2nmzbtm49], .hero__trust[b-w2nmzbtm49] {
        justify-content: center
    }

    .hero-visual[b-w2nmzbtm49] {
        width: min(690px,100%);
        margin: auto
    }

    .difference-grid[b-w2nmzbtm49], .workflow-shell[b-w2nmzbtm49], .preservation-shell[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .workflow-copy[b-w2nmzbtm49] {
        position: static
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49], .bento:not(.bento--layout):not(.bento--ocr)[b-w2nmzbtm49] {
        grid-column: span 6
    }

    .pricing-heading[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        align-items: start
    }

    .final-cta[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

        .final-cta aside[b-w2nmzbtm49] {
            width: min(430px,100%);
            margin: auto
        }
}
@media(max-width:820px) {
    .section[b-w2nmzbtm49] {
        padding: 78px 0
    }

    .hero[b-w2nmzbtm49] {
        padding-top: 70px
    }

    .hero-visual[b-w2nmzbtm49] {
        transform: scale(.88);
        transform-origin: center top;
        margin-bottom: -48px
    }

    .hero-metrics[b-w2nmzbtm49] {
        grid-template-columns: 1fr 1fr
    }

        .hero-metrics > div:nth-child(2)[b-w2nmzbtm49] {
            border-inline-end: 0
        }

        .hero-metrics > div:nth-child(-n+2)[b-w2nmzbtm49] {
            border-bottom: 1px solid var(--line)
        }

    .bento-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49], .bento:not(.bento--layout):not(.bento--ocr)[b-w2nmzbtm49] {
        grid-column: auto
    }

    .preservation-shell[b-w2nmzbtm49] {
        padding: 28px
    }

    .public-footer > .container[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
    }

    .public-footer nav[b-w2nmzbtm49] {
        flex-wrap: wrap;
        justify-content: center
    }
}
@media(max-width:620px) {
    .container[b-w2nmzbtm49] {
        width: min(100% - 24px,1240px)
    }

    .public-header__inner[b-w2nmzbtm49] {
        min-height: 64px;
        width: min(100% - 18px,1320px);
        gap: 8px
    }

    .brand__copy small[b-w2nmzbtm49], .signin-button[b-w2nmzbtm49] {
        display: none
    }

    .header-cta[b-w2nmzbtm49] {
        padding-inline: 11px;
        font-size: .51rem
    }

    .hero[b-w2nmzbtm49] {
        padding-top: 58px
    }

        .hero h1[b-w2nmzbtm49] {
            font-size: clamp(2.6rem,13vw,4rem)
        }

    .hero__copy > p[b-w2nmzbtm49] {
        font-size: .74rem
    }

    .hero__actions[b-w2nmzbtm49] {
        flex-direction: column
    }

        .hero__actions .button[b-w2nmzbtm49] {
            width: 100%
        }

    .hero-visual[b-w2nmzbtm49] {
        width: 640px;
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%) scale(.67);
        margin-bottom: -150px
    }

    .home-page[dir=rtl] .hero-visual[b-w2nmzbtm49] {
        margin-left: 0;
        margin-right: 50%;
        transform: translateX(50%) scale(.67)
    }

    .hero-metrics > div[b-w2nmzbtm49] {
        min-height: 78px;
        padding: 13px 14px
    }

    .difference-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .difference-card[b-w2nmzbtm49] {
        min-height: 0;
        padding: 17px
    }

    .plain-visual[b-w2nmzbtm49], .pro-visual[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 11px
    }

        .plain-visual > strong[b-w2nmzbtm49] {
            transform: rotate(90deg)
        }

    .pro-bridge[b-w2nmzbtm49] {
        flex-direction: row
    }

        .pro-bridge i[b-w2nmzbtm49] {
            width: 48px;
            height: 2px
        }

    .section-heading h2[b-w2nmzbtm49], .workflow-copy h2[b-w2nmzbtm49], .preservation-copy h2[b-w2nmzbtm49], .pricing-heading h2[b-w2nmzbtm49] {
        font-size: clamp(1.8rem,10vw,2.6rem)
    }

    .layout-demo[b-w2nmzbtm49], .ocr-demo[b-w2nmzbtm49] {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 22px
    }

    .bento--layout[b-w2nmzbtm49], .bento--ocr[b-w2nmzbtm49] {
        min-height: 420px
    }

    .workflow-list[b-w2nmzbtm49] {
        padding-inline-start: 26px
    }

        .workflow-list article[b-w2nmzbtm49] {
            grid-template-columns: 40px 1fr
        }

            .workflow-list article > span[b-w2nmzbtm49] {
                display: none
            }

    .preservation-shell[b-w2nmzbtm49] {
        padding: 18px;
        border-radius: 22px
    }

    .preservation-page[b-w2nmzbtm49] {
        padding: 26px 18px
    }

    .preservation-cols[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .preservation-points[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .package-grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr
    }

    .package-card[b-w2nmzbtm49] {
        min-height: 0
    }

    .final-cta[b-w2nmzbtm49] {
        min-height: 520px;
        padding: 38px 24px;
        border-radius: 23px
    }

        .final-cta h2[b-w2nmzbtm49] {
            font-size: clamp(2rem,11vw,3rem)
        }

        .final-cta > div > div[b-w2nmzbtm49] {
            flex-direction: column
        }

        .final-cta .button[b-w2nmzbtm49] {
            width: 100%
        }
}
@keyframes logo-shine-b-w2nmzbtm49 {
    0%,74% {
        transform: translateX(-90%) rotate(12deg)
    }

    88%,100% {
        transform: translateX(90%) rotate(12deg)
    }
}

@supports(animation-timeline:view()) {
    .landing-reveal[b-w2nmzbtm49] {
        animation: reveal-b-w2nmzbtm49 linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 28%
    }

    @keyframes reveal-b-w2nmzbtm49 {
        from {
            opacity: .3;
            transform: translateY(22px) scale(.992)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}
@media(prefers-reduced-motion:reduce) {
    .home-page *[b-w2nmzbtm49], .home-page *[b-w2nmzbtm49]::before, .home-page *[b-w2nmzbtm49]::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }
}
@media (prefers-reduced-motion: reduce) {
.home-page .hero h1[b-w2nmzbtm49],
.home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-name: heroGoldShimmer-b-w2nmzbtm49 !important;
        animation-duration: 4s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }

}
/* LANDING COMPARE COMPACT V2 - END */
/* LANDING HERO EXACT POLISH V3 - START */
/* Exact V1 selectors:
   .hero__copy
   .hero-video-stage
   .hero-metrics
   The user's WebM remains untouched.
*/
.hero[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 58px 0 34px !important;
}
.hero[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 18px 18px 8px;
        z-index: -3;
        border: 1px solid color-mix(in srgb, var(--accent2) 16%, var(--line));
        border-radius: 36px;
        background: radial-gradient(circle at 10% 18%, color-mix(in srgb, #ffffff 17%, transparent), transparent 28% 28%), radial-gradient(circle at 88% 20%, color-mix(in srgb, #ffffff 8%, #d1be8ab5), #bba47382 24%), linear-gradient(145deg, color-mix(in srgb, rgb(255 255 255 / 80%) 86%, #ffffff70), color-mix(in srgb, rgb(111 103 89 / 0%) 58%, #4d4223));
        box-shadow: 0 26px 70px rgba(70, 52, 14, .07), inset 0 1px 0 rgba(255,255,255,.72);
    }
.hero[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset-inline-end: 5.5%;
        top: 10%;
        z-index: -2;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
        filter: blur(20px);
        animation: hero-v3-breathe-b-w2nmzbtm49 6.5s ease-in-out infinite;
    }
.hero h1[b-w2nmzbtm49] {
    margin: 18px 0 18px !important;
    font-size: clamp(3.25rem, 5.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    font-weight: 980 !important;
    letter-spacing: -.055em !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /* IMPORTANT:
       Do NOT use the background shorthand here.
       An old background: ... !important freezes background-position
       and prevents the shimmer keyframes from moving it.
    */
    background-image: linear-gradient( 110deg, #9b6a0e 0%, #c88710 22%, #e8ad26 38%, #ffd85e 46%, #fff4c4 50%, #ffd85e 54%, #e8ad26 62%, #c88710 78%, #9b6a0e 100% ) !important;
    background-size: 260% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 0 14px 42px rgba(211, 158, 35, .12) !important;
    animation: heroGoldShimmer-b-w2nmzbtm49 4.2s linear infinite !important;
}
.home-page[dir="rtl"] .hero h1[b-w2nmzbtm49] {
    letter-spacing: -.025em !important;
}
.hero h1 strong[b-w2nmzbtm49] {
    display: block !important;
    margin-top: 5px !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient( 110deg, #ad730c 0%, #d79614 22%, #f0bb35 38%, #ffe16f 46%, #fff7ce 50%, #ffe16f 54%, #f0bb35 62%, #d79614 78%, #ad730c 100% ) !important;
    background-size: 260% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldShimmer-b-w2nmzbtm49 4.2s linear infinite !important;
    animation-delay: -1.05s !important;
}
/* Dark */
html[data-theme="dark"] .hero[b-w2nmzbtm49]::before {
    background: radial-gradient(circle at 10% 18%, rgba(222, 174, 53, .12), transparent 28%), radial-gradient(circle at 88% 20%, rgba(222, 174, 53, .07), transparent 24%), linear-gradient(145deg, rgba(40, 33, 23, .91), rgba(26, 22, 17, .91)) !important;
    border-color: rgba(221, 178, 68, .13) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
@media (max-width: 680px) {
.hero[b-w2nmzbtm49] {
        padding: 48px 0 28px !important;
    }
.hero[b-w2nmzbtm49]::before {
            inset: 10px 8px 6px !important;
            border-radius: 28px !important;
        }
.hero h1[b-w2nmzbtm49] {
            font-size: clamp(2.5rem, 12vw, 4rem) !important;
        }

}

@keyframes hero-v3-breathe-b-w2nmzbtm49 {
    0%,100% {
        transform: scale(.96);
        opacity: .72;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
.hero[b-w2nmzbtm49]::after {
        animation: none !important;
    }

}
/* LANDING HERO EXACT POLISH V3 - END */
/* LANDING HERO POLISH V3.3 - START */
/* Hero title: slightly smaller and more balanced */
.hero h1[b-w2nmzbtm49] {
    font-size: clamp(2.55rem, 4.6vw, 4.15rem) !important;
    line-height: 1.06 !important;
}
@media (max-width: 680px) {
.hero h1[b-w2nmzbtm49] {
        font-size: clamp(2.25rem, 10.8vw, 3.5rem) !important;
    }

}
/* HERO METRICS COMPACT FINAL - END */
.hero h1[b-w2nmzbtm49] {
    margin: 18px 0 18px !important;
    font-size: clamp(3.25rem, 5.8vw, 3.45rem) !important;
    line-height: 1.02 !important;
    font-weight: 980 !important;
    letter-spacing: -.055em !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /* مهم: background shorthand استفاده نکن */
    background-image: linear-gradient( 105deg, #9b6a0e 0%, #d49a1c 18%, #f5c84d 34%, #fff0a2 47%, #ffffff 50%, #fff0a2 53%, #f5c84d 66%, #d49a1c 82%, #9b6a0e 100% ) !important;
    background-size: 320% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    /*
       روی background-position به هیچ وجه !important نگذار.
       باید keyframe بتواند آن را تغییر دهد.
    */
    background-position: -160% 50%;
    text-shadow: 0 14px 42px rgba(211, 158, 35, .12) !important;
    animation-name: heroGoldShimmer-b-w2nmzbtm49;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.hero h1 strong[b-w2nmzbtm49] {
        display: block !important;
        margin-top: 5px !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
        background-image: linear-gradient( 105deg, #a96f08 0%, #dc9e19 18%, #f7cb50 34%, #fff09d 47%, #ffffff 50%, #fff09d 53%, #f7cb50 66%, #dc9e19 82%, #a96f08 100% ) !important;
        background-size: 320% 100% !important;
        background-repeat: no-repeat !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        background-position: -160% 50%;
        animation-name: heroGoldShimmer-b-w2nmzbtm49;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-delay: -1.1s;
    }
@keyframes heroGoldShimmer-b-w2nmzbtm49 {
    0% {
        background-position: -190% 50%;
    }

    100% {
        background-position: 90% 50%;
    }
}
/*
   The global reduced-motion rule in this file sets every animation
   to .001ms !important. Keep the user's requested title animation
   alive even when that media query is active.
*/
@media (prefers-reduced-motion: reduce) {
.home-page .hero h1[b-w2nmzbtm49],
.home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-name: heroGoldShimmer-b-w2nmzbtm49 !important;
        animation-duration: 4.2s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
.home-page .hero h1 strong[b-w2nmzbtm49] {
            animation-delay: -1.05s !important;
        }

}
/* ==========================================================
   END HERO TITLE — VERIFIED MOVING GOLD
   ========================================================== */
/* =========================================================
   HERO TITLE — FIXED TEXT / MOVING GOLD SHINE ONLY
   ========================================================= */
.home-page .hero h1[b-w2nmzbtm49],
.home-page .hero h1 strong[b-w2nmzbtm49] {
    /* خود نوشته همیشه ثابت و قابل مشاهده بماند */
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    /*
       Layer 1 = نور متحرک
       Layer 2 = طلایی ثابت
    */
    background-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 235, 155, 0.15) 44%, rgba(255, 250, 210, 0.95) 50%, rgba(255, 235, 155, 0.15) 56%, transparent 62%, transparent 100%), linear-gradient(115deg, #b98800 0%, #ab7e00 22%, #cb9500 45%, #bf8d00 68%, #a77b00 100%) !important;
    /*
       لایه اول بزرگ و متحرک
       لایه دوم همیشه 100% ثابت
    */
    background-size: 240% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 180% 50%, 0 50%;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    will-change: background-position;
}
/* خط دوم همان رنگ، فقط نور کمی دیرتر عبور کند */
.home-page .hero h1 strong[b-w2nmzbtm49] {
        animation-delay: -1.2s !important;
    }
@keyframes heroGoldLightSweep-b-w2nmzbtm49 {
    0% {
        background-position: -80% 50%, 0 50%;
    }

    100% {
        background-position: 180% 50%, 0 50%;
    }
}
/*
   CSS فعلی پروژه در Reduce Motion همه animationها را می‌کشد.
   فقط همین shine را دوباره فعال می‌کنیم.
*/
@media (prefers-reduced-motion: reduce) {
.home-page .hero h1[b-w2nmzbtm49],
.home-page .hero h1 strong[b-w2nmzbtm49] {
        animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    }
.home-page .hero h1 strong[b-w2nmzbtm49] {
            animation-delay: -1.2s !important;
        }

}
/* =========================================================
   HERO BACKGROUND RINGS — FINAL UNIFORM INFINITE WAVES
   Fixed spacing / continuous loop / late fade / full gold
   ========================================================= */
/* =========================================================
   HERO BOUNDARY
   حلقه‌ها نباید از کادر اصلی Hero خارج شوند
   مقادیر دقیقاً مطابق قاب فعلی Hero هستند
   ========================================================= */
.hero[b-w2nmzbtm49] {
    overflow: hidden !important;
    /*
       قاب فعلی Hero:
       inset: 18px 18px 8px;
       border-radius: 36px;
    */
    clip-path: inset( 18px 18px 8px 18px round 36px ) !important;
}

/* =========================================================
   MOBILE HERO BOUNDARY

   قاب موبایل Hero در CSS اصلی:
       inset: 10px 8px 6px
       radius: 28px
   ========================================================= */
@media (max-width: 680px) {
.hero[b-w2nmzbtm49] {
        clip-path: inset( 10px 8px 6px 8px round 28px ) !important;
    }

}
/* HERO — MORE SPACE BELOW METRIC CARDS */
.hero[b-w2nmzbtm49] {
    padding-bottom: 64px !important;
}

/* =========================================================
   WORKFLOW PREMIUM — CLEAN FINAL BASE
   ========================================================= */
/* =========================================================
   SECTION
   ========================================================= */
.workflow-premium[b-w2nmzbtm49] {
    position: relative;
    overflow: hidden;
    padding: 90px 0 82px;
    color: #f6efe3;
    background: radial-gradient( 900px 560px at 5% 12%, rgba(224, 170, 39, .12), transparent 67% ), radial-gradient( 800px 560px at 95% 88%, rgba(194, 137, 27, .08), transparent 70% ), linear-gradient( 145deg, #1c1711 0%, #241d15 48%, #18130f 100% );
}
/* texture */
.workflow-premium[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .13;
        background-image: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.014) 1px, transparent 1px );
        background-size: 52px 52px;
    }
/* ambient gold */
.workflow-premium[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -420px;
        width: 980px;
        height: 740px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient( circle, rgba(220,163,28,.085), transparent 68% );
        filter: blur(30px);
        pointer-events: none;
    }
.workflow-premium__inner[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min( 1240px, calc(100% - 42px) );
    margin-inline: auto;
}
/* =========================================================
   HEADER
   ========================================================= */
.workflow-premium__header[b-w2nmzbtm49] {
    width: min(920px, 100%);
    margin-inline: auto;
    margin-bottom: 52px;
    text-align: center;
}
.workflow-premium__eyebrow[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid rgba(223,171,45,.24);
    border-radius: 999px;
    background: rgba(223,171,45,.07);
    color: #edbb3d;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.workflow-premium__eyebrow > span[b-w2nmzbtm49] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e3ab25;
        box-shadow: 0 0 0 5px rgba(227,171,37,.10), 0 0 17px rgba(227,171,37,.30);
    }
.workflow-premium__header h2[b-w2nmzbtm49] {
    max-width: 820px;
    margin: 18px auto 14px;
    color: #f8f0e4;
    font-size: clamp( 2.75rem, 4vw, 4.45rem );
    line-height: 1.14;
    font-weight: 950;
    opacity: 1 !important;
    transform: none !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 235, 155, 0.15) 44%, rgba(255, 250, 210, 0.95) 50%, rgba(255, 235, 155, 0.15) 56%, transparent 62%, transparent 100%), linear-gradient(115deg, #8b7129 0%, #b19443 22%, #f5d57e 45%, #99791c 68%, #ffd358 100%) !important;
    background-size: 240% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 180% 50%, 0 50%;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    animation: heroGoldLightSweep-b-w2nmzbtm49 4.8s linear infinite !important;
    will-change: background-position;
}
.home-page[dir="rtl"]
.workflow-premium__header h2[b-w2nmzbtm49] {
    letter-spacing: -.015em;
}
.workflow-premium__header > p[b-w2nmzbtm49] {
    max-width: 790px;
    margin-inline: auto;
    color: #b9ac9a;
    font-size: 1.02rem;
    line-height: 2.05;
    font-weight: 600;
}
/* =========================================================
   MINI FLOW
   ========================================================= */
.workflow-premium__mini-flow[b-w2nmzbtm49] {
    width: min(540px, 100%);
    margin: 25px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.workflow-premium__mini-flow span[b-w2nmzbtm49] {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        border-radius: 13px;
        border: 1px solid rgba(224,174,48,.24);
        background: linear-gradient( 145deg, rgba(224,174,48,.12), rgba(224,174,48,.045) );
        color: #e9b73c;
        font-size: .68rem;
        font-weight: 950;
    }
.workflow-premium__mini-flow i[b-w2nmzbtm49] {
        flex: 1;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(226,176,51,.30), transparent );
    }
.workflow-premium__cta[b-w2nmzbtm49] {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #e7b439;
    font-size: .84rem;
    font-weight: 900;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.workflow-premium__cta:hover[b-w2nmzbtm49] {
        color: #ffd86d;
        transform: translateY(-2px);
    }
/* =========================================================
   TRACK
   ========================================================= */
.workflow-track[b-w2nmzbtm49] {
    position: relative;
    isolation: isolate;
    /*
       جای Rail و Connector
    */
    padding-bottom: 92px;
    overflow: visible;
}
/* =========================================================
   FIVE CARDS
   ========================================================= */
.workflow-cards[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat( 5, minmax(0,1fr) );
    gap: 16px;
}
/* =========================================================
   CARD
   ========================================================= */
.workflow-step[b-w2nmzbtm49] {
    position: relative;
    min-width: 0;
    min-height: 242px;
    padding: 20px 20px 22px;
    overflow: hidden;
    border: 1px solid rgba(225,177,61,.24);
    border-radius: 26px;
    background: radial-gradient(circle at 84% 4%, rgba(225, 175, 48, .14), transparent 38%), radial-gradient(circle at 12% 94%, rgba(225, 175, 48, .055), transparent 34%), linear-gradient(150deg, rgb(119 103 82 / 82%), rgb(85 78 59 / 97%) 48%, rgb(73 65 47 / 99%)); box-shadow: 0 15px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
    /*
       فقط JS این Variable را تغییر می‌دهد.
    */
    transform: translate3d( 0, var(--wf-lift, 0px), 0 );
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.workflow-step:hover[b-w2nmzbtm49] {
        border-color: rgba(235,187,66,.42);
        box-shadow: 0 22px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
    }
/* =========================================================
   CARD TOP
   ========================================================= */
.workflow-step__top[b-w2nmzbtm49] {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 19px;
}
.workflow-step__number[b-w2nmzbtm49] {
    min-width: 66px;
    height: 50px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(227,177,49,.35);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(226,173,42,.20), rgba(151,105,15,.10) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 7px 17px rgba(0,0,0,.10);
}
.workflow-step__number small[b-w2nmzbtm49] {
        color: #a18451;
        font-size: .40rem;
        font-weight: 900;
        letter-spacing: .08em;
    }
.workflow-step__number strong[b-w2nmzbtm49] {
        color: #f0bd3b;
        font-size: .92rem;
        line-height: 1;
        font-weight: 950;
    }
.workflow-step__icon[b-w2nmzbtm49] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(228,179,55,.32);
    background: radial-gradient( circle at 30% 25%, rgba(255,224,135,.14), transparent 55% ), rgba(225,174,44,.10);
    color: #efbc3a;
    font-size: .60rem;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 18px rgba(0,0,0,.10);
}
.workflow-step__icon--done[b-w2nmzbtm49] {
    font-size: 1rem;
}
/* =========================================================
   TEXT
   ========================================================= */
.workflow-step__content[b-w2nmzbtm49] {
    position: relative;
    z-index: 8;
    min-width: 0;
}
.home-page[dir="rtl"]
.workflow-step__content[b-w2nmzbtm49] {
    direction: rtl;
    text-align: right;
}
.home-page[dir="ltr"]
.workflow-step__content[b-w2nmzbtm49] {
    direction: ltr;
    text-align: left;
}
.workflow-step__label[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 9px;
    color: #d3a535;
    font-size: .59rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .10em;
}
.workflow-step__content h3[b-w2nmzbtm49] {
    margin: 0 0 9px;
    color: #fff0c4;
    font-size: 1.13rem;
    line-height: 1.45;
    font-weight: 950;
}
.workflow-step__content p[b-w2nmzbtm49] {
    margin: 0;
    color: #c2b5a3;
    font-size: .76rem;
    line-height: 1.95;
    font-weight: 600;
}
/* =========================================================
   SVG MOTION
   ========================================================= */
.workflow-motion-svg[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
}
/* =========================================================
   STATIC RAIL
   ========================================================= */
.wf-rail-base[b-w2nmzbtm49] {
    fill: none;
    stroke: rgba(228,177,54,.36);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* =========================================================
   STATIC CONNECTOR
   ========================================================= */
.wf-connector-bases line[b-w2nmzbtm49] {
    stroke: rgba(221,164,34,.25);
    stroke-width: 1.55;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* =========================================================
   INTERSECTION NODE
   ========================================================= */
.wf-node-outer[b-w2nmzbtm49] {
    fill: #21180e;
    stroke: rgba(236,186,62,.78);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}
.wf-node-core[b-w2nmzbtm49] {
    fill: #e0aa28;
    stroke: rgba(255,235,173,.72);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.wf-node-halo[b-w2nmzbtm49] {
    fill: rgba(241,191,70,.24);
    opacity: 0;
}
/* =========================================================
   MEASURE PATHS
   ========================================================= */
.wf-measure-group[b-w2nmzbtm49] {
    opacity: 0;
    pointer-events: none;
}
.wf-measure-group path[b-w2nmzbtm49] {
        fill: none;
        stroke: none;
    }
/* =========================================================
   CONNECTOR GOLD TRAIL
   ========================================================= */
.wf-active-connector[b-w2nmzbtm49] {
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}
.wf-active-connector--glow[b-w2nmzbtm49] {
    stroke: #e9b43a;
    stroke-width: 7;
}
.wf-active-connector--core[b-w2nmzbtm49] {
    stroke: #efbb44;
    stroke-width: 2.25;
}
/* =========================================================
   BORDER GOLD TRAIL
   ========================================================= */
.wf-active-border[b-w2nmzbtm49] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}
.wf-active-border--glow[b-w2nmzbtm49] {
    stroke: #eab63a;
    stroke-width: 6.5;
}
.wf-active-border--core[b-w2nmzbtm49] {
    stroke: #e7ad2c;
    stroke-width: 2.25;
}
/* =========================================================
   THE ONE LIGHT
   ========================================================= */
.wf-light-head[b-w2nmzbtm49] {
    opacity: 0;
    will-change: transform, opacity;
}
/*
   نور پهن Fade
   */
/* =========================================================
   MOVING LIGHT — PURE FADE GLOW
   فقط ظاهر نور؛ Motion دست‌نخورده
   ========================================================= */
.wf-light-head[b-w2nmzbtm49] {
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
/* هاله‌ی خارجی */
.wf-light-head__fade-wide[b-w2nmzbtm49] {
    opacity: .74;
    pointer-events: none;
}
/* نور اصلی */
.wf-light-head__fade-soft[b-w2nmzbtm49] {
    opacity: .94;
    pointer-events: none;
}
/* مرکز نرم، بدون خط سفید تیز */
.wf-light-head__fade-center[b-w2nmzbtm49] {
    opacity: .72;
    pointer-events: none;
}
/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1180px) {
.workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: repeat( 2, minmax(0,1fr) );
    }
.workflow-track[b-w2nmzbtm49] {
        padding-bottom: 0;
    }
/*
       Rail افقی فقط برای 5 کارت تک‌ردیفه.
    */
.workflow-motion-svg[b-w2nmzbtm49] {
        display: none;
    }
.workflow-step[b-w2nmzbtm49] {
        transform: none !important;
    }

}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 720px) {
.workflow-premium[b-w2nmzbtm49] {
        padding: 70px 0 64px;
    }
.workflow-premium__inner[b-w2nmzbtm49] {
        width: min( calc(100% - 24px), 1240px );
    }
.workflow-premium__header[b-w2nmzbtm49] {
        margin-bottom: 36px;
    }
.workflow-premium__header h2[b-w2nmzbtm49] {
            font-size: clamp( 2.15rem, 10vw, 3.2rem );
        }
.workflow-premium__header > p[b-w2nmzbtm49] {
            font-size: .91rem;
        }
.workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
.workflow-step[b-w2nmzbtm49] {
        min-height: 190px;
        padding: 18px;
        border-radius: 21px;
    }
.workflow-step__content h3[b-w2nmzbtm49] {
        font-size: 1.04rem;
    }
.workflow-step__content p[b-w2nmzbtm49] {
        font-size: .70rem;
    }
.workflow-premium__mini-flow[b-w2nmzbtm49] {
        gap: 5px;
    }
.workflow-premium__mini-flow span[b-w2nmzbtm49] {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
            border-radius: 10px;
            font-size: .54rem;
        }

}
/* =========================================================
   WORKFLOW TRACK — REQUIRED FOR SVG GEOMETRY
   ========================================================= */
.workflow-track[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    /*
       فضای مخصوص Rail و Nodeهای زیر کارت‌ها
    */
    padding-bottom: 92px !important;
    overflow: visible !important;
}
/* =========================================================
   WORKFLOW CARDS LAYER
   ========================================================= */
.workflow-cards[b-w2nmzbtm49] {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat( 5, minmax(0, 1fr) ) !important;
    gap: 16px !important;
}
/* =========================================================
   WORKFLOW SVG LAYER
   ========================================================= */
.workflow-motion-svg[b-w2nmzbtm49] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 5 !important;
    overflow: visible !important;
    pointer-events: none !important;
}
/* حذف کامل ردیف 01 تا 05 بالای Workflow */
.workflow-premium__mini-flow[b-w2nmzbtm49] {
    display: none !important;
}
.home-page a[b-w2nmzbtm49] {
    display: none !important;
}
/* فاصله بیشتر بین بخش قبلی و Workflow */
.workflow-premium[b-w2nmzbtm49] {
    margin-top: 36px !important;
}
@media (max-width: 720px) {
.workflow-premium[b-w2nmzbtm49] {
        margin-top: 24px !important;
    }

}

/* =========================================================
   VIEWPORT
   ========================================================= */
.formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 101px;
    height: 166px;
    overflow: hidden;
    direction: ltr;
}
/* =========================================================
   LOOP
   IMPORTANT:
   این قسمت همان Loop فعلی است.
   منطقش تغییر نکرده.
   ========================================================= */
.formats-reference__track[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 7px;
    display: flex;
    align-items: center;
    width: max-content;
    direction: ltr;
    will-change: transform;
    transform: translate3d( 0, 0, 0 );
    animation: formatsReferenceInfinite-b-w2nmzbtm49 36s linear infinite;
    transform-style: preserve-3d;
}
.formats-reference__group[b-w2nmzbtm49] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--format-gap);
    padding-right: var(--format-gap);
    box-sizing: content-box;
    direction: ltr;
    transform-style: preserve-3d;
}
@keyframes formatsReferenceInfinite-b-w2nmzbtm49 {

    from {
        transform: translate3d( 0, 0, 0 );
    }

    to {
        transform: translate3d( -25%, 0, 0 );
    }
}
@media (max-width: 760px) {
.formats-reference__viewport[b-w2nmzbtm49] {
        top: 91px;
        height: 158px;
    }
.formats-reference__track[b-w2nmzbtm49] {
        animation-duration: 30s;
    }

}
/* =========================================================
   ACCESSIBILITY

   فقط Loop در reduce-motion متوقف می‌شود.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
.formats-reference__track[b-w2nmzbtm49] {
        animation: none !important;
    }

}
/* =========================================================
   FORMAT RING
   Camera-inside-circle perspective
   ========================================================= */
.format-ring[b-w2nmzbtm49] {
    --ring-card-width: 138px;
    --ring-card-height: 160px;
    --ring-gap: 4px;
    position: relative;
    width: 100%;

    padding: 58px 0 68px;
    overflow: hidden;
    background: radial-gradient( 760px 360px at 50% 61%, rgba(232,176,45,.085), transparent 70% ), linear-gradient( 180deg, #fffefa, #fffdf9 );
}
/* =========================================================
   HEADER
   ========================================================= */
.format-ring__header[b-w2nmzbtm49] {
    position: relative;
    z-index: 10;
    width: min( 1040px, calc(100% - 32px) );
    margin-inline: auto;
    text-align: center;
}
.format-ring__badge[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(215,156,30,.21);
    border-radius: 999px;
    background: linear-gradient( 180deg, rgba(255,255,255,.97), rgba(255,248,232,.88) );
    color: #ad7307;
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 7px 20px rgba(112,76,14,.055), inset 0 1px 0 white;
}
.format-ring__badge-icon[b-w2nmzbtm49] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    color: #c4870b;
}
.format-ring__badge-icon svg[b-w2nmzbtm49] {
        width: 100%;
        height: 100%;
    }
.format-ring__header h2[b-w2nmzbtm49] {
    margin: 22px auto 13px;
    color: #22282d;
    font-size: clamp( 2.7rem, 4.4vw, 4.7rem );
    line-height: 1.18;
    letter-spacing: -.035em;
    font-weight: 950;
}
@media (min-width: 1080px) {
.format-ring__header h2[b-w2nmzbtm49] {
        white-space: nowrap;
    }

}
.format-ring__header h2 span[b-w2nmzbtm49] {
    background: linear-gradient( 180deg, #d99a14, #aa6d01 );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.format-ring__header p[b-w2nmzbtm49] {
    width: min( 800px, 100% );
    margin: 0 auto;
    color: #73716d;
    font-size: .98rem;
    line-height: 1.95;
    font-weight: 600;
}
/* =========================================================
   SCENE

   Perspective اینجا اعمال می‌شود.
   ========================================================= */
.format-ring__scene[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min(1500px, 100%);
    height: 330px;
    margin: 30px auto 0;
    overflow: hidden;
    perspective: 900px;
    /* دوربین دقیقاً روی خط افق */
    perspective-origin: 50% 50%;
}
/* =========================================================
   BACKGROUND LIGHT
   ========================================================= */
.format-ring__ambient[b-w2nmzbtm49] {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 52%;
    width: 850px;
    height: 250px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(237,186,58,.13), rgba(237,186,58,.035) 48%, transparent 73% );
    filter: blur(22px);
    pointer-events: none;
}
/* =========================================================
   ORBIT GUIDES

   فقط برای اینکه کاربر ناخودآگاه مسیر دایره‌ای را حس کند.
   ========================================================= */
.format-ring__orbit[b-w2nmzbtm49] {
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 108%;
    height: 180px;
    transform: translateX(-50%);
    pointer-events: none;
}
.format-ring__orbit--top[b-w2nmzbtm49] {
    top: -125px;
    border-bottom: 1px solid rgba(215,151,20,.36);
    border-radius: 0 0 50% 50%;
}
.format-ring__orbit--bottom[b-w2nmzbtm49] {
    bottom: -124px;
    border-top: 1px solid rgba(215,151,20,.36);
    border-radius: 50% 50% 0 0;
}
/* =========================================================
   LOOP VIEWPORT
   ========================================================= */
.format-ring
.formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 54px;
    height: 235px;
    overflow: hidden;
    direction: ltr;
    perspective: 900px;
    /* دوربین دقیقاً روبه‌روی مرکز کارت‌ها */
    perspective-origin: 50% 50%;
}
/* =========================================================
   TRACK

   IMPORTANT:
   هیچ Animation یا Transform جدیدی اینجا نداریم.

   workflow-motion-v4.js همچنان Track را حرکت می‌دهد.
   ========================================================= */
.format-ring
.formats-reference__track[b-w2nmzbtm49] {
    position: absolute;
    left: 0;
    top: 25px;
    display: flex;
    align-items: center;
    width: max-content;
    direction: ltr;
    will-change: transform;
    transform-style: preserve-3d;
}
.format-ring
.formats-reference__group[b-w2nmzbtm49] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ring-gap);
    padding-right: var(--ring-gap);
    direction: ltr;
    transform-style: preserve-3d;
}
/* =========================================================
   SLOT

   Slot توسط Loop حرکت می‌کند اما خودش Perspective ندارد.
   ========================================================= */
.format-ring__slot[b-w2nmzbtm49] {
    position: relative;
    flex: 0 0 var(--ring-card-width);
    width: var(--ring-card-width);
    height: var(--ring-card-height);
    transform-style: preserve-3d;
}
/* =========================================================
   CARD

   اندازه ظاهری کارت با translateZ ایجاد می‌شود،
   نه با scale مصنوعی.
   ========================================================= */
.format-ring-card[b-w2nmzbtm49] {
    --ring-x: 0px;
    --ring-y: 0px;
    --ring-z: -240px;
    --ring-yaw: 0deg;
    /* جدید */
    --ring-opacity: 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--ring-opacity);
    transform: translate3d( var(--ring-x), var(--ring-y), var(--ring-z) ) rotateY( var(--ring-yaw) );
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
/* =========================================================
   CARD FRONT
   ========================================================= */
.format-ring-card__front[b-w2nmzbtm49] {
    position: absolute;
    z-index: 4;
    inset: 0;
    box-sizing: border-box;
    padding: 18px 9px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(128,99,56,.11);
    border-radius: 22px;
    background: radial-gradient( circle at 50% -8%, rgba(255,255,255,1), transparent 46% ), linear-gradient( 160deg, #ffffff, #fffdf8 );
    box-shadow: 0 19px 31px rgba(83,58,18,.09), 0 5px 12px rgba(83,58,18,.035), inset 0 1px 0 #fff;
    transform: translateZ(6px);
    backface-visibility: hidden;
}
/* =========================================================
   CARD SIDES

   وقتی کارت در دو طرف می‌چرخد،
   این سطح کناری واقعاً دیده می‌شود.
   ========================================================= */
.format-ring-card__side[b-w2nmzbtm49] {
    position: absolute;
    z-index: 2;
    top: 12px;
    bottom: 12px;
    width: 12px;
    border: 1px solid rgba(124,95,48,.10);
    background: linear-gradient( 180deg, #fffefa, #eee7db );
    box-shadow: inset 0 0 7px rgba(111,79,28,.045);
    backface-visibility: hidden;
}
.format-ring-card__side--left[b-w2nmzbtm49] {
    left: 0;
    transform-origin: left center;
    transform: translateZ(6px) rotateY(-90deg);
}
.format-ring-card__side--right[b-w2nmzbtm49] {
    right: 0;
    transform-origin: right center;
    transform: translateZ(6px) rotateY(90deg);
}
/* =========================================================
   FILE ICON
   ========================================================= */
.format-ring-card__file[b-w2nmzbtm49] {
    --file-a: #aaa;
    --file-b: #777;
    position: relative;
    z-index: 5;
    width: 44px;
    height: 51px;
    flex: 0 0 51px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px 9px 11px 11px;
    background: linear-gradient( 145deg, var(--file-a), var(--file-b) );
    box-shadow: 0 9px 17px rgba(50,34,14,.16), inset 0 1px 1px rgba(255,255,255,.34);
    transform: translateZ(12px);
}
.format-ring-card__file[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        left: -18px;
        top: -24px;
        width: 33px;
        height: 96px;
        transform: rotate(28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.27), transparent );
    }
/* fold */
.format-ring-card__fold[b-w2nmzbtm49] {
    position: absolute;
    z-index: 6;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,.64);
    clip-path: polygon( 0 0, 100% 100%, 0 100% );
}
/* =========================================================
   ICON COLORS
   ========================================================= */
.format-ring-card__file--html[b-w2nmzbtm49] {
    --file-a: #ffc083;
    --file-b: #ff8345;
}
.format-ring-card__file--tiff[b-w2nmzbtm49] {
    --file-a: #c883fb;
    --file-b: #914de8;
}
.format-ring-card__file--webp[b-w2nmzbtm49] {
    --file-a: #92e171;
    --file-b: #4bbb32;
}
.format-ring-card__file--png[b-w2nmzbtm49] {
    --file-a: #77cbff;
    --file-b: #3d94ec;
}
.format-ring-card__file--jpg[b-w2nmzbtm49] {
    --file-a: #ad91ff;
    --file-b: #745be4;
}
.format-ring-card__file--txt[b-w2nmzbtm49] {
    --file-a: #eef3f8;
    --file-b: #cedae5;
    color: #718295;
}
.format-ring-card__file--pptx[b-w2nmzbtm49] {
    --file-a: #ffa36e;
    --file-b: #f5653c;
}
.format-ring-card__file--docx[b-w2nmzbtm49] {
    --file-a: #68bcff;
    --file-b: #2c82dd;
}
.format-ring-card__file--pdf[b-w2nmzbtm49] {
    --file-a: #ff7a80;
    --file-b: #ef3a40;
}
.format-ring-card__file--srt[b-w2nmzbtm49] {
    --file-a: #d59bff;
    --file-b: #a164ea;
}
/* =========================================================
   MARK
   ========================================================= */
.format-ring-card__mark[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: .60rem;
    font-weight: 950;
}
.format-ring-card__file--html
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .87rem;
}
.format-ring-card__file--docx
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: 1rem;
}
.format-ring-card__file--srt
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .75rem;
}
.format-ring-card__file--pdf
.format-ring-card__mark[b-w2nmzbtm49] {
    font-size: .45rem;
}
/* =========================================================
   IMAGE ICON
   ========================================================= */
.format-ring-card__image[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 23px;
    height: 18px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 4px;
}
.format-ring-card__sun[b-w2nmzbtm49] {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}
.format-ring-card__mountain[b-w2nmzbtm49] {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 9px;
    background: #fff;
    clip-path: polygon( 0 100%, 29% 38%, 48% 69%, 70% 22%, 100% 100% );
}
/* =========================================================
   TXT
   ========================================================= */
.format-ring-card__lines[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 22px;
    display: grid;
    gap: 4px;
}
.format-ring-card__lines i[b-w2nmzbtm49] {
        height: 2.7px;
        border-radius: 99px;
        background: currentColor;
    }
.format-ring-card__lines i:nth-child(2)[b-w2nmzbtm49] {
            width: 80%;
        }
.format-ring-card__lines i:nth-child(3)[b-w2nmzbtm49] {
            width: 61%;
        }
/* =========================================================
   PPT
   ========================================================= */
.format-ring-card__pie[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    width: 21px;
    height: 21px;
    border: 2px solid rgba(255,255,255,.97);
    border-radius: 50%;
}
.format-ring-card__pie[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        right: -3px;
        top: -3px;
        width: 11px;
        height: 11px;
        background: #fff;
        clip-path: polygon( 0 0, 100% 0, 100% 100% );
    }
/* =========================================================
   CARD TEXT
   ========================================================= */
.format-ring-card__front > strong[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    display: block;
    margin-top: 11px;
    color: #292e33;
    font-size: .88rem;
    line-height: 1;
    font-weight: 950;
}
.format-ring-card__front > small[b-w2nmzbtm49] {
    position: relative;
    z-index: 7;
    display: block;
    margin-top: 8px;
    color: #817d76;
    font-size: .56rem;
    line-height: 1.5;
    font-weight: 650;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 760px) {
.format-ring[b-w2nmzbtm49] {
        --ring-card-width: 103px;
        --ring-card-height: 146px;
        --ring-gap: 10px;
        padding: 46px 0 50px;
    }
.format-ring__header[b-w2nmzbtm49] {
        width: calc(100% - 24px);
    }
.format-ring__header h2[b-w2nmzbtm49] {
            font-size: clamp( 2rem, 9vw, 3rem );
            white-space: normal;
        }
.format-ring__header p[b-w2nmzbtm49] {
            font-size: .84rem;
            line-height: 1.85;
        }
.format-ring__scene[b-w2nmzbtm49] {
        height: 290px;
    }
.format-ring
    .formats-reference__viewport[b-w2nmzbtm49] {
        top: 48px;
        height: 215px;
    }

}
/* =========================================================
   FORMAT RING — ORBIT FRAME V2
   فقط طراحی بالا و پایین
   کارت‌ها / Loop / Perspective / Fade دست‌نخورده
   ========================================================= */
/* =========================================================
   SCENE
   ========================================================= */
.format-ring .format-ring__scene[b-w2nmzbtm49] {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
}
/* پشت کارت‌ها کاملاً خالی */
.format-ring .format-ring__ambient[b-w2nmzbtm49] {
    display: none !important;
}
/* =========================================================
   OUTER CURVES
   این دو خط کاملاً بیرون محدوده کارت‌ها هستند
   ========================================================= */
.format-ring .format-ring__scene[b-w2nmzbtm49]::before,
.format-ring .format-ring__scene[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 108% !important;
    height: 190px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 1 !important;
    filter: none !important;
}
/* خط خارجی بالا
   border در حدود y = 38 قرار می‌گیرد */
.format-ring .format-ring__scene[b-w2nmzbtm49]::before {
    top: -132px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(205, 137, 8, .60) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}
/* خط خارجی پایین
   border در حدود y = 292 قرار می‌گیرد */
.format-ring .format-ring__scene[b-w2nmzbtm49]::after {
    bottom: -132px !important;
    border: 0 !important;
    border-top: 1px solid rgba(205, 137, 8, .60) !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.65) !important;
}
/* =========================================================
   INNER ORBITS
   اینها هم کاملاً از کارت‌ها فاصله دارند
   ========================================================= */
.format-ring .format-ring__orbit[b-w2nmzbtm49] {
    position: absolute !important;
    left: 50% !important;
    width: 91% !important;
    height: 78px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 2 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}
/* ---------------------------------------------------------
   INNER TOP

   قبلاً تقریباً y=95 بود و رفت زیر کارت.
   الان خط در حدود y=58 قرار می‌گیرد.
   --------------------------------------------------------- */
.format-ring .format-ring__orbit--top[b-w2nmzbtm49] {
    top: -2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(230, 178, 61, .30) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.74), 0 5px 15px rgba(218,157,28,.025) !important;
}
/* ---------------------------------------------------------
   INNER BOTTOM

   خط در حدود y=272 قرار می‌گیرد.
   --------------------------------------------------------- */
.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49] {
    bottom: -2px !important;
    border: 0 !important;
    border-top: 1px solid rgba(230, 178, 61, .30) !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,.74), 0 -5px 15px rgba(218,157,28,.025) !important;
}
/* =========================================================
   GOLD ENERGY DETAILS

   فقط روی خود خط‌های بالا و پایین.
   دیگر وارد محدوده کارت‌ها نمی‌شوند.
   ========================================================= */
.format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
.format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    width: 155px !important;
    height: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background: radial-gradient( circle at 31% 50%, #fff7ce 0 2px, rgba(246,194,66,.95) 2.5px 4px, rgba(229,161,24,.20) 5px 9px, transparent 10px ), linear-gradient( 90deg, transparent 0%, rgba(224,155,17,.03) 13%, rgba(231,169,40,.14) 30%, rgba(248,207,101,.55) 46%, rgba(255,239,168,.95) 54%, rgba(248,207,101,.43) 63%, rgba(231,169,40,.10) 80%, transparent 100% ) !important;
    box-shadow: 0 0 8px rgba(224,157,22,.08), 0 0 16px rgba(224,157,22,.035) !important;
    filter: none !important;
    opacity: .90 !important;
}
/* =========================================================
   TOP DETAILS
   ========================================================= */
.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::before {
    left: 8% !important;
    bottom: -5px !important;
    transform: rotate(3deg) !important;
    transform-origin: right center !important;
}
.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::after {
    right: 8% !important;
    bottom: -5px !important;
    transform: rotate(-3deg) scaleX(-1) !important;
    transform-origin: left center !important;
}
/* =========================================================
   BOTTOM DETAILS
   ========================================================= */
.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::before {
    left: 8% !important;
    top: -5px !important;
    transform: rotate(-3deg) !important;
    transform-origin: right center !important;
}
.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::after {
    right: 8% !important;
    top: -5px !important;
    transform: rotate(3deg) scaleX(-1) !important;
    transform-origin: left center !important;
}
/* =========================================================
   IMPORTANT
   فضای وسط را کاملاً خالی نگه می‌داریم
   ========================================================= */
.format-ring .formats-reference__viewport[b-w2nmzbtm49] {
    z-index: 5 !important;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 760px) {
.format-ring .format-ring__scene[b-w2nmzbtm49]::before,
.format-ring .format-ring__scene[b-w2nmzbtm49]::after {
        width: 138% !important;
    }
.format-ring .format-ring__orbit[b-w2nmzbtm49] {
        width: 108% !important;
    }
.format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
.format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
            width: 105px !important;
        }

}
/* =========================================================
   FORMAT RING — SOFT FADED LINES
   فقط افکت‌های بالا و پایین سکشن آیکون‌ها
   بدون دایره / بدون نقطه / فقط خطوط محو و ظریف
   ========================================================= */
/* اگر قبلاً glow یا dot یا انرژی دایره‌ای داده بودی، خاموشش کن */
.format-ring .format-ring__orbit[b-w2nmzbtm49]::before,
.format-ring .format-ring__orbit[b-w2nmzbtm49]::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    width: 330px !important;
    height: 3px !important;
    border-radius: 999px !important;
    border: none !important;
    /* خط محو و کشیده */
    background: linear-gradient( 90deg, rgba(214, 156, 31, 0) 0%, rgba(214, 156, 31, 0.03) 8%, rgba(230, 176, 58, 0.10) 22%, rgba(241, 196, 91, 0.28) 40%, rgba(255, 229, 158, 0.72) 50%, rgba(241, 196, 91, 0.28) 60%, rgba(230, 176, 58, 0.10) 78%, rgba(214, 156, 31, 0.03) 92%, rgba(214, 156, 31, 0) 100% ) !important;
    box-shadow: 0 0 12px rgba(232, 184, 72, 0.10), 0 0 24px rgba(232, 184, 72, 0.06) !important;
    filter: blur(0.4px) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
    animation: none !important;
    z-index: 1 !important;
}
/* =========================
   خطوط بالایی
   ========================= */
.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::before {
    left: 1% !important;
    bottom: -10px !important;
    transform: rotate(1.6deg) !important;
}
.format-ring .format-ring__orbit--top[b-w2nmzbtm49]::after {
    right: 1% !important;
    bottom: -10px !important;
    transform: rotate(-1.6deg) !important;
}
/* =========================
   خطوط پایینی
   ========================= */
.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::before {
    left: 1% !important;
    top: -16px !important;
    transform: rotate(-1.6deg) !important;
}
.format-ring .format-ring__orbit--bottom[b-w2nmzbtm49]::after {
    right: 1% !important;
    top: -16px !important;
    transform: rotate(1.6deg) !important;
}
/* =========================================================
   FORMAT RING — SOFT BACKGROUND BEHIND CARDS
   selector corrected
   ========================================================= */
/* خود viewport */
.format-ring .formats-reference__viewport[b-w2nmzbtm49] {
    position: absolute !important;
    isolation: isolate !important;
}
/* =========================================================
   BACKGROUND LAYER
   فقط پشت کارت‌ها
   ========================================================= */
.format-ring .formats-reference__viewport[b-w2nmzbtm49]::before {
        content: "" !important;
        position: absolute !important;
        /* عمداً از خود viewport کمی داخل‌تر */
        left: 2% !important;
        right: 2% !important;
        top: 16px !important;
        bottom: 16px !important;
        z-index: 0 !important;
        pointer-events: none !important;
        border-radius: 999px !important;
        /* =====================================================
       رنگ پس‌زمینه
       الان عمداً واضح گذاشتم که تغییر را حتماً ببینی
       بعداً می‌توانیم ظریف‌ترش کنیم
       ===================================================== */

        background: radial-gradient( ellipse at center, rgba(222, 176, 75, .52) 0%, rgba(229, 193, 112, .15) 34%, rgba(239, 217, 164, .09) 60%, rgba(255, 250, 236, .03) 78%, transparent 100% ), linear-gradient( 180deg, rgba(247, 234, 199, .20), rgba(238, 214, 156, .13), rgba(247, 234, 199, .20) ) !important;
        box-shadow: inset 0 0 28px rgba(255,255,255,.48), 0 0 35px rgba(209,155,40,.07) !important;
        /* =====================================================
       FADE کامل از چپ و راست
       ===================================================== */

        -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.62) 18%, #000 36%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.08) 95%, transparent 100% ) !important;
        mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.62) 18%, #000 36%, #000 64%, rgba(0,0,0,.62) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.08) 95%, transparent 100% ) !important;
    }
/* =========================================================
   کارت‌ها حتماً بالای Background باشند
   ========================================================= */
.format-ring .formats-reference__track[b-w2nmzbtm49] {
    position: absolute !important;
    z-index: 2 !important;
}

/* =========================================================
   PUBLIC HEADER — HARD RESTORE
   این بلوک جایگزین Force Restore قبلی شود
   ========================================================= */
.home-page > .public-header[b-w2nmzbtm49] {
    position: relative !important;
    inset: auto !important;
    z-index: 5000 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: rgba(255, 253, 248, .94) !important;
    border-bottom: 1px solid rgba(177, 137, 65, .15) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}
/* =========================================================
   INNER
   ========================================================= */
.home-page > .public-header > .public-header__inner[b-w2nmzbtm49] {
        position: relative !important;
        inset: auto !important;
        width: min(1440px, calc(100% - 48px)) !important;
        max-width: 1440px !important;
        min-height: 82px !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        clip-path: none !important;
    }
/* =========================================================
   BRAND
   ========================================================= */
.home-page .public-header .brand[b-w2nmzbtm49] {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    text-decoration: none !important;
}
.home-page .public-header .brand__mark[b-w2nmzbtm49] {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border: 1px solid rgba(189,139,43,.22) !important;
    border-radius: 14px !important;
    background: linear-gradient( 145deg, #fffdf8, #f5e8ca ) !important;
    color: #b57808 !important;
}
.home-page .public-header .brand__mark svg[b-w2nmzbtm49] {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        fill: none !important;
        stroke: currentColor !important;
        opacity: 1 !important;
    }
.home-page .public-header .brand__copy[b-w2nmzbtm49] {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.home-page .public-header .brand__copy strong[b-w2nmzbtm49] {
        color: #292621 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }
.home-page .public-header .brand__copy small[b-w2nmzbtm49] {
        color: #958b7b !important;
        font-size: 9px !important;
    }
/* =========================================================
   CENTER NAV
   ========================================================= */
.home-page .public-header .public-nav[b-w2nmzbtm49] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
}
.home-page .public-header .public-nav > a[b-w2nmzbtm49] {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        white-space: nowrap !important;
        color: #655d51 !important;
        -webkit-text-fill-color: currentColor !important;
        background: transparent !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        font-weight: 750 !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        clip-path: none !important;
    }
.home-page .public-header .public-nav > a:hover[b-w2nmzbtm49] {
            color: #9a690b !important;
            background: rgba(216,166,52,.09) !important;
        }
/* =========================================================
   ACTIONS
   زبان + ورود + شروع ترجمه
   ========================================================= */
.home-page .public-header .public-header__actions[b-w2nmzbtm49] {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: auto !important;
}
/* هر سه لینک */
.home-page .public-header .public-header__actions > a[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        clip: auto !important;
        clip-path: none !important;
        -webkit-mask: none !important;
        mask: none !important;
        pointer-events: auto !important;
        text-decoration: none !important;
        -webkit-text-fill-color: currentColor !important;
    }
/* زبان + ورود */
.home-page .public-header .lang-button[b-w2nmzbtm49],
.home-page .public-header .signin-button[b-w2nmzbtm49] {
    min-height: 40px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(188,157,99,.24) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.82) !important;
    color: #625a4d !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}
/* شروع ترجمه */
.home-page .public-header .header-cta[b-w2nmzbtm49] {
    min-height: 42px !important;
    padding: 0 16px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient( 180deg, #f2c951, #e5ad27 ) !important;
    color: #553a04 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(214,161,32,.18) !important;
}
.home-page .public-header .header-cta > span[b-w2nmzbtm49] {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
/* =========================================================
   DESKTOP — هیچ‌چیز مخفی نشود
   ========================================================= */
@media (min-width: 901px) {
.home-page .public-header .public-nav[b-w2nmzbtm49] {
        display: flex !important;
    }
.home-page .public-header .public-header__actions[b-w2nmzbtm49] {
        display: flex !important;
    }
.home-page .public-header .lang-button[b-w2nmzbtm49],
.home-page .public-header .signin-button[b-w2nmzbtm49],
.home-page .public-header .header-cta[b-w2nmzbtm49] {
        display: inline-flex !important;
    }

}
/* =========================================================
   NARROW DESKTOP
   The menu has to fit between the brand and the buttons, or its
   links run into each other. Narrower, it first drops the brand's
   subtitle, then tightens the links; English, which is wider, then
   drops «Home» (the logo is the home link) and at last «Sign in»
   (the start button leads there). The widths are where each step
   stops being enough, measured. Same as the other public pages'
   header (PublicHeader.razor.css).
   ========================================================= */
@media (min-width: 901px) and (max-width: 1145px) {
html body .home-page:lang(fa) .public-header .brand__copy small[b-w2nmzbtm49] {
        display: none !important;
    }

}
@media (min-width: 901px) and (max-width: 1045px) {
html body .home-page:lang(fa) .public-header .public-nav > a[b-w2nmzbtm49],
html body .home-page:lang(fa) .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
        padding: 0 8px !important;
        font-size: 15px !important;
    }

}
@media (min-width: 901px) and (max-width: 965px) {
html body .home-page:lang(fa) .public-header .public-nav[b-w2nmzbtm49] {
        gap: 0 !important;
    }
html body .home-page:lang(fa) .public-header .public-nav > a[b-w2nmzbtm49],
html body .home-page:lang(fa) .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
            padding: 0 6px !important;
            font-size: 14px !important;
        }

}
@media (min-width: 901px) and (max-width: 1240px) {
html body .home-page:lang(en) .public-header .brand__copy small[b-w2nmzbtm49] {
        display: none !important;
    }

}
@media (min-width: 901px) and (max-width: 1165px) {
html body .home-page:lang(en) .public-header .public-nav > a[b-w2nmzbtm49],
html body .home-page:lang(en) .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
        padding: 0 8px !important;
        font-size: 15px !important;
    }

}
@media (min-width: 901px) and (max-width: 1085px) {
html body .home-page:lang(en) .public-header .public-nav[b-w2nmzbtm49] {
        gap: 0 !important;
    }
html body .home-page:lang(en) .public-header .public-nav > a[b-w2nmzbtm49],
html body .home-page:lang(en) .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
            padding: 0 6px !important;
            font-size: 14px !important;
        }
html body .home-page:lang(en) .public-header .public-nav > a:first-child[b-w2nmzbtm49] {
            display: none !important;
        }

}
@media (min-width: 901px) and (max-width: 950px) {
html body .home-page:lang(en) .public-header .signin-button[b-w2nmzbtm49] {
        display: none !important;
    }

}
/* =========================================================
   LANDING FOOTER V2
   Dark warm premium footer
   ========================================================= */
.landing-footer-v2[b-w2nmzbtm49] {
    position: relative;
    margin-top: 18px;
    padding: 42px 0 22px;
    overflow: hidden;
    background: radial-gradient( 65% 120% at 85% 0%, rgba(223, 169, 54, .11) 0%, transparent 64% ), radial-gradient( 55% 100% at 5% 100%, rgba(183, 121, 29, .07) 0%, transparent 68% ), linear-gradient( 145deg, #211b15 0%, #19140f 100% );
    color: #f4eee4;
}
/* =========================================================
   AMBIENT LIGHT
   ========================================================= */
.landing-footer-v2__ambient[b-w2nmzbtm49] {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: .14;
}
.landing-footer-v2__ambient--right[b-w2nmzbtm49] {
    top: -250px;
    right: -80px;
    background: #d59a25;
}
.landing-footer-v2__ambient--left[b-w2nmzbtm49] {
    bottom: -300px;
    left: -120px;
    background: #8c5f18;
}
/* =========================================================
   SHELL
   ========================================================= */
.landing-footer-v2__shell[b-w2nmzbtm49] {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}
/* =========================================================
   TOP GOLD LINE
   ========================================================= */
.landing-footer-v2__topline[b-w2nmzbtm49] {
    position: relative;
    height: 18px;
    margin-bottom: 26px;
}
.landing-footer-v2__topline[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 8px;
        height: 1px;
        background: linear-gradient( 90deg, transparent 0%, rgba(224, 170, 55, .18) 12%, rgba(224, 170, 55, .65) 50%, rgba(224, 170, 55, .18) 88%, transparent 100% );
    }
.landing-footer-v2__topline span[b-w2nmzbtm49] {
        position: absolute;
        left: 50%;
        top: 4px;
        width: 9px;
        height: 9px;
        transform: translateX(-50%) rotate(45deg);
        border: 1px solid rgba(239, 192, 85, .85);
        background: #251c10;
        box-shadow: 0 0 14px rgba(226, 171, 52, .18);
    }
/* =========================================================
   MAIN GRID
   ========================================================= */
.landing-footer-v2__grid[b-w2nmzbtm49] {
    display: grid;
    grid-template-columns: 1.35fr .72fr .72fr 1fr;
    gap: 26px;
    align-items: stretch;
}
/* =========================================================
   BRAND
   ========================================================= */
.landing-footer-v2__brand[b-w2nmzbtm49] {
    min-width: 0;
    padding-inline-end: 20px;
}
.landing-footer-v2__brand-head[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
    text-decoration: none;
}
.landing-footer-v2__mark[b-w2nmzbtm49] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(235, 184, 70, .26);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(240, 191, 75, .16), rgba(240, 191, 75, .04) );
    color: #edbd53;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.14);
}
.landing-footer-v2__mark svg[b-w2nmzbtm49] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
.landing-footer-v2__brand-copy[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.landing-footer-v2__brand-copy strong[b-w2nmzbtm49] {
        color: #fff9ef;
        font-size: 1rem;
        font-weight: 900;
    }
.landing-footer-v2__brand-copy small[b-w2nmzbtm49] {
        color: #a99f91;
        font-size: .68rem;
        font-weight: 650;
    }
.landing-footer-v2__brand > p[b-w2nmzbtm49] {
    max-width: 410px;
    margin: 0 0 18px;
    color: #aaa093;
    font-size: .82rem;
    line-height: 1.9;
}
/* =========================================================
   TRUST SEAL
   ========================================================= */
.landing-footer-v2__seal[b-w2nmzbtm49] {
    display: flex;
}
/* =========================================================
   COLUMNS
   ========================================================= */
.landing-footer-v2__column[b-w2nmzbtm49] {
    padding-top: 3px;
}
.landing-footer-v2__column-title[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 13px;
    color: #d9b662;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .02em;
}
.landing-footer-v2__links[b-w2nmzbtm49] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.landing-footer-v2__links a[b-w2nmzbtm49] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 38px;
        padding: 0 10px;
        border-radius: 10px;
        color: #c4baad;
        text-decoration: none;
        font-size: .78rem;
        font-weight: 700;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }
.landing-footer-v2__links a i[b-w2nmzbtm49] {
            color: #7d7163;
            font-style: normal;
            font-size: .7rem;
            opacity: 0;
            transform: translate(-3px, 2px);
            transition: opacity .2s ease, transform .2s ease;
        }
.landing-footer-v2__links a:hover[b-w2nmzbtm49] {
            color: #f0c45c;
            background: rgba(255,255,255,.025);
            transform: translateX(-2px);
        }
.landing-footer-v2__links a:hover i[b-w2nmzbtm49] {
                opacity: 1;
                transform: translate(0,0);
            }
/* =========================================================
   ACTION PANEL
   ========================================================= */
.landing-footer-v2__action-panel[b-w2nmzbtm49] {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(226, 175, 46, .15);
    border-radius: 18px;
    background: radial-gradient( 120% 120% at 100% 0%, rgba(226, 175, 46, .10), transparent 55% ), rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.landing-footer-v2__action-kicker[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 9px;
    color: #d7aa46;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.landing-footer-v2__action-panel > strong[b-w2nmzbtm49] {
    display: block;
    margin-bottom: 7px;
    color: #fbf4e8;
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 850;
}
.landing-footer-v2__action-panel > p[b-w2nmzbtm49] {
    margin: 0 0 16px;
    color: #9f9588;
    font-size: .72rem;
    line-height: 1.8;
}
.landing-footer-v2__action[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(230, 179, 57, .18);
    border-radius: 12px;
    background: linear-gradient( 135deg, rgba(226,175,46,.14), rgba(226,175,46,.07) );
    color: #efc35d;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 850;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.landing-footer-v2__action i[b-w2nmzbtm49] {
        font-style: normal;
        font-size: .75rem;
    }
.landing-footer-v2__action:hover[b-w2nmzbtm49] {
        transform: translateY(-2px);
        border-color: rgba(230,179,57,.34);
        background: linear-gradient( 135deg, rgba(226,175,46,.20), rgba(226,175,46,.10) );
    }
/* =========================================================
   BOTTOM BAR
   ========================================================= */
.landing-footer-v2__bottom[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #7f766a;
    font-size: .65rem;
    font-weight: 650;
}
.landing-footer-v2__bottom-links[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.landing-footer-v2__bottom-links > span[b-w2nmzbtm49] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(224,174,59,.38);
    }
.landing-footer-v2__bottom-links a[b-w2nmzbtm49] {
        color: #92887b;
        text-decoration: none;
        transition: color .2s ease;
    }
.landing-footer-v2__bottom-links a:hover[b-w2nmzbtm49] {
            color: #e4b64e;
        }
/* =========================================================
   RTL / LTR
   ========================================================= */
.home-page[dir="ltr"]
.landing-footer-v2__brand[b-w2nmzbtm49] {
    padding-inline-end: 0;
    padding-inline-start: 20px;
}
.home-page[dir="ltr"]
.landing-footer-v2__links a:hover[b-w2nmzbtm49] {
    transform: translateX(2px);
}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1050px) {
.landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1.25fr .75fr .75fr;
    }
.landing-footer-v2__action-panel[b-w2nmzbtm49] {
        grid-column: 1 / -1;
    }

}
@media (max-width: 720px) {
.landing-footer-v2[b-w2nmzbtm49] {
        padding: 34px 0 18px;
    }
.landing-footer-v2__shell[b-w2nmzbtm49] {
        width: calc(100% - 28px);
    }
.landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
.landing-footer-v2__brand[b-w2nmzbtm49] {
        padding-inline: 0;
        margin-bottom: 5px;
    }
.landing-footer-v2__column[b-w2nmzbtm49] {
        padding: 14px 0;
        border-top: 1px solid rgba(255,255,255,.05);
    }
.landing-footer-v2__action-panel[b-w2nmzbtm49] {
        grid-column: auto;
    }
.landing-footer-v2__bottom[b-w2nmzbtm49] {
        align-items: flex-start;
        flex-direction: column;
    }

}
/* =========================================================
   FOOTER V2 — VISIBILITY FIX
   ========================================================= */
.landing-footer-v2 .landing-footer-v2__brand-head[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__brand-copy[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__column[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__links[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__links a[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__action-panel[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__action[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom-links[b-w2nmzbtm49],
.landing-footer-v2 .landing-footer-v2__bottom-links a[b-w2nmzbtm49] {
    opacity: 1 !important;
    visibility: visible !important;
}
.landing-footer-v2 .landing-footer-v2__brand-head[b-w2nmzbtm49] {
    display: inline-flex !important;
}
.landing-footer-v2 .landing-footer-v2__links[b-w2nmzbtm49] {
    display: flex !important;
    flex-direction: column !important;
}
.landing-footer-v2 .landing-footer-v2__links a[b-w2nmzbtm49] {
        display: flex !important;
        color: #c4baad !important;
        -webkit-text-fill-color: #c4baad !important;
    }
.landing-footer-v2 .landing-footer-v2__links a > span[b-w2nmzbtm49] {
            display: inline !important;
            opacity: 1 !important;
            visibility: visible !important;
            color: inherit !important;
        }
.landing-footer-v2 .landing-footer-v2__brand-copy strong[b-w2nmzbtm49] {
    display: block !important;
    color: #fff9ef !important;
}
.landing-footer-v2 .landing-footer-v2__brand-copy small[b-w2nmzbtm49] {
    display: block !important;
    color: #a99f91 !important;
}
.landing-footer-v2 .landing-footer-v2__action-panel[b-w2nmzbtm49] {
    display: block !important;
}
.landing-footer-v2 .landing-footer-v2__action[b-w2nmzbtm49] {
    display: flex !important;
}
.landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49] {
    display: flex !important;
}

/* =========================================================
   PHONE — FINAL LAYER
   =========================================================
   The header above is a stack of !important overrides, so
   this layer prefixes "html body" to win on specificity
   instead of editing them; desktop is untouched.

   What a phone got before this:
   - the header kept four nav links, the language, sign-in and
     the call to action on one 375px row: the links overlapped
     the brand and the button ran off the screen;
   - the five workflow steps stayed five columns (a later
     !important rule beat the one-column phone rule), one word
     per line;
   - the three packages were three screens of scrolling.

   Now: a sticky compact header with a menu, the steps as a
   vertical timeline, packages as a swipeable row, and the
   call to action in a bar under the thumb.
   ========================================================= */
.public-mobile-menu[b-w2nmzbtm49],
.landing-mobile-cta[b-w2nmzbtm49] {
    display: none;
}
/* the compare section is the target of "#difference" */
.home-page section[id][b-w2nmzbtm49] {
    scroll-margin-top: 76px;
}
@media (max-width: 900px) {
/* sticky needs no scrolling ancestor: hidden makes one, clip does not */
html body .home-page[b-w2nmzbtm49] {
        overflow: clip !important;
        overflow-x: clip !important;
    }
html body .home-page > .public-header[b-w2nmzbtm49] {
        position: sticky !important;
        top: 0 !important;
        min-height: 0 !important;
    }
html body .home-page > .public-header > .public-header__inner[b-w2nmzbtm49] {
            width: calc(100% - 28px) !important;
            min-height: 64px !important;
            padding: 8px 0 !important;
            gap: 10px !important;
        }
html body .home-page .public-header .public-nav[b-w2nmzbtm49],
html body .home-page .public-header .signin-button[b-w2nmzbtm49] {
        display: none !important;
    }
html body .home-page .public-header .public-header__actions[b-w2nmzbtm49] {
        min-width: 0 !important;
        margin-inline-start: auto !important;
    }
html body .home-page .public-header .brand__mark[b-w2nmzbtm49] {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 13px !important;
    }
html body .home-page .public-header .brand__copy small[b-w2nmzbtm49] {
        display: none !important;
    }
html body .home-page .public-header .lang-button[b-w2nmzbtm49] {
        min-height: 40px !important;
        min-width: 44px !important;
    }
/* ---- menu ---- */
html body .home-page .public-mobile-menu[b-w2nmzbtm49] {
        display: block;
        flex: none;
    }
html body .home-page .public-mobile-menu > summary[b-w2nmzbtm49] {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(188, 157, 99, .24);
            border-radius: 12px;
            background: rgba(255, 255, 255, .82);
            color: #4f473b;
            list-style: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
html body .home-page .public-mobile-menu > summary[b-w2nmzbtm49]::-webkit-details-marker {
                display: none;
            }
html body .home-page .public-mobile-menu > summary svg[b-w2nmzbtm49] {
                width: 21px;
                height: 21px;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.9;
                stroke-linecap: round;
            }
html body .home-page .public-mobile-menu .public-mobile-menu__close[b-w2nmzbtm49],
html body .home-page .public-mobile-menu[open] .public-mobile-menu__open[b-w2nmzbtm49] {
            display: none;
        }
html body .home-page .public-mobile-menu[open] .public-mobile-menu__close[b-w2nmzbtm49] {
            display: block;
        }
html body .home-page .public-mobile-menu[open] > summary[b-w2nmzbtm49] {
            border-color: transparent;
            background: #3b2f23;
            color: #fcd166;
        }
html body .home-page .public-mobile-menu__panel[b-w2nmzbtm49] {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 8px);
        z-index: 10;
        display: grid;
        gap: 12px;
        padding: 10px;
        border: 1px solid rgba(177, 137, 65, .18);
        border-radius: 22px;
        background: #fffdf8;
        box-shadow: 0 24px 60px rgba(45, 36, 25, .18);
        animation: landing-menu-in-b-w2nmzbtm49 .32s cubic-bezier(.16, 1, .3, 1) both;
    }
html body .home-page .public-mobile-menu__links[b-w2nmzbtm49] {
        display: grid;
        gap: 2px;
    }
html body .home-page .public-mobile-menu__links a[b-w2nmzbtm49],
html body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
            display: flex !important;
            align-items: center;
            min-height: 48px;
            padding: 0 14px;
            border-radius: 14px;
            color: #3d362c;
            font-size: .92rem;
            font-weight: 800;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
html body .home-page .public-mobile-menu__links a:active[b-w2nmzbtm49] {
                background: rgba(216, 166, 52, .12);
            }
html body .home-page .public-mobile-menu__actions[b-w2nmzbtm49] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(177, 137, 65, .14);
    }
html body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
            justify-content: center;
            border: 1px solid rgba(188, 157, 99, .24);
            font-size: .82rem;
        }
html body .home-page .public-mobile-menu__actions .public-mobile-menu__signin[b-w2nmzbtm49] {
            border-color: transparent;
            background: #3b2f23;
            color: #fcd166;
        }
/* ---- workflow: a vertical timeline ---- */
html body .home-page .workflow-track[b-w2nmzbtm49] {
        padding-bottom: 0 !important;
    }
html body .home-page .workflow-motion-svg[b-w2nmzbtm49] {
        display: none !important;
    }
html body .home-page .workflow-cards[b-w2nmzbtm49] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}
@media (max-width: 720px) {
html body .home-page[b-w2nmzbtm49] {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }
/* the bottom bar carries it on a phone */
html body .home-page .public-header .header-cta[b-w2nmzbtm49] {
        display: none !important;
    }
html body .home-page .workflow-cards[b-w2nmzbtm49] {
        position: relative !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
/* the line the steps hang from */
html body .home-page .workflow-cards[b-w2nmzbtm49]::before {
            content: "";
            position: absolute;
            top: 28px;
            bottom: 28px;
            inset-inline-start: 33px;
            width: 2px;
            border-radius: 2px;
            background: linear-gradient(180deg, rgba(242, 201, 81, .7), rgba(242, 201, 81, .15));
        }
html body .home-page .workflow-step[b-w2nmzbtm49] {
        position: relative;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        padding: 16px !important;
        transform: none !important;
    }
html body .home-page .workflow-step__top[b-w2nmzbtm49] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }
html body .home-page .workflow-step__number[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
    }
html body .home-page .workflow-step__number small[b-w2nmzbtm49] {
            display: none !important;
        }
html body .home-page .workflow-step__icon[b-w2nmzbtm49] {
        position: static !important;
        inset: auto !important;
        min-width: 44px !important;
        width: auto !important;
        height: 26px !important;
        padding: 0 7px !important;
        font-size: .58rem !important;
    }
html body .home-page .workflow-step__content[b-w2nmzbtm49] {
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
html body .home-page .workflow-step__content h3[b-w2nmzbtm49] {
            margin: 4px 0 6px !important;
            font-size: 1rem !important;
            line-height: 1.6 !important;
            word-break: normal !important;
        }
html body .home-page .workflow-step__content p[b-w2nmzbtm49] {
            font-size: .78rem !important;
            line-height: 1.9 !important;
            word-break: normal !important;
        }
/* ---- bottom action bar ---- */
html body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
        position: fixed;
        inset-inline: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 6000;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(177, 137, 65, .2);
        border-radius: 22px;
        background: rgba(255, 253, 248, .9);
        -webkit-backdrop-filter: saturate(1.5) blur(20px);
        backdrop-filter: saturate(1.5) blur(20px);
        box-shadow: 0 16px 40px rgba(45, 36, 25, .18);
        animation: landing-cta-in-b-w2nmzbtm49 .5s .2s cubic-bezier(.16, 1, .3, 1) both;
    }
html body .home-page .landing-mobile-cta a[b-w2nmzbtm49] {
            display: flex !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 0 18px;
            border-radius: 15px;
            font-size: .9rem;
            font-weight: 900;
            text-decoration: none;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }
html body .home-page .landing-mobile-cta__secondary[b-w2nmzbtm49] {
        border: 1px solid rgba(188, 157, 99, .28);
        background: #fff;
        color: #4f473b !important;
    }
html body .home-page .landing-mobile-cta__primary[b-w2nmzbtm49] {
        background: linear-gradient(180deg, #f2c951, #e5ad27);
        color: #553a04 !important;
        box-shadow: 0 10px 22px rgba(214, 161, 32, .25);
    }
html body .home-page .landing-mobile-cta__primary svg[b-w2nmzbtm49] {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
html body .home-page[dir="rtl"] .landing-mobile-cta__primary svg[b-w2nmzbtm49] {
        transform: scaleX(-1);
    }

}
/* the header itself stays light after dark (its colours are literal),
   so its menu button does too; the panel and the bar follow the theme */
html[data-theme="dark"] body .home-page .public-mobile-menu__panel[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .14);
    background: #17120c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] body .home-page .public-mobile-menu__links a[b-w2nmzbtm49],
html[data-theme="dark"] body .home-page .public-mobile-menu__actions a[b-w2nmzbtm49] {
    color: #f6f2e8;
}
html[data-theme="dark"] body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .14);
    background: rgba(24, 19, 12, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body .home-page .landing-mobile-cta__secondary[b-w2nmzbtm49] {
    border-color: rgba(255, 226, 178, .18);
    background: rgba(255, 226, 178, .06);
    color: #f6f2e8 !important;
}
@keyframes landing-menu-in-b-w2nmzbtm49 {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes landing-cta-in-b-w2nmzbtm49 {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
html body .home-page .public-mobile-menu__panel[b-w2nmzbtm49],
html body .home-page .landing-mobile-cta[b-w2nmzbtm49] {
        animation: none;
    }

}
/* Goftito logo in the header and footer brand boxes. */
.brand__mark .goftito-mark[b-w2nmzbtm49],
.landing-footer-v2__mark .goftito-mark[b-w2nmzbtm49] {
    position: relative;
    z-index: 1;
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}
/* =========================================================
   SERVICES MENU AND FOOTER COLUMN
   The links to the service pages. The menu opens on hover and
   on keyboard focus, with no script: the page is prerendered.
   ========================================================= */
.home-page .public-header .public-nav__services[b-w2nmzbtm49] {
    position: relative;
}
.home-page .public-header .public-nav__services-trigger[b-w2nmzbtm49] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #655d51;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
.home-page .public-header .public-nav__services-trigger svg[b-w2nmzbtm49] {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s ease;
    }
.home-page .public-header .public-nav__services:hover .public-nav__services-trigger[b-w2nmzbtm49],
.home-page .public-header .public-nav__services:focus-within .public-nav__services-trigger[b-w2nmzbtm49] {
    color: #9a690b;
    background: rgba(216,166,52,.09);
}
.home-page .public-header .public-nav__services:hover .public-nav__services-trigger svg[b-w2nmzbtm49],
.home-page .public-header .public-nav__services:focus-within .public-nav__services-trigger svg[b-w2nmzbtm49] {
        transform: rotate(180deg);
    }
/* one column: document translation (its list opens beside it), then voice, content and tools.
   The menu sits 100px towards the side away from that list, so the two together stay on
   screen from 901px up, in both languages; it still covers the whole trigger. */
.home-page:lang(fa) .public-header .public-nav__services[b-w2nmzbtm49] { --svc-shift: 100px; }
.home-page:lang(en) .public-header .public-nav__services[b-w2nmzbtm49] { --svc-shift: -100px; }
.home-page .public-header .public-nav__services-menu[b-w2nmzbtm49] {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 40;
    display: grid;
    gap: 4px;
    width: 300px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid rgba(155,125,48,.22);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 50px rgba(59,48,23,.18);
    opacity: 0;
    visibility: hidden;
    translate: calc(-50% + var(--svc-shift, 0px)) 6px;
    transition: opacity .25s ease, translate .25s ease, visibility .25s;
}
.home-page .public-header .public-nav__services-menu[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: -12px 0 auto;
        height: 12px;
    }
.home-page .public-header .public-nav__services:hover .public-nav__services-menu[b-w2nmzbtm49],
.home-page .public-header .public-nav__services:focus-within .public-nav__services-menu[b-w2nmzbtm49] {
    opacity: 1;
    visibility: visible;
    translate: calc(-50% + var(--svc-shift, 0px)) 0;
}
.home-page .public-header .public-nav__services-menu a[b-w2nmzbtm49] {
    display: grid !important;
    gap: 2px;
    padding: 11px 14px;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .2s ease;
}
.home-page .public-header .public-nav__services-menu a:hover[b-w2nmzbtm49] {
        background: rgba(242,197,79,.12);
    }
.home-page .public-header .public-nav__services-menu a strong[b-w2nmzbtm49] {
        color: #221d18;
        font-size: 13px;
        font-weight: 750;
    }
.home-page .public-header .public-nav__services-menu a small[b-w2nmzbtm49] {
        color: #958b7b;
        font-size: 11.5px;
        font-weight: 600;
    }
.home-page .public-header .public-nav__services-column[b-w2nmzbtm49] {
    display: grid;
    align-content: start;
    gap: 4px;
}
/* document translation: one item whose list opens beside the menu, at its top */
.home-page .public-header .public-nav__translate[b-w2nmzbtm49] {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(155,125,48,.14);
}
.home-page .public-header .public-nav__translate-trigger[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color .2s ease;
}
.home-page .public-header .public-nav__translate-trigger > span[b-w2nmzbtm49] {
        display: grid;
        flex: 1;
        gap: 2px;
    }
.home-page .public-header .public-nav__translate-trigger strong[b-w2nmzbtm49] {
        color: #221d18;
        font-size: 13px;
        font-weight: 750;
    }
.home-page .public-header .public-nav__translate-trigger small[b-w2nmzbtm49] {
        color: #958b7b;
        font-size: 11.5px;
        font-weight: 600;
    }
.home-page .public-header .public-nav__translate-trigger em[b-w2nmzbtm49] {
        min-width: 22px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(216,166,52,.16);
        color: #9a690b;
        font-size: 11px;
        font-style: normal;
        font-weight: 800;
        text-align: center;
    }
.home-page .public-header .public-nav__translate-trigger svg[b-w2nmzbtm49] {
        flex: none;
        width: 15px;
        height: 15px;
        fill: none;
        stroke: #9a690b;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: translate .25s ease;
    }
.home-page:lang(en) .public-header .public-nav__translate-trigger svg[b-w2nmzbtm49] {
        rotate: 180deg;
    }
.home-page .public-header .public-nav__translate:hover .public-nav__translate-trigger[b-w2nmzbtm49],
.home-page .public-header .public-nav__translate:focus-within .public-nav__translate-trigger[b-w2nmzbtm49] {
    background: rgba(242,197,79,.16);
}
.home-page:lang(fa) .public-header .public-nav__translate:hover .public-nav__translate-trigger svg[b-w2nmzbtm49],
.home-page:lang(fa) .public-header .public-nav__translate:focus-within .public-nav__translate-trigger svg[b-w2nmzbtm49] {
    translate: -3px 0;
}
.home-page:lang(en) .public-header .public-nav__translate:hover .public-nav__translate-trigger svg[b-w2nmzbtm49],
.home-page:lang(en) .public-header .public-nav__translate:focus-within .public-nav__translate-trigger svg[b-w2nmzbtm49] {
    translate: 3px 0;
}
.home-page .public-header .public-nav__translate-menu[b-w2nmzbtm49] {
    position: absolute;
    top: -1px;
    inset-inline-start: calc(100% + 8px);
    display: grid;
    gap: 2px;
    width: 300px;
    padding: 8px;
    border: 1px solid rgba(155,125,48,.22);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 50px rgba(59,48,23,.18);
    opacity: 0;
    visibility: hidden;
    translate: 0 4px;
    transition: opacity .22s ease, translate .22s ease, visibility .22s;
}
/* a bridge over the gap, so the pointer can cross to the list */
.home-page .public-header .public-nav__translate-menu[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 100%;
        width: 10px;
    }
.home-page .public-header .public-nav__translate:hover .public-nav__translate-menu[b-w2nmzbtm49],
.home-page .public-header .public-nav__translate:focus-within .public-nav__translate-menu[b-w2nmzbtm49] {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}
.home-page .public-header .public-nav__services.is-closed .public-nav__translate-menu[b-w2nmzbtm49] {
    opacity: 0 !important;
    visibility: hidden !important;
}
.home-page .public-header .public-nav__services-heading[b-w2nmzbtm49] {
    padding: 6px 14px 2px;
    color: #9a690b;
    font-size: 11px;
    font-weight: 800;
}
.home-page .public-mobile-menu__group[b-w2nmzbtm49] {
    display: block;
    margin-top: 8px;
    padding: 10px 14px 4px;
    border-top: 1px solid rgba(155,125,48,.18);
    color: #b78507;
    font-size: 12px;
    font-weight: 800;
}
.landing-footer-v2__grid[b-w2nmzbtm49] {
    grid-template-columns: 1.35fr .9fr .72fr .72fr 1fr;
}
@media (max-width: 1050px) {
.landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1.25fr .9fr .75fr .75fr;
    }

}
@media (max-width: 720px) {
.landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   FORMAT RING — PHONE
   The section was 645px tall for a 215px row of cards, and the
   cards were tall and narrow. A shorter scene, cards closer to
   square, and the decorative curves moved out of the cards' way.
   ========================================================= */
@media (max-width: 760px) {
html body .home-page .format-ring[b-w2nmzbtm49] {
        --ring-card-width: 92px;
        --ring-card-height: 118px;
        --ring-gap: 8px;
        padding: 34px 0 26px !important;
    }
html body .home-page .format-ring__scene[b-w2nmzbtm49] {
        height: 196px !important;
        margin-top: 12px !important;
    }
html body .home-page .format-ring .formats-reference__viewport[b-w2nmzbtm49] {
        top: 10px !important;
        height: 176px !important;
        /* 900px is the desktop camera; on a 375px screen it flattens the ring */
        perspective: 420px !important;
    }
html body .home-page .format-ring .formats-reference__track[b-w2nmzbtm49] {
        top: 26px !important;
    }
html body .home-page .format-ring .format-ring__orbit[b-w2nmzbtm49] {
        display: none !important;
    }
/* half as tall, so half as curved; the line stays where it was */
html body .home-page .format-ring .format-ring__scene[b-w2nmzbtm49]::before {
        height: 96px !important;
        top: -64px !important;
    }
html body .home-page .format-ring .format-ring__scene[b-w2nmzbtm49]::after {
        height: 96px !important;
        bottom: -64px !important;
    }
html body .home-page .format-ring-card__front[b-w2nmzbtm49] {
        padding: 12px 6px 9px !important;
        border-radius: 18px !important;
    }

}
/* the services menu closes right after a choice, until the pointer leaves (public-pages.js) */
.home-page .public-header .public-nav__services.is-closed .public-nav__services-menu[b-w2nmzbtm49] {
    opacity: 0 !important;
    visibility: hidden !important;
    translate: calc(-50% + var(--svc-shift, 0px)) 6px !important;
}
/* =========================================================
   WORKFLOW — PHONE AND TABLET LIGHT
   On a desktop workflow-motion-v4.js runs a light along the
   rail from step to step; that drawing is built for the row
   of five and is hidden below 1180px, where the steps sit
   two to a row (tablet) or one under another (phone).
   Here the light goes round the border of one step at a
   time, 01 to 05, and starts again: each step is lit for
   2.2s of an 11s turn.
   ========================================================= */
@property --wfm-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes wfm-sweep-b-w2nmzbtm49 {
    to {
        --wfm-angle: 360deg;
    }
}
@keyframes wfm-turn-b-w2nmzbtm49 {
    0% { opacity: 0; }
    3% { opacity: 1; }
    19% { opacity: 1; }
    23% { opacity: 0; }
    100% { opacity: 0; }
}
@media (max-width: 1180px) {
html body .home-page .workflow-step[b-w2nmzbtm49] {
        --wfm-i: 0;
        isolation: isolate;
    }
html body .home-page .workflow-step[data-workflow-step="1"][b-w2nmzbtm49] { --wfm-i: 1; }
html body .home-page .workflow-step[data-workflow-step="2"][b-w2nmzbtm49] { --wfm-i: 2; }
html body .home-page .workflow-step[data-workflow-step="3"][b-w2nmzbtm49] { --wfm-i: 3; }
html body .home-page .workflow-step[data-workflow-step="4"][b-w2nmzbtm49] { --wfm-i: 4; }
/* the light running round the border */
html body .home-page .workflow-step[b-w2nmzbtm49]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 1.6px;
        border-radius: inherit;
        background: conic-gradient(
            from var(--wfm-angle),
            transparent 0deg,
            transparent 220deg,
            rgba(252, 209, 102, .35) 270deg,
            #fcd166 318deg,
            #fff3c9 338deg,
            rgba(252, 209, 102, .2) 352deg,
            transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        filter: drop-shadow(0 0 5px rgba(252, 209, 102, .75));
        opacity: 0;
        pointer-events: none;
        animation:
            wfm-sweep-b-w2nmzbtm49 2.2s linear infinite,
            wfm-turn-b-w2nmzbtm49 11s ease-in-out calc(var(--wfm-i) * 2.2s) infinite both;
    }
/* a soft gold wash inside the step while it is lit */
html body .home-page .workflow-step[b-w2nmzbtm49]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(120% 90% at 85% 0%, rgba(252, 209, 102, .16), transparent 60%);
        box-shadow: 0 14px 34px rgba(252, 209, 102, .14);
        opacity: 0;
        pointer-events: none;
        animation: wfm-turn-b-w2nmzbtm49 11s ease-in-out calc(var(--wfm-i) * 2.2s) infinite both;
    }

}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
html body .home-page .workflow-step[b-w2nmzbtm49]::after,
html body .home-page .workflow-step[b-w2nmzbtm49]::before {
        animation: none;
        opacity: 0;
    }

}
/* ENGLISH PAGE (dir=ltr) - START */
/*
   The Persian page is untouched by everything below: each rule is
   scoped to the English page.
*/
/*
   Hero title: Latin letters reach further above and below the line
   than the Persian font, and the gold is painted only inside the
   element's box (background-clip: text), so at line-height 1.02 the
   lines ran into each other and the tail of "g" in "language" was cut.
*/
.home-page[dir="ltr"] .hero h1[b-w2nmzbtm49] {
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}
.home-page[dir="ltr"] .hero h1 strong[b-w2nmzbtm49] {
        padding-bottom: .16em !important;
    }
/*
   "Translate every file type, without limitations" is a third longer
   than the Persian heading and was kept on one line, so it ran past
   the page. A size that fits one line, and a break before the gold
   words if a wider font still needs it.
*/
@media (min-width: 1080px) {
.home-page[dir="ltr"] .format-ring__header h2[b-w2nmzbtm49] {
        font-size: min(3.1rem, 3.6vw);
        white-space: normal;
        text-wrap: balance;
    }
.home-page[dir="ltr"] .format-ring__header h2 span[b-w2nmzbtm49] {
            white-space: nowrap;
        }

}
/* ENGLISH PAGE (dir=ltr) - END */
/* STICKY HEADER - START */
/*
   The header stays at the top while the page scrolls, on every width,
   not only on a phone. sticky needs no scrolling ancestor: overflow
   hidden on .home-page makes one, clip does not.
*/
html body .home-page[b-w2nmzbtm49] {
    overflow: clip !important;
}
html body .home-page > .public-header[b-w2nmzbtm49] {
    position: sticky !important;
    top: 0 !important;
}
/* a link to a section lands below the header, not under it */
@media (min-width: 901px) {
.home-page section[id][b-w2nmzbtm49] {
        scroll-margin-top: 96px;
    }

}
/* STICKY HEADER - END */
/* GLASS HEADER - START */
/*
   The header is glass: whatever scrolls under it shows through,
   lightly blurred; once something is under it (js/public-pages.js,
   "is-scrolled") it lifts off the page with a shadow. Over a dark
   section ("is-over-dark", same script) the glass frosts over, or the
   menu would be grey on dark brown. Same as the other public pages'
   header (PublicHeader.razor.css).
*/
html body .home-page > .public-header[b-w2nmzbtm49] {
    border-bottom-color: rgba(177, 137, 65, .12) !important;
    background: rgba(255, 253, 248, .4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.8) !important;
    backdrop-filter: blur(10px) saturate(1.8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html body .home-page > .public-header.is-scrolled[b-w2nmzbtm49] {
        border-bottom-color: rgba(177, 137, 65, .2) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px -22px rgba(45, 36, 25, .5) !important;
    }
html body .home-page > .public-header.is-over-dark[b-w2nmzbtm49] {
        background: rgba(255, 253, 248, .8) !important;
    }
/* GLASS HEADER - END */
/* FOOTER CREDIT - START */
/*
   The studio's credit sits in the middle of the bottom bar. The
   copyright and the links get equal columns on either side, so the
   credit is centred on the bar, not merely between the two.
*/
html body .landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}
html body .landing-footer-v2 .landing-footer-v2__bottom-links[b-w2nmzbtm49] {
    justify-self: end;
}
.landing-footer-v2__credit[b-w2nmzbtm49] {
    white-space: nowrap;
}
/* an old rule hides every link on this page (".home-page a"); this one shows */
html body .landing-footer-v2 .landing-footer-v2__credit a[b-w2nmzbtm49] {
        display: inline !important;
        color: #92887b;
        text-decoration: none;
        transition: color .2s ease;
    }
html body .landing-footer-v2 .landing-footer-v2__credit a:hover[b-w2nmzbtm49],
html body .landing-footer-v2 .landing-footer-v2__credit a:focus-visible[b-w2nmzbtm49] {
            color: #e4b64e;
        }
@media (max-width: 720px) {
html body .landing-footer-v2 .landing-footer-v2__bottom[b-w2nmzbtm49] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 10px;
    }
html body .landing-footer-v2 .landing-footer-v2__bottom-links[b-w2nmzbtm49] {
        justify-self: start;
    }

}


/* =====================================================
   NEWSLETTER (2026-11-12): the gift form, before the footer.
   ===================================================== */

.home-newsletter[b-w2nmzbtm49] {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 72px;
}


/* =====================================================
   FOOTER COLUMNS (2026-11-12, the user's wish): every link on one line,
   the services column as wide as its longest name, and the rows closer.
   ===================================================== */

.landing-footer-v2 .landing-footer-v2__links a > span[b-w2nmzbtm49] {
    white-space: nowrap;
}

.landing-footer-v2__grid[b-w2nmzbtm49] {
    grid-template-columns: 1.35fr .72fr minmax(max-content, .95fr) .6fr 1fr;
}

.landing-footer-v2__links[b-w2nmzbtm49] {
    gap: 1px;
}

.landing-footer-v2__links a[b-w2nmzbtm49] {
    min-height: 32px;
}

.landing-footer-v2__column-title[b-w2nmzbtm49] {
    margin-bottom: 9px;
}

@media (max-width: 1050px) {
    /* The links keep their width; the brand takes the row above them. */
    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: .85fr minmax(max-content, 1fr) .7fr;
    }

    .landing-footer-v2__brand[b-w2nmzbtm49] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .landing-footer-v2__grid[b-w2nmzbtm49] {
        grid-template-columns: 1fr;
    }
}

/* document translation: one item that opens in place, as in the desktop menu */
html body .home-page .public-mobile-menu__fold summary[b-w2nmzbtm49] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    color: #3d362c;
    font-size: .92rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    html body .home-page .public-mobile-menu__fold summary[b-w2nmzbtm49]::-webkit-details-marker {
        display: none;
    }

    html body .home-page .public-mobile-menu__fold summary span[b-w2nmzbtm49] {
        flex: 1 1 auto;
    }

    html body .home-page .public-mobile-menu__fold summary em[b-w2nmzbtm49] {
        min-width: 22px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(216, 166, 52, .16);
        color: #9a690b;
        font-size: 11px;
        font-style: normal;
        font-weight: 800;
        text-align: center;
    }

    html body .home-page .public-mobile-menu__fold summary svg[b-w2nmzbtm49] {
        flex: none;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #9a690b;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: rotate .25s ease;
    }

html body .home-page .public-mobile-menu__fold[open] summary[b-w2nmzbtm49] {
    background: rgba(216, 166, 52, .1);
}

    html body .home-page .public-mobile-menu__fold[open] summary svg[b-w2nmzbtm49] {
        rotate: 180deg;
    }

html body .home-page .public-mobile-menu__fold-links[b-w2nmzbtm49] {
    display: grid;
    gap: 2px;
    margin: 4px 0 4px;
    margin-inline-start: 14px;
    padding-inline-start: 8px;
    border-inline-start: 2px solid rgba(216, 166, 52, .35);
}

    html body .home-page .public-mobile-menu__fold-links a[b-w2nmzbtm49] {
        min-height: 42px !important;
        font-size: .86rem !important;
        font-weight: 700 !important;
    }

        html body .home-page .public-mobile-menu__fold-links a.is-current[b-w2nmzbtm49] {
            color: #9a690b !important;
            background: rgba(216, 166, 52, .1);
        }

html[data-theme="dark"] body .home-page .public-mobile-menu__fold summary[b-w2nmzbtm49] {
    color: #f6f2e8;
}

html[data-theme="dark"] body .home-page .public-mobile-menu__fold summary em[b-w2nmzbtm49],
html[data-theme="dark"] body .home-page .public-mobile-menu__fold summary svg[b-w2nmzbtm49] {
    color: #f0c85c;
    stroke: #f0c85c;
}

/* the panel scrolls when it is taller than the screen, as on the other pages (the header is sticky) */
html body .home-page .public-mobile-menu__panel[b-w2nmzbtm49] {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
/* _content/AITranslationPlatform.Web/Components/Landing/LandingHero.razor.rz.scp.css */
/* =========================================================
   THE FIRST SCREEN OF THE HOME PAGE

   Dark and warm in both themes: the window is the bright thing
   here. The window is drawn in em on a canvas 112em wide, and
   the canvas sets its font size from its own width, so the whole
   scene scales as one picture between a tablet and a wide screen.

   Every scene is written in its finished state and animates in
   from a keyframe: with motion switched off, for a crawler or
   without the script, what shows is the finished scene.
   ========================================================= */

.hh[b-qrw6ccwkdk] {
    --hh-ink: #fff8ea;
    --hh-soft: rgba(255, 243, 220, .72);
    --hh-faint: rgba(255, 243, 220, .5);
    --hh-line: rgba(255, 232, 190, .14);
    --hh-gold: #fcd166;
    --hh-gold-deep: #e8aa2e;
    --hh-glass: rgba(255, 240, 212, .055);
    --hh-hold: 8.5s;
    --hh-title: clamp(2.3rem, min(4.7vw, 7.5vh), 4.4rem);
    --hh-radius: clamp(28px, 4vw, 56px);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(26px, 4.4vh, 54px) clamp(16px, 3vw, 40px) 0;
    border-radius: 0 0 var(--hh-radius) var(--hh-radius);
    background:
        radial-gradient(120% 86% at 50% -12%, #3b2c1a 0%, #1f160d 48%, #130e08 100%),
        #130e08;
    color: var(--hh-ink);
    text-align: center;
}

/* --------------------- the sky ------------------------- */

.hh-sky[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.hh-sky__glow[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-start: -22%;
    inset-inline: -8%;
    height: 118%;
    opacity: 0;
    filter: blur(6px);
    transition: opacity 1.5s ease;
    animation: hh-drift-b-qrw6ccwkdk 22s ease-in-out infinite alternate;
}

    .hh-sky__glow.is-on[b-qrw6ccwkdk] {
        opacity: 1;
    }

.hh-sky__glow--0[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 74% 26%, rgba(252, 209, 102, .3), transparent 72%),
        radial-gradient(34% 40% at 22% 40%, rgba(232, 170, 46, .2), transparent 72%);
}

.hh-sky__glow--1[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 72% 28%, rgba(255, 138, 96, .28), transparent 72%),
        radial-gradient(34% 40% at 24% 42%, rgba(252, 209, 102, .16), transparent 72%);
}

.hh-sky__glow--2[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 70% 28%, rgba(174, 138, 255, .26), transparent 72%),
        radial-gradient(34% 40% at 26% 42%, rgba(255, 150, 120, .16), transparent 72%);
}

.hh-sky__glow--3[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 72% 28%, rgba(255, 122, 172, .24), transparent 72%),
        radial-gradient(34% 40% at 24% 42%, rgba(255, 170, 120, .15), transparent 72%);
}

.hh-sky__glow--4[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 72% 28%, rgba(96, 205, 190, .22), transparent 72%),
        radial-gradient(34% 40% at 24% 42%, rgba(252, 209, 102, .15), transparent 72%);
}

.hh-sky__glow--5[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 72% 28%, rgba(150, 214, 104, .22), transparent 72%),
        radial-gradient(34% 40% at 24% 42%, rgba(252, 209, 102, .15), transparent 72%);
}

.hh-sky__glow--6[b-qrw6ccwkdk] {
    background:
        radial-gradient(38% 42% at 72% 28%, rgba(120, 178, 255, .22), transparent 72%),
        radial-gradient(34% 40% at 24% 42%, rgba(252, 209, 102, .15), transparent 72%);
}

.hh-sky__dust[b-qrw6ccwkdk] {
    position: absolute;
    inset: -40px;
    background-image: radial-gradient(rgba(255, 232, 186, .55) 1px, transparent 1.6px);
    background-size: 44px 44px;
    opacity: .2;
    -webkit-mask-image: radial-gradient(58% 54% at 50% 26%, #000 0%, transparent 100%);
    mask-image: radial-gradient(58% 54% at 50% 26%, #000 0%, transparent 100%);
}

/* a horizon of light behind the window */
.hh-sky__arc[b-qrw6ccwkdk] {
    position: absolute;
    inset-inline: 50%;
    inset-block-end: -46%;
    width: 150%;
    aspect-ratio: 1;
    border: 1px solid rgba(252, 209, 102, .3);
    border-radius: 50%;
    translate: -50% 0;
    box-shadow:
        0 -30px 120px rgba(252, 209, 102, .16),
        inset 0 40px 120px rgba(252, 209, 102, .07);
}

@keyframes hh-drift-b-qrw6ccwkdk {
    from {
        transform: translate3d(-2.5%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(2.5%, 2.5%, 0) scale(1.07);
    }
}

/* --------------------- the sentence -------------------- */

.hh-copy[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(980px, 100%);
}

.hh-badge[b-qrw6ccwkdk] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .95rem;
    border: 1px solid rgba(252, 209, 102, .3);
    border-radius: 999px;
    background: rgba(252, 209, 102, .09);
    color: #ffe6ab;
    font-size: .8rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

    .hh-badge i[b-qrw6ccwkdk] {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--hh-gold);
        box-shadow: 0 0 0 0 rgba(252, 209, 102, .55);
        animation: hh-ping-b-qrw6ccwkdk 2.6s ease-out infinite;
    }

@keyframes hh-ping-b-qrw6ccwkdk {
    to {
        box-shadow: 0 0 0 9px rgba(252, 209, 102, 0);
    }
}

.hh-title[b-qrw6ccwkdk] {
    margin: clamp(10px, 1.7vh, 18px) 0 0;
    color: var(--hh-ink);
    font-size: var(--hh-title);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.012em;
}

.hh-title__lead[b-qrw6ccwkdk] {
    display: block;
}

    .hh-title__lead b[b-qrw6ccwkdk] {
        font-weight: 900;
    }

.hh-rotor[b-qrw6ccwkdk] {
    position: relative;
    display: grid;
    justify-items: center;
}

.hh-rotor__line[b-qrw6ccwkdk] {
    grid-area: 1 / 1;
    padding-block: .05em .12em;
    background: linear-gradient(100deg, #ffe9b0 0%, #fcd166 34%, #f0ae35 66%, #ffe2a0 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    opacity: 0;
    translate: 0 .42em;
    filter: blur(9px);
    transition:
        opacity .55s ease,
        translate .75s cubic-bezier(.2, .9, .25, 1),
        filter .55s ease;
}

    .hh-rotor__line.is-on[b-qrw6ccwkdk] {
        opacity: 1;
        translate: 0 0;
        filter: none;
        animation: hh-shine-b-qrw6ccwkdk 4.5s ease-in-out infinite alternate;
    }

    .hh-rotor__line.is-leaving[b-qrw6ccwkdk] {
        translate: 0 -.42em;
    }

@keyframes hh-shine-b-qrw6ccwkdk {
    to {
        background-position: 100% 0;
    }
}

.hh-lede[b-qrw6ccwkdk] {
    width: min(760px, 100%);
    margin: clamp(6px, 1.2vh, 12px) 0 0;
    color: var(--hh-soft);
    font-size: clamp(.96rem, 1.2vw, 1.08rem);
    font-weight: 500;
    line-height: 1.85;
}

.hh-actions[b-qrw6ccwkdk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: clamp(12px, 2vh, 20px);
}

.hh-start[b-qrw6ccwkdk],
.hh-more[b-qrw6ccwkdk] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: 0 1.55rem;
    border-radius: 17px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        translate .32s cubic-bezier(.2, .9, .25, 1),
        box-shadow .32s ease,
        background .32s ease,
        border-color .32s ease;
}

.hh-start[b-qrw6ccwkdk] {
    background: linear-gradient(135deg, #ffe08c, #f6c243 55%, #e8aa2e);
    color: #3a2a08;
    box-shadow:
        0 16px 38px -12px rgba(246, 194, 67, .62),
        inset 0 1px 0 rgba(255, 255, 255, .55);
}

    .hh-start svg[b-qrw6ccwkdk] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: translate .32s cubic-bezier(.2, .9, .25, 1);
    }

    .hh-start:hover[b-qrw6ccwkdk] {
        translate: 0 -2px;
        box-shadow:
            0 22px 46px -12px rgba(246, 194, 67, .78),
            inset 0 1px 0 rgba(255, 255, 255, .6);
    }

[dir="rtl"] .hh-start svg[b-qrw6ccwkdk] {
    scale: -1 1;
}

.hh-start:hover svg[b-qrw6ccwkdk] {
    translate: 4px 0;
}

[dir="rtl"] .hh-start:hover svg[b-qrw6ccwkdk] {
    translate: -4px 0;
}

.hh-more[b-qrw6ccwkdk] {
    border: 1px solid var(--hh-line);
    background: var(--hh-glass);
    color: var(--hh-ink);
    backdrop-filter: blur(10px);
}

    .hh-more:hover[b-qrw6ccwkdk] {
        translate: 0 -2px;
        border-color: rgba(252, 209, 102, .4);
        background: rgba(255, 240, 212, .1);
    }

/* --------------------- the tabs ------------------------ */

.hh-show[b-qrw6ccwkdk] {
    width: min(1180px, 100%);
    margin-top: clamp(16px, 2.6vh, 26px);
}

/* Seven tabs share the row equally, none narrower than its name; where the names no
   longer fit (a narrow screen, longer English names) the row scrolls and the
   script keeps the active tab in view. */
.hh-tabs[b-qrw6ccwkdk] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px;
    border: 1px solid var(--hh-line);
    border-radius: 22px;
    background: rgba(24, 17, 10, .5);
    backdrop-filter: blur(16px);
}

.hh-tabs[b-qrw6ccwkdk]::-webkit-scrollbar {
    display: none;
}

.hh-tab[b-qrw6ccwkdk] {
    --tone: #fcd166;

    position: relative;
    display: flex;
    /* equal shares of the row, never narrower than the name (the tab clips its
       bar, so its automatic minimum would be zero; the note adds no width) */
    flex: 1 0 0;
    min-width: max-content;
    align-items: center;
    gap: .5rem;
    padding: .55rem .55rem .62rem;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--hh-soft);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background .35s ease, color .35s ease;
}

.hh-tab--voice[b-qrw6ccwkdk] {
    --tone: #ff9d78;
}

.hh-tab--podcast[b-qrw6ccwkdk] {
    --tone: #bda1ff;
}

.hh-tab--dubbing[b-qrw6ccwkdk] {
    --tone: #ff8fbb;
}

.hh-tab--article[b-qrw6ccwkdk] {
    --tone: #6fd9c9;
}

.hh-tab--defense[b-qrw6ccwkdk] {
    --tone: #a8de7a;
}

.hh-tab--tools[b-qrw6ccwkdk] {
    --tone: #8fc2ff;
}

    .hh-tab:hover[b-qrw6ccwkdk] {
        background: rgba(255, 240, 212, .06);
    }

    .hh-tab.is-on[b-qrw6ccwkdk] {
        background: rgba(255, 240, 212, .1);
        color: var(--hh-ink);
    }

    .hh-tab:focus-visible[b-qrw6ccwkdk] {
        outline: 2px solid var(--hh-gold);
        outline-offset: 1px;
    }

.hh-tab__icon[b-qrw6ccwkdk] {
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 240, 212, .08);
    color: var(--tone);
    transition: background .35s ease, color .35s ease, scale .45s cubic-bezier(.2, .9, .25, 1);
}

    .hh-tab__icon svg[b-qrw6ccwkdk] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.hh-tab.is-on .hh-tab__icon[b-qrw6ccwkdk] {
    background: var(--tone);
    color: #2a1d0b;
    scale: 1.05;
}

.hh-tab__text[b-qrw6ccwkdk] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .hh-tab__text strong[b-qrw6ccwkdk] {
        font-size: .88rem;
        font-weight: 800;
        white-space: nowrap;
    }

    /* the note never widens its tab: it takes the name's width and trails off */
    .hh-tab__text small[b-qrw6ccwkdk] {
        contain: inline-size;
        overflow: hidden;
        color: var(--hh-faint);
        font-size: .7rem;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.hh-tab__bar[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-end: 3px;
    inset-inline: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--tone);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

[dir="rtl"] .hh-tab__bar[b-qrw6ccwkdk] {
    transform-origin: right center;
}

.hh-tab.is-on .hh-tab__bar[b-qrw6ccwkdk] {
    opacity: 1;
    animation: hh-fill-b-qrw6ccwkdk var(--hh-hold) linear forwards;
}

/* the visitor is looking: the scene stays until they stop */
.hh:has(.hh-stage:hover) .hh-tab.is-on .hh-tab__bar[b-qrw6ccwkdk] {
    animation-play-state: paused;
}

@keyframes hh-fill-b-qrw6ccwkdk {
    to {
        transform: scaleX(1);
    }
}

/* --------------------- the window ---------------------- */

.hh-stage[b-qrw6ccwkdk] {
    --flat: 0;
    --px: 0;
    --py: 0;

    position: relative;
    z-index: 1;
    margin: 14px 0 clamp(-190px, -14vw, -70px);
    perspective: 2200px;
    perspective-origin: 50% 0;
}

.hh-window[b-qrw6ccwkdk] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 232, 190, .22);
    border-radius: 24px;
    background: linear-gradient(170deg, #2e2317 0%, #1b140c 100%);
    box-shadow:
        0 60px 120px -40px rgba(0, 0, 0, .8),
        0 24px 50px -24px rgba(0, 0, 0, .6),
        inset 0 1px 0 rgba(255, 244, 222, .12);
    container-type: inline-size;
    transform:
        rotateX(calc((1 - var(--flat)) * 11deg + var(--py) * -1.4deg))
        rotateY(calc(var(--px) * 1.8deg))
        scale(calc(.965 + var(--flat) * .035));
    transform-origin: 50% 0;
    transition: transform .7s cubic-bezier(.2, .8, .25, 1);
    will-change: transform;
}

.hh-chrome[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 42px;
    border-bottom: 1px solid rgba(255, 232, 190, .1);
    background: rgba(255, 240, 212, .035);
}

.hh-chrome__dots[b-qrw6ccwkdk] {
    position: absolute;
    inset-inline-start: 16px;
    display: flex;
    gap: 7px;
}

    .hh-chrome__dots i[b-qrw6ccwkdk] {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: rgba(255, 240, 212, .2);
    }

        .hh-chrome__dots i:first-child[b-qrw6ccwkdk] {
            background: var(--hh-gold);
        }

.hh-chrome__address[b-qrw6ccwkdk] {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-width: 280px;
    max-width: 52%;
    justify-content: center;
    padding: .28rem .9rem;
    border-radius: 9px;
    background: rgba(0, 0, 0, .28);
    color: var(--hh-faint);
    font-size: .74rem;
    font-weight: 600;
}

    .hh-chrome__address svg[b-qrw6ccwkdk] {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .hh-chrome__address b[b-qrw6ccwkdk] {
        margin-inline-start: -.32rem;
        color: var(--hh-ink);
        font-weight: 600;
    }

.hh-canvas[b-qrw6ccwkdk] {
    position: relative;
    aspect-ratio: 112 / 54;
    font-size: 10px;
    font-size: calc(100cqw / 112);
    color: var(--hh-ink);
    text-align: start;
}

.hh-scene[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 1.8em;
    padding: 2.4em;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, visibility 0s linear .55s;
}

    .hh-scene.is-on[b-qrw6ccwkdk] {
        opacity: 1;
        visibility: visible;
        transition: opacity .55s ease .1s;
    }

@keyframes hh-rise-b-qrw6ccwkdk {
    from {
        opacity: 0;
        translate: 0 1.4em;
        filter: blur(.5em);
    }
}

/* --------------------- 1. translation ------------------ */

.hh-scene--translate[b-qrw6ccwkdk] {
    grid-template-columns: minmax(0, 1fr) 26em;
    align-items: center;
}

.t-slide__frame[b-qrw6ccwkdk] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 1.2em;
    box-shadow:
        0 2.4em 5em -1.6em rgba(0, 0, 0, .75),
        0 0 0 1px rgba(255, 232, 190, .18);
}

.t-slide__page[b-qrw6ccwkdk],
.t-slide__from img[b-qrw6ccwkdk] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-slide__from[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
    clip-path: inset(0 100% 0 0);
}

.is-on .t-slide__from[b-qrw6ccwkdk] {
    animation: t-wipe-b-qrw6ccwkdk var(--hh-hold) cubic-bezier(.7, 0, .3, 1) both;
}

.t-slide__scan[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.is-on .t-slide__scan[b-qrw6ccwkdk] {
    animation: t-scan-b-qrw6ccwkdk var(--hh-hold) cubic-bezier(.7, 0, .3, 1) both;
}

    .t-slide__scan i[b-qrw6ccwkdk] {
        position: absolute;
        inset-block: 0;
        right: 0;
        width: 12em;
        border-right: .22em solid var(--hh-gold);
        background: linear-gradient(90deg, transparent, rgba(252, 209, 102, .3));
        translate: 100% 0;
        scale: -1 1;
        box-shadow: 0 0 2em rgba(252, 209, 102, .6);
    }

@keyframes t-wipe-b-qrw6ccwkdk {
    0%, 16% {
        clip-path: inset(0 0 0 0);
    }

    62%, 100% {
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes t-scan-b-qrw6ccwkdk {
    0%, 15% {
        opacity: 0;
        translate: 0 0;
    }

    17% {
        opacity: 1;
        translate: 0 0;
    }

    60% {
        opacity: 1;
        translate: -100% 0;
    }

    63%, 100% {
        opacity: 0;
        translate: -100% 0;
    }
}

.t-side[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1.4em;
}

.t-pair[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 1.3em;
    border: 1px solid var(--hh-line);
    border-radius: 1.3em;
    background: var(--hh-glass);
    font-size: 1.32em;
    font-weight: 800;
}

    .t-pair svg[b-qrw6ccwkdk] {
        width: 1.3em;
        height: 1.3em;
        fill: none;
        stroke: var(--hh-gold);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.t-steps[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .t-steps li[b-qrw6ccwkdk] {
        display: flex;
        align-items: center;
        gap: .8em;
        color: var(--hh-ink);
        font-size: 1.36em;
        font-weight: 600;
    }

    .t-steps i[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 1.75em;
        height: 1.75em;
        border-radius: 50%;
        background: rgba(120, 214, 150, .17);
        color: #8fe3a9;
    }

    .t-steps svg[b-qrw6ccwkdk] {
        width: 1.1em;
        height: 1.1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.is-on .t-steps li[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .55s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .7s + 1.1s) both;
}

.t-done[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .9em 1em;
    border-radius: 1em;
    background: linear-gradient(135deg, #ffe08c, #f6c243 60%, #e8aa2e);
    color: #3a2a08;
    font-size: 1.28em;
    font-weight: 800;
    box-shadow: 0 1.2em 2.6em -1em rgba(246, 194, 67, .6);
}

    .t-done svg[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        width: 1.3em;
        height: 1.3em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.is-on .t-done[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) 4.3s both;
}

/* --------------------- 2. voice ------------------------ */

.hh-scene--voice[b-qrw6ccwkdk] {
    grid-template-columns: minmax(0, 1fr) 31em;
    grid-template-rows: minmax(0, 1fr) auto;
}

.v-editor[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1.6em;
    min-height: 0;
    padding: 2em 2.2em;
    border-radius: 1.5em;
    background: #fbf6ec;
    color: #2b2318;
    box-shadow: 0 2em 4em -1.8em rgba(0, 0, 0, .7);
}

.v-editor__bar[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(60, 44, 24, .12);
    font-size: 1.24em;
}

    .v-editor__bar strong[b-qrw6ccwkdk] {
        font-weight: 800;
    }

    .v-editor__bar span[b-qrw6ccwkdk] {
        color: #8b7f6d;
        font-weight: 600;
    }

.v-text[b-qrw6ccwkdk] {
    flex: 1;
    margin: 0;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 2;
}

.v-tones[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: 1.2em;
}

    .v-tones span[b-qrw6ccwkdk] {
        color: #8b7f6d;
        font-weight: 600;
    }

    .v-tones b[b-qrw6ccwkdk] {
        padding: .24em .75em;
        border: 1px solid rgba(60, 44, 24, .14);
        border-radius: .7em;
        color: #5e5343;
        font-weight: 700;
    }

        .v-tones b.is-picked[b-qrw6ccwkdk] {
            border-color: #ef7f4f;
            background: #ffe8dc;
            color: #a34a22;
        }

.v-word[b-qrw6ccwkdk] {
    border-radius: .3em;
    color: #2b2318;
}

.is-on .v-word[b-qrw6ccwkdk] {
    animation: v-say-b-qrw6ccwkdk .5s ease calc(var(--i) * .36s + .7s) both;
}

@keyframes v-say-b-qrw6ccwkdk {
    from {
        color: #c7bcaa;
    }

    40% {
        background: rgba(252, 209, 102, .55);
    }
}

.v-tag[b-qrw6ccwkdk] {
    display: inline-block;
    padding: 0 .4em;
    border-radius: .4em;
    background: #fdefc6;
    color: #8a6516;
    font-size: .68em;
    font-weight: 800;
    vertical-align: .14em;
}

.is-on .v-tag--late[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .4s ease 4.6s both;
}

.v-side[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .9em;
    min-height: 0;
}

.v-side__title[b-qrw6ccwkdk] {
    color: var(--hh-faint);
    font-size: 1.2em;
    font-weight: 700;
}

.v-voice[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .9em;
    padding: .85em 1em;
    border: 1px solid var(--hh-line);
    border-radius: 1.2em;
    background: var(--hh-glass);
}

    .v-voice.is-picked[b-qrw6ccwkdk] {
        border-color: rgba(255, 157, 120, .6);
        background: rgba(255, 157, 120, .12);
    }

    .v-voice > span[b-qrw6ccwkdk] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin-inline-end: auto;
    }

    .v-voice strong[b-qrw6ccwkdk] {
        font-size: 1.32em;
        font-weight: 800;
    }

    .v-voice small[b-qrw6ccwkdk] {
        color: var(--hh-faint);
        font-size: 1.06em;
        font-weight: 500;
    }

.v-voice__face[b-qrw6ccwkdk] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.4em;
    height: 3.4em;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffb48f, #ff8a60);
    color: #3b1c0d;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 900;
}

.v-voice__face--1[b-qrw6ccwkdk] {
    background: linear-gradient(145deg, #e8d5b0, #b3a189);
}

.v-voice__face--2[b-qrw6ccwkdk] {
    background: linear-gradient(145deg, #ffe08c, #e8aa2e);
}

.v-eq[b-qrw6ccwkdk] {
    display: flex;
    align-items: end;
    gap: .22em;
    height: 1.7em;
}

    .v-eq i[b-qrw6ccwkdk] {
        width: .3em;
        height: 100%;
        border-radius: .2em;
        background: #ff9d78;
        transform-origin: bottom;
    }

.is-on .v-eq i[b-qrw6ccwkdk] {
    animation: v-eq-b-qrw6ccwkdk 1s ease-in-out infinite alternate;
}

    .is-on .v-eq i:nth-child(2)[b-qrw6ccwkdk] {
        animation-delay: -.35s;
    }

    .is-on .v-eq i:nth-child(3)[b-qrw6ccwkdk] {
        animation-delay: -.7s;
    }

@keyframes v-eq-b-qrw6ccwkdk {
    from {
        transform: scaleY(.3);
    }
}

.v-kinds[b-qrw6ccwkdk] {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: auto;
}

    .v-kinds span[b-qrw6ccwkdk] {
        padding: .32em .7em;
        border-radius: .7em;
        background: rgba(255, 240, 212, .08);
        color: var(--hh-soft);
        font-size: 1.08em;
        font-weight: 600;
    }

.v-player[b-qrw6ccwkdk] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.6em;
    padding: 1.2em 1.6em;
    border: 1px solid var(--hh-line);
    border-radius: 1.5em;
    background: var(--hh-glass);
}

.v-play[b-qrw6ccwkdk] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 4.8em;
    height: 4.8em;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffb48f, #ff8a60);
    color: #3b1c0d;
    box-shadow: 0 0 0 .5em rgba(255, 157, 120, .16);
}

    .v-play svg[b-qrw6ccwkdk] {
        width: 2.2em;
        height: 2.2em;
        fill: currentColor;
    }

.v-wave[b-qrw6ccwkdk] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .36em;
    height: 6.2em;
}

    .v-wave i[b-qrw6ccwkdk] {
        flex: 1;
        min-width: 0;
        height: var(--h);
        border-radius: .3em;
        background: #ff9d78;
    }

.is-on .v-wave i[b-qrw6ccwkdk] {
    animation: v-bar-b-qrw6ccwkdk .45s ease calc(var(--i) * .085s + .7s) both;
}

@keyframes v-bar-b-qrw6ccwkdk {
    from {
        background: rgba(255, 240, 212, .2);
        transform: scaleY(.55);
    }
}

.v-time[b-qrw6ccwkdk] {
    color: var(--hh-soft);
    font-size: 1.3em;
    font-weight: 700;
}

/* --------------------- 3. podcast ---------------------- */

.hh-scene--podcast[b-qrw6ccwkdk] {
    grid-template-columns: 26em minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
}

.p-cover[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .6em;
}

.p-cover__art[b-qrw6ccwkdk] {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    aspect-ratio: 1.2;
    overflow: hidden;
    border-radius: 1.6em;
    background: linear-gradient(150deg, #6e4fe0 0%, #a97bf5 52%, #ffc58f 100%);
    color: #fff;
}

    .p-cover__art svg[b-qrw6ccwkdk] {
        position: relative;
        width: 6.4em;
        height: 6.4em;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
    }

    .p-cover__art i[b-qrw6ccwkdk] {
        position: absolute;
        width: 10em;
        height: 10em;
        border: .14em solid rgba(255, 255, 255, .5);
        border-radius: 50%;
        opacity: 0;
    }

.is-on .p-cover__art i[b-qrw6ccwkdk] {
    animation: p-ring-b-qrw6ccwkdk 3.4s ease-out infinite;
}

    .is-on .p-cover__art i:nth-child(2)[b-qrw6ccwkdk] {
        animation-delay: 1.1s;
    }

    .is-on .p-cover__art i:nth-child(3)[b-qrw6ccwkdk] {
        animation-delay: 2.2s;
    }

@keyframes p-ring-b-qrw6ccwkdk {
    from {
        opacity: .8;
        scale: .7;
    }

    to {
        opacity: 0;
        scale: 2.4;
    }
}

.p-cover strong[b-qrw6ccwkdk] {
    margin-top: .4em;
    font-size: 1.42em;
    font-weight: 800;
    line-height: 1.5;
}

.p-cover > span[b-qrw6ccwkdk] {
    color: var(--hh-faint);
    font-size: 1.14em;
    font-weight: 600;
}

.p-talk[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
    min-width: 0;
}

.p-talk__title[b-qrw6ccwkdk] {
    color: var(--hh-faint);
    font-size: 1.2em;
    font-weight: 700;
}

.p-line[b-qrw6ccwkdk] {
    display: flex;
    align-items: flex-end;
    gap: .9em;
    max-width: 84%;
}

.p-line--b[b-qrw6ccwkdk] {
    flex-direction: row-reverse;
    align-self: flex-end;
}

    .p-line i[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 3.2em;
        height: 3.2em;
        border-radius: 50%;
        background: linear-gradient(145deg, #cdb8ff, #9a75f0);
        color: #24133f;
        font-size: 1.1em;
        font-style: normal;
        font-weight: 900;
    }

.p-line--b i[b-qrw6ccwkdk] {
    background: linear-gradient(145deg, #ffe08c, #e8aa2e);
    color: #3a2a08;
}

.p-line p[b-qrw6ccwkdk] {
    margin: 0;
    padding: .8em 1.15em;
    border-radius: 1.2em;
    background: rgba(189, 161, 255, .16);
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1.7;
}

.p-line--b p[b-qrw6ccwkdk] {
    background: rgba(252, 209, 102, .14);
}

.is-on .p-line[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * 1.5s + .5s) both;
}

.p-mix[b-qrw6ccwkdk] {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: .5em;
    overflow: hidden;
    padding: 1em 1.2em;
    border: 1px solid var(--hh-line);
    border-radius: 1.3em;
    background: var(--hh-glass);
}

.p-lane[b-qrw6ccwkdk] {
    position: relative;
    height: 1.5em;
    border-radius: .4em;
    background: rgba(255, 240, 212, .05);
}

    .p-lane i[b-qrw6ccwkdk] {
        position: absolute;
        inset-block: 0;
        left: calc(var(--s) * 1%);
        width: calc(var(--w) * 1%);
        border-radius: .4em;
        background: #bda1ff;
    }

.p-lane--b i[b-qrw6ccwkdk] {
    background: #ffd98a;
}

.p-lane--music i[b-qrw6ccwkdk] {
    background: repeating-linear-gradient(90deg, #e8aa2e 0 .22em, rgba(232, 170, 46, .35) .22em .44em);
}

.p-head[b-qrw6ccwkdk] {
    position: absolute;
    inset-block: .4em;
    left: 1.2em;
    width: .16em;
    border-radius: .2em;
    background: #fff;
    box-shadow: 0 0 1em rgba(255, 255, 255, .9);
}

.is-on .p-head[b-qrw6ccwkdk] {
    animation: p-head-b-qrw6ccwkdk var(--hh-hold) linear both;
}

@keyframes p-head-b-qrw6ccwkdk {
    from {
        left: 1.2em;
    }

    to {
        left: calc(100% - 1.2em);
    }
}

.p-feed[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-start: 2.4em;
    inset-inline-end: 2.4em;
    display: flex;
    align-items: center;
    gap: .55em;
    padding: .5em .9em;
    border-radius: 1em;
    background: rgba(255, 157, 90, .16);
    color: #ffc7a1;
    font-size: 1.14em;
    font-weight: 700;
}

    .p-feed svg[b-qrw6ccwkdk] {
        width: 1.3em;
        height: 1.3em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
    }

.is-on .p-feed[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s ease 5s both;
}

/* --------------------- 4. article ---------------------- */

.hh-scene--article[b-qrw6ccwkdk] {
    grid-template-columns: minmax(0, 1fr) 33em;
}

.a-paper[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 0;
    overflow: hidden;
    padding: 2.2em 2.6em;
    border-radius: 1em;
    background: #fffdf8;
    color: #2b2318;
    box-shadow: 0 2em 4em -1.8em rgba(0, 0, 0, .7);
}

.a-paper__type[b-qrw6ccwkdk] {
    padding-bottom: .5em;
    border-bottom: .14em solid #2f8f7f;
    color: #2f8f7f;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: .08em;
}

.a-paper__title[b-qrw6ccwkdk] {
    font-size: 2em;
    font-weight: 900;
    line-height: 1.4;
}

.a-paper__box[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .62em;
    padding: 1em 1.2em;
    border-radius: .6em;
    background: #eef6f4;
}

.a-paper b[b-qrw6ccwkdk] {
    font-size: 1.1em;
    font-weight: 800;
}

.a-paper__box i[b-qrw6ccwkdk],
.a-paper__columns i[b-qrw6ccwkdk] {
    display: block;
    width: var(--w, 100%);
    height: .5em;
    border-radius: .3em;
    background: #cfc7b8;
    transform-origin: left center;
}

[dir="rtl"] .a-paper__box i[b-qrw6ccwkdk],
[dir="rtl"] .a-paper__columns i[b-qrw6ccwkdk] {
    transform-origin: right center;
}

.is-on .a-paper__box i[b-qrw6ccwkdk],
.is-on .a-paper__columns i[b-qrw6ccwkdk] {
    animation: a-write-b-qrw6ccwkdk .5s ease calc(var(--i) * .3s + .5s) both;
}

@keyframes a-write-b-qrw6ccwkdk {
    from {
        transform: scaleX(0);
    }
}

.a-paper__columns[b-qrw6ccwkdk] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8em;
    min-height: 0;
}

    .a-paper__columns > div[b-qrw6ccwkdk] {
        display: flex;
        flex-direction: column;
        gap: .6em;
        min-height: 0;
    }

    .a-paper__columns small[b-qrw6ccwkdk] {
        color: #8b7f6d;
        font-size: .9em;
        font-weight: 700;
    }

.a-chart[b-qrw6ccwkdk] {
    display: flex;
    align-items: flex-end;
    gap: .6em;
    flex: 1;
    min-height: 5em;
    max-height: 13em;
    margin-top: .3em;
    padding: .5em .7em 0;
    border-radius: .5em;
    background: #f6f1e6;
}

    .a-chart u[b-qrw6ccwkdk] {
        flex: 1;
        height: calc(var(--v) * 1%);
        border-radius: .25em .25em 0 0;
        background: #2f8f7f;
        text-decoration: none;
        transform-origin: bottom;
    }

.is-on .a-chart u[b-qrw6ccwkdk] {
    animation: a-grow-b-qrw6ccwkdk .7s cubic-bezier(.2, .9, .25, 1) 2.2s both;
}

@keyframes a-grow-b-qrw6ccwkdk {
    from {
        transform: scaleY(0);
    }
}

.a-table[b-qrw6ccwkdk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    margin-top: .3em;
    border: 1px solid #d9d0bf;
    border-radius: .35em;
    background: #d9d0bf;
}

    .a-table u[b-qrw6ccwkdk] {
        height: 1.35em;
        background: #fff;
        text-decoration: none;
    }

        .a-table u:nth-child(-n+3)[b-qrw6ccwkdk] {
            background: #2f8f7f;
        }

.a-side[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .85em;
    min-height: 0;
}

.a-parts[b-qrw6ccwkdk] {
    display: flex;
    gap: .4em;
}

    .a-parts span[b-qrw6ccwkdk] {
        flex: 1;
        padding: .34em 0;
        border-radius: .6em;
        background: rgba(111, 217, 201, .16);
        color: #8fe8d8;
        font-size: 1.04em;
        font-weight: 700;
        text-align: center;
    }

.is-on .a-parts span[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .45s ease calc(var(--i) * .55s + .6s) both;
}

.a-side__title[b-qrw6ccwkdk] {
    margin-top: .3em;
    color: var(--hh-faint);
    font-size: 1.16em;
    font-weight: 700;
}

.a-source[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: .85em 1em;
    border: 1px solid var(--hh-line);
    border-radius: 1em;
    background: var(--hh-glass);
}

.is-on .a-source[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .5s ease calc(var(--i) * .75s + 1s) both;
}

.a-source span[b-qrw6ccwkdk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.a-source u[b-qrw6ccwkdk] {
    display: block;
    height: .46em;
    border-radius: .3em;
    background: rgba(255, 240, 212, .3);
    text-decoration: none;
}

    .a-source u + u[b-qrw6ccwkdk] {
        width: 62%;
        background: rgba(255, 240, 212, .16);
    }

.a-source em[b-qrw6ccwkdk] {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .24em .6em;
    border-radius: .7em;
    background: rgba(111, 217, 201, .16);
    color: #8fe8d8;
    font-size: 1.06em;
    font-style: normal;
    font-weight: 800;
}

    .a-source em svg[b-qrw6ccwkdk] {
        width: 1.05em;
        height: 1.05em;
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.a-styles[b-qrw6ccwkdk] {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

    .a-styles span[b-qrw6ccwkdk] {
        padding: .3em .7em;
        border-radius: .7em;
        background: rgba(255, 240, 212, .08);
        color: var(--hh-soft);
        font-size: 1.08em;
        font-weight: 700;
    }

.a-word[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .9em;
    margin-top: auto;
    padding: .9em 1em;
    border-radius: 1.1em;
    background: linear-gradient(135deg, #2f8f7f, #1f6e73);
}

    .a-word i[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 3em;
        height: 3em;
        border-radius: .8em;
        background: #fff;
        color: #2b579a;
        font-size: 1.1em;
        font-style: normal;
        font-weight: 900;
    }

    .a-word span[b-qrw6ccwkdk] {
        display: flex;
        flex-direction: column;
    }

    .a-word strong[b-qrw6ccwkdk] {
        font-size: 1.28em;
        font-weight: 800;
    }

    .a-word small[b-qrw6ccwkdk] {
        color: rgba(255, 255, 255, .78);
        font-size: 1.04em;
        font-weight: 500;
    }

.is-on .a-word[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) 4.6s both;
}


/* --------------------- 4. dubbing ---------------------- */

.hh-scene--dubbing[b-qrw6ccwkdk] {
    grid-template-columns: minmax(0, 1fr) 30em;
    grid-template-rows: minmax(0, 1fr) auto;
}

.d-video[b-qrw6ccwkdk] {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: 1.4em;
    background: linear-gradient(160deg, #2c3d55 0%, #1d2638 55%, #141a28 100%);
    box-shadow: 0 2em 4em -1.8em rgba(0, 0, 0, .75);
}

.d-video__picture[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
}

/* a board behind two people talking */
.d-video__board[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-start: 12%;
    inset-inline-start: 8%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 36%;
    padding: 1.6em;
    border-radius: 1em;
    background: rgba(255, 255, 255, .08);
}

    .d-video__board u[b-qrw6ccwkdk] {
        height: .7em;
        border-radius: .4em;
        background: rgba(255, 255, 255, .22);
    }

        .d-video__board u:nth-child(2)[b-qrw6ccwkdk] {
            width: 78%;
        }

        .d-video__board u:nth-child(3)[b-qrw6ccwkdk] {
            width: 56%;
        }

.d-video__host[b-qrw6ccwkdk],
.d-video__guest[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-end: 0;
    width: 13em;
    height: 18em;
}

    .d-video__host[b-qrw6ccwkdk] {
        inset-inline-end: 22%;
    }

    .d-video__guest[b-qrw6ccwkdk] {
        inset-inline-end: 4%;
        width: 11.5em;
        height: 15.5em;
    }

    .d-video__host[b-qrw6ccwkdk]::before,
    .d-video__guest[b-qrw6ccwkdk]::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 50%;
        width: 42%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(160deg, #f2c7a3, #c98d68);
        translate: -50% 0;
    }

    [dir="rtl"] .d-video__host[b-qrw6ccwkdk]::before,
    [dir="rtl"] .d-video__guest[b-qrw6ccwkdk]::before {
        translate: 50% 0;
    }

    .d-video__host[b-qrw6ccwkdk]::after,
    .d-video__guest[b-qrw6ccwkdk]::after {
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        height: 58%;
        border-radius: 46% 46% 0 0;
        background: linear-gradient(170deg, #ff8fbb, #b9507e);
    }

    .d-video__guest[b-qrw6ccwkdk]::after {
        background: linear-gradient(170deg, #ffd98a, #c9922e);
    }

.d-video__badge[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-start: 1.4em;
    inset-inline-end: 1.4em;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .45em .9em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #ffd2e3;
    font-size: 1.12em;
    font-weight: 800;
}

    .d-video__badge i[b-qrw6ccwkdk] {
        width: .7em;
        height: .7em;
        border-radius: 50%;
        background: #ff5e9c;
        box-shadow: 0 0 .9em #ff5e9c;
    }

.is-on .d-video__badge i[b-qrw6ccwkdk] {
    animation: d-blink-b-qrw6ccwkdk 1.4s ease-in-out infinite;
}

@keyframes d-blink-b-qrw6ccwkdk {
    50% {
        opacity: .35;
    }
}

/* the subtitle: the English line, then the Persian dub in its place */
.d-sub[b-qrw6ccwkdk] {
    position: absolute;
    inset-block-end: 1.8em;
    inset-inline: 10%;
    display: grid;
    justify-items: center;
}

    .d-sub span[b-qrw6ccwkdk] {
        grid-area: 1 / 1;
        padding: .4em .9em;
        border-radius: .6em;
        background: rgba(0, 0, 0, .66);
        font-size: 1.62em;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
    }

    .d-sub__from[b-qrw6ccwkdk] {
        opacity: 0;
        color: rgba(255, 255, 255, .9);
    }

    .d-sub__to[b-qrw6ccwkdk] {
        color: #fff;
    }

.is-on .d-sub__from[b-qrw6ccwkdk] {
    animation: d-from-b-qrw6ccwkdk var(--hh-hold) ease both;
}

.is-on .d-sub__to[b-qrw6ccwkdk] {
    animation: d-to-b-qrw6ccwkdk var(--hh-hold) ease both;
}

@keyframes d-from-b-qrw6ccwkdk {
    0%, 6% {
        opacity: 0;
        translate: 0 .4em;
    }

    10%, 30% {
        opacity: 1;
        translate: 0 0;
    }

    36%, 100% {
        opacity: 0;
        translate: 0 -.4em;
    }
}

@keyframes d-to-b-qrw6ccwkdk {
    0%, 34% {
        opacity: 0;
        translate: 0 .4em;
    }

    40%, 100% {
        opacity: 1;
        translate: 0 0;
    }
}

.d-side[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .9em;
    min-height: 0;
}

.d-side__title[b-qrw6ccwkdk] {
    margin-top: .2em;
    color: var(--hh-faint);
    font-size: 1.16em;
    font-weight: 700;
}

.d-speaker[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .8em 1em;
    border: 1px solid var(--hh-line);
    border-radius: 1.1em;
    background: var(--hh-glass);
}

    .d-speaker b[b-qrw6ccwkdk] {
        color: var(--hh-soft);
        font-size: 1.14em;
        font-weight: 700;
        white-space: nowrap;
    }

    .d-speaker > svg[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        width: 1.3em;
        height: 1.3em;
        fill: none;
        stroke: #ff8fbb;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .d-speaker > svg[b-qrw6ccwkdk] {
    rotate: 180deg;
}

    .d-speaker span[b-qrw6ccwkdk] {
        display: flex;
        flex: 1;
        align-items: center;
        gap: .6em;
        min-width: 0;
    }

    .d-speaker span i[b-qrw6ccwkdk] {
        display: grid;
        place-items: center;
        width: 2.4em;
        height: 2.4em;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffc1d8, #e8649a);
        color: #3d0f22;
        font-size: 1em;
        font-style: normal;
        font-weight: 900;
    }

    .d-speaker--1 span i[b-qrw6ccwkdk] {
        background: linear-gradient(145deg, #ffe08c, #e8aa2e);
        color: #3a2a08;
    }

    .d-speaker strong[b-qrw6ccwkdk] {
        font-size: 1.3em;
        font-weight: 800;
    }

    .d-speaker .v-eq i[b-qrw6ccwkdk] {
        background: #ff8fbb;
    }

    .d-speaker--1 .v-eq i[b-qrw6ccwkdk] {
        background: #ffd98a;
    }

.is-on .d-speaker[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .55s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .6s + 3.4s) both;
}

.d-steps[b-qrw6ccwkdk] {
    gap: .8em;
}

    .d-steps li[b-qrw6ccwkdk] {
        font-size: 1.2em;
    }

.d-options[b-qrw6ccwkdk] {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

    .d-options span[b-qrw6ccwkdk] {
        padding: .32em .7em;
        border-radius: .7em;
        background: rgba(255, 240, 212, .08);
        color: var(--hh-soft);
        font-size: 1.04em;
        font-weight: 600;
    }

.d-done[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: .65em;
    margin-top: auto;
    padding: .9em 1em;
    border-radius: 1em;
    background: linear-gradient(135deg, #ffb1cf, #f07aa8 60%, #d35a8a);
    color: #3d0f22;
    font-size: 1.2em;
    font-weight: 800;
    box-shadow: 0 1.2em 2.6em -1em rgba(240, 122, 168, .55);
}

    .d-done span[b-qrw6ccwkdk] {
        flex: 1;
    }

    .d-done b[b-qrw6ccwkdk] {
        font-size: .86em;
        font-weight: 800;
        opacity: .75;
    }

    .d-done svg[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        width: 1.3em;
        height: 1.3em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.is-on .d-done[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) 5.2s both;
}

.d-lane--original i[b-qrw6ccwkdk] {
    background: rgba(255, 240, 212, .22);
}

.d-lane--a i[b-qrw6ccwkdk] {
    background: #ff8fbb;
}

.d-lane--b i[b-qrw6ccwkdk] {
    background: #ffd98a;
}

/* --------------------- 6. defense ---------------------- */

.hh-scene--defense[b-qrw6ccwkdk] {
    grid-template-columns: minmax(0, 1fr) 30em;
    grid-template-rows: minmax(0, 1fr) auto;
}

.f-slide[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 0;
    overflow: hidden;
    padding: 2em 2.4em 1.4em;
    border-radius: 1.2em;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(168, 222, 122, .16), transparent 70%),
        linear-gradient(150deg, #1d3557 0%, #142640 100%);
    box-shadow: 0 2em 4em -1.8em rgba(0, 0, 0, .75);
}

.f-slide__chapter[b-qrw6ccwkdk] {
    align-self: flex-start;
    padding: .3em .8em;
    border-radius: 999px;
    background: rgba(168, 222, 122, .18);
    color: #c6ef9f;
    font-size: 1.04em;
    font-weight: 800;
}

.f-slide__title[b-qrw6ccwkdk] {
    font-size: 2.1em;
    font-weight: 900;
    line-height: 1.4;
}

.f-slide__body[b-qrw6ccwkdk] {
    display: grid;
    flex: 1;
    grid-template-columns: 22em minmax(0, 1fr);
    gap: 2em;
    align-items: end;
    min-height: 0;
}

.f-chart[b-qrw6ccwkdk] {
    display: flex;
    align-items: flex-end;
    gap: 1.4em;
    height: 100%;
    max-height: 15em;
    padding: 0 1em;
    border-bottom: .14em solid rgba(255, 255, 255, .3);
}

    .f-chart u[b-qrw6ccwkdk] {
        flex: 1;
        height: calc(var(--v) * 1%);
        border-radius: .5em .5em 0 0;
        background: linear-gradient(180deg, #c6ef9f, #6fb04a);
        transform-origin: bottom;
    }

        .f-chart u:nth-child(-n+2)[b-qrw6ccwkdk] {
            background: linear-gradient(180deg, rgba(198, 239, 159, .55), rgba(111, 176, 74, .55));
        }

.is-on .f-chart u[b-qrw6ccwkdk] {
    animation: f-grow-b-qrw6ccwkdk .8s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .25s + .6s) both;
}

@keyframes f-grow-b-qrw6ccwkdk {
    from {
        transform: scaleY(0);
    }
}

.f-points[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .f-points li[b-qrw6ccwkdk] {
        position: relative;
        padding-inline-start: 1.4em;
        color: rgba(255, 255, 255, .9);
        font-size: 1.36em;
        font-weight: 600;
        line-height: 1.5;
    }

        .f-points li[b-qrw6ccwkdk]::before {
            content: "";
            position: absolute;
            inset-block-start: .55em;
            inset-inline-start: 0;
            width: .55em;
            height: .55em;
            border-radius: 50%;
            background: #a8de7a;
        }

.is-on .f-points li[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .55s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .6s + 1.6s) both;
}

.f-slide__foot[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    gap: 1em;
    color: rgba(255, 255, 255, .6);
    font-size: 1em;
    font-weight: 700;
}

    .f-slide__foot i[b-qrw6ccwkdk] {
        flex: 1;
        height: .3em;
        border-radius: .2em;
        background: rgba(255, 255, 255, .14);
    }

        .f-slide__foot u[b-qrw6ccwkdk] {
            display: block;
            width: 50%;
            height: 100%;
            border-radius: inherit;
            background: #a8de7a;
        }

.f-side[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 0;
}

.f-notes[b-qrw6ccwkdk],
.f-qa[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .7em;
    padding: 1em 1.2em;
    border: 1px solid var(--hh-line);
    border-radius: 1.2em;
    background: var(--hh-glass);
}

.f-notes__head[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .f-notes__head strong[b-qrw6ccwkdk] {
        font-size: 1.24em;
        font-weight: 800;
    }

    .f-notes__head span[b-qrw6ccwkdk] {
        padding: .2em .6em;
        border-radius: .6em;
        background: rgba(168, 222, 122, .16);
        color: #c6ef9f;
        font-size: 1.04em;
        font-weight: 800;
    }

.f-notes > i[b-qrw6ccwkdk],
.f-qa__a i[b-qrw6ccwkdk] {
    width: var(--w, 100%);
    height: .6em;
    border-radius: .4em;
    background: rgba(255, 240, 212, .16);
}

.is-on .f-notes > i[b-qrw6ccwkdk] {
    animation: f-type-b-qrw6ccwkdk .5s ease calc(var(--i) * .35s + 2.2s) both;
}

@keyframes f-type-b-qrw6ccwkdk {
    from {
        width: 0;
    }
}

.f-qa__title[b-qrw6ccwkdk] {
    color: var(--hh-faint);
    font-size: 1.1em;
    font-weight: 700;
}

.f-qa__q[b-qrw6ccwkdk] {
    align-self: flex-start;
    margin: 0;
    padding: .55em .9em;
    border-radius: 1em;
    background: rgba(168, 222, 122, .18);
    font-size: 1.32em;
    font-weight: 700;
    line-height: 1.5;
}

.f-qa__a[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: .7em .9em;
    border-radius: 1em;
    background: rgba(255, 240, 212, .06);
}

.is-on .f-qa[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) 3.6s both;
}

.f-files[b-qrw6ccwkdk] {
    display: flex;
    gap: .6em;
    margin-top: auto;
}

.f-file[b-qrw6ccwkdk] {
    flex: 1;
    padding: .7em 0;
    border-radius: .9em;
    color: #fff;
    font-size: 1.16em;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
}

.f-file--pptx[b-qrw6ccwkdk] {
    background: linear-gradient(135deg, #e8784a, #c4532a);
}

.f-file--docx[b-qrw6ccwkdk] {
    background: linear-gradient(135deg, #4a86e8, #2a5fc4);
}

.f-file--mp3[b-qrw6ccwkdk] {
    background: linear-gradient(135deg, #a8de7a, #5f9d3b);
    color: #1b2e0d;
}

.is-on .f-file[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .5s cubic-bezier(.2, .9, .25, 1) 5s both;
}

/* every slide of the deck, the one on screen lit */
.f-strip[b-qrw6ccwkdk] {
    grid-column: 1 / -1;
    display: flex;
    gap: .9em;
    padding: .8em 1em;
    border: 1px solid var(--hh-line);
    border-radius: 1.3em;
    background: var(--hh-glass);
}

    .f-strip i[b-qrw6ccwkdk] {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: .35em;
        aspect-ratio: 16 / 9;
        padding: .6em;
        border-radius: .5em;
        background: #1d3557;
        opacity: .55;
    }

        .f-strip i u[b-qrw6ccwkdk] {
            height: .35em;
            border-radius: .2em;
            background: rgba(255, 255, 255, .35);
        }

            .f-strip i u + u[b-qrw6ccwkdk] {
                width: 60%;
            }

        .f-strip i.is-now[b-qrw6ccwkdk] {
            opacity: 1;
            outline: .16em solid #a8de7a;
            outline-offset: .12em;
        }

.is-on .f-strip i[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .45s ease calc(var(--i) * .12s + .2s) both;
}

/* --------------------- 7. tools ------------------------ */

.hh-scene--tools[b-qrw6ccwkdk] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1.4em;
}

.u-tile[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    gap: 1em;
    min-height: 0;
    padding: 1.4em 1.5em;
    border: 1px solid var(--hh-line);
    border-radius: 1.5em;
    background: var(--hh-glass);
}

.is-on .u-tile[b-qrw6ccwkdk] {
    animation: hh-rise-b-qrw6ccwkdk .6s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * .12s + .1s) both;
}

.u-tile strong[b-qrw6ccwkdk] {
    font-size: 1.42em;
    font-weight: 800;
}

.u-tile > div[b-qrw6ccwkdk] {
    flex: 1;
    min-height: 0;
    border-radius: 1em;
}

.u-size[b-qrw6ccwkdk] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;
    position: relative;
    background: rgba(0, 0, 0, .22);
}

.u-size__from[b-qrw6ccwkdk],
.u-size__to[b-qrw6ccwkdk] {
    grid-area: 1 / 1;
    font-size: 2.3em;
    font-weight: 900;
}

.u-size__from[b-qrw6ccwkdk] {
    position: absolute;
    translate: 0 -.42em;
    color: var(--hh-faint);
    opacity: 0;
}

.u-size__to[b-qrw6ccwkdk] {
    translate: 0 -.1em;
    color: #8fc2ff;
}

.is-on .u-size__from[b-qrw6ccwkdk] {
    animation: u-out-b-qrw6ccwkdk 5.6s ease 1s both;
}

.is-on .u-size__to[b-qrw6ccwkdk] {
    animation: u-in-b-qrw6ccwkdk 5.6s ease 1s both;
}

@keyframes u-out-b-qrw6ccwkdk {
    0%, 22% {
        opacity: 1;
    }

    34%, 100% {
        opacity: 0;
    }
}

@keyframes u-in-b-qrw6ccwkdk {
    0%, 26% {
        opacity: 0;
    }

    40%, 100% {
        opacity: 1;
    }
}

.u-size i[b-qrw6ccwkdk] {
    width: 62%;
    height: .7em;
    overflow: hidden;
    border-radius: .4em;
    background: rgba(255, 240, 212, .12);
}

.u-size u[b-qrw6ccwkdk] {
    display: block;
    width: 32%;
    height: 100%;
    border-radius: .4em;
    background: #8fc2ff;
}

.is-on .u-size u[b-qrw6ccwkdk] {
    animation: u-shrink-b-qrw6ccwkdk 1.3s cubic-bezier(.6, 0, .2, 1) 2s both;
}

@keyframes u-shrink-b-qrw6ccwkdk {
    from {
        width: 100%;
    }
}

.u-swap[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    background: rgba(0, 0, 0, .22);
}

    .u-swap svg[b-qrw6ccwkdk] {
        width: 2em;
        height: 2em;
        fill: none;
        stroke: var(--hh-gold);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.u-doc[b-qrw6ccwkdk] {
    display: grid;
    place-items: center;
    width: 5.2em;
    height: 6.4em;
    border-radius: .8em;
    background: #fff;
    font-size: 1.1em;
    font-weight: 900;
    box-shadow: 0 1em 2em -1em rgba(0, 0, 0, .7);
}

.u-doc--pdf[b-qrw6ccwkdk] {
    color: #d3382e;
}

.u-doc--word[b-qrw6ccwkdk] {
    background: #2b579a;
    color: #fff;
}

.is-on .u-doc--word[b-qrw6ccwkdk] {
    animation: u-pop-b-qrw6ccwkdk .6s cubic-bezier(.2, 1.4, .4, 1) 1.4s both;
}

@keyframes u-pop-b-qrw6ccwkdk {
    from {
        opacity: 0;
        scale: .5;
    }
}

.u-sharp[b-qrw6ccwkdk] {
    position: relative;
    overflow: hidden;
}

    .u-sharp img[b-qrw6ccwkdk] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.u-sharp__soft[b-qrw6ccwkdk] {
    clip-path: inset(0 100% 0 0);
    image-rendering: pixelated;
}

.is-on .u-sharp__soft[b-qrw6ccwkdk] {
    animation: u-wipe-b-qrw6ccwkdk 3.4s cubic-bezier(.7, 0, .3, 1) 1.2s both;
}

@keyframes u-wipe-b-qrw6ccwkdk {
    from {
        clip-path: inset(0 0 0 0);
    }

    to {
        clip-path: inset(0 100% 0 0);
    }
}

.u-cut[b-qrw6ccwkdk] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, .13) 0 25%, rgba(255, 255, 255, .03) 0 50%) 0 0 / 1.6em 1.6em;
}

.u-cut__scene[b-qrw6ccwkdk] {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #6fa1c9, #dcb98a);
    opacity: 0;
}

.is-on .u-cut__scene[b-qrw6ccwkdk] {
    animation: u-gone-b-qrw6ccwkdk 1.2s ease 1.6s both;
}

@keyframes u-gone-b-qrw6ccwkdk {
    from {
        opacity: 1;
    }
}

.u-cut__bottle[b-qrw6ccwkdk] {
    position: relative;
    width: 4.6em;
    height: 8.6em;
    border-radius: 1.2em 1.2em .9em .9em;
    background: linear-gradient(135deg, #f6c243, #c98b1c);
    box-shadow: 0 .6em 1.4em rgba(0, 0, 0, .35);
}

    .u-cut__bottle[b-qrw6ccwkdk]::before {
        content: "";
        position: absolute;
        inset-block-end: 100%;
        inset-inline: 1.4em;
        height: 1.5em;
        border-radius: .4em .4em 0 0;
        background: #5a4227;
    }

    .u-cut__bottle u[b-qrw6ccwkdk] {
        position: absolute;
        inset: 3em .8em 2em;
        border-radius: .4em;
        background: #fff8ea;
    }

.u-read[b-qrw6ccwkdk] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75em;
    overflow: hidden;
    padding: 1em 1.3em;
    background: #fbf6ec;
}

    .u-read i[b-qrw6ccwkdk] {
        display: block;
        height: .55em;
        border-radius: .3em;
        background: #2b2318;
        transform-origin: right center;
    }

        .u-read i:nth-child(2)[b-qrw6ccwkdk] {
            width: 86%;
        }

        .u-read i:nth-child(3)[b-qrw6ccwkdk] {
            width: 94%;
        }

        .u-read i:nth-child(4)[b-qrw6ccwkdk] {
            width: 58%;
        }

[dir="ltr"] .u-read i[b-qrw6ccwkdk] {
    transform-origin: left center;
}

.is-on .u-read i[b-qrw6ccwkdk] {
    animation: a-write-b-qrw6ccwkdk .5s ease 1.5s both;
}

    .is-on .u-read i:nth-child(2)[b-qrw6ccwkdk] {
        animation-delay: 2s;
    }

    .is-on .u-read i:nth-child(3)[b-qrw6ccwkdk] {
        animation-delay: 2.5s;
    }

    .is-on .u-read i:nth-child(4)[b-qrw6ccwkdk] {
        animation-delay: 3s;
    }

.u-read b[b-qrw6ccwkdk] {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(143, 194, 255, .55));
    border-bottom: .14em solid #5f9ee8;
    opacity: 0;
}

.is-on .u-read b[b-qrw6ccwkdk] {
    animation: u-scan-b-qrw6ccwkdk 2.6s ease-in-out 1.2s both;
}

@keyframes u-scan-b-qrw6ccwkdk {
    0% {
        top: -18%;
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.u-clean[b-qrw6ccwkdk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .34em;
    padding: .8em;
    background: rgba(0, 0, 0, .22);
}

    .u-clean i[b-qrw6ccwkdk] {
        flex: 1;
        height: var(--h);
        border-radius: .3em;
        background: #8fe3a9;
    }

.is-on .u-clean i[b-qrw6ccwkdk] {
    animation: u-noise-b-qrw6ccwkdk 1.6s ease 1.4s both;
}

@keyframes u-noise-b-qrw6ccwkdk {
    from {
        height: var(--n);
        background: rgba(255, 240, 212, .3);
    }
}

/* --------------------- smaller screens ----------------- */

/* seven tabs: the note under each name needs a wide screen */
@media (max-width: 1260px) {
    .hh-tab__text small[b-qrw6ccwkdk] {
        display: none;
    }
}

@media (max-width: 1080px) {
    .hh-tab[b-qrw6ccwkdk] {
        gap: .4rem;
        padding-inline: .45rem;
    }

    .hh-tab__icon[b-qrw6ccwkdk] {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

        .hh-tab__icon svg[b-qrw6ccwkdk] {
            width: 17px;
            height: 17px;
        }

    .hh-tab__text strong[b-qrw6ccwkdk] {
        font-size: .8rem;
    }
}


/* The phone gets one column: the same scenes, stacked and larger. */
@media (max-width: 720px) {
    .hh[b-qrw6ccwkdk] {
        --hh-title: clamp(1.45rem, 7.4vw, 2.5rem);
        padding-top: 30px;
    }

    .hh-lede[b-qrw6ccwkdk] {
        font-size: .94rem;
        line-height: 1.9;
    }

    .hh-rotor__line[b-qrw6ccwkdk] {
        white-space: normal;
    }

    .hh-tabs[b-qrw6ccwkdk] {
        display: flex;
        margin-inline: -16px;
        padding: 6px 16px;
        overflow-x: auto;
        border-inline: 0;
        border-radius: 0;
        scrollbar-width: none;
    }

        .hh-tabs[b-qrw6ccwkdk]::-webkit-scrollbar {
            display: none;
        }

    .hh-tab[b-qrw6ccwkdk] {
        flex: 0 0 auto;
        padding: .42rem .7rem .5rem;
    }

    .hh-tab__icon[b-qrw6ccwkdk] {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

        .hh-tab__icon svg[b-qrw6ccwkdk] {
            width: 18px;
            height: 18px;
        }

    .hh-tab__text strong[b-qrw6ccwkdk] {
        font-size: .84rem;
    }

    .hh-stage[b-qrw6ccwkdk] {
        margin-bottom: -56px;
        perspective: none;
    }

    .hh-window[b-qrw6ccwkdk] {
        border-radius: 18px;
        transform: none;
        transition: none;
    }

    .hh-chrome[b-qrw6ccwkdk] {
        height: 34px;
    }

    .hh-chrome__address[b-qrw6ccwkdk] {
        min-width: 0;
        max-width: 70%;
        font-size: .68rem;
    }

    .hh-canvas[b-qrw6ccwkdk] {
        aspect-ratio: 34 / 40;
        font-size: calc(100cqw / 34);
    }

    .hh-scene[b-qrw6ccwkdk] {
        gap: 1em;
        padding: 1.1em;
    }

    .hh-scene--translate[b-qrw6ccwkdk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
    }

    .t-side[b-qrw6ccwkdk] {
        gap: .8em;
    }

    .t-pair[b-qrw6ccwkdk] {
        display: none;
    }

    .t-steps[b-qrw6ccwkdk] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55em .8em;
    }

        .t-steps li[b-qrw6ccwkdk] {
            font-size: .94em;
        }

    .t-done[b-qrw6ccwkdk] {
        font-size: 1.02em;
    }

    .hh-scene--voice[b-qrw6ccwkdk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
    }

    .v-editor[b-qrw6ccwkdk] {
        gap: .7em;
        padding: 1em 1.1em;
    }

    .v-editor__bar[b-qrw6ccwkdk] {
        padding-bottom: .5em;
        font-size: .96em;
    }

    .v-text[b-qrw6ccwkdk] {
        font-size: 1.32em;
        line-height: 1.9;
    }

    .v-tones[b-qrw6ccwkdk] {
        display: none;
    }

    .v-side[b-qrw6ccwkdk] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .4em;
    }

    .v-side__title[b-qrw6ccwkdk],
    .v-voice:not(.is-picked)[b-qrw6ccwkdk] {
        display: none;
    }

    .v-voice[b-qrw6ccwkdk] {
        flex: 1 0 100%;
        padding: .5em .7em;
    }

    .v-kinds span[b-qrw6ccwkdk] {
        font-size: .86em;
    }

    .v-player[b-qrw6ccwkdk] {
        gap: .8em;
        padding: .6em .8em;
        border-radius: 1em;
    }

    .v-play[b-qrw6ccwkdk] {
        width: 3em;
        height: 3em;
    }

    .v-wave[b-qrw6ccwkdk] {
        gap: .14em;
        height: 3.2em;
    }

    .v-time[b-qrw6ccwkdk] {
        font-size: .96em;
    }

    .hh-scene--podcast[b-qrw6ccwkdk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .p-cover[b-qrw6ccwkdk] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 .8em;
    }

    .p-cover__art[b-qrw6ccwkdk] {
        flex: 0 0 5.4em;
        height: 5.4em;
        border-radius: 1em;
    }

        .p-cover__art svg[b-qrw6ccwkdk] {
            width: 3em;
            height: 3em;
        }

    .p-cover strong[b-qrw6ccwkdk] {
        flex: 1 1 0;
        margin: 0;
        font-size: 1.04em;
    }

    .p-cover > span[b-qrw6ccwkdk] {
        display: none;
    }

    .p-line[b-qrw6ccwkdk] {
        max-width: 96%;
    }

        .p-line i[b-qrw6ccwkdk] {
            width: 2.3em;
            height: 2.3em;
            font-size: .94em;
        }

        .p-line p[b-qrw6ccwkdk] {
            padding: .5em .8em;
            font-size: 1.02em;
        }

    .p-talk__title[b-qrw6ccwkdk] {
        display: none;
    }

    .p-mix[b-qrw6ccwkdk] {
        padding: .6em .7em;
    }

    .p-lane[b-qrw6ccwkdk] {
        height: .8em;
    }

    .p-feed[b-qrw6ccwkdk] {
        display: none;
    }

    .hh-scene--dubbing[b-qrw6ccwkdk],
    .hh-scene--defense[b-qrw6ccwkdk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-content: start;
    }

    .d-video[b-qrw6ccwkdk] {
        aspect-ratio: 16 / 10;
    }

    .d-video__host[b-qrw6ccwkdk] {
        width: 8em;
        height: 11em;
    }

    .d-video__guest[b-qrw6ccwkdk] {
        width: 7em;
        height: 9.5em;
    }

    .d-video__board[b-qrw6ccwkdk] {
        gap: .6em;
        padding: 1em;
    }

    .d-video__badge[b-qrw6ccwkdk] {
        inset-block-start: .8em;
        inset-inline-end: .8em;
        font-size: .9em;
    }

    .d-sub[b-qrw6ccwkdk] {
        inset-block-end: .9em;
        inset-inline: 5%;
    }

        .d-sub span[b-qrw6ccwkdk] {
            font-size: 1.02em;
        }

    .d-side[b-qrw6ccwkdk] {
        gap: .55em;
    }

    .d-side .t-pair[b-qrw6ccwkdk],
    .d-side__title[b-qrw6ccwkdk],
    .d-steps[b-qrw6ccwkdk],
    .d-options[b-qrw6ccwkdk] {
        display: none;
    }

    .d-speaker[b-qrw6ccwkdk] {
        padding: .45em .7em;
    }

        .d-speaker b[b-qrw6ccwkdk] {
            font-size: .94em;
        }

        .d-speaker strong[b-qrw6ccwkdk] {
            font-size: 1em;
        }

        .d-speaker span i[b-qrw6ccwkdk] {
            width: 1.9em;
            height: 1.9em;
            font-size: .86em;
        }

    .d-done[b-qrw6ccwkdk] {
        font-size: .96em;
    }

    .d-mix[b-qrw6ccwkdk] {
        gap: .35em;
        padding: .6em .7em;
    }

        .d-mix .p-lane[b-qrw6ccwkdk] {
            height: .8em;
        }

    .f-slide[b-qrw6ccwkdk] {
        gap: .55em;
        padding: 1em 1.1em .8em;
    }

    .f-slide__chapter[b-qrw6ccwkdk] {
        font-size: .84em;
    }

    .f-slide__title[b-qrw6ccwkdk] {
        font-size: 1.3em;
    }

    .f-slide__body[b-qrw6ccwkdk] {
        grid-template-columns: 9em minmax(0, 1fr);
        gap: 1em;
    }

    .f-chart[b-qrw6ccwkdk] {
        gap: .6em;
        max-height: 7em;
        padding: 0 .4em;
    }

    .f-points[b-qrw6ccwkdk] {
        gap: .45em;
    }

        .f-points li[b-qrw6ccwkdk] {
            font-size: .9em;
        }

    .f-side[b-qrw6ccwkdk] {
        gap: .55em;
    }

    .f-notes[b-qrw6ccwkdk] {
        gap: .45em;
        padding: .6em .8em;
    }

    .f-notes__head strong[b-qrw6ccwkdk] {
        font-size: .96em;
    }

    .f-notes__head span[b-qrw6ccwkdk] {
        font-size: .84em;
    }

    .f-notes > i:nth-of-type(n+3)[b-qrw6ccwkdk] {
        display: none;
    }

    .f-qa[b-qrw6ccwkdk] {
        gap: .45em;
        padding: .6em .8em;
    }

    .f-qa__title[b-qrw6ccwkdk] {
        font-size: .9em;
    }

    .f-qa__q[b-qrw6ccwkdk] {
        font-size: 1em;
    }

    .f-file[b-qrw6ccwkdk] {
        padding: .45em 0;
        font-size: .9em;
    }

    .f-strip[b-qrw6ccwkdk] {
        gap: .4em;
        padding: .5em .6em;
    }

        .f-strip i[b-qrw6ccwkdk] {
            padding: .3em;
        }

            .f-strip i u[b-qrw6ccwkdk] {
                height: .2em;
            }

    .hh-scene--article[b-qrw6ccwkdk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .a-paper[b-qrw6ccwkdk] {
        gap: .5em;
        padding: 1em 1.2em;
    }

    .a-paper__type[b-qrw6ccwkdk] {
        font-size: .76em;
    }

    .a-paper__title[b-qrw6ccwkdk] {
        font-size: 1.2em;
    }

    .a-paper b[b-qrw6ccwkdk] {
        font-size: .9em;
    }

    .a-chart[b-qrw6ccwkdk] {
        min-height: 3em;
    }

    .a-table u[b-qrw6ccwkdk] {
        height: .8em;
    }

    .a-side[b-qrw6ccwkdk] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5em;
    }

    .a-side__title[b-qrw6ccwkdk],
    .a-styles[b-qrw6ccwkdk],
    .a-parts[b-qrw6ccwkdk] {
        display: none;
    }

    .a-source[b-qrw6ccwkdk] {
        flex: 1 0 100%;
        padding: .4em .7em;
    }

        .a-source:nth-of-type(n+3)[b-qrw6ccwkdk] {
            display: none;
        }

        .a-source em[b-qrw6ccwkdk] {
            font-size: .84em;
        }

    .a-word[b-qrw6ccwkdk] {
        flex: 1 0 100%;
        padding: .5em .7em;
    }

        .a-word strong[b-qrw6ccwkdk] {
            font-size: 1em;
        }

        .a-word small[b-qrw6ccwkdk] {
            font-size: .84em;
        }

    .hh-scene--tools[b-qrw6ccwkdk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: .7em;
    }

    .u-tile[b-qrw6ccwkdk] {
        gap: .5em;
        padding: .7em .8em;
        border-radius: 1em;
    }

        .u-tile strong[b-qrw6ccwkdk] {
            font-size: 1em;
        }

    .u-size__from[b-qrw6ccwkdk],
    .u-size__to[b-qrw6ccwkdk] {
        font-size: 1.5em;
    }

    .u-doc[b-qrw6ccwkdk] {
        width: 2.7em;
        height: 3.4em;
        font-size: .8em;
    }

    .u-swap svg[b-qrw6ccwkdk] {
        width: 1.3em;
        height: 1.3em;
    }

    .u-cut__bottle[b-qrw6ccwkdk] {
        width: 2.6em;
        height: 3.6em;
        border-radius: .7em;
    }

        .u-cut__bottle[b-qrw6ccwkdk]::before {
            inset-inline: .7em;
            height: .6em;
        }

        .u-cut__bottle u[b-qrw6ccwkdk] {
            inset: 1em .5em .8em;
        }

    .u-read[b-qrw6ccwkdk] {
        gap: .45em;
        padding: .6em .7em;
    }

        .u-read i[b-qrw6ccwkdk] {
            height: .32em;
        }

    .u-clean[b-qrw6ccwkdk] {
        gap: .16em;
        padding: .4em;
    }
}

/* scrolled past: everything holds until it is back in view */
.hh.is-away *[b-qrw6ccwkdk],
.hh.is-away *[b-qrw6ccwkdk]::before,
.hh.is-away *[b-qrw6ccwkdk]::after {
    animation-play-state: paused !important;
}

/* --------------------- motion off ---------------------- */

@media (prefers-reduced-motion: reduce) {
    .hh *[b-qrw6ccwkdk],
    .hh *[b-qrw6ccwkdk]::before,
    .hh *[b-qrw6ccwkdk]::after {
        animation: none !important;
        transition: none !important;
    }

    .hh-window[b-qrw6ccwkdk] {
        transform: none;
    }

    .hh-tab.is-on .hh-tab__bar[b-qrw6ccwkdk] {
        transform: scaleX(1);
    }

    .t-slide__from[b-qrw6ccwkdk] {
        clip-path: inset(0 100% 0 0);
    }
}

/* The free start under the hero buttons, centred like them. */
.hh-free[b-qrw6ccwkdk] {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.hh-free[b-qrw6ccwkdk]  .free-start {
    flex-basis: auto;
    justify-content: center;
    margin: 0;
    text-align: center;
}
/* _content/AITranslationPlatform.Web/Components/Landing/LandingProof.razor.rz.scp.css */
/* =========================================================
   WHY IT IS WORTH TRYING: THE COMPARISON, THE REASONS, THE WAY IN
   ========================================================= */

/* registered so the opening sweep can animate it */
@property --pos {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

.lp-proof[b-nd93279xjt],
.lp-why[b-nd93279xjt] {
    /* the page stays cream in both themes, so these sections do too */
    --ui-ink: #1c1b17;
    --ui-muted: #6d6759;
    --ui-line: rgba(28, 27, 23, .13);
    --ui-surface-strong: #fff;
    --ui-accent-tint: rgba(252, 209, 102, .3);
    --ui-accent-strong: #f6c243;
    --ui-warning: #8a6516;
    --ui-bloom-warm: rgba(252, 209, 102, .62);
}

.lp-kicker[b-nd93279xjt] {
    display: inline-block;
    padding: .34rem .9rem;
    border: 1px solid color-mix(in srgb, var(--ui-accent-strong) 45%, transparent);
    border-radius: 999px;
    background: var(--ui-accent-tint);
    color: var(--ui-warning);
    font-size: .8rem;
    font-weight: 800;
}

/* --------------------- the comparison ------------------ */

.lp-proof[b-nd93279xjt] {
    scroll-margin-top: 110px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    width: min(1180px, calc(100% - 32px));
    margin: clamp(64px, 8vw, 110px) auto 0;
}

.lp-proof__copy h2[b-nd93279xjt] {
    margin: .85rem 0 .6rem;
    color: var(--ui-ink);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.3;
}

.lp-proof__copy > p[b-nd93279xjt] {
    margin: 0;
    color: var(--ui-muted);
    font-size: clamp(.96rem, 1.2vw, 1.08rem);
    line-height: 1.95;
}

.lp-points[b-nd93279xjt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

    .lp-points li[b-nd93279xjt] {
        display: flex;
        gap: .7rem;
    }

    .lp-points i[b-nd93279xjt] {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        margin-top: 2px;
        border-radius: 50%;
        background: var(--ui-accent-tint);
        color: var(--ui-warning);
    }

    .lp-points svg[b-nd93279xjt] {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .lp-points span[b-nd93279xjt] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .lp-points strong[b-nd93279xjt] {
        color: var(--ui-ink);
        font-size: .97rem;
        font-weight: 800;
    }

    .lp-points small[b-nd93279xjt] {
        color: var(--ui-muted);
        font-size: .85rem;
        line-height: 1.8;
    }

.lp-link[b-nd93279xjt] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.5rem;
    color: var(--ui-ink);
    font-size: .93rem;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--ui-accent-strong);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

    .lp-link svg[b-nd93279xjt] {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .lp-link svg[b-nd93279xjt] {
    scale: -1 1;
}

.lp-proof__page[b-nd93279xjt] {
    position: relative;
}

    .lp-proof__page[b-nd93279xjt]::before {
        content: "";
        position: absolute;
        inset: 8% -6% -4%;
        z-index: -1;
        border-radius: 40px;
        background: radial-gradient(60% 60% at 50% 50%, var(--ui-bloom-warm), transparent 76%);
    }

.lp-compare[b-nd93279xjt] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 34px 70px -34px rgba(45, 36, 25, .55);
    touch-action: pan-y;
}

/* once it has come into view, the line shows what it does; the first touch ends that */
.lp-proof__page:not([data-pub-reveal="pending"]) .lp-compare:not(.is-touched)[b-nd93279xjt] {
    animation: lp-sweep-b-nd93279xjt 4.6s cubic-bezier(.65, 0, .35, 1) .5s both;
}

@keyframes lp-sweep-b-nd93279xjt {
    0% {
        --pos: 50%;
    }

    30% {
        --pos: 12%;
    }

    68% {
        --pos: 86%;
    }

    100% {
        --pos: 50%;
    }
}

.lp-compare__page[b-nd93279xjt] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-compare__page--source[b-nd93279xjt] {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.lp-compare__tag[b-nd93279xjt] {
    position: absolute;
    inset-block-start: 12px;
    z-index: 2;
    padding: .2rem .65rem;
    border-radius: 9px;
    background: rgba(28, 22, 16, .78);
    color: #fff8ea;
    font-size: .76rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.lp-compare__tag--from[b-nd93279xjt] {
    left: 12px;
}

.lp-compare__tag--to[b-nd93279xjt] {
    right: 12px;
}

.lp-compare__line[b-nd93279xjt] {
    position: absolute;
    inset-block: 0;
    left: var(--pos);
    z-index: 2;
    width: 2px;
    margin-left: -1px;
    background: #f6c243;
    box-shadow: 0 0 14px rgba(246, 194, 67, .8);
    pointer-events: none;
}

    .lp-compare__line i[b-nd93279xjt] {
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffe08c, #e8aa2e);
        color: #3a2a08;
        box-shadow: 0 10px 22px -8px rgba(60, 40, 8, .7);
        translate: -50% -50%;
    }

    .lp-compare__line svg[b-nd93279xjt] {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lp-compare__range[b-nd93279xjt] {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

/* --------------------- the reasons --------------------- */

.lp-why[b-nd93279xjt] {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    width: min(1180px, calc(100% - 32px));
    margin: clamp(64px, 8vw, 110px) auto 0;
}

.lp-why__orbit[b-nd93279xjt] {
    position: relative;
    display: grid;
    place-items: center;
    width: min(420px, 100%);
    aspect-ratio: 1;
    margin-inline: auto;
}

.lp-why__track[b-nd93279xjt] {
    position: absolute;
    border: 1px dashed color-mix(in srgb, var(--ui-accent-strong) 55%, transparent);
    border-radius: 50%;
}

.lp-why__track--outer[b-nd93279xjt] {
    inset: 8%;
}

.lp-why__track--inner[b-nd93279xjt] {
    inset: 28%;
    border-style: solid;
    border-color: var(--ui-line);
}

.lp-why__spin[b-nd93279xjt] {
    position: absolute;
    inset: 8%;
    animation: lp-spin-b-nd93279xjt 44s linear infinite;
}

.lp-why__node[b-nd93279xjt] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--at)) translateY(calc(min(420px, 100vw) * -.42)) rotate(calc(var(--at) * -1));
}

    .lp-why__node em[b-nd93279xjt] {
        position: absolute;
        top: -28px;
        left: -28px;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border: 1px solid var(--ui-line);
        border-radius: 18px;
        background: var(--ui-surface-strong);
        color: var(--tone, #c98b1c);
        box-shadow: 0 16px 30px -18px rgba(45, 36, 25, .55);
        animation: lp-spin-b-nd93279xjt 44s linear infinite reverse;
    }

    .lp-why__node svg[b-nd93279xjt] {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lp-why__node--voice[b-nd93279xjt] {
    --tone: #ef7f4f;
}

.lp-why__node--podcast[b-nd93279xjt] {
    --tone: #8b63ec;
}

.lp-why__node--article[b-nd93279xjt] {
    --tone: #2f9d8c;
}

.lp-why__node--tools[b-nd93279xjt] {
    --tone: #3f86dc;
}

.lp-why__core[b-nd93279xjt] {
    position: relative;
    display: grid;
    place-items: center;
    width: 30%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--ui-accent-strong) 40%, transparent);
    border-radius: 50%;
    background: var(--ui-surface-strong);
    box-shadow:
        0 0 0 12px var(--ui-accent-tint),
        0 24px 50px -22px rgba(201, 139, 28, .7);
}

    .lp-why__core img[b-nd93279xjt] {
        width: 62%;
        height: auto;
    }

@keyframes lp-spin-b-nd93279xjt {
    to {
        rotate: 360deg;
    }
}

.lp-why__copy h2[b-nd93279xjt] {
    margin: .85rem 0 0;
    color: var(--ui-ink);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.3;
}

.lp-reasons[b-nd93279xjt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 1.5rem;
}

.lp-reason[b-nd93279xjt] {
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: var(--ui-surface-strong);
    transition: translate .35s cubic-bezier(.2, .9, .25, 1), border-color .35s ease;
}

    .lp-reason:hover[b-nd93279xjt] {
        translate: 0 -3px;
        border-color: color-mix(in srgb, var(--ui-accent-strong) 55%, transparent);
    }

    .lp-reason h3[b-nd93279xjt] {
        margin: 0 0 .3rem;
        color: var(--ui-ink);
        font-size: 1.04rem;
        font-weight: 850;
    }

    .lp-reason p[b-nd93279xjt] {
        margin: 0;
        color: var(--ui-muted);
        font-size: .88rem;
        line-height: 1.85;
    }

/* --------------------- the way in ---------------------- */

.lp-final[b-nd93279xjt] {
    width: min(1180px, calc(100% - 32px));
    margin: clamp(64px, 8vw, 110px) auto clamp(48px, 6vw, 80px);
}

.lp-final__card[b-nd93279xjt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: clamp(44px, 6vw, 76px) clamp(20px, 5vw, 60px);
    border-radius: clamp(26px, 3vw, 40px);
    background: linear-gradient(120deg, #ffdf8e 0%, #f6c243 46%, #e8aa2e 100%);
    color: #2e2006;
    text-align: center;
    box-shadow: 0 40px 80px -40px rgba(201, 139, 28, .8);
}

.lp-final__glow[b-nd93279xjt] {
    position: absolute;
    inset: -60% -20%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0 22%, rgba(255, 255, 255, .34) 30%, transparent 40% 72%, rgba(255, 255, 255, .24) 82%, transparent 92%);
    animation: lp-spin-b-nd93279xjt 26s linear infinite;
    pointer-events: none;
}

.lp-final__card h2[b-nd93279xjt] {
    position: relative;
    margin: 0;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    font-weight: 900;
    line-height: 1.3;
}

.lp-final__card p[b-nd93279xjt] {
    position: relative;
    max-width: 620px;
    margin: .7rem 0 0;
    font-size: clamp(.98rem, 1.3vw, 1.12rem);
    font-weight: 550;
    line-height: 1.9;
}

.lp-final__actions[b-nd93279xjt] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.5rem;
}

.lp-final__start[b-nd93279xjt],
.lp-final__more[b-nd93279xjt] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 52px;
    padding: 0 1.55rem;
    border-radius: 17px;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: translate .32s cubic-bezier(.2, .9, .25, 1), box-shadow .32s ease, background .32s ease;
}

.lp-final__start[b-nd93279xjt] {
    background: #2a1e10;
    color: #fff4d6;
    box-shadow: 0 18px 36px -16px rgba(42, 30, 16, .85);
}

    .lp-final__start svg[b-nd93279xjt] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

[dir="rtl"] .lp-final__start svg[b-nd93279xjt] {
    scale: -1 1;
}

.lp-final__start:hover[b-nd93279xjt],
.lp-final__more:hover[b-nd93279xjt] {
    translate: 0 -2px;
}

.lp-final__more[b-nd93279xjt] {
    border: 1px solid rgba(46, 32, 6, .28);
    color: #2e2006;
}

    .lp-final__more:hover[b-nd93279xjt] {
        background: rgba(255, 255, 255, .24);
    }

/* --------------------- smaller screens ----------------- */

@media (max-width: 900px) {
    .lp-proof[b-nd93279xjt],
    .lp-why[b-nd93279xjt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-proof__page[b-nd93279xjt] {
        width: min(460px, 100%);
        margin-inline: auto;
    }

    .lp-why__orbit[b-nd93279xjt] {
        width: min(340px, 86%);
    }

    .lp-why__node[b-nd93279xjt] {
        transform: rotate(var(--at)) translateY(calc(min(340px, 86vw) * -.42)) rotate(calc(var(--at) * -1));
    }

        .lp-why__node em[b-nd93279xjt] {
            top: -24px;
            left: -24px;
            width: 48px;
            height: 48px;
            border-radius: 15px;
        }

    .lp-why__copy[b-nd93279xjt] {
        text-align: center;
    }

    .lp-reason[b-nd93279xjt] {
        text-align: start;
    }
}

@media (max-width: 560px) {
    .lp-points[b-nd93279xjt],
    .lp-reasons[b-nd93279xjt] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-compare[b-nd93279xjt],
    .lp-why__spin[b-nd93279xjt],
    .lp-why__node em[b-nd93279xjt],
    .lp-final__glow[b-nd93279xjt] {
        animation: none !important;
    }
}
/* _content/AITranslationPlatform.Web/Components/Landing/LandingServices.razor.rz.scp.css */
/* =========================================================
   WHAT THE SITE DOES: THE RIBBONS AND THE FIVE CARDS
   ========================================================= */

.lx[b-4yhtx7ism3] {
    /* the page stays cream in both themes, so these sections do too */
    --ui-ink: #1c1b17;
    --ui-muted: #6d6759;
    --ui-line: rgba(28, 27, 23, .13);
    --ui-surface-strong: #fff;
    --ui-accent-tint: rgba(252, 209, 102, .3);
    --ui-accent-strong: #f6c243;
    --ui-warning: #8a6516;
    --ui-bloom-warm: rgba(252, 209, 102, .62);

    position: relative;
    padding: clamp(120px, 15vw, 230px) 0 clamp(36px, 5vw, 64px);
    overflow: hidden;
}

/* --------------------- the ribbons --------------------- */

.lx-ribbons[b-4yhtx7ism3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lx-ribbon[b-4yhtx7ism3] {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.lx-ribbon__track[b-4yhtx7ism3] {
    display: flex;
    gap: 10px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: lx-slide-b-4yhtx7ism3 70s linear infinite;
}

.lx-ribbon--back .lx-ribbon__track[b-4yhtx7ism3] {
    animation-direction: reverse;
    animation-duration: 82s;
}

[dir="rtl"] .lx-ribbon__track[b-4yhtx7ism3] {
    animation-name: lx-slide-rtl-b-4yhtx7ism3;
}

.lx-ribbons:hover .lx-ribbon__track[b-4yhtx7ism3] {
    animation-play-state: paused;
}

.lx-ribbon__track li[b-4yhtx7ism3] {
    flex: 0 0 auto;
    padding: .5rem 1.05rem;
    border: 1px solid var(--ui-line);
    border-radius: 13px;
    background: var(--ui-surface-strong);
    color: var(--ui-ink);
    font-size: .9rem;
    font-weight: 650;
    white-space: nowrap;
}

/* half the track: the second copy has come exactly to where the first began */
@keyframes lx-slide-b-4yhtx7ism3 {
    to {
        transform: translateX(calc(-50% - 5px));
    }
}

@keyframes lx-slide-rtl-b-4yhtx7ism3 {
    to {
        transform: translateX(calc(50% + 5px));
    }
}

/* --------------------- the head ------------------------ */

.lx-head[b-4yhtx7ism3] {
    scroll-margin-top: 110px;
    width: min(760px, calc(100% - 32px));
    margin: clamp(48px, 6vw, 76px) auto clamp(30px, 3.6vw, 46px);
    text-align: center;
}

.lx-kicker[b-4yhtx7ism3] {
    display: inline-block;
    padding: .34rem .9rem;
    border: 1px solid color-mix(in srgb, var(--ui-accent-strong) 45%, transparent);
    border-radius: 999px;
    background: var(--ui-accent-tint);
    color: var(--ui-warning);
    font-size: .8rem;
    font-weight: 800;
}

.lx-head h2[b-4yhtx7ism3] {
    margin: .85rem 0 .6rem;
    color: var(--ui-ink);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.3;
}

.lx-head p[b-4yhtx7ism3] {
    margin: 0;
    color: var(--ui-muted);
    font-size: clamp(.96rem, 1.2vw, 1.08rem);
    line-height: 1.95;
}

/* --------------------- the cards ----------------------- */

.lx-grid[b-4yhtx7ism3] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    width: min(1240px, calc(100% - 32px));
    margin-inline: auto;
}

.lx-card[b-4yhtx7ism3] {
    --tone: #e8aa2e;
    --tone-soft: color-mix(in srgb, var(--tone) 15%, transparent);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 26px;
    background: var(--ui-surface-strong);
    box-shadow: 0 14px 36px -24px rgba(45, 36, 25, .32);
    transition:
        translate .4s cubic-bezier(.2, .9, .25, 1),
        box-shadow .4s ease,
        border-color .4s ease;
}

    /* the light that follows the pointer (public-pages.js sets --mx and --my) */
    .lx-card[b-4yhtx7ism3]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone) 16%, transparent), transparent 72%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
    }

    .lx-card:hover[b-4yhtx7ism3] {
        translate: 0 -4px;
        border-color: color-mix(in srgb, var(--tone) 46%, transparent);
        box-shadow: 0 30px 56px -30px color-mix(in srgb, var(--tone) 50%, rgba(45, 36, 25, .5));
    }

        .lx-card:hover[b-4yhtx7ism3]::before {
            opacity: 1;
        }

.lx-card--translate[b-4yhtx7ism3] {
    grid-column: span 7;
    flex-direction: row;
}

.lx-card--voice[b-4yhtx7ism3] {
    grid-column: span 5;
    --tone: #ef7f4f;
}

    .lx-card--voice .lx-card__art[b-4yhtx7ism3] {
        flex: 1 1 158px;
        height: auto;
    }

    .lx-card--voice .lx-card__body[b-4yhtx7ism3] {
        flex: 0 0 auto;
    }

.lx-card--podcast[b-4yhtx7ism3] {
    grid-column: span 4;
    --tone: #8b63ec;
}

.lx-card--article[b-4yhtx7ism3] {
    grid-column: span 4;
    --tone: #2f9d8c;
}

.lx-card--tools[b-4yhtx7ism3] {
    grid-column: span 4;
    --tone: #3f86dc;
}

.lx-card--instagram[b-4yhtx7ism3] {
    grid-column: span 12;
    flex-direction: row;
    --tone: #d6457c;
}

    .lx-card--instagram .lx-card__art[b-4yhtx7ism3] {
        flex: 0 0 46%;
        height: auto;
        min-height: 250px;
    }

    .lx-card--instagram .lx-card__body[b-4yhtx7ism3] {
        justify-content: center;
        padding-block: 1.6rem;
    }

/* the Instagram card: a real post, slide and story the studio made, fanned out */
.lx-feed[b-4yhtx7ism3] {
    display: grid;
    place-items: center;
}

.lx-feed__shot[b-4yhtx7ism3] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 18px 34px -12px rgba(45, 36, 25, .45);
    transition: translate .5s cubic-bezier(.2, .9, .25, 1), rotate .5s cubic-bezier(.2, .9, .25, 1);
}

.lx-feed__shot--slide[b-4yhtx7ism3] {
    translate: -128% -50%;
    rotate: -8deg;
}

.lx-feed__shot--post[b-4yhtx7ism3] {
    z-index: 1;
    width: 150px;
    translate: -50% -50%;
}

.lx-feed__shot--story[b-4yhtx7ism3] {
    width: 112px;
    translate: 32% -50%;
    rotate: 7deg;
}

.lx-card--instagram:hover .lx-feed__shot--slide[b-4yhtx7ism3] {
    translate: -140% -52%;
    rotate: -11deg;
}

.lx-card--instagram:hover .lx-feed__shot--story[b-4yhtx7ism3] {
    translate: 44% -52%;
    rotate: 10deg;
}

.lx-feed__heart[b-4yhtx7ism3] {
    position: absolute;
    z-index: 2;
    top: 18%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    translate: 70% 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 22px -8px rgba(214, 69, 124, .6);
    animation: lx-feed-like-b-4yhtx7ism3 3.6s ease-in-out infinite;
}

    .lx-feed__heart svg[b-4yhtx7ism3] {
        width: 21px;
        height: 21px;
        fill: #e9405b;
        stroke: none;
    }

@keyframes lx-feed-like-b-4yhtx7ism3 {
    0%, 60%, 100% { scale: 1; }
    68% { scale: 1.25; }
    76% { scale: .95; }
}

.lx-card__art[b-4yhtx7ism3] {
    position: relative;
    flex: 0 0 auto;
    height: 158px;
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 50% 100%, var(--tone-soft), transparent 74%),
        color-mix(in srgb, var(--tone) 6%, transparent);
}

.lx-card__body[b-4yhtx7ism3] {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    min-width: 0;
    padding: 1.2rem 1.35rem 1.25rem;
}

.lx-card__tag[b-4yhtx7ism3] {
    color: var(--tone);
    font-size: .8rem;
    font-weight: 800;
}

.lx-card h3[b-4yhtx7ism3] {
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(1.14rem, 1.7vw, 1.36rem);
    font-weight: 900;
    line-height: 1.45;
}

.lx-card p[b-4yhtx7ism3] {
    margin: 0;
    color: var(--ui-muted);
    font-size: .93rem;
    line-height: 1.9;
}

.lx-card p.lx-card__languages[b-4yhtx7ism3] {
    font-size: .84rem;
}

.lx-card__more[b-4yhtx7ism3] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .55rem;
    color: var(--ui-ink);
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
}

    .lx-card__more svg[b-4yhtx7ism3] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: var(--tone);
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: translate .3s cubic-bezier(.2, .9, .25, 1);
    }

    .lx-card__more:hover svg[b-4yhtx7ism3] {
        translate: 4px 0;
    }

[dir="rtl"] .lx-card__more svg[b-4yhtx7ism3] {
    scale: -1 1;
}

[dir="rtl"] .lx-card__more:hover svg[b-4yhtx7ism3] {
    translate: -4px 0;
}

/* the whole card opens its page; the links in it stay above that */
.lx-card__more[b-4yhtx7ism3]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
}

.lx-card--translate .lx-card__more[b-4yhtx7ism3]::after {
    display: none;
}

.lx-topics[b-4yhtx7ism3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: .2rem;
}

    .lx-topics a[b-4yhtx7ism3] {
        padding: .24rem .65rem;
        border: 1px solid var(--ui-line);
        border-radius: 10px;
        color: var(--ui-ink);
        font-size: .78rem;
        font-weight: 650;
        text-decoration: none;
        transition: background .25s ease, border-color .25s ease;
    }

        .lx-topics a:hover[b-4yhtx7ism3] {
            border-color: color-mix(in srgb, var(--tone) 55%, transparent);
            background: var(--tone-soft);
        }

/* translation: a page and its mirror image */

.lx-mirror[b-4yhtx7ism3] {
    flex: 0 0 44%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
}

.lx-doc[b-4yhtx7ism3] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 42%;
    aspect-ratio: 3 / 4.1;
    padding: 10px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 16px 30px -18px rgba(60, 44, 24, .55);
}

.lx-doc__head[b-4yhtx7ism3] {
    height: 7px;
    width: 62%;
    border-radius: 4px;
    background: #2b2318;
}

.lx-doc__row[b-4yhtx7ism3] {
    display: flex;
    gap: 6px;
}

    .lx-doc__row i[b-4yhtx7ism3] {
        flex: 0 0 38%;
        aspect-ratio: 1.2;
        border-radius: 5px;
        background: linear-gradient(145deg, #f6c243, #e8aa2e);
    }

    .lx-doc__row u[b-4yhtx7ism3] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-block: 1px;
    }

.lx-doc b[b-4yhtx7ism3] {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #cfc7b8;
}

.lx-doc__table[b-4yhtx7ism3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

    .lx-doc__table i[b-4yhtx7ism3] {
        height: 9px;
        border-radius: 2px;
        background: #f2ead9;
    }

        .lx-doc__table i:nth-child(-n+3)[b-4yhtx7ism3] {
            background: #caa66a;
        }

.lx-doc__lines[b-4yhtx7ism3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

/* the same page, every part on the other side: the whole product in one picture */
.lx-doc--flipped[b-4yhtx7ism3] {
    transform: scaleX(-1);
}

.lx-card:hover .lx-doc--flipped[b-4yhtx7ism3] {
    animation: lx-turn-b-4yhtx7ism3 .9s cubic-bezier(.3, .9, .3, 1);
}

@keyframes lx-turn-b-4yhtx7ism3 {
    from {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(0);
    }
}

.lx-mirror__swap[b-4yhtx7ism3] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffe08c, #e8aa2e);
    color: #3a2a08;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 18%, transparent);
    animation: lx-breathe-b-4yhtx7ism3 3.4s ease-in-out infinite;
}

    .lx-mirror__swap svg[b-4yhtx7ism3] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@keyframes lx-breathe-b-4yhtx7ism3 {
    50% {
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--tone) 6%, transparent);
    }
}

/* voice */

.lx-bars[b-4yhtx7ism3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 28px 24px;
}

    .lx-bars i[b-4yhtx7ism3] {
        flex: 1;
        max-width: 8px;
        height: var(--h);
        border-radius: 4px;
        background: linear-gradient(180deg, #ffb48f, #ef7f4f);
        animation: lx-sing-b-4yhtx7ism3 1.8s ease-in-out calc(var(--i) * -.13s) infinite alternate;
    }

@keyframes lx-sing-b-4yhtx7ism3 {
    to {
        transform: scaleY(.42);
    }
}

/* podcast */

.lx-mic[b-4yhtx7ism3] {
    display: grid;
    place-items: center;
}

    .lx-mic span[b-4yhtx7ism3] {
        position: relative;
        display: grid;
        place-items: center;
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: linear-gradient(150deg, #7a59e6, #b58df7);
        color: #fff;
        box-shadow: 0 16px 30px -14px rgba(122, 89, 230, .75);
    }

    .lx-mic svg[b-4yhtx7ism3] {
        width: 38px;
        height: 38px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
    }

    .lx-mic i[b-4yhtx7ism3] {
        position: absolute;
        width: 76px;
        height: 76px;
        border: 2px solid rgba(139, 99, 236, .55);
        border-radius: 50%;
        animation: lx-ring-b-4yhtx7ism3 3.6s ease-out infinite;
    }

        .lx-mic i:nth-child(2)[b-4yhtx7ism3] {
            animation-delay: 1.2s;
        }

        .lx-mic i:nth-child(3)[b-4yhtx7ism3] {
            animation-delay: 2.4s;
        }

@keyframes lx-ring-b-4yhtx7ism3 {
    from {
        opacity: .9;
        scale: 1;
    }

    to {
        opacity: 0;
        scale: 2.7;
    }
}

/* article */

.lx-sheet[b-4yhtx7ism3] {
    display: grid;
    place-items: end center;
}

    .lx-sheet > div[b-4yhtx7ism3] {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 62%;
        height: 132px;
        padding: 14px 16px;
        border-radius: 12px 12px 0 0;
        background: #fffdf8;
        box-shadow: 0 -10px 30px -16px rgba(47, 157, 140, .55);
        transition: translate .45s cubic-bezier(.2, .9, .25, 1);
    }

    .lx-sheet b[b-4yhtx7ism3] {
        display: block;
        height: 7px;
        border-radius: 4px;
        background: #2b2318;
    }

        .lx-sheet b + b[b-4yhtx7ism3] {
            width: 64%;
            height: 4px;
            background: #cfc7b8;
        }

    .lx-sheet u[b-4yhtx7ism3] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        margin-top: 4px;
    }

    .lx-sheet i[b-4yhtx7ism3] {
        height: 4px;
        border-radius: 2px;
        background: #e2dacc;
        transform-origin: left center;
        animation: lx-line-b-4yhtx7ism3 4.2s ease-in-out infinite;
    }

        .lx-sheet i:nth-child(2)[b-4yhtx7ism3] {
            animation-delay: .4s;
        }

        .lx-sheet i:nth-child(3)[b-4yhtx7ism3] {
            animation-delay: .8s;
        }

        .lx-sheet i:nth-child(4)[b-4yhtx7ism3] {
            animation-delay: 1.2s;
        }

    .lx-sheet em[b-4yhtx7ism3] {
        position: absolute;
        inset-block-start: 12px;
        inset-inline-end: -14px;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #2f9d8c;
        color: #fff;
        box-shadow: 0 10px 20px -8px rgba(47, 157, 140, .8);
    }

    .lx-sheet svg[b-4yhtx7ism3] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.lx-card:hover .lx-sheet > div[b-4yhtx7ism3] {
    translate: 0 -6px;
}

[dir="rtl"] .lx-sheet i[b-4yhtx7ism3] {
    transform-origin: right center;
}

@keyframes lx-line-b-4yhtx7ism3 {
    0%, 100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(.5);
    }
}

/* tools */

.lx-keys[b-4yhtx7ism3] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-content: center;
    padding: 24px;
}

    .lx-keys i[b-4yhtx7ism3] {
        aspect-ratio: 1;
        border-radius: 11px;
        background: color-mix(in srgb, var(--tone) 18%, transparent);
        animation: lx-key-b-4yhtx7ism3 6s ease-in-out calc(var(--i) * .5s) infinite;
    }

@keyframes lx-key-b-4yhtx7ism3 {
    0%, 12%, 100% {
        background: color-mix(in srgb, var(--tone) 18%, transparent);
        scale: 1;
    }

    6% {
        background: var(--tone);
        scale: 1.06;
    }
}

/* --------------------- smaller screens ----------------- */

@media (max-width: 1000px) {
    .lx-card--translate[b-4yhtx7ism3],
    .lx-card--voice[b-4yhtx7ism3] {
        grid-column: span 12;
    }

    .lx-card--podcast[b-4yhtx7ism3],
    .lx-card--article[b-4yhtx7ism3] {
        grid-column: span 6;
    }

    .lx-card--tools[b-4yhtx7ism3] {
        grid-column: span 12;
    }
}

@media (max-width: 720px) {
    .lx-card--instagram[b-4yhtx7ism3] {
        flex-direction: column;
    }

        .lx-card--instagram .lx-card__art[b-4yhtx7ism3] {
            flex: 0 0 auto;
            min-height: 0;
            height: 220px;
        }

    .lx-feed__shot[b-4yhtx7ism3] {
        width: 104px;
    }

    .lx-feed__shot--post[b-4yhtx7ism3] {
        width: 122px;
    }

    .lx-feed__shot--story[b-4yhtx7ism3] {
        width: 92px;
    }
}

@media (max-width: 720px) {
    .lx[b-4yhtx7ism3] {
        padding-top: 100px;
    }

    .lx-ribbon__track li[b-4yhtx7ism3] {
        padding: .42rem .85rem;
        font-size: .82rem;
    }

    .lx-grid[b-4yhtx7ism3] {
        gap: 12px;
    }

    .lx-card[b-4yhtx7ism3] {
        border-radius: 22px;
    }

    .lx-card--translate[b-4yhtx7ism3] {
        flex-direction: column;
    }

    .lx-card--podcast[b-4yhtx7ism3],
    .lx-card--article[b-4yhtx7ism3] {
        grid-column: span 12;
    }

    .lx-mirror[b-4yhtx7ism3] {
        flex: 0 0 auto;
        height: 170px;
        padding: 14px;
    }

    .lx-doc[b-4yhtx7ism3] {
        width: auto;
        height: 100%;
    }

    .lx-card__art[b-4yhtx7ism3],
    .lx-card--voice .lx-card__art[b-4yhtx7ism3] {
        flex: 0 0 auto;
        height: 132px;
    }

    .lx-mirror.lx-card__art[b-4yhtx7ism3] {
        height: 170px;
    }

    .lx-keys[b-4yhtx7ism3] {
        grid-template-columns: repeat(6, 38px);
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lx *[b-4yhtx7ism3],
    .lx *[b-4yhtx7ism3]::before,
    .lx *[b-4yhtx7ism3]::after {
        animation: none !important;
    }
}
/* _content/AITranslationPlatform.Web/Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-layout[b-5o6zbgjft9] {
    width: 100%;
    min-height: 100vh;
    background: var(--ui-page, #f7f3ec);
    color: var(--text, #28231d);
}
/* _content/AITranslationPlatform.Web/Components/Public/FooterChannels.razor.rz.scp.css */
/*
 * Both footers are dark in either theme, so these colours are fixed rather
 * than taken from the --ui-* tokens.
 */
.fc[b-07hoslpvdx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
}

.fc-icons[b-07hoslpvdx] {
    display: flex;
    gap: 6px;
}

.fc-icon[b-07hoslpvdx] {
    --brand: #f0c85c;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
    color: #c9b99c;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.fc-icon--instagram[b-07hoslpvdx] {
    --brand: linear-gradient(40deg, #fdc468 4%, #fa7e1e 28%, #d62976 56%, #962fbf 80%, #4f5bd5 100%);
}

.fc-icon--aparat[b-07hoslpvdx] {
    --brand: linear-gradient(145deg, #ff3f7f, #d60e4f);
}

.fc-icon--youtube[b-07hoslpvdx] {
    --brand: linear-gradient(145deg, #ff3b3b, #d00018);
}

    .fc-icon svg[b-07hoslpvdx] {
        width: 17px;
        height: 17px;
    }

.fc-mail[b-07hoslpvdx] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c4baad;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .22s ease;
}

    .fc-mail svg[b-07hoslpvdx] {
        flex: none;
        width: 17px;
        height: 17px;
        color: #d9b662;
    }

@media (hover: hover) {
    .fc-icon:hover[b-07hoslpvdx] {
        border-color: transparent;
        background: var(--brand);
        color: #fff;
        transform: translateY(-2px);
    }

    .fc-mail:hover[b-07hoslpvdx] {
        color: #f4cd58;
    }
}

.fc-icon:focus-visible[b-07hoslpvdx],
.fc-mail:focus-visible[b-07hoslpvdx] {
    outline: 2px solid #f4cd58;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fc-icon[b-07hoslpvdx] {
        transition: none;
    }

    .fc-icon:hover[b-07hoslpvdx] {
        transform: none;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/FooterTranslations.razor.rz.scp.css */
.ftr[b-wvf1aytdqr] {
    position: relative;
}

.ftr summary[b-wvf1aytdqr] {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.ftr summary[b-wvf1aytdqr]::-webkit-details-marker { display: none; }

.ftr summary em[b-wvf1aytdqr] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(240, 196, 92, .16);
    color: #f0c45c;
    font-size: .7rem;
    font-style: normal;
    font-weight: 800;
}

.ftr summary i[b-wvf1aytdqr] {
    margin-inline-start: auto;
    color: #8c7f6d;
    font-style: normal;
    transition: transform .2s ease, color .2s ease;
}

/* In Persian the list opens to the left; the arrow points there. */
[dir="ltr"] .ftr summary i[b-wvf1aytdqr] { transform: scaleX(-1); }

.ftr[open] summary[b-wvf1aytdqr],
.ftr summary:hover[b-wvf1aytdqr] { color: #f0c45c; }

.ftr[open] summary i[b-wvf1aytdqr] { color: #f0c45c; }

/* the list, beside the item */

.ftr__panel[b-wvf1aytdqr] {
    position: absolute;
    z-index: 30;
    top: -10px;
    inset-inline-start: calc(100% + 10px);
    display: grid;
    gap: 2px;
    width: 250px;
    padding: 12px;
    border: 1px solid rgba(240, 196, 92, .22);
    border-radius: 16px;
    background: linear-gradient(160deg, #2f261d, #211a14);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7);
    animation: ftr-in-b-wvf1aytdqr .18s ease both;
}

.ftr__panel[b-wvf1aytdqr]::before {
    /* The gap to the item belongs to the panel, so the pointer can cross it. */
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 100%;
    width: 14px;
}

.ftr__title[b-wvf1aytdqr] {
    padding: 2px 8px 8px;
    color: #a99f91;
    font-size: .7rem;
    font-weight: 700;
}

.ftr__panel a[b-wvf1aytdqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    color: #d8cab0;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}

.ftr__panel a i[b-wvf1aytdqr] {
    color: #7d7163;
    font-style: normal;
    font-size: .7rem;
}

.ftr__panel a:hover[b-wvf1aytdqr] {
    background: rgba(255, 255, 255, .05);
    color: #f0c45c;
}

@keyframes ftr-in-b-wvf1aytdqr {
    from { opacity: 0; translate: 0 6px; }
}

/* the item itself looks like its neighbours */

.ftr--home summary[b-wvf1aytdqr] {
    min-height: 32px;
    white-space: nowrap;
    padding: 0 10px;
    border-radius: 10px;
    color: #c4baad;
    font-size: .78rem;
    font-weight: 700;
    transition: color .2s ease, background .2s ease;
}

.ftr--home summary:hover[b-wvf1aytdqr],
.ftr--home[open] summary[b-wvf1aytdqr] { background: rgba(255, 255, 255, .025); }

.ftr--pages summary[b-wvf1aytdqr] {
    color: #d8cab0;
    font-size: .9rem;
    transition: color .25s ease;
}

.ftr--pages summary i[b-wvf1aytdqr] { margin-inline-start: 4px; }

/* On a phone the columns stack: the list opens in place. */
@media (max-width: 1050px) {
    .ftr__panel[b-wvf1aytdqr] {
        position: static;
        width: auto;
        margin-top: 6px;
        animation: none;
    }

    .ftr__panel[b-wvf1aytdqr]::before { display: none; }

    .ftr summary i[b-wvf1aytdqr] { transform: rotate(-90deg); }

    .ftr[open] summary i[b-wvf1aytdqr] { transform: rotate(90deg); }
}
/* _content/AITranslationPlatform.Web/Components/Public/FreeStart.razor.rz.scp.css */
.free-start[b-82jcfd1m5s] {
    display: flex;
    flex-basis: 100%;
    margin: 10px 0 0;
}

/* A badge, not a sentence: it has to be seen at a glance. */
.free-start__badge[b-82jcfd1m5s] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 18px;
    border: 1px solid rgba(201, 150, 42, .55);
    border-radius: 999px;
    background: linear-gradient(135deg, #fff3cf, #ffe7a3);
    box-shadow: 0 10px 24px -14px rgba(201, 150, 42, .9);
    color: #2a2119;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}

.free-start svg[b-82jcfd1m5s] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background: #2a2119;
    fill: none;
    stroke: #fcd166;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.free-start--dark .free-start__badge[b-82jcfd1m5s] {
    border-color: rgba(252, 209, 102, .55);
    background: rgba(252, 209, 102, .14);
    box-shadow: 0 0 0 4px rgba(252, 209, 102, .06), 0 14px 30px -16px rgba(252, 209, 102, .7);
    color: #ffd970;
}

.free-start--dark svg[b-82jcfd1m5s] {
    background: #fcd166;
    stroke: #1c1b17;
}

html[data-theme="dark"] .free-start:not(.free-start--dark) .free-start__badge[b-82jcfd1m5s] {
    border-color: rgba(252, 209, 102, .45);
    background: rgba(252, 209, 102, .12);
    color: #ffd970;
}

html[data-theme="dark"] .free-start:not(.free-start--dark) svg[b-82jcfd1m5s] {
    background: #fcd166;
    stroke: #1c1b17;
}

@media (max-width: 720px) {
    .free-start__badge[b-82jcfd1m5s] {
        font-size: .9rem;
        padding: 7px 14px 7px 16px;
    }
}
/* _content/AITranslationPlatform.Web/Components/Public/GiftForm.razor.rz.scp.css */
.gift[b-683ex2covg] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin: 8px 0 44px;
    padding: 28px;
    border: 1px solid rgba(201, 150, 42, .35);
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 0%, rgba(252, 209, 102, .28), transparent 48%),
        linear-gradient(160deg, #fffaf0, #f8efdc);
    box-shadow: 0 24px 60px -34px rgba(59, 47, 35, .45);
    scroll-margin-top: 130px;
}

/* the PDF on its stand */

.gift__cover[b-683ex2covg] {
    position: relative;
    height: 230px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 70% 18%, rgba(252, 209, 102, .4), transparent 50%),
        linear-gradient(155deg, #2a2119, #3b2f23 60%, #241c15);
    overflow: hidden;
}

.gift__sheet[b-683ex2covg] {
    position: absolute;
    inset: 34px 38px 30px 46px;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 18px 16px;
    border-radius: 10px;
    background: #fffdf8;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
    transform: rotate(-4deg);
}

.gift__sheet--back[b-683ex2covg] {
    inset: 28px 48px 38px 34px;
    background: #f1e2bf;
    transform: rotate(6deg);
    opacity: .85;
}

.gift__sheet b[b-683ex2covg] {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 6px;
    background: #c9462e;
    color: #fff;
    font-size: 12px;
    letter-spacing: .06em;
}

.gift__sheet i[b-683ex2covg] {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #eadfc7;
}

.gift__sheet i:nth-of-type(2)[b-683ex2covg] { width: 80%; }
.gift__sheet i:nth-of-type(3)[b-683ex2covg] { width: 62%; }

.gift__sheet em[b-683ex2covg] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c9962a;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.gift__sheet em[b-683ex2covg]::after {
    content: "";
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #eadfc7;
}

/* the words and the form */

.gift__tag[b-683ex2covg] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fcd166;
    color: #1c1b17;
    font-size: 12px;
    font-weight: 700;
}

.gift h2[b-683ex2covg] {
    margin: 12px 0 8px;
    color: #221d18;
    font-size: 1.45rem;
    line-height: 1.6;
}

.gift p[b-683ex2covg] {
    margin: 0 0 12px;
    color: #655e53;
    line-height: 1.95;
}

.gift ul[b-683ex2covg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.gift li[b-683ex2covg] {
    padding: 5px 12px;
    border: 1px solid rgba(201, 150, 42, .35);
    border-radius: 999px;
    background: rgba(255, 253, 248, .8);
    color: #4f483e;
    font-size: .85rem;
}

.gift__form[b-683ex2covg] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.gift__field[b-683ex2covg] {
    flex: 1 1 260px;
    display: grid;
    gap: 6px;
    color: #4f483e;
    font-size: .85rem;
    font-weight: 700;
}

.gift__field input[b-683ex2covg] {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e3d4b2;
    border-radius: 14px;
    background: #fff;
    color: #221d18;
    font: inherit;
    font-weight: 400;
    text-align: left;
    outline: none;
}

.gift__field input:focus[b-683ex2covg] {
    border-color: #c9962a;
    box-shadow: 0 0 0 4px rgba(252, 209, 102, .35);
}

.gift__form button[b-683ex2covg] {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: #3b2f23;
    color: #fcd166;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.gift__form button:hover[b-683ex2covg] { background: #2a2119; }

.gift__trap[b-683ex2covg] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.gift__note[b-683ex2covg] {
    display: block;
    margin-top: 10px;
    color: #8c8274;
    font-size: .8rem;
    line-height: 1.8;
}

.gift__done[b-683ex2covg],
.gift__problem[b-683ex2covg] {
    padding: 14px 16px;
    border-radius: 14px;
    line-height: 1.9;
    font-size: .92rem;
}

.gift__done[b-683ex2covg] {
    background: #e9f6ec;
    color: #24613a;
}

.gift__done strong[b-683ex2covg] { display: block; }

.gift__problem[b-683ex2covg] {
    margin-bottom: 12px;
    background: #fbefe9;
    color: #9b3b26;
}

/* dark theme */

html[data-theme="dark"] .gift[b-683ex2covg] {
    border-color: rgba(252, 209, 102, .22);
    background:
        radial-gradient(circle at 88% 0%, rgba(252, 209, 102, .14), transparent 48%),
        linear-gradient(160deg, #2b231b, #221b14);
}

html[data-theme="dark"] .gift h2[b-683ex2covg] { color: #fff6e4; }
html[data-theme="dark"] .gift p[b-683ex2covg],
html[data-theme="dark"] .gift__field[b-683ex2covg] { color: #cbbfa9; }
html[data-theme="dark"] .gift li[b-683ex2covg] { background: rgba(255, 250, 240, .05); color: #e2d6bf; }
html[data-theme="dark"] .gift__field input[b-683ex2covg] { background: #17120d; border-color: rgba(252, 209, 102, .3); color: #fff6e4; }
html[data-theme="dark"] .gift__form button[b-683ex2covg] { background: #fcd166; color: #1c1b17; }

@media (max-width: 720px) {
    .gift[b-683ex2covg] {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
        border-radius: 22px;
    }

    .gift__cover[b-683ex2covg] { height: 170px; }

    .gift__sheet[b-683ex2covg] { inset: 22px 30% 18px 32%; padding: 12px; gap: 6px; }

    .gift__sheet--back[b-683ex2covg] { inset: 18px 34% 24px 28%; }

    .gift__form button[b-683ex2covg] { flex-basis: 100%; }
}
/* _content/AITranslationPlatform.Web/Components/Public/TrustSeal.razor.rz.scp.css */
/* The seal is drawn for a light page; on the dark footers it sits on its own
   card, which wwwroot/js/trust-seal.js shows only once the image has loaded. */
.trust-seal[b-gr7ou0huf7] {
    display: inline-flex;
    flex: none;
    border-radius: 12px;
    line-height: 0;
}

    .trust-seal.is-loaded[b-gr7ou0huf7] {
        padding: 6px;
        background: #fff;
    }

    .trust-seal[b-gr7ou0huf7]  a {
        display: block;
    }

    .trust-seal[b-gr7ou0huf7]  img {
        display: block;
        width: 72px;
        height: auto;
    }