/* Shared visual layer for the Chinese and English homepages. */
.carousel-container {
    isolation: isolate;
}

.carousel-slide { touch-action: pan-y; }
.carousel-img { user-select: none; -webkit-user-drag: none; }
.carousel-btn { z-index: 30; pointer-events: auto; }
.carousel-indicators { z-index: 31; }
.carousel-overlay { pointer-events: none; }
.carousel-overlay a,
.carousel-overlay button { pointer-events: auto; }

.carousel-container::before {
    background:
        linear-gradient(90deg, rgba(9, 18, 39, 0.8) 0%, rgba(9, 18, 39, 0.45) 42%, transparent 72%),
        linear-gradient(to top, rgba(9, 18, 39, 0.72) 0%, transparent 48%),
        linear-gradient(135deg, rgba(var(--color-primary-700-rgb), 0.26) 0%, transparent 56%);
}

.carousel-img {
    height: 680px;
    filter: none;
}

.carousel-container:hover .carousel-img { filter: none; transform: none; }

.carousel-overlay {
    bottom: 105px;
    left: 5%;
    right: 24px;
    max-width: 760px;
}

.carousel-title {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.75rem, 4.2vw, 3.5rem);
    letter-spacing: -0.045em;
}

.carousel-subtitle { max-width: 580px; line-height: 1.8; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); color: rgba(255,255,255,0.88); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.16em; }
.hero-kicker::before { content: ''; width: 30px; height: 1px; background: currentColor; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-7); }
.hero-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-pill); color: var(--text-on-primary); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hero-action.primary { background: var(--gradient-primary); border-color: transparent; box-shadow: 0 10px 24px rgba(21, 32, 82, 0.38); }
.hero-action:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); box-shadow: 0 12px 28px rgba(9,18,39,0.28); }
.hero-action.primary:hover { background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600)); }
.carousel-btn,
.carousel-indicators { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-action:focus-visible { outline: 3px solid rgba(255,255,255,0.82); outline-offset: 3px; }

.carousel-counter { position: absolute; top: 34px; right: 5%; z-index: 10; color: rgba(255,255,255,0.85); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.carousel-counter strong { color: #fff; font-size: var(--fs-md); }

.feature-section { position: relative; overflow: hidden; padding: 96px 8%; background: linear-gradient(160deg, var(--surface-muted) 0%, var(--surface-base) 50%, var(--surface-sunken) 100%); }
.feature-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(var(--color-primary-500-rgb),0.04) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--color-primary-300-rgb),0.04) 0%, transparent 50%); pointer-events: none; }
.section-intro { position: relative; z-index: 1; max-width: 670px; margin-bottom: 48px; }
.section-eyebrow { color: var(--color-primary-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.16em; }
.section-intro h2 { margin: var(--space-3) 0 var(--space-4); color: var(--text-primary); font-size: 2.625rem; letter-spacing: -0.04em; }
.section-intro p { margin: 0; color: var(--text-secondary); line-height: var(--lh-relaxed); }
.feature-container { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; background: var(--surface-base); border: 1px solid var(--border-default); overflow: visible; counter-reset: feature; }
.feature-container::before { display: none; }
.feature-box {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: 50px 40px 38px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border-default);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    counter-increment: feature;
    overflow: hidden;
}
.feature-box:last-child { border-right: 0; }
.feature-box::before { top: 0; right: auto; width: 58px; height: 3px; transform: scaleX(1); background: var(--color-primary); }
.feature-box::after { content: '0' counter(feature); position: absolute; top: 21px; right: 26px; color: rgba(var(--color-primary-500-rgb), 0.08); font-size: 5rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.08em; }
.feature-box:hover { transform: none; background: linear-gradient(145deg, rgba(var(--color-primary-500-rgb), 0.045), transparent 55%); border-color: var(--border-default); box-shadow: none; }
.feature-icon { width: 48px; height: 48px; margin-bottom: var(--space-7); background: transparent; border: 1px solid var(--border-primary); border-radius: 50%; box-shadow: none; }
.feature-icon::before { display: none; }
.feature-icon svg { width: 24px; height: 24px; fill: var(--color-primary-strong); }
.feature-box:hover .feature-icon { transform: none; box-shadow: none; background: var(--gradient-primary-soft); }
.feature-box:hover .feature-icon svg { transform: none; }
.feature-box h3 { margin-bottom: var(--space-4); padding-bottom: 0; font-size: 1.5rem; letter-spacing: -0.03em; }
.feature-box h3::after { display: none; }
.feature-box p { flex: 1; margin-bottom: var(--space-7); line-height: 1.85; letter-spacing: 0; }
.feature-link { position: static; align-self: flex-start; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.feature-link::before { display: none; }
.feature-link:hover { color: var(--color-primary-dark); background: transparent; border-color: transparent; box-shadow: none; transform: translateX(4px); }

@media (max-width: 1024px) and (min-width: 600px) {
    .carousel-img { height: 620px; }
    .carousel-overlay { bottom: 78px; left: 30px; right: 30px; }
}

@media (max-width: 599px) {
    .carousel-img { height: 540px; }
    .carousel-title { font-size: 2.4rem; }
    .feature-section { padding: var(--space-16) 5%; }
    .feature-container { grid-template-columns: 1fr; gap: 0; }
    .feature-box { min-height: 0; padding: 34px 28px 30px; border-right: 0; border-bottom: 1px solid var(--border-default); }
    .feature-box:last-child { border-bottom: 0; }
    .hero-kicker { margin-bottom: var(--space-3); }
    .hero-actions { margin-top: var(--space-5); gap: 10px; }
    .hero-action { min-height: 42px; padding: 0 17px; }
    .carousel-counter { top: 20px; right: 20px; }
}

@media (max-width: 480px) {
    .carousel-img { height: 480px; }
    .carousel-title { font-size: 2rem; margin-bottom: var(--space-2); }
    .carousel-subtitle { line-height: 1.55; }
    .hero-kicker { font-size: 0.7rem; }
    .hero-actions { margin-top: var(--space-4); }
}

/* Certificate conveyor — images load lazily and duplicated slides reuse cache. */
.credentials-conveyor { overflow: hidden; padding: 76px 0; background: var(--color-slate-900); color: var(--text-on-primary); }
.credentials-conveyor__header { max-width: 1180px; margin: 0 auto 30px; padding: 0 5%; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.credentials-conveyor__eyebrow { display: block; color: var(--color-primary-200); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.14em; }
.credentials-conveyor h2 { margin: 9px 0 0; font-size: 2.25rem; letter-spacing: -0.04em; }
.credentials-conveyor__header p { max-width: 420px; margin: 0; color: var(--text-on-dark); font-size: var(--fs-sm); line-height: 1.7; text-align: right; }
.credentials-conveyor__viewport { position: relative; overflow: hidden; }
.credentials-conveyor__viewport::before,
.credentials-conveyor__viewport::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 9%; pointer-events: none; }
.credentials-conveyor__viewport::before { left: 0; background: linear-gradient(90deg, var(--color-slate-900), transparent); }
.credentials-conveyor__viewport::after { right: 0; background: linear-gradient(-90deg, var(--color-slate-900), transparent); }
.credentials-conveyor__track { display: flex; width: max-content; gap: 14px; padding-right: 14px; animation: credentials-scroll 60s linear infinite; animation-play-state: paused; }
.credentials-conveyor__track.is-active { animation-play-state: running; }
.credentials-conveyor__track:hover { animation-play-state: paused; }
.credential-slide { flex: 0 0 164px; padding: 7px; border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; background: rgba(255,255,255,0.06); }
.credential-slide img { display: block; width: 150px; height: 205px; object-fit: contain; background: rgba(255,255,255,0.94); filter: contrast(0.94) saturate(0.82); opacity: 0.9; }
.credential-slide span { display: block; padding: 8px 2px 1px; overflow: hidden; color: var(--text-on-dark); font-size: 0.7rem; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; }
@keyframes credentials-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (max-width: 599px) { .credentials-conveyor { padding: 50px 0; } .credentials-conveyor__header { display: block; margin-bottom: 22px; } .credentials-conveyor h2 { font-size: 1.65rem; } .credentials-conveyor__header p { margin-top: 10px; text-align: left; } .credentials-conveyor__track { gap: 10px; padding-right: 10px; animation-duration: 48s; } .credential-slide { flex-basis: 126px; padding: 5px; } .credential-slide img { width: 114px; height: 156px; } }
@media (prefers-reduced-motion: reduce) { .credentials-conveyor__track { animation: none; overflow-x: auto; } }