/**
 * UIPro homepage port — section-prefixed rules generated from
 * uipro-generated/*.module.css.
 *
 * Each section's rules live under a `.uipro-<section>__*` namespace so they
 * can never clip the existing main.css class names.
 *
 * Edit this file, then minify into uipro.min.css and commit both (CLAUDE.md).
 */
@import url('uipro-tokens.css');

/* ============================================================
 * Shared CTA button — Figma Component 53 (frame 221:4378)
 * Figma specs: 208×56px pill, #83AE48 bg
 * Ellipse 2: 36×36px circle, #5D7C33, absolute left:162px top:10px
 * Inner row: 208×24px, padding 0 16px 0 6px, gap 8px
 * ============================================================ */
.uipro-cta {
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: var(--Color-Primary-Primary-500); /* #83AE48 */
    height: 56px;           /* Figma: 56px */
    width: 208px;           /* Figma: 208px */
    position: relative;
    border-radius: var(--Radius-full);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
}
/* Ellipse 2 — dark-green circle behind arrow icon (Hero Explore Products only) */
.uipro-cta--solid::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    left: 162px;
    top: 10px;
    background: #5D7C33;
    border-radius: 50%;
    pointer-events: none;
}
.uipro-cta__child {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--Color-Secondary-Secondary-500);
    width: 1px;
    height: 1px;
    flex-shrink: 0;
}
.uipro-cta__pill {
    display: none; /* placeholder span, no visual role */
}
.uipro-cta__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 208px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px 0 6px;
    gap: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 1;
}
.uipro-cta__label {
    flex: 1;
    position: relative;
    font-size: 18px;         /* Figma: 18px */
    line-height: 24px;
    font-weight: var(--Font-Weight-medium);
    font-family: var(--Font-Family-serif);
    color: var(--Color-Text-Inverse);
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}
.uipro-cta__icon {
    height: 24px;
    width: 24px;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

/* ============================================================
 * Hero section — frame 221:2042
 * ============================================================ */
.uipro-hero {
    width: 100%;
    min-height: 936px; /* 设计稿固定高度 936px */
    margin-top: 144px;      /* compensate fixed header height (top-bar 48px + site-header 96px) */
    position: relative;
    overflow: hidden;
    padding: 0;              /* override global section { padding: 72px 0 } */
    display: flex;
    align-items: center;    /* 内容垂直居中，文档流定位 */
    text-align: left;
    font-size: var(--Font-Size-base);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-serif);
    flex-shrink: 0;
}
/* 左侧深蓝渐变遮罩，与设计稿一致 */
.uipro-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(6,20,40,0.82) 0%, rgba(6,20,40,0.55) 50%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Background image — 保持比例、右对齐；超宽屏左侧可留白 */
.uipro-hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.uipro-hero__halos {
    width: 1660px;
    height: 100%;
    margin: 0 !important;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    z-index: 0;
    flex-shrink: 0;
    pointer-events: none;
}
.uipro-hero__halo {
    height: 600px;
    flex: 1;
    position: relative;
    filter: blur(240px);
    border-radius: 9999px;
    background-color: var(--Heading-XX-Large);
    max-width: 600px;
    flex-shrink: 0;
}
.uipro-hero__halo-spacer {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: 0 0 479.9px;
    box-sizing: border-box;
    max-width: 600px;
}

.uipro-hero__content-wrap {
    /* 文档流定位，与 imachinemall 同策略，不再用 absolute */
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 1;
    padding: 80px 0; /* 上下内边距保证内容不贴边 */
}
.uipro-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 603px;
    margin-left: 240px;     /* 与 navbar logo 左侧 y 轴对齐 */
    flex-shrink: 0;
    max-width: calc(100% - 6.6vw - 40px); /* 防止小屏溢出 */
}
.uipro-hero__intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-20);
    flex-shrink: 0;
    font-size: var(--Font-Size-lg);
}
.uipro-hero__eyebrow {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--Color-Primary-Primary-500);
}
.uipro-hero__eyebrow-bar {
    height: 2px;
    width: 32px;
    position: relative;
    background-color: var(--Color-Primary-Primary-500);
}
.uipro-hero__eyebrow-text {
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-medium);
}
.uipro-hero__title {
    margin: 0;
    width: 100%;
    position: relative;
    /* clamp: min 36px, scales with vw, max 60px — 与 imachinemall 同策略 */
    font-size: clamp(2.25rem, 4.167vw, 3.75rem);
    line-height: 1.1;
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans);
    display: inline-block;
    max-width: 100%;
    color: var(--Color-Text-Inverse);
}
.uipro-hero__title-accent {
    color: var(--Color-Text-Inverse); /* 设计稿标题全白，无绿色 */
}
.uipro-hero__desc {
    width: 100%;
    position: relative;
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    display: inline-block;
    max-width: 577px;
    margin: 0;
    color: var(--Color-Text-Inverse);
}
.uipro-hero__actions {
    align-self: stretch;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 28px;
    flex-shrink: 0;
}
.uipro-hero__watch {
    border: none;
    background: transparent;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
/* Watch Video icon — Component 54: 67×67px outer, 4px padding, inner C-1: 40×40px circle border */
.uipro-hero__watch-icon {
    position: relative;
    height: 67px;
    width: 67px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Ripple rings — two pulsing circles */
@keyframes uipro-ripple {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.8); opacity: 0; }
}
.uipro-hero__watch-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 231, 235, 0.6);
    animation: uipro-ripple 2s ease-out infinite;
    pointer-events: none;
}
.uipro-hero__watch-ripple--2 {
    animation-delay: 1s;
}
/* Inner circle — C-1: 40×40px, border 1.5px solid rgba(229,231,235,0.6) */
.uipro-hero__watch-play {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(229, 231, 235, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}
/* Play triangle — white polygon */
.uipro-hero__watch-play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 2px; /* optical centering */
}
.uipro-hero__watch-label {
    position: relative;
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-serif);
}

.uipro-hero__price-badge {
    display: none; /* Figma 设计稿无此元素，隐藏 */
}
.uipro-hero__price-value {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: inherit;
    color: #ffffff;              /* override global h2 rule from main.css */
}
.uipro-hero__price-label {
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
}

.uipro-hero__stats {
    width: 100%;
    height: 100px;          /* Figma: stats strip h=100px */
    margin: 0 !important;
    position: absolute;
    right: 0;
    bottom: 84px;           /* brands strip h=84px sits below; relative to 936px hero */
    left: 0;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-top: 1px solid var(--Color-White-Transparent-2);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;  /* 内容居中 */
    padding: 19px 0 20px;
    gap: 0;
    z-index: 3;
    flex-shrink: 0;
    text-align: left;
    font-size: var(--Font-Size-4xl);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-sans);
}
.uipro-hero__stats-inner {
    width: 100%;
    max-width: 1440px;      /* Figma 设计宽度 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 240px;       /* Figma: 内容区左边240px，右边对称 */
    box-sizing: border-box;
    gap: 0;
}
.uipro-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.uipro-hero__stat-value {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: var(--Font-Leading-10);
    font-weight: var(--Font-Weight-bold);
    font-family: inherit;
    color: #ffffff;              /* override global h3 rule from main.css */
}
.uipro-hero__stat-label {
    position: relative;
    font-size: var(--Font-Size-base);
    line-height: var(--Font-Leading-5);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Secondary);
}
.uipro-hero__stat-divider {
    height: var(--height-40);
    width: var(--width-2);
    position: relative;
    background-color: var(--Color-White-Transparent-2);
}

.uipro-hero__brands {
    width: 100%;
    height: 84px;           /* Figma: brands strip h=84px */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-top: 1px solid var(--Color-White-Transparent-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 21px 30px 22px;
    gap: var(--gap-20);
    z-index: 4;
    flex-shrink: 0;
    text-align: left;
    font-size: var(--Font-Size-sm);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-sans1);
}
.uipro-hero__brands-label {
    position: relative;
    line-height: var(--Font-Leading-5);
}
.uipro-hero__brands-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px 0;
    max-width: 1134px;
}
.uipro-hero__brand-logo {
    height: var(--height-40);
    position: relative;
    object-fit: cover;
}

/* ============================================================
 * HeadButton — "View All …" link (matches components/HeadButton.tsx)
 * ============================================================ */
.uipro-headbutton {
    cursor: pointer;
    border: none;
    padding: 8px 20px;
    background-color: transparent;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    text-decoration: none;
}
.uipro-headbutton__label {
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Primary-Primary-500);
    text-align: right;
}
.uipro-headbutton__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    position: relative;
}

/* ============================================================
 * EquipmentCategoryCard — big category card (components/EquipmentCategoryCard.tsx)
 * ============================================================ */
.uipro-categorycard {
    cursor: pointer;
    border: 1px solid var(--Color-Borders-Separators-Light);
    padding: 20px 60px;
    background-color: var(--Color-Background-Primary);
    height: 280px;
    flex: 1;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 370px;
    text-decoration: none;
    color: inherit;
}
.uipro-categorycard__icon-wrap {
    width: 112px;
    height: 112px;
    padding: 16px;
    background-color: #e7efe0;
    border-radius: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
}
.uipro-categorycard__img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}
.uipro-categorycard__body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.uipro-categorycard__title {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: var(--Font-Size-2xl);
    line-height: var(--Font-Leading-7);
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans);
    color: var(--Color-Text-Primary);
    text-align: center;
}
.uipro-categorycard__badge-wrap {
    border-radius: 9999px;
    background-color: var(--Color-Borders-Separators-Light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
}
.uipro-categorycard__badge {
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Secondary);
    text-align: center;
}

/* ============================================================
 * Browse by Equipment Type section — frame 221:2174
 * ============================================================ */
.uipro-browse {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 240px;
    box-sizing: border-box;
    gap: 48px;
}
.uipro-browse__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
    column-gap: 20px;
    row-gap: 0;
    max-width: 1440px;
    text-align: left;
    font-size: var(--Font-Size-lg);
    color: var(--Color-Primary-Primary-500);
    font-family: var(--Font-Family-serif);
    container-type: inline-size;
    container-name: browse-header;
}
.uipro-browse__header-left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    max-width: 691.1px;
}
.uipro-browse__header > .uipro-headbutton {
    flex-shrink: 0;
    margin-left: auto;
}
@container browse-header (min-width: 720px) {
    .uipro-browse__title {
        white-space: nowrap;
    }
}
.uipro-browse__eyebrow {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.uipro-browse__eyebrow-line {
    height: 2px;
    width: 32px;
    flex-shrink: 0;
    position: relative;
    background-color: var(--Color-Primary-Primary-500);
}
.uipro-browse__eyebrow-text {
    position: relative;
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-medium);
}
.uipro-browse__title {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: var(--Font-Size-5xl);
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans);
    color: var(--Color-Text-Primary);
    padding: 0;
    flex-shrink: 0;
}
.uipro-browse__desc {
    align-self: stretch;
    position: relative;
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    color: var(--Heading-Medium);
    flex-shrink: 0;
    margin: 0;
}
.uipro-browse__cards {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 40px;
    max-width: 1440px;
}

/* ============================================================
 * Button1 — Hot Selling filter tab (components/Button1.tsx)
 * ============================================================ */
.uipro-filtertab {
    cursor: pointer;
    border: 1.1px solid #E5E7EB;
    padding: 12px 24px;
    height: 44px;
    background-color: #F9FAFB;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #B7BDCD;
    font-family: var(--Font-Family-sans1);
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.uipro-filtertab[aria-selected="true"] {
    background-color: #83AE48;
    border-color: #83AE48;
    color: #FFFFFF;
    box-shadow: 0px 4px 6px -4px rgba(9, 59, 107, 0.2);
}
.uipro-filtertab:hover:not([aria-selected="true"]) {
    background-color: var(--Color-Primary-Primary-500);
    border-color: var(--Color-Primary-Primary-500);
    color: #FFFFFF;
}
.uipro-filtertab__label {
    position: relative;
    line-height: 20px;
}
.uipro-filtertab__badge {
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px 2px;
    font-size: var(--Font-Size-sm);
    color: inherit;
}
.uipro-filtertab:not([aria-selected="true"]) .uipro-filtertab__badge {
    background-color: var(--Color-Borders-Separators-Light);
    color: var(--Color-Text-Secondary);
}
.uipro-filtertab:hover .uipro-filtertab__badge {
    background-color: var(--Color-Primary-Primary-600);
    color: #FFFFFF;
}

/* ============================================================
 * Component77 — Product card (components/Component77.tsx)
 * ============================================================ */
.uipro-productcard {
    border-radius: 16px;
    background-color: var(--Color-Background-Primary);
    border: 1px solid var(--Color-Borders-Separators-Light);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 16px 22px;
    gap: 14px;
    text-align: left;
    font-size: var(--Font-Size-lg);
    color: var(--Color-Text-Primary);
    font-family: var(--Font-Family-sans);
    text-decoration: none;
}
.uipro-productcard_portrait {
    /* Component77.module.css .root: flex:1; min-width:241; max-width:302 */
    flex: 1 1 0;
    min-width: 241px;
    max-width: 302px;
    width: auto;
    padding: 0;  /* Figma: no outer padding; image flush to card edge */
    overflow: hidden;
}
.uipro-productcard_landscape {
    /* Component77.module.css [data-cardType='Landscape'] */
    flex: 1 1 0;
    min-width: 310px;
    max-width: unset;
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 22px 16px;
    gap: 20px;
}
.uipro-productcard__image {
    align-self: stretch;
    border-radius: 16px;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}
.uipro-productcard_portrait .uipro-productcard__image {
    height: 182px;  /* Figma Component77.imageIcon */
    border-radius: 0;  /* flush to card edge, card itself has border-radius */
}
.uipro-productcard_landscape .uipro-productcard__image {
    width: 288px;
    height: 200px;
    align-self: auto;
}
.uipro-productcard__body {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;  /* Figma Component77.body gap */
    padding: 12px 16px;  /* Figma Component77.body padding */
    box-sizing: border-box;
}
.uipro-productcard_landscape .uipro-productcard__body {
    align-self: auto;
    /* Component77 landscape body is 278px in Figma; keep min reasonable for content. */
    min-width: 0;
    flex: 1 1 auto;
}
.uipro-productcard__title-row {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.uipro-productcard__title {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    font-family: var(--Font-Family-sans);
    color: #06203B;
}
.uipro-productcard__subtitle {
    align-self: stretch;
    position: relative;
    font-size: var(--Font-Size-base);
    line-height: var(--Font-Leading-5);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Tertiary);
}
/* meta-line: 规格行，如 52M BOOM · 360 kW · 2023 */
.uipro-productcard__meta-line {
    align-self: stretch;
    font-size: var(--Font-Size-sm, 14px);
    line-height: 20px;
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Secondary, #717182);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* price-wrap: Price Range 标签 + 价格垂直排列 */
.uipro-productcard__price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
}
.uipro-productcard__price-label {
    font-size: var(--Font-Size-xs, 12px);
    line-height: 16px;
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Tertiary, #b7bdcd);
}
.uipro-productcard__specs {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--Font-Size-base);
    font-family: var(--Font-Family-sans1);
}
.uipro-productcard__spec {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.uipro-productcard__spec-label {
    position: relative;
    line-height: var(--Font-Leading-5);
    color: var(--Color-Text-Secondary);
}
.uipro-productcard__spec-value {
    position: relative;
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    color: var(--Color-Text-Primary);
}
.uipro-productcard__footer {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.uipro-productcard__price {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    font-family: var(--Font-Family-sans);
    color: #0F1115;
}
.uipro-productcard__cta {
    height: 36px;
    align-self: stretch;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

/* ============================================================
 * Deal of the Week card (HotSellingSection herocard) — frame 221:2203
 * Figma: column-flex card max-width 480, contains:
 *   .uipro-herocard__upper     → green banner + image
 *     .uipro-herocard__banner  → 🔥 DEAL OF THE WEEK ⏰ HH:MM:SS
 *     .uipro-herocard__image
 *   .uipro-herocard__info      → pills, title, meta, price-row
 * ============================================================ */
.uipro-herocard {
    flex: 0 1 480px;
    min-width: 310px;
    max-width: 480px;
    align-self: stretch;
    border-radius: 20px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(135deg, #0F1419 0%, #11141B 25%, #131820 50%, #161C26 75%, #1A2332 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 310px;
    max-width: 480px;
    box-sizing: border-box;
    text-align: left;
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-sans);
    text-decoration: none;
}
.uipro-herocard__upper {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.uipro-herocard__banner {
    align-self: stretch;
    background: linear-gradient(90deg, #80AA46 0%, #6B903A 50%, #5A7A30 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 0;
    padding: 18px 20px;
    box-sizing: border-box;
}
.uipro-herocard__banner-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.uipro-herocard__banner-icon {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
}
.uipro-herocard__banner-text {
    position: relative;
    letter-spacing: 0.05em;
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-bold);
    text-transform: uppercase;
    font-size: var(--Font-Size-base);
}
.uipro-herocard__countdown {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--Font-Size-xs);
    font-family: var(--Font-Family-serif);
}
.uipro-herocard__cd-cell {
    border-radius: 3.7px;
    background-color: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    line-height: var(--Font-Leading-4);
    font-weight: var(--Font-Weight-medium);
    color: var(--Color-Text-Inverse);
}
.uipro-herocard__cd-sep {
    line-height: var(--Font-Leading-4);
    font-weight: var(--Font-Weight-medium);
    color: var(--Color-Text-Inverse);
}
.uipro-herocard__image-wrap {
    position: relative;
    width: 100%;
    max-width: 440px;
    flex-shrink: 0;
    margin: 0 20px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
}
.uipro-herocard__image {
    width: 100%;
    height: 256px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
}
.uipro-herocard__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    pointer-events: none;
}
.uipro-herocard__overlay .uipro-productcard__wishlist {
    pointer-events: all;
}
.uipro-herocard__info {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 20px;
    gap: 10px;
    font-size: var(--Font-Size-sm);
    font-family: var(--Font-Family-sans1);
}
.uipro-herocard__pills {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    gap: 7.5px;
}
.uipro-herocard__pill {
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    line-height: var(--Font-Leading-5);
    font-size: var(--Font-Size-sm);
    color: var(--Color-Text-Inverse);
}
.uipro-herocard__pill_new {
    background-color: var(--Color-Primary-Primary-500);
}
.uipro-herocard__pill_seller {
    background-color: rgba(255, 255, 255, 0.1);
}
.uipro-herocard__name-block {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 0 0;
    gap: 4px;
    font-size: var(--Font-Size-2xl);
    font-family: var(--Font-Family-serif);
}
.uipro-herocard__title {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: inherit;
    line-height: var(--Font-Leading-7);
    font-weight: var(--Font-Weight-medium);
    font-family: inherit;
    color: var(--Color-Text-Inverse);
}
.uipro-herocard__meta {
    align-self: stretch;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--Font-Size-base);
    color: var(--Color-Text-Secondary);
    font-family: var(--Font-Family-sans1);
    line-height: var(--Font-Leading-5);
}
.uipro-herocard__dot {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: var(--color-gainsboro-100, #DCDCDC);
    flex-shrink: 0;
}
.uipro-herocard__price-row {
    align-self: stretch;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    color: var(--Color-Text-Secondary);
}
.uipro-herocard__price-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 180px;
}
.uipro-herocard__price-label {
    align-self: stretch;
    line-height: var(--Font-Leading-5);
    font-size: var(--Font-Size-sm);
}
.uipro-herocard__price {
    margin: 0;
    font-size: var(--Font-Size-xl);
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-semibold);
    font-family: var(--Font-Family-serif);
    color: var(--Color-Text-Inverse);
}
/* Hero CTA: Component53 Dark/Small variant
 * Figma: data-state='Dark' data-mode='Default' data-icon='true' data-size='Small'
 * background: transparent; height:48px; width:184px; inner row centered, 14px label, 20×20 icon */
.uipro-herocard__cta {
    /* Component53.module.css base */
    position: relative;
    width: 184px;
    height: 48px;
    border-radius: var(--Radius-full);
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    /* Dark/Small variant: transparent background, green inner rectangle visible */
    background-color: transparent;
}
/* Inner green rectangle (component53Item) */
.uipro-herocard__cta::before {
    content: '';
    position: absolute;
    top: calc(50% - 28px);
    left: calc(50% - 168px);
    background-color: var(--Color-Primary-Primary-500);
    width: 335px;
    height: 56px;
    pointer-events: none;
}
/* 1×1 dot (component53Child) */
.uipro-herocard__cta::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--Color-Secondary-Secondary-500);
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* Inner row (exploreProductsParent) — Dark/Small override */
.uipro-herocard__cta-inner {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 84px);
    width: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    z-index: 1;
}
.uipro-herocard__cta-label {
    width: 128px;
    position: relative;
    font-size: var(--Font-Size-sm);
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    font-family: var(--Font-Family-serif);
    color: var(--Color-Text-Inverse);
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}
.uipro-herocard__cta-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

/* ============================================================
 * Container — Stats card (components/Container.tsx)
 * ============================================================ */
.uipro-statscard {
    /* StatsStrip.module.css + Container.module.css: horizontal card, icon-left + text-right */
    flex: 1;
    min-width: 261px;
    align-self: stretch;
    border-radius: 14px;
    background-color: var(--Color-Background-Surface);
    border: var(--border-1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    padding: 15px 16px;
    gap: 12px;
    text-align: left;
    font-size: var(--Font-Size-lg);
    color: var(--color-gray-100);
    font-family: var(--Font-Family-sans);
}
/* Icon wrap: SVGs already include the #E7EFE0 background and border-radius internally;
   wrap is a pure sizing container — no extra background or padding needed. */
.uipro-statscard__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.uipro-statscard__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}
/* Text column to the right of the icon */
.uipro-statscard__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.uipro-statscard__value {
    margin: 0;
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-bold);
    letter-spacing: var(--Font-Tracking-wide);
    font-family: var(--Font-Family-sans);
    color: var(--color-gray-100);
}
.uipro-statscard__label {
    position: relative;
    font-size: var(--Font-Size-sm);
    line-height: var(--Font-Leading-5);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Status-Colors-Disable);
}
.uipro-statscard__sublabel {
    position: relative;
    font-size: var(--Font-Size-xs, 12px);
    line-height: var(--Font-Leading-3);
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Secondary);
}
/* statscard_middleman — Figma 设计稿4个卡片样式一致，无特殊背景 */

/* ============================================================
 * Hot Selling Machinery section — frame 221:2187
 * ============================================================ */
.uipro-hotselling {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 240px;
    box-sizing: border-box;
    gap: 60px;
    background-color: var(--Color-Background-Primary);
}
.uipro-hotselling__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    gap: 30px 0;
    max-width: 1440px;
    text-align: left;
    font-size: var(--Font-Size-lg);
    color: var(--Color-Primary-Primary-500);
    font-family: var(--Font-Family-serif);
}
.uipro-hotselling__header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 370px;
    max-width: 691.1px;
}
.uipro-hotselling__header .uipro-headbutton--desktop {
    align-self: center;
    margin-left: auto;
    flex-shrink: 0;
}
.uipro-hotselling__header .uipro-headbutton--mobile {
    display: none;
}
.uipro-hotselling__eyebrow {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.uipro-hotselling__eyebrow-line {
    height: 2px;
    width: 32px;
    flex-shrink: 0;
    position: relative;
    background-color: var(--Color-Primary-Primary-500);
}
.uipro-hotselling__eyebrow-text {
    position: relative;
    line-height: var(--Font-Leading-6);
    font-weight: var(--Font-Weight-medium);
}
.uipro-hotselling__title {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: var(--Font-Size-5xl);
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans);
    color: var(--Color-Text-Primary);
    padding: 0;
}
.uipro-hotselling__desc {
    align-self: stretch;
    position: relative;
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    color: var(--Heading-Medium);
    margin: 0;
}
.uipro-hotselling__filters {
    align-self: stretch;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    padding: 6px 0 0;
    gap: 8px;
}
/* Main row: herocard (left) + product cards column (right). */
.uipro-hotselling__main {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 20px;
    max-width: 1440px;
}
/* Product cards column to the right of the herocard. */
.uipro-hotselling__products {
    flex: 1 1 0;
    min-width: 310px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 20px;
}
.uipro-hotselling__products-top {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px;
}
.uipro-hotselling__products-bottom {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px;
}
.uipro-hotselling__stats {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 20px;
    max-width: 1440px;
}

/* ============================================================
 * Our Story Section — frame 221:3751
 * ============================================================ */
.uipro-ourstory {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 240px;
    box-sizing: border-box;
    gap: 60px;
}
.uipro-ourstory__top {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 60px;
    max-width: 1440px;
    text-align: left;
    font-size: var(--Font-Size-sm);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-sans);
    /* Figma: collage 与 content 等高 696px，content 垂直居中 */
    align-items: center;
}
.uipro-ourstory__collage {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 25px;
    position: relative;
    min-width: 370px;
    align-items: stretch;
    height: 696px;
    /* Figma: collage 固定 696px，content 垂直居中留白约 58px */
}
.uipro-ourstory__collage-left {
    flex: 1;
    display: flex;
    height: 100%;
}
.uipro-ourstory__collage-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
}
.uipro-ourstory__collage-img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}
.uipro-ourstory__collage-img--full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.uipro-ourstory__collage-right .uipro-ourstory__collage-img {
    width: 100%;
    height: calc((696px - 25px) / 2);
    /* 右列两图各占 (696-gap)/2 */
    object-fit: cover;
    border-radius: 16px;
    display: block;
    flex-shrink: 0;
}
.uipro-ourstory__badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 160px;
    height: 160px;
    box-shadow: 0px 25px 50px -12px rgba(6, 32, 59, 0.4);
    border-radius: 9999px;
    background-color: var(--Color-Secondary-Secondary-500);
    border: 3.3px solid var(--Color-Text-Inverse);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 2px;
}
.uipro-ourstory__badge-since {
    position: relative;
    line-height: var(--Font-Leading-5);
    color: #FFFFFF;
}
.uipro-ourstory__badge-year {
    margin: 0;
    position: relative;
    font-size: var(--Font-Size-5xl);
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans1);
    color: #FFFFFF;
}
.uipro-ourstory__badge-label {
    width: 100%;
    position: relative;
    font-size: var(--Font-Size-base);
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    font-family: var(--Font-Family-serif);
    text-align: center;
    display: inline-block;
    max-width: 113.4px;
    color: #FFFFFF;
}
.uipro-ourstory__content {
    /* Figma: W:600 H:579.98 Hug, gap:32, padding:0 — 高度由内容决定，垂直居中于 696px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 600px;
    min-width: 370px;
    max-width: 600px;
    text-align: left;
    font-size: var(--Font-Size-sm);
    color: var(--Color-Primary-Primary-500);
    font-family: var(--Font-Family-serif);
}
.uipro-ourstory__upper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.uipro-ourstory__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.uipro-ourstory__eyebrow-line {
    height: 2px;
    width: 32px;
    position: relative;
    background-color: var(--Color-Primary-Primary-500);
    flex-shrink: 0;
}
.uipro-ourstory__eyebrow-text {
    position: relative;
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--Font-Weight-medium);
    flex-shrink: 0;
}
.uipro-ourstory__title {
    margin: 0;
    width: 100%;
    position: relative;
    font-size: var(--Font-Size-5xl);
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: var(--Font-Family-sans);
    display: inline-block;
    max-width: 600px;
    color: var(--Color-Text-Primary);
}
.uipro-ourstory__title-accent {
    color: var(--Color-Primary-Primary-500);
}
.uipro-ourstory__body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 3px 0 0;
    gap: 16px;
    color: #717182;
    font-family: var(--Font-Family-sans);
    font-size: 18px;
    line-height: 24px;
}
.uipro-ourstory__p {
    width: 100%;
    position: relative;
    font-size: 18px;
    line-height: 24px;
    display: inline-block;
    max-width: 600px;
    margin: 0;
    color: #717182;
    font-weight: 400;
}
.uipro-ourstory__p strong {
    color: #0F1115;
    font-weight: 700;
}

/* Timeline */
.uipro-ourstory__timeline {
    width: 100%;
    min-height: 146px;
    position: relative;
    max-width: 600px;
    text-align: center;
    font-size: var(--Font-Size-2xl);
    font-family: var(--Font-Family-sans);
    overflow: visible;
}
.uipro-ourstory__timeline-lines {
    position: absolute;
    top: 32px;
    left: 94px;
    width: 411px;
    display: flex;
    align-items: center;
    gap: 39px;
}
.uipro-ourstory__timeline-line {
    height: 1px;
    flex: 1;
    position: relative;
    background-color: #C6DAAB;
}
.uipro-ourstory__timeline-nodes {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    align-content: flex-start;
    gap: 0;
    padding-top: 0;
}
.uipro-ourstory__node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 112px;
}
.uipro-ourstory__node_active {
    color: #06203B;
}
.uipro-ourstory__node-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: contain;
    border: none;
    flex-shrink: 0;
}
.uipro-ourstory__node_active .uipro-ourstory__node-icon {
    /* active 节点使用 Component-552@2x.png，深蓝色圆圈 */
}
.uipro-ourstory__node-year {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    font-family: var(--Font-Family-sans);
    color: #83AE48;
    text-align: center;
}
.uipro-ourstory__node-caption {
    width: 150px;
    position: relative;
    font-size: var(--Font-Size-sm);
    color: var(--Color-Text-Primary);
    font-family: var(--Font-Family-sans);
    line-height: 1.2;
    text-align: center;
}
.uipro-ourstory__node_active .uipro-ourstory__node-caption {
    color: #0F1115;
}
.uipro-ourstory__node_active .uipro-ourstory__node-year {
    color: #06203B;
}

/* Evidence cards */
.uipro-ourstory__evidence {
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: center;
    gap: 24px;
    max-width: 1440px;
}
.uipro-evidence-card {
    flex: 1;
    border-radius: 16px;
    background-color: var(--Color-Background-Primary);
    border: 1px solid var(--Color-Primary-Primary-500);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 300px;
    max-height: 517px;
    text-align: left;
    font-size: var(--Font-Size-xs);
    color: var(--Color-Text-Primary);
    font-family: var(--Font-Family-serif);
}
.uipro-evidence-card__bg {
    align-self: stretch;
    height: 245px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.uipro-evidence-card__badges {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 9999px;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    gap: 4px;
}
.uipro-evidence-card__badge-left {
    position: relative;
    line-height: var(--Font-Leading-4);
    font-weight: var(--Font-Weight-medium);
    display: inline-block;
}
.uipro-evidence-card__badge-dot {
    height: 4px;
    width: 4px;
    position: relative;
    border-radius: 50%;
    background-color: var(--Color-Secondary-Secondary-500);
}
.uipro-evidence-card__badge-right {
    position: relative;
    line-height: var(--Font-Leading-3);
    font-family: var(--Font-Family-sans);
    color: var(--Color-Secondary-Secondary-500);
}
.uipro-evidence-card__body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    gap: 12px;
}
.uipro-evidence-card__eyebrow {
    position: relative;
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    color: var(--Color-Primary-Primary-500);
}
.uipro-evidence-card__headline {
    width: 100%;
    position: relative;
    font-size: var(--Font-Size-lg1);
    letter-spacing: var(--Font-Tracking-wide);
    line-height: var(--Font-Leading-6);
    display: inline-block;
    font-family: var(--Font-Family-sans1);
    color: var(--Color-Text-Primary);
    max-width: 379px;
    white-space: pre-line;
    margin: 0;
}
.uipro-evidence-card__text {
    align-self: stretch;
    border-bottom: 1px solid var(--Color-Borders-Separators-Default);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    padding: 0 0 27px;
    color: var(--Color-Status-Colors-Disable);
    font-family: var(--Font-Family-sans);
}
.uipro-evidence-card__text-inner {
    flex: 1;
    position: relative;
    line-height: var(--Font-Leading-5);
    display: inline-block;
    max-width: 385px;
    white-space: pre-line;
}
.uipro-evidence-card__cta {
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.uipro-evidence-card__cta-label {
    position: relative;
    font-size: var(--Font-Size-sm);
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    font-family: var(--Font-Family-serif);
    color: var(--Color-Primary-Primary-500);
    text-align: left;
}
.uipro-evidence-card__cta-icon {
    height: 18px;
    width: 18px;
    position: relative;
}

/* Bottom CTA pair */
.uipro-ourstory__ctas {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 24px;
}

/* ============================================================
 * CTA Section — frame 221:4050
 * ============================================================ */
.uipro-cta-section {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 12.5%;
    box-sizing: border-box;
}
.uipro-cta-section__inner {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 72px 30px;
    box-sizing: border-box;
    gap: 28.8px;
    /* background-image set inline (PHP-resolved URL + 32% black overlay). */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    max-width: 1440px;
    text-align: center;
    font-size: var(--Font-Size-5xl);
    color: var(--Color-Text-Inverse);
    font-family: var(--Font-Family-sans);
}
.uipro-cta-section__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25.6px 0;
    box-sizing: border-box;
    gap: 16px;
    max-width: 830.4px;
}
.uipro-cta-section__title {
    margin: 0;
    width: 100%;
    position: relative;
    font-size: inherit;
    line-height: 52px;
    font-weight: var(--Font-Weight-bold);
    font-family: inherit;
    display: inline-block;
    max-width: 538px;
    color: var(--Color-Text-Inverse);  /* h2 user-agent rules clobber inherit; force white on dark bg. */
}
.uipro-cta-section__desc {
    align-self: stretch;
    position: relative;
    font-size: var(--Font-Size-lg);
    line-height: var(--Font-Leading-6);
    font-family: var(--Font-Family-sans1);
    color: rgba(255, 255, 255, 0.85);  /* light enough to read on dark CTA bg */
    text-align: center;
}
.uipro-cta-section__actions {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    gap: 24px;
}
.uipro-whatsapp-btn {
    cursor: pointer;
    border: none;
    padding: 16px 24px;
    background-color: transparent;
    border-radius: 9999px;
    /* Component6 design — vertical green-on-green gradient (--gradient-1). */
    background: linear-gradient(0deg, #1faf38, #60d669);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.uipro-whatsapp-btn__icon {
    width: 24px;
    position: relative;
    max-height: 100%;
}
.uipro-whatsapp-btn__label {
    position: relative;
    font-size: var(--Font-Size-base);
    line-height: var(--Font-Leading-5);
    font-weight: var(--Font-Weight-medium);
    font-family: var(--Font-Family-serif);
    color: var(--Color-Text-Inverse);
    text-align: center;
}

/* ============================================================
 * Interaction States — hover / focus / active
 * ============================================================ */
.uipro-cta:hover,
.uipro-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}
.uipro-cta:active {
    transform: translateY(0);
}

.uipro-whatsapp-btn:hover,
.uipro-whatsapp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 175, 56, 0.35);
    transform: translateY(-1px);
}
.uipro-whatsapp-btn:active {
    transform: translateY(0);
}

.uipro-productcard:hover,
.uipro-productcard:focus-visible {
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.uipro-productcard:active {
    transform: translateY(0);
}

.uipro-headbutton:hover,
.uipro-headbutton:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uipro-filtertab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

.uipro-evidence-card:hover,
.uipro-evidence-card:focus-within {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.uipro-statscard:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.uipro-herocard:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Smooth transitions for all interactive elements */
.uipro-cta,
.uipro-whatsapp-btn,
.uipro-productcard,
.uipro-headbutton,
.uipro-filtertab,
.uipro-evidence-card,
.uipro-statscard,
.uipro-herocard {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================================
 * Responsive Breakpoints
 * ============================================================ */
@media (max-width: 1200px) {
    .uipro-hotselling__main {
        gap: 16px;
    }
    .uipro-hotselling__products {
        gap: 16px;
    }
    .uipro-ourstory__top {
        gap: 40px;
    }
    .uipro-ourstory__evidence {
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .uipro-hero {
        padding: 60px 20px;
    }
    .uipro-hero__title {
        font-size: var(--Font-Size-4xl);
        line-height: 48px;
    }
    .uipro-hero__sub {
        font-size: var(--Font-Size-lg);
    }

    .uipro-browse {
        padding: 60px 20px;
        gap: 40px;
    }
    .uipro-browse__title {
        font-size: var(--Font-Size-3xl);
        line-height: 42px;
    }

    .uipro-hotselling {
        padding: 60px 20px;
        gap: 40px;
    }
    .uipro-hotselling__title {
        font-size: var(--Font-Size-3xl);
        line-height: 42px;
    }
    .uipro-hotselling__header {
        gap: 20px;
    }
    /* Tablet: herocard takes 45% of row width */
    .uipro-herocard {
        flex: 0 0 45%;
        min-width: 280px;
        max-width: 45%;
    }
    /* Stats: 2-column grid on tablet */
    .uipro-hotselling__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .uipro-statscard {
        min-width: 0;
    }

    .uipro-ourstory {
        padding: 60px 20px;
        gap: 40px;
    }
    .uipro-ourstory__title {
        font-size: var(--Font-Size-3xl);
        line-height: 42px;
    }
    .uipro-ourstory__collage {
        padding: 0;
    }

    .uipro-cta-section {
        padding: 60px 20px;
    }
    .uipro-cta-section__inner {
        padding: 48px 24px;
    }
    .uipro-cta-section__title {
        font-size: var(--Font-Size-3xl);
        line-height: 42px;
    }
}

@media (max-width: 640px) {
    .uipro-hero {
        padding: 40px 16px;
    }
    .uipro-hero__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    .uipro-hero__sub {
        font-size: var(--Font-Size-base);
    }
    .uipro-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .uipro-browse {
        padding: 40px 16px;
    }
    .uipro-browse__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    .uipro-browse__grid {
        gap: 16px;
    }

    .uipro-hotselling {
        padding: 40px 16px;
        gap: 32px;
    }
    .uipro-hotselling__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .uipro-hotselling__header-left {
        min-width: 100%;
        max-width: 100%;
    }
    .uipro-hotselling__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    /* Filter tabs: horizontal scroll on mobile */
    .uipro-hotselling__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }
    .uipro-hotselling__filters::-webkit-scrollbar { display: none; }
    .uipro-filtertab { flex-shrink: 0; }
    /* Main: stack herocard above product grid */
    .uipro-hotselling__main {
        flex-direction: column;
        gap: 16px;
    }
    .uipro-herocard {
        min-width: 100%;
        max-width: 100%;
        flex: none;
    }
    .uipro-herocard__image-wrap {
        margin: 0 16px;
    }
    .uipro-herocard__image {
        margin: 0;
    }
    /* Herocard CTA: full-width on mobile */
    .uipro-herocard__cta {
        width: 100%;
    }
    .uipro-herocard__cta-inner {
        left: 50%;
        transform: translateX(-50%);
    }
    /* Product cards: single column on mobile */
    .uipro-hotselling__products-top,
    .uipro-hotselling__products-bottom {
        flex-direction: column;
    }
    .uipro-productcard_portrait,
    .uipro-productcard_landscape {
        min-width: 100%;
        max-width: 100%;
    }
    /* Landscape card: revert to column layout on mobile */
    .uipro-productcard_landscape {
        flex-direction: column;
    }
    .uipro-productcard_landscape .uipro-productcard__image-wrap {
        width: 100%;
        height: 182px;
        border-radius: 16px 16px 0 0;
    }
    /* Stats: 2-column grid on mobile */
    .uipro-hotselling__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .uipro-statscard {
        min-width: 0;
    }

    .uipro-ourstory {
        padding: 40px 16px;
    }
    .uipro-ourstory__top {
        flex-direction: column;
        gap: 32px;
    }
    .uipro-ourstory__collage {
        min-width: 100%;
        padding: 0;
    }
    .uipro-ourstory__content {
        min-width: 100%;
    }
    .uipro-ourstory__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    .uipro-ourstory__timeline {
        height: auto;
    }
    .uipro-ourstory__timeline-nodes {
        flex-wrap: wrap;
        gap: 16px;
    }
    .uipro-ourstory__evidence {
        flex-direction: column;
    }
    .uipro-ourstory__ctas {
        flex-direction: column;
        width: 100%;
    }

    .uipro-cta-section {
        padding: 40px 16px;
    }
    .uipro-cta-section__inner {
        padding: 40px 20px;
        gap: 20px;
    }
    .uipro-cta-section__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    .uipro-cta-section__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .uiproduct-hero {
        padding: 60px 16px 40px;
    }
    .uiproduct-hero__title {
        font-size: var(--Font-Size-2xl);
        line-height: 36px;
    }
    .uiproduct-hero__meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================================
 * Product card overlay: SHIRUN TRADE badge + wishlist button
 * Matches Figma Component 77/78/79 image overlay layer
 * ============================================================ */
.uipro-productcard__image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
/* Portrait: wrap is full card width, 182px tall (matches Figma imageIcon height). */
.uipro-productcard_portrait .uipro-productcard__image-wrap {
    width: 100%;
    height: 182px;
    border-radius: 16px 16px 0 0;
}
/* Landscape: wrap is fixed 182x176 to the left of body (Figma Component77 size=Small). */
.uipro-productcard_landscape .uipro-productcard__image-wrap {
    width: 182px;
    height: 176px;
    border-radius: 16px;
}
.uipro-productcard__image-wrap .uipro-productcard__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.uipro-productcard__overlay {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
.uipro-productcard__logo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: transparent;
}
.uipro-productcard__logo-icon {
    width: 11px;
    height: 16px;
    display: block;
}
.uipro-productcard__logo-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    white-space: nowrap;
}
.uipro-productcard__wishlist {
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.16);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: none;
    cursor: pointer;
}
.uipro-productcard__wishlist img {
    width: 20px;
    height: 20px;
    display: block;
}


/* ============================================================
   Migrated from main.css: Blog Hero, PLP, PDP overrides
   (per skill spec: all overrides belong in uipro.css)
   ============================================================ */

/* Blog Hero */
.blog-hero { background-color: #06203B; color: #fff; position: relative; overflow: hidden; } /* display/height/grid controlled by .inner-page-hero */

/* PLP layout top padding */
.plp-layout { padding: 24px 0 64px; }

/* PLP toolbar */
.plp-toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 0 16px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; min-height: 50px; }

/* PLP products column: remove inherited section padding */
.plp-products { min-width: 0; padding: 0; }

/* PLP filter card */
.plp-filter-card { border: 1px solid var(--color-border); border-radius: 14px; background: #fff; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 16px; }
.plp-filter-card__title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.plp-filter-card__icon { color: var(--color-text); display: flex; align-items: center; }
.plp-filter-card__count { display: flex; align-items: baseline; gap: 4px; }
.plp-filter-card__count-num { font-size: 28px; font-weight: 700; color: #8DC63F; line-height: 1; }
.plp-filter-card__count-label { font-size: 13px; color: var(--color-muted); }
.plp-filter-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 14px; border-bottom: 1px solid var(--color-border); }
.plp-filter-card__title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0; }
.plp-filter-reset { font-size: 13px; font-weight: 500; color: var(--color-accent); text-decoration: none; padding: 4px 8px; border-radius: 8px; transition: background var(--transition); }
.plp-filter-reset:hover { background: var(--color-accent-light); }
.plp-filter-reset.is-disabled { color: var(--color-muted); pointer-events: none; }
.plp-filter-card .plp-filter-group { border: none; border-radius: 0; padding: 0; gap: 14px; }

/* PLP Our Promise dark card */
.plp-promise-card { background: #06203B; border-radius: 14px; padding: 20px; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.plp-promise-card__label { font-size: 11px; font-weight: 600; color: #8DC63F; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.plp-promise-card__title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; margin: 0; }
.plp-promise-card__divider { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 4px 0; }
.plp-promise-card__stats { display: flex; flex-direction: column; gap: 12px; }
.plp-promise-card__stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plp-promise-card__stat-num { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 2px; }
.plp-promise-card__stat-unit { font-size: 13px; font-weight: 400; color: #8DC63F; margin-left: 2px; }
.plp-promise-card__stat-desc { font-size: 12px; color: rgba(255,255,255,0.6); text-align: right; max-width: 120px; line-height: 1.4; }
.plp-promise-card__cta { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; background: #8DC63F; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; margin-top: 4px; transition: background .2s; }
.plp-promise-card__cta:hover { background: #7ab535; color: #fff; }

/* PDP breadcrumb bar: dark background */
.pdp-breadcrumb-bar { background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #06203B; padding: 0; height: 96px; display: flex; align-items: center; font-size: 13px; }
.pdp-breadcrumb-bar .breadcrumb { color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 5px; margin: 0; }
.pdp-breadcrumb-bar .breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 18px; }
.pdp-breadcrumb-bar .breadcrumb a:hover { color: #fff; }
.pdp-breadcrumb-bar .breadcrumb span { color: rgba(255,255,255,0.5); font-size: 18px; margin: 0 2px; }
.pdp-breadcrumb-bar .breadcrumb__current { background: rgba(255,255,255,0.1); border-radius: 9999px; padding: 4px 8px; color: #fff; font-size: 18px; font-weight: 500; }
.pdp-breadcrumb-bar .breadcrumb__back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); color: #fff; text-decoration: none; flex-shrink: 0; margin-right: 5px; }

/* PDP CTAs: horizontal row */
.pdp-ctas { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; }

/* PDP spec groups: 3-column grid */
.pdp-spec-groups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pdp-spec-group { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }

/* PDP cert list: 3-column grid */
.pdp-cert-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* PDP responsive: collapse to 1 column on mobile */
@media (max-width: 767px) {
    .pdp-spec-groups-grid { grid-template-columns: 1fr; }
    .pdp-cert-list { grid-template-columns: 1fr; }
    .pdp-ctas { flex-direction: column; }
}

/* ── Contact Page: large-screen padding fix ──────────────────
   Figma: 内容区两侧各 240px（与其他 inner-page 一致）
   overview-inner 默认只有 20px/32px，需在 ≥1440px 覆盖
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    .contact-page .overview-inner { padding-left: 240px; padding-right: 240px; }
    .contact-page .overview-inner[style] { padding-left: 240px; padding-right: 240px; }
}

/* ── Equipment Stories: On Site section desktop layout ───────
   Figma: title centered above grid; 3-col grid
   Left col: cards 0+1 (each 320px); Center: card 2 full-height 660px; Right col: cards 3+4
   ─────────────────────────────────────────────────────────── */
.stories-on-site__header { text-align: center; }
.stories-photo-col { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 1100px) {
    /* Override main.css grid-template-columns: 320px 1fr → flex column */
    .stories-on-site__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .stories-on-site__header {
        text-align: center;
        max-width: 800px;
    }
    /* 3-col equal-width row */
    .stories-photo-grid {
        display: flex;
        flex-direction: row;
        gap: 20px;
        width: 100%;
    }
    .stories-photo-col {
        flex: 1;
        gap: 20px;
    }
    .stories-photo-col .stories-photo-card--sm {
        flex: 1;
        min-height: 0;
        height: calc((660px - 20px) / 2); /* = 320px */
    }
    /* Center card: full height */
    .stories-photo-grid > .stories-photo-card--lg {
        flex: 1;
        height: 660px;
        width: auto;
    }
}

/* ── Contact Page: full layout fix (Figma spec) ──────────────
   Figma: CategoryNav 1920px, padding 80px 240px, gap 60px, height 792px
   Left col: 787.99px, gap 20px
   Right col (map card): 592.01px × 526.73px, border-radius 16px
   Map iframe: height 436.74px; footer: padding 20px, height 88px
   Contact cards: height 91px, padding 16px, gap 12px, border-radius 14px
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    .contact-main {
        padding: 80px 0;
    }
    .contact-main__inner {
        flex-direction: row;
        gap: 60px;
        padding: 0 240px;
        align-items: flex-start;
        min-height: 632px; /* Figma: Container height 632px */
    }
    .contact-main__left {
        flex: 0 0 788px;
        max-width: 788px;
        min-width: 0;
    }
    .contact-main__right {
        flex: 0 0 592px;
        max-width: 592px;
    }
    /* Map card: fixed height matching Figma */
    .contact-map-card {
        height: 527px;
        display: flex;
        flex-direction: column;
    }
    .contact-map-card__frame {
        flex: 1;
        aspect-ratio: unset;
        height: auto;
    }
    .contact-map-card__footer {
        flex-shrink: 0;
        height: 88px;
        padding: 20px;
        box-sizing: border-box;
    }
}

/* ── UIPro CTA Section: desktop row layout (Figma: 1440×164px) ── */
@media (min-width: 1100px) {
    .uipro-cta-section__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 40px 80px;
        height: auto;
        min-height: 164px;
        gap: 40px;
        text-align: left;
    }
    .uipro-cta-section__content {
        align-items: flex-start;
        padding: 0;
        flex: 1 1 0;
        min-width: 0;
        max-width: 786px;
    }
    .uipro-cta-section__title {
        font-size: 24px;
        line-height: 28px;
        text-align: left;
        max-width: none;
        width: auto;
    }
    .uipro-cta-section__desc {
        font-size: 18px;
        line-height: 24px;
        color: #B7BDCD;
        text-align: left;
        max-width: 620px;
    }
    .uipro-cta-section__actions {
        flex-shrink: 0;
        flex-wrap: nowrap;
        align-self: center;
        justify-content: flex-end;
        gap: 24px;
    }
}

/* ── After-Sales: Need Support CTA — base (all viewports) ── */
.aftersales-support-cta {
    background-color: #06203B !important;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)) !important;
    color: #FFFFFF !important;
}
.aftersales-support-cta__title {
    color: #FFFFFF !important;
}

/* ── After-Sales: Need Support CTA (Figma: 1920×540px, content 1280px centered) ── */
@media (min-width: 1100px) {
    .aftersales-support-cta {
        min-height: 540px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px 0;
    }
    .aftersales-support-cta__inner {
        width: 1280px;
        max-width: 1280px;
        gap: 24px;
    }
    .aftersales-support-cta__title {
        font-size: 48px;
        line-height: 52px;
        font-weight: 700;
    }
    .aftersales-support-cta__desc {
        font-size: 16px;
        line-height: 20px;
        color: #B7BDCD;
        max-width: 751px;
    }
    .aftersales-contact-pills {
        max-width: 480px;
        gap: 20px;
    }
    .aftersales-contact-pill {
        width: 230px;
        height: 128px;
        padding: 20px;
        gap: 8px;
        border-radius: 16px;
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        box-sizing: border-box;
    }
    .aftersales-contact-pill img {
        width: 28px;
        height: 28px;
    }
    .aftersales-contact-pill__label {
        font-size: 14px;
        line-height: 20px;
        color: #B7BDCD;
        letter-spacing: 0;
    }
    .aftersales-contact-pill__value {
        font-size: 18px;
        line-height: 24px;
        color: #FFFFFF;
        font-weight: 500;
    }
}

/* ── Global: footer background image (Figma: footer-bg.webp + #06203B 92% overlay) ── */
.site-footer {
    margin-top: 0 !important;
    background-color: #06203B !important;
    background-image:
        linear-gradient(rgba(6,32,59,0.92), rgba(6,32,59,0.92)),
        url('../images/footer-bg.webp') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* ── Newsletter section: transparent — let footer bg show through ── */
.newsletter-section {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1.3px solid rgba(255,255,255,0.08) !important;
}
/* Fix: old rule has padding 24px 320px which squeezes content in 785px container;
   container--footer already handles left/right padding (0 240px), so inner needs 0 */
.newsletter-section__inner {
    padding: 24px 0 !important;
    box-sizing: border-box !important;
}

/* ── Company Overview: fix CTA button colors ── */
/* Left "Send Inquiry" — Figma olive green #83AE48 */
.overview-contact__btns .cases-cta__btn--primary {
    background: #83AE48 !important;
    color: #fff !important;
}
.overview-contact__btns .cases-cta__btn--primary:hover {
    background: #6f9a30 !important;
}
/* Right "Chat on WhatsApp" — bright green gradient (already correct, reinforce) */
.overview-contact__btns .cases-cta__btn--whatsapp {
    background: linear-gradient(0deg, #1faf38, #60d669) !important;
    color: #fff !important;
}

/* ── Company Overview: Figma-exact button sizes & styles ── */
/* Container: 454×56px, flex row, gap 24px */
.overview-contact__btns {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 !important;
}
/* Component 53 — Send Inquiry: 208×56px, #83AE48, pill */
.overview-contact__btns .cases-cta__btn--primary {
    position: relative !important;
    width: 208px !important;
    height: 56px !important;
    padding: 0 16px 0 6px !important;
    background: #83AE48 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}
/* Ellipse 2 — dark circle behind arrow */
.overview-contact__btns .cases-cta__btn--primary::after {
    content: '' !important;
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    left: 162px !important;
    top: 10px !important;
    background: #5D7C33 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}
/* Component 6 — Chat on WhatsApp: 222×56px, green gradient, pill */
.overview-contact__btns .cases-cta__btn--whatsapp {
    width: 222px !important;
    height: 56px !important;
    padding: 16px 24px !important;
    background: linear-gradient(0deg, #1FAF38 0%, #60D669 100%) !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}


/* ── about-facility: 修复左列内容溢出导致的底部不对齐 ── */
/* 根本原因：.about-facility__grid 固定 height:580px，左列内容（标题+段落+feature-grid）超过580px，
   feature-grid 溢出容器底部，视觉上比右列 PRE-EXPORT 卡片低。
   修复：将 grid 改为 min-height，让左列自适应，右列用 align-self:stretch 擒满 */
.about-facility__grid {
    height: auto !important;
    min-height: 580px;
    align-items: stretch;
}
.about-facility__content {
    justify-content: flex-start !important;
    gap: 20px !important;
}
/* featureGrid margin-bottom:24px 导致底部比 processBox 低 24px，去掉即可对齐 */
.about-facility__feature-grid {
    margin-bottom: 0 !important;
}
/* process-steps 禁止换行，缩小字号以适应容器宽度 */
.about-facility__process-box .about-facility__process-steps {
    flex-wrap: nowrap !important;
    gap: 4px !important;
}
.about-facility__process-box .about-facility__step,
.about-facility__process-box .about-facility__final {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    white-space: nowrap;
}
.about-facility__process-box .about-facility__sep {
    flex-shrink: 0;
}
/* 左列两张小图：去掉固定高度，改用 flex:1 均分左列高度 */
.about-facility__img-col-small .about-facility__img {
    height: 0 !important;
    flex: 1 !important;
    min-height: 100px;
}
/* 右列大图：擒满左列等高 */
.about-facility__img-col-right {
    align-self: stretch;
}
.about-facility__img--tall {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1;
    object-fit: cover;
}

/* ── Spare Parts: 单列 → 2×2 网格布局 ── */
.aftersales-parts-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — ≤768px
   对照 Figma 手机端设计稿（375px）逐区块覆盖桌面端固定值
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Global ── */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .container, .wp-container, .wp-block-group__inner-container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* ── Header ── */
    .top-bar {
        display: none !important;
    }
    .site-header {
        height: 80px !important;
        top: 0 !important;
    }
    .site-header__inner {
        height: 80px !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        gap: 12px !important;
    }
    .site-header__logo img {
        height: 48px !important;
        width: auto !important;
    }
    .main-nav {
        display: none !important;
    }
    .header-actions__whatsapp {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .header-actions__search {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── Hero ── */
    .uipro-hero {
        height: auto !important;
        min-height: 0 !important;
        margin-top: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: visible !important;
    }
    /* 背景图变为普通图片，放在内容下方 */
    .uipro-hero__bg {
        position: relative !important;
        width: 100% !important;
        height: 240px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        order: 2 !important;
    }
    .uipro-hero__halos {
        display: none !important;
    }
    /* 内容区块在上方 */
    .uipro-hero__content-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        order: 1 !important;
        background: #06203B !important;
        padding: 24px 20px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    .uipro-hero__content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        gap: 20px !important;
    }
    .uipro-hero__eyebrow-text {
        font-size: 12px !important;
    }
    .uipro-hero__title {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    .uipro-hero__desc {
        font-size: 13px !important;
        line-height: 20px !important;
    }
    .uipro-hero__actions {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    /* Stats 横排显示在图片下方 */
    .uipro-hero__stats {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        order: 3 !important;
        padding: 16px 20px !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 8px !important;
        overflow-x: auto !important;
    }
    .uipro-hero__stats-inner {
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
        gap: 8px !important;
        overflow-x: auto !important;
    }
    .uipro-hero__stat {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: center !important;
    }
    .uipro-hero__stat-value {
        font-size: 18px !important;
        line-height: 22px !important;
    }
    .uipro-hero__stat-label {
        font-size: 10px !important;
        line-height: 14px !important;
    }
    /* Price badge 隐藏 */
    .uipro-hero__price-badge {
        display: none !important;
    }
    /* Brand logos 横排 */
    .uipro-hero__brands {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }
    .uipro-hero__brand-logo {
        height: 24px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* ── 内页 hero padding-top ── */
    .about-hero, .aftersales-hero, .faq-hero, .cases-hero,
    .es-hero, .plp-hero, .overview-hero, .contact-hero,
    .pdp-hero, .es-listing-hero, .news-hero {
        padding-top: calc(80px + 24px) !important;
    }

    /* ── Browse by Equipment Type ── */
    .uipro-browse {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }
    .uipro-browse__header {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .uipro-browse__header > .uipro-headbutton {
        margin-left: 0 !important;
    }
    .uipro-browse__title {
        white-space: normal !important;
    }
    /* 设计稿：单列上下排列 */
    .uipro-browse__cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .uipro-categorycard {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ── Hot Selling / Available Pump Trucks ── */
    .uipro-hotselling {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }
    .uipro-hotselling__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .uipro-hotselling__filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .uipro-hotselling__main {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    /* Hero card（大卡片 featured/deal of week）保持原有 margin，让黑边显示 */
    .uipro-herocard {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    .uipro-herocard__image-wrap {
        margin: 0 20px !important;
        width: calc(100% - 40px) !important;
        max-width: 100% !important;
    }
    .uipro-herocard__image {
        height: 220px !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .uipro-hotselling__products {
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }
    /* View All：仅保留桌面链接按钮，右对齐 */
    .uipro-hotselling__header .uipro-headbutton--desktop {
        display: inline-flex !important;
        margin-left: auto !important;
        align-self: flex-end !important;
    }
    .uipro-hotselling__header .uipro-headbutton--mobile {
        display: none !important;
    }

    /* 产品卡片区域：竖向单列 */
    .uipro-hotselling__products-top,
    .uipro-hotselling__products-bottom {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    /* 默认隐藏 products-bottom，View All 后展开 */
    .uipro-hotselling__products-bottom {
        display: none !important;
    }
    .uipro-hotselling__products-bottom.is-expanded {
        display: flex !important;
    }
    /* 所有卡片全宽 */
    .uipro-productcard {
        width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    /* portrait 卡片：全宽竖版 */
    .uipro-productcard_portrait {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        flex-direction: column !important;
    }
    /* landscape 卡片：手机端改为竖版，和 portrait 一致 */
    .uipro-productcard_landscape {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .uipro-productcard_landscape .uipro-productcard__image-wrap {
        width: 100% !important;
        min-width: 0 !important;
        height: 180px !important;
        flex-shrink: 0 !important;
    }
    .uipro-productcard_landscape .uipro-productcard__image-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .uipro-productcard_landscape .uipro-productcard__body {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 16px !important;
    }
    /* View Details 按鈕全宽 */
    .uipro-productcard__cta,
    .uipro-productcard_landscape .uipro-productcard__cta {
        width: 100% !important;
        max-width: 100% !important;
    }
    .uipro-productcard_landscape .uipro-cta,
    .uipro-productcard_portrait .uipro-cta {
        width: 100% !important;
    }
    .uipro-productcard_landscape .uipro-cta__inner {
        width: 100% !important;
        left: 0 !important;
        transform: translateY(-50%) !important;
        padding: 0 16px !important;
    }

    /* ── Our Story ── */
    .uipro-ourstory {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
        gap: 32px !important;
    }
    .uipro-ourstory__top {
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }
    /* Collage：左右各一半，宽高比 320:288（Figma w-80 h-72）自适应 */
    .uipro-ourstory__collage {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 320 / 288 !important;
        gap: 8px !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .uipro-ourstory__collage-left {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }
    .uipro-ourstory__collage-left .uipro-ourstory__collage-img--full {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .uipro-ourstory__collage-right {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        height: 100% !important;
        display: grid !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 8px !important;
    }
    .uipro-ourstory__collage-right .uipro-ourstory__collage-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }
    /* badge 在手机端显示，缩小尺寸适配 240px 高度 */
    .uipro-ourstory__badge {
        display: flex !important;
        width: 80px !important;
        height: 80px !important;
        padding: 8px !important;
        gap: 1px !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .uipro-ourstory__badge-since {
        font-size: 8px !important;
        line-height: 10px !important;
    }
    .uipro-ourstory__badge-year {
        font-size: 22px !important;
        line-height: 26px !important;
    }
    .uipro-ourstory__badge-label {
        font-size: 7px !important;
        line-height: 10px !important;
        max-width: 64px !important;
    }
    .uipro-ourstory__content {
        width: 100% !important;
        min-width: 0 !important;
    }
    .uipro-ourstory__title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    /* Timeline 2013-2026 横排一行，字体缩小 */
    .uipro-ourstory__timeline {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .uipro-ourstory__timeline-lines {
        display: none !important;
    }
    .uipro-ourstory__timeline-nodes {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .uipro-ourstory__node {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 6px !important;
    }
    .uipro-ourstory__node-icon {
        width: 40px !important;
        height: 40px !important;
    }
    .uipro-ourstory__node-year {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .uipro-ourstory__node-caption {
        font-size: 10px !important;
        line-height: 1.2 !important;
        width: 100% !important;
    }

    /* ── Evidence Cards (Today in Service) ── */
    .uipro-ourstory__evidence {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .uipro-evidence-card {
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
    }
    /* 防止背景图重复：bg 区块只用 background-image，不叠加 */
    .uipro-evidence-card__bg {
        background-color: transparent !important;
        height: 200px !important;
    }

    /* ── CTA Section ── */
    .uipro-cta-section {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }
    .uipro-cta-section__inner {
        padding: 40px 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    .uipro-cta-section__title {
        font-size: 22px !important;
        line-height: 30px !important;
    }
    .uipro-cta-section__actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* ── Newsletter / Stay Updated ── */
    .newsletter-section {
        padding: 32px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .newsletter-section__inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .newsletter-section__text {
        width: 100% !important;
    }
    .newsletter-section__form {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .newsletter-section__input-wrap {
        width: 100% !important;
        flex-direction: row !important;
    }

    /* ── Footer ── */
    .site-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .site-footer__bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .site-footer__bottom-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* ── Section 通用 padding ── */
    .uipro-browse,
    .uipro-hotselling,
    .uipro-ourstory,
    .uipro-cta-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ── UIPro CTA Section: full-width variant ──────────────────────
   Used by: Cases, Equipment Stories
   Figma spec: full-bleed photo background, border-radius: 0, min-height: 584px (1100px+)
   ─────────────────────────────────────────────────────────────── */
.uipro-cta-section--full-width {
    padding: 0;
}
.uipro-cta-section--full-width .uipro-cta-section__inner {
    max-width: 100%;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.uipro-cta-section--full-width .uipro-cta-section__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 32, 59, 0.65);
}
.uipro-cta-section--full-width .uipro-cta-section__content,
.uipro-cta-section--full-width .uipro-cta-section__actions {
    position: relative;
    z-index: 1;
}
@media (min-width: 1100px) {
    .uipro-cta-section--full-width {
        padding: 0;
    }
    .uipro-cta-section--full-width .uipro-cta-section__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 240px;
        min-height: 584px;
        gap: 28px;
    }
    .uipro-cta-section--full-width .uipro-cta-section__content {
        align-items: center;
        max-width: 800px;
        padding: 0;
        flex: none;
    }
    .uipro-cta-section--full-width .uipro-cta-section__title {
        font-size: 36px;
        line-height: 44px;
        text-align: center;
        max-width: none;
    }
    .uipro-cta-section--full-width .uipro-cta-section__desc {
        font-size: 18px;
        line-height: 28px;
        text-align: center;
        color: rgba(255, 255, 255, 0.65);
        max-width: 620px;
    }
    .uipro-cta-section--full-width .uipro-cta-section__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 16px;
    }
}

/* ── UIPro CTA Section: full-width variant ──────────────────────
   Used by: Cases, Equipment Stories
   Figma spec: full-bleed photo background, border-radius: 0, min-height: 584px (1100px+)
   ─────────────────────────────────────────────────────────────── */
.uipro-cta-section--full-width {
    padding: 0;
}
.uipro-cta-section--full-width .uipro-cta-section__inner {
    max-width: 100%;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.uipro-cta-section--full-width .uipro-cta-section__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 32, 59, 0.65);
}
.uipro-cta-section--full-width .uipro-cta-section__content,
.uipro-cta-section--full-width .uipro-cta-section__actions {
    position: relative;
    z-index: 1;
}
@media (min-width: 1100px) {
    .uipro-cta-section--full-width {
        padding: 0;
    }
    .uipro-cta-section--full-width .uipro-cta-section__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 240px;
        min-height: 584px;
        gap: 28px;
    }
    .uipro-cta-section--full-width .uipro-cta-section__content {
        align-items: center;
        max-width: 800px;
        padding: 0;
        flex: none;
    }
    .uipro-cta-section--full-width .uipro-cta-section__title {
        font-size: 36px;
        line-height: 44px;
        text-align: center;
        max-width: none;
    }
    .uipro-cta-section--full-width .uipro-cta-section__desc {
        font-size: 18px;
        line-height: 28px;
        text-align: center;
        color: rgba(255, 255, 255, 0.65);
        max-width: 620px;
    }
    .uipro-cta-section--full-width .uipro-cta-section__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 16px;
    }
}

/* ── contact-card: override main.css — Figma spec: white bg, no border ── */
.contact-card {
    background: #fff;
    border: none;
}