/* Front V53 content cards — info / product units (Bootstrap 5.3)
   Extracted from Content/mainStyle.css (PLAN-02).
*/
 /*Info Module*/
.text-omit
{  
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.text-omit-defined
{
            overflow : hidden;
            text-overflow: ellipsis;  /*display: -webkit-box;*/ 
            display:block; 
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;/*for IE edge*/
}

.iph-infolist-img1 {
    display: block !important;
    z-index: 0;
    top: 0px;
    opacity: 1;
    width: 100%;
    position: relative;
    margin: 3px;
    padding-bottom: 3px;
    background-color: transparent !important; 
} 

/* 圖片容器保持適當大小 */
.iph-infolist-img1 {
    flex-shrink: 0;
    width: 100%;
    max-width: 120px; /* 限制最大寬度 */
}

.iph-infolist-img1 img{
    vertical-align:top;  
}

.iph-Cartlist-img1 {
    display: block !important;
    z-index: 0;
    top: 0px;
    opacity: 1;
    width: 100%;
    position: relative;
    margin: 3px;
    padding-bottom: 3px;
    background-color: transparent !important;
} 

.iph-Cartlist-img1 img {
        vertical-align: top;
}

.text-primary{
     color:#666; 
     line-height:1.1em;
}

/*----------------------------------------  資訊單元處理 START ----------------------------------------*/

/* 標題容器處理溢出 */
.iph-text-omit2 {
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制最多2行 */
    -webkit-box-orient: vertical;
}

/* 此样式没有使用,有bug */
.iph-text-omit3 { 
            /*background: -webkit-linear-gradient(left, transparent, #faf9e9 70%);
            background: -o-linear-gradient(right, transparent, #faf9e9 70%);
            background: -moz-linear-gradient(right, transparent, #faf9e9 70%);
            background: linear-gradient(to right, transparent, #faf9e9 70%);*/
	        word-break:break-all;
	        display:-webkit-box;
	        -webkit-line-clamp:2;
	        -webkit-box-orient:vertical;
	        text-overflow:ellipsis;
            line-height:1.3em;
            font-size:12px;
            font-family: 'Microsoft YaHei','Microsoft JhengHei UI';
            overflow:hidden; 
            padding:5px 0 0 0;
            margin:0px 0 0 0;
}

.wrapper-info-unit { 
  position:relative;
  overflow: hidden;
} 
 
.iph-infobox-unit {
    display: flex !important;
    align-items: flex-start;
    width: 100%;
    position: relative;
    display: inline-block;
    background-color: transparent !important;
    border-bottom: 1px solid #e5e5e5;
}

/* 确保列容器使用正确的宽度 */
.iph-infobox-unit > [class*="col-"] {
    flex-shrink: 0; /* 防止缩小 */
}

/* 对于有图片的情况特别处理 */
.iph-infobox-unit .col-xs-8,
.iph-infobox-unit .col-sm-8,
.iph-infobox-unit .col-md-8,
.iph-infobox-unit .col-lg-8 {
    flex: 0 0 66.66666667%; /* 8/12 = 66.67% */
    max-width: 66.66666667%;
}

.iph-infobox-unit .col-xs-4,
.iph-infobox-unit .col-sm-4,
.iph-infobox-unit .col-md-4,
.iph-infobox-unit .col-lg-4 {
    flex: 0 0 33.33333333%; /* 4/12 = 33.33% */
    max-width: 33.33333333%;
}

/* 确保图片容器正确显示 */
.iph-infolist-img1 {
    width: 100%;
    height: 100%;
}

.iph-infolist-img1 img {
    width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: cover;
}
 
.iph-Cartbox-unit {
    position: relative;
    display: inline-block;
    background-color: transparent !important;
    border-bottom: 1px solid #e5e5e5;
}
 
/*----------------------------------------  資訊單元處理 END ----------------------------------------*/

/* ============================================================
   InfoListUnit53 - 資訊單元卡片 (Bootstrap 5.3) + 輕微 hover 效果
   ============================================================ */
.iph-infobox-unit53 {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    background-color: var(--site-surface, #ffffff);
    color: var(--site-text, #1a1a1a);
    border: 1px solid transparent;
}

.iph-infobox-unit53:hover {
    background-color: var(--site-surface, #f7f9fc);
    box-shadow: 0 .5rem 1rem var(--site-shadow, rgba(0, 0, 0, .12)) !important;
    transform: translateY(-3px);
}

.iph-infobox-unit53 .iph-infobox-title {
    color: var(--site-text, #212529);
}

.iph-infobox-unit53 .iph-infobox-sub,
.iph-infobox-unit53 .iph-infobox-meta {
    color: var(--site-text-muted, #6c757d);
}

.iph-infobox-unit53 .iph-infobox-img-wrap {
    overflow: hidden;
    background-color: #f0f2f5;
}

.iph-infobox-unit53 .iph-infobox-img {
    transition: transform .35s ease;
    height: 150px;
    object-fit: cover;
}

.iph-infobox-unit53:hover .iph-infobox-img {
    transform: scale(1.06);
}

.iph-infobox-unit53 .iph-infobox-arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 53, 69, .9);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

.iph-infobox-unit53:hover .iph-infobox-arrow {
    opacity: 1;
    transform: translateY(0);
}

.iph-infobox-unit53 a {
    color: inherit;
}

/* ============================================================
   ProductUnit53 / _ProductListSection — 產品列表卡片 (Bootstrap 5.3)
   ============================================================ */
.iph-product-section-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--site-border, rgba(0, 0, 0, 0.08));
    min-height: 2.5rem;
}

.iph-product-section-title {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--site-text, #1a1a1a);
    text-align: center;
}

.iph-product-section-title i {
    color: #ffc107;
    margin-right: 0.35rem;
}

.iph-product-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--site-accent, #ed1b23);
    text-decoration: none;
    white-space: nowrap;
}

.iph-product-more:hover,
.iph-product-more:focus-visible {
    color: var(--site-accent, #b31219);
    text-decoration: underline;
}

.iph-product-unit53 {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    background-color: var(--site-surface, #ffffff);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--site-text, #1a1a1a);
}

.iph-product-unit53:hover {
    background-color: var(--site-surface, #f7f9fc);
    box-shadow: 0 .5rem 1rem var(--site-shadow, rgba(0, 0, 0, .12)) !important;
    transform: translateY(-3px);
}

.iph-product-unit53-link {
    color: inherit;
    min-width: 0;
}

.iph-product-unit53-link:focus-visible {
    outline: 2px solid var(--site-accent, #ed1b23);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.iph-product-img-wrap {
    overflow: hidden;
    background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iph-product-img-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #ffc107;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}

.iph-product-unit53:hover .iph-product-img-wrap::after {
    transform: scaleX(1);
}

.iph-product-img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    transition: transform .35s ease;
}

.iph-product-unit53:hover .iph-product-img {
    transform: scale(1.06);
}

.iph-product-img-placeholder {
    color: var(--site-text-muted, #c5c9d0);
    font-size: 2.25rem;
}

.iph-product-arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(237, 27, 35, .92);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1;
}

.iph-product-unit53:hover .iph-product-arrow {
    opacity: 1;
    transform: translateY(0);
}

.iph-product-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--site-text, #1a1a1a);
    min-height: 2.8em;
}

.iph-product-sku {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
    min-height: 1.2em;
    color: var(--site-text-muted, #6c757d);
}

.iph-product-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--site-accent, #ed1b23);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.iph-product-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--site-accent, #ed1b23);
    white-space: nowrap;
    opacity: 0.9;
}

.iph-product-unit53:hover .iph-product-cta {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .iph-product-section-title {
        font-size: 1.25rem;
    }

    .iph-product-name {
        font-size: 0.85rem;
        min-height: 2.6em;
    }

    .iph-product-body {
        padding: 0.75rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iph-product-unit53,
    .iph-product-img,
    .iph-product-arrow,
    .iph-product-img-wrap::after {
        transition: none;
    }

    .iph-product-unit53:hover {
        transform: none;
    }

    .iph-product-unit53:hover .iph-product-img {
        transform: none;
    }
}

/* ============================================================
   SupportService — 本地服務與技術支持
   ============================================================ */
.iph-support-service {
    padding: 2.5rem 0 1.25rem;
}

.iph-support-service-head {
    padding-bottom: 0.75rem;
    margin-bottom: 0;
    text-align: center;
}

.iph-support-service-heading-link {
    display: inline-block;
    color: inherit;
    text-align: center;
}

.iph-support-service-heading {
    color: var(--site-text, #1a1a1a);
    text-align: center;
}

.iph-support-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.25rem 0.75rem var(--site-shadow, rgba(11, 4, 84, 0.06));
    opacity: 0;
    transform: translateY(14px);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        opacity 0.45s ease;
}

.iph-support-service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.iph-support-service-card:hover,
.iph-support-service-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0.65rem 1.25rem var(--site-shadow, rgba(11, 4, 84, 0.12));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.2));
    color: inherit;
    text-decoration: none;
}

.iph-support-service-card.is-visible:hover,
.iph-support-service-card.is-visible:focus-visible {
    transform: translateY(-4px);
}

.iph-support-service-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.85rem;
    border-radius: 0.85rem;
    font-size: 1.35rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iph-support-service-card:hover .iph-support-service-ico,
.iph-support-service-card:focus-visible .iph-support-service-ico {
    transform: scale(1.08);
}

.iph-support-service-ico--blue {
    color: #3498db;
    background: rgba(52, 152, 219, 0.12);
    box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.2);
}

.iph-support-service-ico--green {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.2);
}

.iph-support-service-ico--purple {
    color: #9b59b6;
    background: rgba(155, 89, 182, 0.12);
    box-shadow: 0 0 0 1px rgba(155, 89, 182, 0.2);
}

.iph-support-service-ico--red {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.12);
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.2);
}

.iph-support-service-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--site-text, #212529);
    text-align: center;
    width: 100%;
}

.iph-support-service-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    color: var(--site-text-muted, #6c757d);
    text-align: center;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .iph-support-service-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .iph-support-service-card:hover,
    .iph-support-service-card:focus-visible,
    .iph-support-service-card.is-visible:hover,
    .iph-support-service-card.is-visible:focus-visible {
        transform: none;
    }

    .iph-support-service-ico {
        transition: none;
    }
}

/* ============================================================
   Our Customers / Marquee — 半透明 logo 單元底托
   ============================================================ */
.iph-customers-marquee {
    width: 100%;
}

.iph-customers-marquee-slogan-wrap {
    margin-top: 2rem;
}

.iph-customers-marquee-slogan {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 900;
    line-height: 1.35;
    color: var(--site-text, #1a1a1a);
    padding: 0.5rem 0 0.75rem;
}

.iph-customers-marquee-viewport {
    overflow: hidden;
    position: relative;
    padding: 0.85rem 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.iph-customers-marquee-track {
    display: flex;
    width: max-content;
    animation: iphCustomersMarquee 70s linear infinite;
    will-change: transform;
}

.iph-customers-marquee-viewport:hover .iph-customers-marquee-track {
    animation-play-state: paused;
}

.iph-customers-marquee-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-inline: 0.425rem;
}

.iph-customers-marquee-unit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.5rem;
    height: 5.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    /* 半透明 logo 單元：紫灰底托 */
    background:
        linear-gradient(180deg, #f0eef6 0%, #e4e0ec 100%);
    border: 1px solid rgba(11, 4, 84, 0.12);
    box-shadow:
        0 1px 2px rgba(11, 4, 84, 0.05),
        0 6px 14px rgba(11, 4, 84, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.iph-customers-marquee-unit:hover {
    transform: translateY(-3px);
    background:
        linear-gradient(180deg, #f5f3fa 0%, #ebe7f2 100%);
    border-color: rgba(11, 4, 84, 0.18);
    box-shadow:
        0 2px 4px rgba(11, 4, 84, 0.07),
        0 10px 20px rgba(11, 4, 84, 0.11);
}

.iph-customers-marquee-logo {
    max-height: 3.35rem;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.88;
    filter: saturate(0.95);
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.iph-customers-marquee-unit:hover .iph-customers-marquee-logo {
    opacity: 1;
    filter: saturate(1.05);
    transform: scale(1.04);
}

@keyframes iphCustomersMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iph-customers-marquee-track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 0.85rem;
        padding: 0 1rem;
    }

    .iph-customers-marquee-group[aria-hidden="true"] {
        display: none;
    }

    .iph-customers-marquee-viewport {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .iph-customers-marquee-unit:hover,
    .iph-customers-marquee-unit:hover .iph-customers-marquee-logo {
        transform: none;
    }
}

/* ============================================================
   InfoDetails53 — 資訊詳情頁
   ============================================================ */
.iph-info-detail-shell {
    background-color: var(--site-surface, #ffffff);
    color: var(--site-text, #1a1a1a);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
}

.iph-info-detail-header {
    background: transparent;
    padding: 1.25rem 1.5rem 0.75rem;
}

.iph-info-detail-title {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--site-text, #1a1a1a);
}

.iph-info-detail-title a.seo-kw-link,
.iph-info-detail-title a.seo-kw-link:hover,
.iph-info-detail-title a.seo-kw-link:focus-visible {
    color: inherit;
    border-bottom: none;
}

.iph-info-detail-body-wrap {
    padding: 0.5rem 1.5rem 1.5rem;
}

.iph-info-detail-meta {
    color: var(--site-text-muted, #6c757d);
    font-size: 0.9rem;
}

.iph-info-detail-meta-item {
    display: inline-flex;
    align-items: center;
}

.iph-info-detail-action {
    color: var(--site-accent, #ed1b23);
    cursor: pointer;
}

.iph-info-detail-action:hover,
.iph-info-detail-action:focus-visible {
    color: var(--site-navy, #0b0454);
}

.iph-info-detail-lead {
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--site-accent, #ed1b23);
    background: linear-gradient(90deg, rgba(237, 27, 35, 0.06) 0%, transparent 100%);
    color: var(--site-text, #1a1a1a);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.55;
}

.iph-info-detail-hero img {
    max-height: 420px;
    object-fit: contain;
}

.iph-info-detail-body,
.iph-info-detail-content {
    color: var(--site-text, #1a1a1a);
    font-size: 1.05rem;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.iph-info-detail-content p,
.iph-info-detail-content li,
.iph-info-detail-content td,
.iph-info-detail-content span,
.iph-info-detail-content font {
    font-family: "Microsoft YaHei", "Microsoft JhengHei UI", "Segoe UI", sans-serif;
    font-size: 1.15em;
    line-height: 1.65;
}

.iph-info-detail-content a {
    word-break: break-all;
}

.iph-info-detail-content img {
    max-width: 100%;
    height: auto;
}

/* Markdown／產品描述 HTML：表格與標題吃 --site-*（不改 MarkDownFromTypro.css） */
.iph-info-detail-content table {
    width: 100%;
    max-width: 100%;
    margin: 0.75rem 0 1.25rem;
    border-collapse: collapse;
    color: var(--site-text, #1a1a1a);
    background: transparent;
}

.iph-info-detail-content table th,
.iph-info-detail-content table td {
    padding: 0.55rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    color: inherit;
    background: transparent;
}

.iph-info-detail-content table th {
    font-weight: 700;
    text-align: left;
}

.iph-info-detail-content table tr:last-child th,
.iph-info-detail-content table tr:last-child td {
    border-bottom-color: transparent;
}

.iph-info-detail-content h1,
.iph-info-detail-content h2,
.iph-info-detail-content h3,
.iph-info-detail-content h4,
.iph-info-detail-content h5,
.iph-info-detail-content h6 {
    color: var(--site-text, #1a1a1a);
    font-weight: 800;
    margin-top: 1.25rem;
    margin-bottom: 0.65rem;
}

.iph-info-detail-content blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--site-accent, #ed1b23);
    background: var(--site-bg, rgba(11, 4, 84, 0.04));
    color: var(--site-text-muted, #6c757d);
}

.iph-info-detail-content code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--site-bg, #f4f5f7);
    color: var(--site-text, #1a1a1a);
    font-size: 0.92em;
}

.iph-info-detail-content pre {
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-bg, #f4f5f7);
    overflow-x: auto;
}

.iph-info-detail-content hr {
    border: 0;
    border-top: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    margin: 1.25rem 0;
}

.iph-info-detail-related {
    background-color: var(--site-surface, #ffffff);
    color: var(--site-text, #1a1a1a);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1)) !important;
    border-radius: 0.75rem;
}

.iph-info-detail-related-head {
    background: transparent;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    color: var(--site-text, #1a1a1a);
    padding: 0.85rem 1rem;
}

.iph-info-detail-more {
    color: var(--site-accent, #ed1b23);
    font-weight: 600;
    text-decoration: none;
}

.iph-info-detail-more:hover,
.iph-info-detail-more:focus-visible {
    text-decoration: underline;
    color: var(--site-navy, #0b0454);
}

.iph-rightpad-title {
    color: var(--site-text, #1a1a1a);
    font-weight: 600;
}

.iph-rightpad-title:hover,
.iph-rightpad-title:focus-visible {
    color: var(--site-accent, #ed1b23);
}

.iph-rightpad-sub {
    color: var(--site-text-muted, #6c757d);
}

/* 側欄 Contact / TopicRecomm 共用表面 */
.iph-info-detail-aside-block .card {
    background-color: var(--site-surface, #ffffff);
    color: var(--site-text, #1a1a1a);
    border-color: var(--site-border-strong, rgba(25, 135, 84, 0.45));
    border-radius: 0.75rem;
    overflow: hidden;
}

.iph-info-detail-aside-block .card-header {
    background-color: var(--site-bg, #f7f8fa);
    color: var(--site-text, #1a1a1a);
    border-bottom-color: var(--site-border, rgba(11, 4, 84, 0.1));
}

.iph-info-detail-aside-block .list-group-item {
    background-color: transparent;
    color: var(--site-text, #1a1a1a);
    border-color: var(--site-border, rgba(11, 4, 84, 0.08));
}

.iph-info-detail-aside-block .list-group-item a,
.iph-info-detail-aside-block .card-body a {
    color: inherit;
}

.iph-info-detail-aside-block .text-secondary-emphasis,
.iph-info-detail-aside-block .text-muted {
    color: var(--site-text-muted, #6c757d) !important;
}

/* ============================================================
   HRMS — 系統實施 前後比較（PaintPointCompare）
   ============================================================ */
.iph-hrms-compare-heading {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--site-text, #1a1a1a);
    margin: 0;
}

.iph-hrms-compare-card {
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.25rem 0.75rem var(--site-shadow, rgba(11, 4, 84, 0.06));
    color: var(--site-text, #1a1a1a);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

.iph-hrms-compare-card[data-iph-reveal] {
    transform: translateY(24px) scale(0.985);
}

.iph-hrms-compare-card[data-iph-reveal].is-visible {
    transform: translateY(0) scale(1);
}

.iph-hrms-compare-list li[data-iph-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.iph-hrms-compare-list li[data-iph-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.iph-hrms-compare-card--before {
    border-top: 3px solid #adb5bd;
}

.iph-hrms-compare-card--after {
    border-top: 3px solid var(--site-accent, #ed1b23);
}

.iph-hrms-compare-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    color: var(--site-text, #1a1a1a);
}

.iph-hrms-compare-card--before .iph-hrms-compare-card-head i {
    color: #6c757d;
    margin-top: 0.15rem;
}

.iph-hrms-compare-card--after .iph-hrms-compare-card-head i {
    color: #e6a800;
    margin-top: 0.15rem;
}

.iph-hrms-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iph-hrms-compare-list li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.55rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--site-text, #212529);
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.06));
}

.iph-hrms-compare-list li:last-child {
    border-bottom: none;
}

.iph-hrms-compare-card--before .iph-hrms-compare-list li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.85rem;
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid #dc3545;
    border-radius: 50%;
    box-sizing: border-box;
}

.iph-hrms-compare-card--after .iph-hrms-compare-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 1.2rem;
    font-weight: 700;
    color: #6f42c1;
    font-size: 0.95rem;
    line-height: 1.4;
}

.iph-hrms-compare-foot {
    border-top: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
}

.iph-hrms-compare-foot-note {
    color: var(--site-text-muted, #6c757d);
    font-size: 0.95rem;
}

.iph-hrms-compare-cta {
    font-size: 1rem;
    font-weight: 600;
    color: var(--site-navy, #0b0454);
    background-color: var(--site-bg, #f0f2f5);
    border: 1px solid var(--site-border-strong, rgba(11, 4, 84, 0.18));
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
}

.iph-hrms-compare-cta:hover,
.iph-hrms-compare-cta:focus-visible {
    color: #ffffff;
    background-color: var(--site-accent, #ed1b23);
    border-color: var(--site-accent, #ed1b23);
}

.iph-hrms-compare-cta i {
    color: #198754;
}

.iph-hrms-compare-cta:hover i,
.iph-hrms-compare-cta:focus-visible i {
    color: #ffffff;
}

/* ============================================================
   HRMS — 降本增效 / 特色 / 組織 / 考勤（ArchitectFeatures）
   ============================================================ */
.iph-hrms-section-head {
    padding-bottom: 0.85rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
}

.iph-hrms-section-title {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--site-text, #1a1a1a);
    margin: 0 0 0.5rem;
}

/* ============================================================
   AiBox — 區頭／標題（Appearance：Light 深字，Dark 白字）
   ============================================================ */
.iph-aibox-fire-title {
    display: block;
    padding-left: 0;
    margin-left: 0;
    font-size: clamp(1.75rem, 4vw, 3.125rem);
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
}

.iph-aibox-head {
    padding-bottom: 0.95rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
}

.iph-aibox-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-accent, #ed1b23);
    margin: 0;
}

.iph-aibox-title {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--site-text, #1a1a1a);
    margin: 0 0 0.55rem;
}

.iph-aibox-title::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 3px;
    margin: 0.65rem auto 0;
    border-radius: 2px;
    background: var(--site-accent, #ed1b23);
}

.iph-aibox-sub {
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--site-text-muted, #5c6570);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.iph-aibox-lead,
.iph-aibox-overview {
    color: var(--site-text, #1a1a1a);
}

.iph-hrms-section-sub {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--site-text-muted, #6c757d);
}

.iph-hrms-divider {
    height: 2.5rem;
    background:
        linear-gradient(180deg, transparent 0%, var(--site-border, rgba(11, 4, 84, 0.08)) 48%, transparent 100%);
    border: 0;
    margin: 0;
}

.iph-hrms-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 1.25rem 1.15rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.25rem 0.75rem var(--site-shadow, rgba(11, 4, 84, 0.06));
    color: var(--site-text, #1a1a1a);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.iph-hrms-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.65rem 1.25rem var(--site-shadow, rgba(11, 4, 84, 0.12));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.18));
}

.iph-hrms-feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.85rem;
    border-radius: 0.75rem;
    font-size: 1.25rem;
}

.iph-hrms-feature-ico--blue {
    color: #3498db;
    background: rgba(52, 152, 219, 0.14);
    box-shadow: 0 0 0 1px rgba(52, 152, 219, 0.22);
}

.iph-hrms-feature-ico--green {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.14);
    box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.22);
}

.iph-hrms-feature-ico--purple {
    color: #9b59b6;
    background: rgba(155, 89, 182, 0.14);
    box-shadow: 0 0 0 1px rgba(155, 89, 182, 0.22);
}

.iph-hrms-feature-ico--amber {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.14);
    box-shadow: 0 0 0 1px rgba(243, 156, 18, 0.22);
}

.iph-hrms-feature-ico--teal {
    color: #1abc9c;
    background: rgba(26, 188, 156, 0.14);
    box-shadow: 0 0 0 1px rgba(26, 188, 156, 0.22);
}

.iph-hrms-feature-ico--red {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.14);
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.22);
}

.iph-hrms-feature-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--site-text, #212529);
}

.iph-hrms-feature-desc {
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--site-text-muted, #6c757d);
}

.iph-hrms-hanging-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.6rem var(--site-shadow, rgba(11, 4, 84, 0.05));
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

.iph-hrms-hanging-card.is-visible:hover {
    box-shadow: 0 0.65rem 1.25rem var(--site-shadow, rgba(11, 4, 84, 0.12));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.18));
}

.iph-hrms-hanging-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    font-size: 1.15rem;
    color: var(--site-navy, #0b0454);
    background: rgba(11, 4, 84, 0.08);
}

/* HRMS CIC — screenshot selling cards */
.iph-hrms-cic-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.15rem 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.25rem 0.75rem var(--site-shadow, rgba(11, 4, 84, 0.06));
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

.iph-hrms-cic-card:hover {
    box-shadow: 0 0.65rem 1.25rem var(--site-shadow, rgba(11, 4, 84, 0.12));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.18));
}

.iph-hrms-cic-card[data-iph-reveal].is-visible:hover {
    transform: translateY(-3px) scale(1);
}

.iph-hrms-cic-card-img {
    display: block;
    width: 100%;
    max-height: 280px;
    margin: 0.75rem 0 1rem;
    object-fit: contain;
    border-radius: 0.5rem;
    background: rgba(11, 4, 84, 0.03);
}

.iph-hrms-org-card {
    position: relative;
    min-height: 16rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #1a2332;
    background-image: var(--iph-hrms-org-bg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 62%;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.25s ease;
}

.iph-hrms-org-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.32);
    border-color: rgba(255, 255, 255, 0.18);
}

.iph-hrms-org-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 20, 30, 0.92) 0%, rgba(15, 20, 30, 0.55) 55%, rgba(15, 20, 30, 0.35) 100%);
    transition: background 0.35s ease;
}

.iph-hrms-org-card:hover::before {
    background: linear-gradient(160deg, rgba(15, 20, 30, 0.88) 0%, rgba(15, 20, 30, 0.45) 55%, rgba(15, 20, 30, 0.28) 100%);
}

.iph-hrms-org-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 16rem;
    padding: 1.5rem;
    color: #ffffff;
}

.iph-hrms-org-card-title {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    max-width: 14rem;
}

.iph-hrms-org-card-tag {
    align-self: flex-start;
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* HRMS Org — 區頭（eyebrow + accent underline） */
.iph-hrms-org-head {
    padding-bottom: 0.95rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
}

.iph-hrms-org-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-accent, #ed1b23);
    margin: 0;
}

.iph-hrms-org-title {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(1.45rem, 2.8vw, 2.15rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--site-text, #1a1a1a);
    margin: 0 0 0.55rem;
}

.iph-hrms-org-title::after {
    content: "";
    display: block;
    width: 2.75rem;
    height: 3px;
    margin: 0.65rem auto 0;
    border-radius: 2px;
    background: var(--site-accent, #ed1b23);
}

.iph-hrms-org-sub {
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    font-weight: 500;
    line-height: 1.55;
    color: var(--site-text-muted, #6c757d);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.iph-hrms-mini-card {
    padding: 1rem 0.95rem;
    border-radius: 0.65rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.08));
    background-color: var(--site-surface, #ffffff);
    height: 100%;
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

.iph-hrms-mini-card:hover {
    box-shadow: 0 0.5rem 1rem var(--site-shadow, rgba(11, 4, 84, 0.1));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.16));
}

.iph-hrms-mini-card[data-iph-reveal].is-visible:hover {
    transform: translateY(-3px) scale(1);
}

.iph-hrms-mini-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.55rem;
    border-radius: 0.5rem;
    color: var(--site-navy, #0b0454);
    background: rgba(11, 4, 84, 0.07);
    font-size: 1rem;
}

.iph-hrms-mini-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.4rem;
    color: var(--site-text, #212529);
}

@media (prefers-reduced-motion: reduce) {
    .iph-hrms-feature-card {
        transition: none;
    }

    .iph-hrms-feature-card:hover {
        transform: none;
    }
}

/* HRMS — 薪酬功能業務簡介（HrmsPayroll） */
.iph-hrms-payroll-lead-title {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 0.75rem;
    color: var(--site-text, #1a1a1a);
}

.iph-hrms-payroll-illust {
    display: block;
    max-height: 180px;
    width: auto;
    margin-top: 0.75rem;
    object-fit: contain;
}

/* HRMS — 整合門禁（HrmsIntegrateACS）：區頭內副標間距 */
.iph-hrms-acs .iph-hrms-section-head .iph-hrms-feature-desc {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* HRMS — 為什麼選擇我們（WhyChoiseUs） */
.iph-hrms-why-tagline {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--site-text, #212529);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.35rem;
}

.iph-hrms-why-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--site-navy, #0b0454);
    background: rgba(11, 4, 84, 0.08);
    box-shadow: 0 0 0 1px rgba(11, 4, 84, 0.12);
}

.iph-hrms-why-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--site-accent, #ed1b23);
    text-decoration: none;
}

.iph-hrms-why-link:hover,
.iph-hrms-why-link:focus-visible {
    color: var(--site-navy, #0b0454);
    text-decoration: underline;
}

/* ============================================================
   About Us（sh0006_AboutUs 等）
   ============================================================ */
.iph-about-title {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--site-text, #1a1a1a);
    margin: 0 0 0.5rem;
}

.iph-about-shop {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--site-text-muted, #6c757d);
}

.iph-about-block {
    padding: 1.25rem 1.35rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.65rem var(--site-shadow, rgba(11, 4, 84, 0.05));
}

.iph-about-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--site-text, #1a1a1a);
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
}

.iph-about-body {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--site-text-muted, #5c636a);
}

.iph-about-body strong {
    color: var(--site-text, #1a1a1a);
    font-weight: 700;
}

/* ============================================================
   通用滾動入場（front-section-reveal.js → .is-visible）
   ============================================================ */
/* Modal／離屏內容勿用 reveal；若誤加則強制可見 */
.modal [data-iph-reveal],
.modal [data-iph-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-iph-reveal] {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

[data-iph-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 特色功能：標題／副標／三卡入場更明顯 */
.iph-hrms-special .iph-hrms-section-title[data-iph-reveal],
.iph-hrms-special .iph-hrms-section-sub[data-iph-reveal] {
    transform: translateY(18px);
}

.iph-hrms-special .iph-hrms-section-title[data-iph-reveal].is-visible,
.iph-hrms-special .iph-hrms-section-sub[data-iph-reveal].is-visible {
    transform: translateY(0);
}

.iph-hrms-special .iph-hrms-hanging-card[data-iph-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
}

/* CIC 截圖賣點：標題／副標／三卡入場 */
.iph-hrms-cic-sub .iph-hrms-section-title[data-iph-reveal],
.iph-hrms-cic-sub .iph-hrms-section-sub[data-iph-reveal] {
    transform: translateY(18px);
}

.iph-hrms-cic-sub .iph-hrms-section-title[data-iph-reveal].is-visible,
.iph-hrms-cic-sub .iph-hrms-section-sub[data-iph-reveal].is-visible {
    transform: translateY(0);
}

.iph-hrms-cic-sub .iph-hrms-cic-card[data-iph-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
}

/* 特色／能力卡：入場時圖示彈入 */
.iph-hrms-feature-card[data-iph-reveal] .iph-hrms-feature-ico,
.iph-hrms-hanging-card[data-iph-reveal] .iph-hrms-hanging-ico,
.iph-hrms-mini-card[data-iph-reveal] .iph-hrms-mini-ico {
    opacity: 0.35;
    transform: scale(0.72);
    transition:
        opacity 0.4s ease 0.08s,
        transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.08s;
}

.iph-hrms-feature-card[data-iph-reveal].is-visible .iph-hrms-feature-ico,
.iph-hrms-hanging-card[data-iph-reveal].is-visible .iph-hrms-hanging-ico,
.iph-hrms-mini-card[data-iph-reveal].is-visible .iph-hrms-mini-ico {
    opacity: 1;
    transform: scale(1);
}

.iph-hrms-feature-card[data-iph-reveal].is-visible:hover,
.iph-hrms-hanging-card[data-iph-reveal].is-visible:hover {
    transform: translateY(-3px) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-iph-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .iph-hrms-feature-card[data-iph-reveal] .iph-hrms-feature-ico,
    .iph-hrms-hanging-card[data-iph-reveal] .iph-hrms-hanging-ico,
    .iph-hrms-mini-card[data-iph-reveal] .iph-hrms-mini-ico {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .iph-hrms-compare-list li[data-iph-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .iph-hrms-feature-card[data-iph-reveal].is-visible:hover,
    .iph-hrms-hanging-card[data-iph-reveal].is-visible:hover,
    .iph-hrms-mini-card[data-iph-reveal].is-visible:hover,
    .iph-hrms-cic-card[data-iph-reveal].is-visible:hover {
        transform: none;
    }
}

/* About Us — 入場（由 front-about.js 加 .is-visible） */
.iph-about [data-iph-about-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.iph-about [data-iph-about-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.iph-about-block.is-visible .iph-about-section-title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: 0.55rem;
    background: var(--site-accent, #ed1b23);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: iphAboutAccent 0.45s ease 0.15s forwards;
}

@keyframes iphAboutAccent {
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iph-about [data-iph-about-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .iph-about-block.is-visible .iph-about-section-title::after {
        animation: none;
        transform: scaleX(1);
    }
}

/* ============================================================
   ServiceFlow — 技術支援／定價
   ============================================================ */
.iph-svc-flow-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem;
    border: 0;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--site-accent, #ed1b23);
    box-shadow: 0 0.25rem 0.75rem rgba(237, 27, 35, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.iph-svc-flow-cta:hover,
.iph-svc-flow-cta:focus-visible {
    background: var(--site-navy, #0b0454);
    box-shadow: 0 0.35rem 1rem rgba(11, 4, 84, 0.28);
    transform: translateY(-1px);
}

.iph-svc-flow-team-wrap {
    max-width: 900px;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-surface, #ffffff);
}

.iph-svc-flow-scroll-x {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.iph-svc-flow-scroll-x::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.iph-svc-price-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.45rem;
    vertical-align: middle;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--site-accent, #ed1b23);
}

.iph-svc-price-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.15rem 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background-color: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.65rem var(--site-shadow, rgba(11, 4, 84, 0.06));
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.25s ease;
}

.iph-svc-price-card.is-visible:hover {
    box-shadow: 0 0.65rem 1.25rem var(--site-shadow, rgba(11, 4, 84, 0.12));
    border-color: var(--site-border-strong, rgba(11, 4, 84, 0.18));
    transform: translateY(-3px) scale(1);
}

.iph-svc-price-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.65rem;
    color: var(--site-text, #1a1a1a);
}

.iph-svc-price-card-amount {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 800;
    margin: 0 0 0.85rem;
    color: var(--site-navy, #0b0454);
}

.iph-svc-price-card-unit {
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 0.15rem;
    color: var(--site-text-muted, #6c757d);
}

.iph-svc-price-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--site-text-muted, #6c757d);
}

.iph-svc-price-card-list li {
    padding: 0.2rem 0;
    border-top: 1px solid var(--site-border, rgba(11, 4, 84, 0.08));
}

.iph-svc-price-card-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.iph-svc-price-compare-title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--site-text, #1a1a1a);
}

.iph-svc-price-table-wrap {
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.65rem var(--site-shadow, rgba(11, 4, 84, 0.06));
}

.iph-svc-price-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--site-text, #1a1a1a);
    color: var(--site-text, #1a1a1a);
    border-color: var(--site-border, rgba(11, 4, 84, 0.12));
    margin-bottom: 0;
}

.iph-svc-price-table th,
.iph-svc-price-table td {
    vertical-align: middle;
}

.iph-svc-dev-card {
    max-width: 48rem;
    padding: 1.35rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.65rem var(--site-shadow, rgba(11, 4, 84, 0.06));
}

/* ContactUs — form card */
.iph-contact {
    max-width: 42rem;
}

.iph-contact-card {
    padding: 1.5rem 1.35rem 1.6rem;
    border-radius: 0.75rem;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-surface, #ffffff);
    box-shadow: 0 0.2rem 0.65rem var(--site-shadow, rgba(11, 4, 84, 0.06));
}

.iph-contact-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--site-text, #1a1a1a);
    margin-bottom: 0.35rem;
}

.iph-contact-input.form-control {
    color: var(--site-text, #1a1a1a);
    background-color: var(--site-surface, #ffffff);
    border-color: var(--site-border, rgba(11, 4, 84, 0.18));
}

.iph-contact-input.form-control:focus {
    border-color: var(--site-accent, #ed1b23);
    box-shadow: 0 0 0 0.2rem rgba(237, 27, 35, 0.15);
}

.iph-contact-input.form-control::placeholder {
    color: var(--site-text-muted, #6c757d);
    opacity: 0.85;
}

textarea.iph-contact-input.form-control {
    width: 100%;
    resize: vertical;
    min-height: 7rem;
}

.iph-contact-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    color: var(--site-text-muted, #6c757d);
}

.iph-contact-loading.hidden {
    display: none !important;
}

.iph-contact-submit {
    min-width: 8rem;
}

.iph-contact-toast-body {
    color: var(--site-text, #1a1a1a);
    background: transparent;
}

.modal .iph-contact-card {
    max-width: none;
    padding: 0.25rem 0.15rem 0.5rem;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.iph-contact-modal-content {
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    background: var(--site-surface, #ffffff);
    color: var(--site-text, #1a1a1a);
}

.iph-contact-modal-header {
    border-bottom-color: var(--site-border, rgba(11, 4, 84, 0.12));
}

.iph-contact-modal-header .modal-title {
    font-weight: 700;
    color: var(--site-text, #1a1a1a);
}

.iph-contact-modal-body {
    padding-top: 0.75rem;
}

/* Product detail Prod53 */
.iph-prod-detail-shell {
    background: var(--site-surface, #ffffff);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.1));
    border-radius: 0.75rem;
    color: var(--site-text, #1a1a1a);
}

.iph-prod-detail-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--site-text, #1a1a1a);
    margin: 0;
}

.iph-prod-detail-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--site-text-muted, #6c757d);
}

.iph-prod-carousel {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--site-bg, #f4f5f7);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.08));
}

.iph-prod-carousel-img {
    max-height: 400px;
    object-fit: contain;
    margin: 0 auto;
}

.iph-prod-carousel-ctrl {
    background-color: rgba(26, 26, 26, 0.45);
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.2);
}

.iph-prod-cart {
    background: var(--site-surface, #ffffff);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12)) !important;
    border-radius: 0.75rem;
    color: var(--site-text, #1a1a1a);
}

.iph-prod-cart-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
}

.iph-prod-cart-title {
    line-height: 1.4;
    color: var(--site-text, #1a1a1a);
}

.iph-prod-cart-divider {
    border: 0;
    border-top: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    opacity: 1;
}

.iph-prod-cart-label,
.iph-prod-cart-muted {
    color: var(--site-text-muted, #6c757d);
}

.iph-prod-cart-field-label {
    color: var(--site-text, #1a1a1a);
}

.iph-prod-cart-price {
    color: var(--site-accent, #ed1b23);
}

.iph-prod-cart-link {
    color: var(--site-navy, #0b0454);
}

.iph-prod-cart-qty {
    max-width: 150px;
}

.iph-prod-cart-qty .btn,
.iph-prod-cart-qty .form-control {
    border-color: var(--site-border, rgba(11, 4, 84, 0.18));
    color: var(--site-text-muted, #6c757d);
    background: var(--site-surface, #ffffff);
}

.iph-prod-cart-qty .form-control {
    width: 52px;
    border-left: 0;
    border-right: 0;
}

.iph-prod-cart-qty .btn:hover,
.iph-prod-cart-qty .btn:focus-visible {
    background: var(--site-bg, #f4f5f7);
    color: var(--site-text, #1a1a1a);
}

.iph-prod-cart-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 1px solid var(--site-accent, #ed1b23);
    color: var(--site-accent, #ed1b23);
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.iph-prod-cart-buy:hover,
.iph-prod-cart-buy:focus-visible {
    background: var(--site-accent, #ed1b23);
    color: #ffffff;
}

.iph-prod-spec-pic img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.iph-prod-spec-text {
    color: var(--site-text, #1a1a1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
}

.sys_item_spec .sys_spec_text li {
    height: auto;
    float: none;
    margin: 0;
}

.iph-prod-faq-title {
    font-weight: 800;
    color: var(--site-text, #1a1a1a);
}

.iph-prod-faq-item {
    background: var(--site-surface, #ffffff);
    border: 1px solid var(--site-border, rgba(11, 4, 84, 0.12));
    overflow: hidden;
}

.iph-prod-faq-item + .iph-prod-faq-item {
    border-top: 0;
}

.iph-prod-faq-btn {
    font-weight: 600;
    color: var(--site-text, #1a1a1a);
    background: var(--site-surface, #ffffff);
    box-shadow: none !important;
}

.iph-prod-faq-btn:not(.collapsed) {
    color: var(--site-text, #1a1a1a);
    background: var(--site-bg, #f4f5f7);
}

.iph-prod-faq-body {
    color: var(--site-text-muted, #6c757d);
    background: var(--site-surface, #ffffff);
}