/*
 * Home page sections — calm, modern hybrid layout.
 *
 * Section flow (visual hierarchy):
 *   1. Hero            — full-bleed, single quiet image, big calm message + clear CTAs
 *   2. Support strip   — 3 quick-action tiles for grieving families (always visible)
 *   3. Services        — 3 core services, equal grid, clear "Дэлгэрэнгүй →" links
 *   4. Process         — 4-step "Хэрхэн ажилладаг вэ" timeline (UX clarity)
 *   5. Eregelt         — featured remembrance service (split image + text)
 *   6. About           — split image + body
 *   7. Partners        — clean horizontal logo row
 *   8. Testimonials    — 3 neutral cards
 *   9. FAQ             — hairline accordion
 */

/* ============================================================
   HERO — full-bleed, dark gradient over a single quiet photo.
   ============================================================ */
.ub-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(520px, 72vh, 760px);
    display: flex;
    align-items: center;
    color: var(--ub-color-on-brand);
}

.ub-hero__media {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--ub-color-heading);
}

.ub-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(14, 16, 18, 0.76) 0%,
            rgba(14, 16, 18, 0.70) 38%,
            rgba(14, 16, 18, 0.48) 68%,
            rgba(14, 16, 18, 0.58) 100%),
        linear-gradient(180deg,
            rgba(14, 16, 18, 0.42) 0%,
            rgba(14, 16, 18, 0.20) 45%,
            rgba(14, 16, 18, 0.72) 100%);
}

.ub-hero__content {
    position: relative;
    width: 100%;
    max-width: var(--ub-container-wide);
    margin-inline: auto;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ub-space-2xl);
}

.ub-hero__eyebrow {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ub-color-on-brand);
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    opacity: 0.92;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.ub-hero__headline {
    font-family: var(--ub-font-display);
    font-size: clamp(2.125rem, 5.2vw, 3.75rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: var(--ub-tracking-display);
    color: var(--ub-color-on-brand);
    max-width: 18ch;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
}

.ub-hero__lede {
    font-size: clamp(var(--ub-text-md), 1.6vw, var(--ub-text-xl));
    line-height: var(--ub-leading-body);
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.ub-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-l);
    margin-top: var(--ub-space-l);
}

.ub-hero__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-success-state);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: ub-hero-pulse 2.4s ease-out infinite;
}

@keyframes ub-hero-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ============================================================
   SUPPORT STRIP — 3 quick-action tiles right after hero.
   ============================================================
   Funeral families need an unmistakable next step. This strip
   stays calm but action-forward: call, online request, condolence.
*/
.ub-support {
    background-color: var(--ub-color-section-bg);
    border-bottom: 1px solid var(--ub-color-divider);
}

.ub-support__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: var(--ub-container-wide);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

@media (min-width: 768px) {
    .ub-support__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ub-support__tile {
    display: flex;
    align-items: center;
    gap: var(--ub-space-xl);
    padding: var(--ub-space-3xl) var(--ub-space-2xl);
    border-bottom: 1px solid var(--ub-color-divider);
    transition: background-color var(--ub-transition-fast);
}

.ub-support__tile:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .ub-support__tile {
        border-bottom: none;
        border-right: 1px solid var(--ub-color-divider);
    }
    .ub-support__tile:last-child {
        border-right: none;
    }
}

.ub-support__tile:hover {
    background-color: var(--ub-color-section-soft);
}

.ub-support__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-hover-tint);
    color: var(--ub-color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ub-support__icon svg {
    width: 20px;
    height: 20px;
}

.ub-support__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ub-support__label {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    color: var(--ub-color-body-muted);
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
}

.ub-support__value {
    font-size: var(--ub-text-md);
    font-weight: 500;
    color: var(--ub-color-heading);
    line-height: 1.4;
}

/* ============================================================
   SECTION SCAFFOLDING — generic spacing helpers used by all
   home sections so each one is internally consistent.
   ============================================================ */
.ub-section__head {
    margin-bottom: clamp(40px, 5vw, 72px);
}

.ub-partners,
.ub-testimonials,
.ub-faq-section {
    padding-block: clamp(56px, 7vw, 96px);
}

.ub-partners .ub-section__head,
.ub-testimonials .ub-section__head,
.ub-faq-section .ub-section__head {
    margin-bottom: clamp(28px, 4vw, 48px);
}

/* ============================================================
   SERVICES — 3 core service cards, equal width.
   ============================================================ */
.ub-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-2xl);
}

@media (min-width: 768px) {
    .ub-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ub-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ub-services__card {
    background-color: var(--ub-color-section-soft);
    border-radius: var(--ub-radius-md);
    padding: clamp(28px, 3.4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-xl);
    transition: transform var(--ub-transition-base),
                box-shadow var(--ub-transition-base);
}

.ub-services__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ub-shadow-card-hover);
}

.ub-services__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: var(--ub-space-l);
}

.ub-services__title {
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-2xl);
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
    text-align: center;
}

.ub-services__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
    flex: 1;
}

.ub-services__cta {
    margin-top: var(--ub-space-s);
}

/* ============================================================
   PROCESS — 4-step "Хэрхэн ажилладаг вэ" timeline.
   ============================================================ */
.ub-process {
    background-color: var(--ub-color-section-soft);
}

.ub-process__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-3xl);
    counter-reset: ub-step;
}

@media (min-width: 768px) {
    .ub-process__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ub-process__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ub-space-2xl);
    }
}

.ub-step {
    counter-increment: ub-step;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
    position: relative;
    padding-top: var(--ub-space-2xl);
}

.ub-step::before {
    content: "0" counter(ub-step);
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-brand);
    letter-spacing: 0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ub-step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background: var(--ub-color-brand);
}

.ub-step__title {
    font-family: var(--ub-font-display);
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
}

.ub-step__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
}

/* ============================================================
   EREGELT — featured remembrance service (split panel).
   ============================================================ */
.ub-eregelt__split {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--ub-radius-lg);
    overflow: hidden;
    background-color: var(--ub-color-section-soft);
}

@media (min-width: 768px) {
    .ub-eregelt__split {
        grid-template-columns: 1fr 1fr;
    }
}

.ub-eregelt__panel {
    padding: clamp(32px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ub-space-xl);
    min-height: 420px;
}

.ub-eregelt__icon {
    width: 56px;
    height: 56px;
    align-self: center;
    margin-bottom: var(--ub-space-s);
}

.ub-eregelt__title {
    font-family: var(--ub-font-display);
    font-size: clamp(1.5rem, 3.4vw, var(--ub-text-3xl));
    font-weight: 600;
    color: var(--ub-color-heading);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
}

.ub-eregelt__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
}

.ub-eregelt__cta {
    margin-top: var(--ub-space-s);
    align-self: flex-start;
}

.ub-eregelt__image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 320px;
    background-color: var(--ub-color-heading);
}

/* ============================================================
   ABOUT — голлосон heading, доор зураг + текст зэрэгцсэн split.
   Зураг нь текстийн өндөртэй тэнцэж (stretch + cover) барилга
   бүтнээр харагдана — өмнөх 5/6 портрет crop барилгыг таслаж
   байсныг зассан.
   ============================================================ */
.ub-about__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-6xl);
    align-items: stretch;
}

@media (min-width: 768px) {
    .ub-about__split {
        grid-template-columns: 1fr 1.05fr;
        gap: var(--ub-space-7xl);
    }
}

.ub-about__image {
    width: 100%;
    min-height: 320px;
    border-radius: var(--ub-radius-lg);
    overflow: hidden;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--ub-color-heading);
}

.ub-about__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ub-space-2xl);
}

.ub-about__text {
    font-size: var(--ub-text-md);
    color: var(--ub-color-body);
    line-height: var(--ub-leading-body);
}

.ub-about__text p {
    margin-bottom: var(--ub-space-l);
}

.ub-about__text p:last-child {
    margin-bottom: 0;
}

.ub-about__cta {
    margin-top: var(--ub-space-l);
    align-self: flex-start;
}

/* ============================================================
   PARTNERS — infinite-scroll marquee.
   ============================================================
   Logos render twice in one track and translateX(-50%) loops
   seamlessly; an edge mask softens the wrap point and the
   animation pauses on hover/focus for accessibility.
*/
.ub-partners__marquee {
    position: relative;
    overflow: hidden;
    /* Soft edge fade — also hides any sub-pixel seam at the loop point. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ub-color-black) 6%, var(--ub-color-black) 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, var(--ub-color-black) 6%, var(--ub-color-black) 94%, transparent 100%);
}

.ub-partners__track {
    display: flex;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
    width: max-content;
    animation: ub-partners-scroll 32s linear infinite;
}

.ub-partners__marquee:hover .ub-partners__track,
.ub-partners__marquee:focus-within .ub-partners__track {
    animation-play-state: paused;
}

@keyframes ub-partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ub-partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    flex: 0 0 auto;
}

.ub-partners__logo {
    height: 100%;
    max-height: 76px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter var(--ub-transition-base),
                opacity var(--ub-transition-base);
}

.ub-partners__item:hover .ub-partners__logo {
    filter: grayscale(0);
    opacity: 1;
}

.ub-partners__cta {
    text-align: center;
    margin-top: clamp(40px, 5vw, 64px);
}

/* Reduced-motion users see the static wrapped grid (the original
   layout) and the marquee animation is disabled. */
@media (prefers-reduced-motion: reduce) {
    .ub-partners__marquee {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .ub-partners__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 1100px;
        margin-inline: auto;
        gap: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px);
    }
}

/* ============================================================
   TESTIMONIALS — чирдэг (drag) карусель: цацарсан картууд.
   ============================================================
   testimonial_slider_controller.js — хулганаар хоёр тийш чирж гүйлгэнэ
   (`.is-dragging`). Хүрэлцэх төхөөрөмжид төрөлх (native) гүйлгэлт; гар
   (keyboard)-д viewport tabindex=0 → сум товч/сумаар гүйлгэнэ. JS байхгүй
   бол ч viewport нь хэвтээ scroll болж контент бүтэн хүрэхүйц үлдэнэ. */
.ub-testimonials__slider {
    position: relative;
}

/* Stage — водзнак + картын талбай. Водзнак зөвхөн ЭНД (картын өндрөөр)
   төвлөрнө; том водзнак нарийн дэлгэц дээр хэвтээ overflow үүсгэхээс сэргийлж
   ирмэгт хязгаарлана. */
.ub-testimonials__stage {
    position: relative;
    overflow: hidden;
}

/* Цэцгэн хээний водзнак — картуудын ард голлон байрлана. Жижиг бөгөөд stage
   дотор бүтэн (таслагдалгүй) багтана. ӨРГӨНӨӨР хэмжинэ — base.css дахь
   `body.ub-public img { height:auto }` глобал reset нь `height`-ийг дарж бичдэг
   тул height-ээр хэмжвэл үл хэрэгсэгдэнэ; харин `width` дарагдахгүй, `height:auto`
   нь дөрвөлжин зургийн өндрийг автоматаар тааруулна. min()-ээр нарийн дэлгэцэд
   80vw-ээр багтаана. PNG нь аль хэдийн бүдэг өнгөтэй тул tint нэмэхгүй. */
.ub-testimonials__decor {
    position: absolute;
    top: 45%;
    left: 50%;
    width: min(460px, 82vw);
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.ub-testimonials__viewport {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;            /* Firefox — scrollbar нуух */
    -webkit-overflow-scrolling: touch;
    padding-block: var(--ub-space-l);
    /* Зөвхөн БАРУУН захыг зөөлөн бүдгэрүүлж, цухуйсан нимгэн зах нь scrollbar шиг
       хатуу харагдахаас сэргийлнэ. Зүүн тал (эхний карт) бүдгэрэлтгүй, тод үлдэнэ. */
    -webkit-mask-image: linear-gradient(90deg, var(--ub-color-black) 0, var(--ub-color-black) 93%, transparent 100%);
            mask-image: linear-gradient(90deg, var(--ub-color-black) 0, var(--ub-color-black) 93%, transparent 100%);
}

.ub-testimonials__viewport::-webkit-scrollbar {
    display: none;                    /* WebKit — scrollbar нуух */
}

.ub-testimonials__slider.is-enhanced .ub-testimonials__viewport {
    cursor: grab;
}

.ub-testimonials__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
}

.ub-testimonials__viewport:focus-visible {
    outline: 2px solid var(--ub-color-brand);
    outline-offset: 4px;
    border-radius: var(--ub-radius-md);
}

.ub-testimonials__track {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2.4vw, 32px);
    width: max-content;
    padding-inline: 2px;
}

.ub-testimonials__track > .ub-testimonial {
    flex: 0 0 clamp(264px, 80vw, 336px);
    box-shadow: var(--ub-shadow-card);
}

.ub-testimonials__track > .ub-testimonial:hover {
    box-shadow: var(--ub-shadow-card-hover);
}

/* Цацарсан босоо шилжилт — давталт 4 картаар. */
.ub-testimonials__track > .ub-testimonial:nth-child(4n+2) { margin-top: clamp(28px, 4vw, 56px); }
.ub-testimonials__track > .ub-testimonial:nth-child(4n+3) { margin-top: clamp(14px, 2vw, 28px); }
.ub-testimonials__track > .ub-testimonial:nth-child(4n+4) { margin-top: clamp(40px, 5vw, 72px); }

/* Ээлжилсэн дэвсгэр өнгө. */
.ub-testimonials__track > .ub-testimonial:nth-child(even) {
    background-color: var(--ub-color-section-cool);
}

/* --- Сумны удирдлага — зөвхөн JS идэвхтэй үед --- */
.ub-testimonials__controls {
    display: none;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-l);
    margin-top: clamp(28px, 3vw, 48px);
}

.ub-testimonials__slider.is-enhanced .ub-testimonials__controls {
    display: flex;
}

.ub-testimonials__arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-page-bg);
    color: var(--ub-color-heading);
    cursor: pointer;
    transition: background-color var(--ub-transition-fast),
                border-color var(--ub-transition-fast),
                color var(--ub-transition-fast);
}

.ub-testimonials__arrow:hover {
    background: var(--ub-color-hover-tint);
    border-color: var(--ub-color-brand);
    color: var(--ub-color-brand);
}

.ub-testimonials__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ub-testimonials__arrow:disabled:hover {
    background: var(--ub-color-page-bg);
    border-color: var(--ub-color-divider);
    color: var(--ub-color-heading);
}

.ub-testimonials__arrow:focus-visible {
    outline: 2px solid var(--ub-color-brand);
    outline-offset: 2px;
}

.ub-testimonial {
    /* Бүх карт тогтмол өндөртэй — урт ишлэл нь дотроо гүйнэ (доороос). */
    height: 360px;
    background-color: var(--ub-color-testimonial-bg);
    border-radius: var(--ub-radius-md);
    padding: clamp(28px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
    transition: transform var(--ub-transition-base),
                box-shadow var(--ub-transition-base);
}

.ub-testimonial:hover {
    transform: translateY(-2px);
}

/* Кавычка тэмдэг — карт дээр тогтмол (ишлэл гүйхэд хамт гүйхгүй). */
.ub-testimonial__mark {
    flex: 0 0 auto;
    font-size: 2.4em;
    line-height: 0.5;
    color: var(--ub-color-brand);
}

.ub-testimonial__quote {
    /* Үлдсэн зайг эзэлж, агуулга хэтэрвэл босоо чиглэлд гүйнэ
       (min-height:0 нь flex хүүхдэд гүйлгэлтийг зөвшөөрнө). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--ub-space-s);
    font-size: var(--ub-text-lg);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--ub-color-heading);
    /* Нимгэн scrollbar — зайг нь үргэлж нөөцлөнө (thin) ч thumb-ийг анхдагчаар
       нуугаад зөвхөн картын hover үед харуулна (доорх hover дүрэм). Ингэснээр
       layout үсрэхгүй. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* Доод ирмэгийг зөөлөн бүдгэрүүлж "доош үргэлжилнэ" гэдгийг илтгэнэ — текст
       доод хэсэгт хүрсэн (хэтэрсэн) үед л харагдана; богино картын доод хэсэг
       хоосон тул нөлөөлөхгүй. */
    -webkit-mask-image: linear-gradient(180deg, var(--ub-color-black) calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(180deg, var(--ub-color-black) calc(100% - 28px), transparent 100%);
}

.ub-testimonial__quote::-webkit-scrollbar {
    width: 6px;
}

.ub-testimonial__quote::-webkit-scrollbar-thumb {
    background-color: transparent;        /* анхдагчаар нуугдсан */
    border-radius: var(--ub-radius-pill);
    transition: background-color var(--ub-transition-fast);
}

.ub-testimonial__quote::-webkit-scrollbar-track {
    background: transparent;
}

/* Hover үед scrollbar thumb харагдана (зай нь аль хэдийн нөөцлөгдсөн тул үсрэхгүй).
   Тод харагдахын тулд дунд саарал (--ub-color-body-muted) — divider хэт цайвар. */
.ub-testimonial:hover .ub-testimonial__quote {
    scrollbar-color: var(--ub-color-body-muted) transparent;
}

.ub-testimonial:hover .ub-testimonial__quote::-webkit-scrollbar-thumb {
    background-color: var(--ub-color-body-muted);
}

.ub-testimonial__author {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ub-space-l);
    padding-top: var(--ub-space-xl);
}

.ub-testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--ub-radius-pill);
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--ub-color-divider);
}

/* Зурaггүй сэтгэгдэлд нэрний эхний үсгийг дугуйд төвлүүлж харуулна. */
.ub-testimonial__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ub-text-md);
    font-weight: 600;
    color: var(--ub-color-heading);
    text-transform: uppercase;
}

.ub-testimonial__name {
    font-size: var(--ub-text-md);
    font-weight: 500;
    color: var(--ub-color-heading);
    line-height: 1.2;
}

/* ============================================================
   HERO ASSURANCE + MOBILE QUICK ACTIONS — clearer next steps.
   ============================================================ */
.ub-hero__assurance {
    width: min(100%, 720px);
    margin-top: var(--ub-space-xl);
    padding: clamp(var(--ub-space-xl), 2vw, var(--ub-space-2xl));
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: var(--ub-radius-lg);
    background: rgba(14, 16, 18, 0.34);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ub-hero__proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ub-space-2xl);
    margin: 0;
    padding-top: 0;
}

.ub-hero__proof li {
    display: flex;
    align-items: baseline;
    gap: var(--ub-space-s);
    min-width: 0;
}

.ub-hero__proof strong {
    font-size: clamp(var(--ub-text-xl), 3vw, var(--ub-text-3xl));
    font-weight: 600;
    line-height: 1.08;
    color: var(--ub-color-on-brand);
    font-variant-numeric: tabular-nums;
}

.ub-hero__proof span {
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-snug);
    color: rgba(255, 255, 255, 0.82);
}

.ub-sticky-actions {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: calc(var(--ub-z-header) - 1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ub-space-s);
    padding: var(--ub-space-s);
    border: 1px solid rgba(231, 231, 234, 0.9);
    border-radius: var(--ub-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ub-shadow-elevated);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.ub-sticky-actions__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-s);
    min-height: 48px;
    padding-inline: var(--ub-space-xl);
    border-radius: var(--ub-radius-pill);
    color: var(--ub-color-heading);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    line-height: 1;
}

.ub-sticky-actions__link--primary {
    background: var(--ub-color-accent);
    color: var(--ub-color-on-dark);
}

@media (min-width: 640px) {
    .ub-hero__proof {
        grid-template-columns: repeat(3, 1fr);
    }

    .ub-hero__proof li {
        flex-direction: column;
        gap: 6px;
    }
}

@media (min-width: 768px) {
    .ub-sticky-actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .ub-hero__content {
        padding-bottom: clamp(88px, 18vw, 128px);
    }

    .ub-hero__assurance {
        padding: var(--ub-space-l);
    }

    body.ub-home .ub-footer__bottom {
        padding-bottom: calc(var(--ub-space-2xl) + var(--ub-size-icon-chip-lg) + var(--ub-space-2xl));
    }
}