/* =======================
   全局样式
======================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    background-color: #000;
    color: #fff;
}

/* 主题变量：便于全局调整卡片与页面配色 */
:root {
    --card-bg: #ffffff;
    --card-contrast: #f8fafc;
    /* 轻微偏色背景，用于分层 */
    --card-border: rgba(15, 23, 42, 0.05);
    --card-border-hover: rgba(79, 70, 229, 0.12);
    --card-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
}

/* 链接 */
a {
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

a:hover {
    opacity: 0.8;
}

/* =======================
   Header
======================= */
header {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
}

header .logo {
    font-size: 40px;
    font-weight: bold;
    color: #d52e71;
    flex-shrink: 0;
}

header nav {
    flex: 1 1 auto;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

header nav ul li a {
    font-weight: 500;
    color: #374151;
    padding: 5px 10px;
}

header nav ul li a:hover {
    color: #4f46e5;
}

header .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.lang-toggle {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.lang-toggle:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.lang-toggle .lang-option {
    font-weight: 500;
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.lang-toggle .lang-google-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffffff' stroke='%23a7b0bc' stroke-width='1.2'/%3E%3Crect x='5.8' y='5.6' width='9.8' height='9.8' rx='2' fill='%234285f4'/%3E%3Cpath d='M8.4 13.2h4.6M8.7 11.2h4M9.8 9.2h2' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M14.6 14.1l3.8 3.8M18.4 14.1l-3.8 3.8' stroke='%23798390' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lang-toggle .lang-option.active {
    opacity: 1;
    color: #fff;
    font-weight: 700;
}

.lang-toggle .lang-divider {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

header.sticky {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* =======================
   Hero Section
======================= */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ea091f, #e2050d);
    color: #fff;
    text-align: center;
    position: relative;
    background-image: url('img/head.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#hero h1,
#hero p {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff;
}

#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 使用可配置的线性遮罩，增强文字对比 */
    background: linear-gradient(180deg, var(--hero-overlay-start), var(--hero-overlay-end));
    z-index: 0;
}

#hero h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease forwards;
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

#hero p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    animation: fadeInUp 1.2s ease forwards;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

#hero a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.96);
    color: var(--primary);
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.901);
    transition: 0.3s;
}

#hero a:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(255, 0, 0, 0.926)
}

#hero .scroll-down {
    position: absolute;
    bottom: 20px;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: transform 0.18s ease, opacity 0.18s ease;
    animation: bounce 2s infinite;
}

#hero .scroll-down:active {
    transform: translateY(2px);
    opacity: 0.85;
}

/* =======================
   Sections
======================= */
section {
    padding: 80px 20px;
}

section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

section p {
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

/* Cards */
.card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: background-color 0.25s ease, transform 0.28s ease, box-shadow 0.28s ease;
    text-align: center;
    display: block;
    /* 支持锚点作为块级卡片 */
    text-decoration: none;
    /* 去掉 a 的下划线 */
    color: inherit;
    /* 保持文字颜色继承 */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    border-color: var(--card-border-hover);
}

/* 聚焦时的可访问边框（键盘导航可见） */
.card:focus-within {
    outline: 3px solid rgba(99, 102, 241, 0.12);
    /* 浅紫色环，提升可访问性 */
    outline-offset: 4px;
    border-color: var(--card-border-hover);
}

.card img {
    width: 80px;
    margin-bottom: 15px;
}

/* 卡片正面背景：渐变黄，适配整个页面主题 */
.card-front {
    background: linear-gradient(135deg, #fff6c2 0%, #ffe08a 45%, #ffd166 100%);
    color: #1f2937;
    /* 深色文字以保证可读性 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-front h3,
.card-front p {
    color: inherit;
}

/* 第一个卡片使用本地图片作为背景（优先于通用渐变），并添加遮罩保障可读性 */
.card-grid .card:first-child .card-front {
    background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12)), url('img/pex.webp');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    /* 图片上使用白色文字更易读 */
}

/* 第二个卡片使用另一张本地图片作为背景 */
.card-grid .card:nth-child(2) .card-front {
    background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12)), url('img/pex1.webp');
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

/* 第三个卡片使用 pex2.jpg 作为背景 */
.card-grid .card:nth-child(3) .card-front {
    background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12)), url('img/pex2.webp');
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

/* 卡片正面文字大小 */
.card-front h3 {
    font-size: 2rem;
    /* 标题大小，可按需调整 */
    line-height: 1.15;
    margin: 8px 0 6px;
    font-weight: 700;
}

/* Features 区块：按序给每张卡片设置背景图片 PY1..PY5 */
#features .card-gri .card {
    min-height: 220px;
    padding: 50px;
    color: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 32px;
    /* 增加上下间距（底部外边距） */
}

#features .card-gri .card:nth-child(1) {
    background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12)), url('img/py1.jpg');
}

#features .card-gri .card:nth-child(2) {
    background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12)), url('img/py2.webp');
}

#features .card-gri .card:nth-child(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12)), url('img/py3.webp');
}

#features .card-gri .card:nth-child(4) {
    background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12)), url('img/py4.webp');
}

#features .card-gri .card:nth-child(5) {
    background: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.12)), url('img/py5.webp');
}

/* 去掉最后一个卡片的底部外边距，避免多余空白 */
#features .card-gri .card:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {

    header {
        background: #111;
    }

    header .container {

        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 16px;
    }

    header nav {
        order: 3;
        width: 100%;
    }

    header nav ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin: 8px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    header nav ul.active {
        display: flex;
    }

    header nav ul li a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 12px !important;
    }

    header .header-actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 10px;
    }

    header .header-actions .lang-toggle {
        font-size: 0.9rem !important;
        padding: 6px 14px !important;
    }

    .mobile-toggle {
        display: inline-flex;
    }

    /* ensure hero doesn't get hidden under header */
    #hero {
        height: 78vh;
    }
}

/* =======================
   走马灯边框（可复用工具类）
   用法：在需要走马灯边框的元素上添加 class="marquee-border"
   说明：通过 ::before 使用 conic-gradient + mask 来显示环形动态边框，
   对带有背景图的卡片也友好（mask 会保留中间内容）。
======================= */
.marquee-border {
    position: relative;
    /* 保证伪元素定位正确 */
}

.marquee-border::before {
    content: '';
    position: absolute;
    inset: -4px;
    /* 扩展到元素外侧，形成边框环 */
    border-radius: calc(12px + 4px);
    background: conic-gradient(from 0deg, #ff7a7a, #ffd166, #7dd3fc, #9b5cff, #ff7a7a);
    z-index: 0;
    pointer-events: none;
    /* 使用遮罩只显示外环，保留中心透明以显示卡片内容 */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), black calc(100% - 7px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 8px), black calc(100% - 7px));
    animation: rotate-border 3s linear infinite;
}

/* 确保内容置于伪元素之上 */
.marquee-border>* {
    position: relative;
    z-index: 1;
}

@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =======================
   Gallery（两行/统一尺寸）
======================= */
.gallery-grid {
    --gallery-row-height: 240px;
    /* 可调整的行高 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, var(--gallery-row-height));
    /* 强制两行 */
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform .25s ease, filter .25s ease;
}

.gallery-grid img:hover {
    transform: scale(1.03);
    filter: brightness(1.02);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.12);
}

/* 响应式：平板变为两列三行；手机单列六行 */
/* @media (max-width:980px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 180px)
    }
}

@media (max-width:560px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 220px)
    }
} */

/* =======================
   Testimonials
======================= */
.testimonial {
    background-color: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-style: italic;
    margin-bottom: 20px;
}

/* Testimonials section styles extracted from index.html */
section#testimonials {
    padding: 60px 20px;
    background: linear-gradient(135deg, #1a1a1a, #2b2b2b);
    color: #fff;
    text-align: center;
}

section#testimonials .container {
    max-width: 1000px;
    margin: 0 auto;
}

section#testimonials h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

section#testimonials p.lead {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 40px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.testimonial-card {
    background: #262626;
    border-radius: 12px;
    padding: 25px;
    text-align: left;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    color: inherit;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.testimonial-card .quote-mark {
    font-size: 2rem;
    color: #ffcc00;
    margin-bottom: 10px;
}

.testimonial-card p {
    color: #ddd;
    font-style: italic;
}

.testimonial-card .meta {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.testimonial-card .meta img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.testimonial-card .meta .name {
    color: #fff;
    font-weight: bold;
}

/* =======================
   CTA
======================= */
#join {
    background-color: #01000a;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

#join a {
    background-color: #fff;
    color: #4f46e5;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
}

#join a:hover {
    background-color: #e5e7eb;
}

/* CTA / Button utilities */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor: pointer
}

.btn-primary {
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18)
}

.btn-accent {
    background: linear-gradient(90deg, #ff7a7a, #ffb199);
    color: #fff
}

/* 浮动按钮样式：更明显的浮起效果 + 轻微放大 */
.btn-floating {
    will-change: transform;
    transform: translateZ(0);
    transition: transform .24s cubic-bezier(.2, .9, .2, 1), box-shadow .24s cubic-bezier(.2, .9, .2, 1)
}

.btn-floating:hover {
    transform: translateY(-10px) scale(1.06);
    box-shadow: 0 40px 80px rgba(2, 6, 23, 0.18);
    filter: brightness(1.02)
}

.btn-floating:active {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12)
}

/* Ensure anchor fallback in hero if no class set */
#hero a {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09)
}

#hero a:hover {
    transform: translateY(-2px)
}

/* =======================
   FAQ
======================= */
.faq-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.faq-item h3 {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}

.faq-item h3::after {
    content: '+';
    position: absolute;
    right: 0;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.faq-item.active h3::after {
    transform: rotate(45deg);
}

.faq-item p {
    display: none;
    margin-top: 10px;
    color: #4b5563;
}

/* =======================
   Footer
======================= */
footer {
    background: linear-gradient(180deg, #141414, #0c0c0c);
    text-align: center;
    padding: 56px 20px;
    color: #b8bcc6;
    font-size: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .footer-inner {
    max-width: 1080px;
    margin: 0 auto;
}

footer .footer-brand {
    color: #f5f7fb;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 18px;
}

footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0 auto 22px;
    max-width: 980px;
    text-align: left;
}

footer .footer-col {
    min-width: 0;
}

footer .footer-col h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: #fff;
}

footer .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

footer .footer-col a {
    color: #b8bcc6;
    font-weight: 500;
}

footer .footer-col a:hover {
    color: #ffffff;
}

footer .social-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

footer .social-links a {
    color: #cfd4de;
    font-weight: 500;
}

footer .social-links a:hover {
    color: #ffffff;
}

@media (max-width: 980px) {
    footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    footer .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* =======================
   Animations
======================= */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* =======================
   Responsive
======================= */
/* @media screen and (max-width: 768px) { */
#hero h1 {
    font-size: 2.5rem;
}

#hero p {
    font-size: 1.2rem;
}

section h2 {
    font-size: 2rem;
}

.card img {
    width: 60px;
}

/* } */

:root {
    --bg: #000;
    --text: #ffffff;
    --muted: #9ca3af;
    --primary: #4f46e5;
    /* 主色 */
    --accent: #ff6b6b;
    /* 强调色 */
    --card-bg: #ffffff;
    --glass: rgba(255, 255, 255, 0.6);
    --radius: 12px;
    /* Hero overlay variables */
    --hero-overlay-start: rgba(0, 0, 0, 0.60);
    --hero-overlay-end: rgba(0, 0, 0, 0.35);
}

/* =======================
   Banner / 长条背景工具类（可用于任意 section）
   用法示例：
   <section class="section-banner bg-solid-primary">...</section>
   或：
   <section class="section-banner" style="--banner-image:url('https://images.unsplash.com/…')">...</section>
======================= */
.section-banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--hero-text-color, #fff);
    padding: 48px 0;
}

/* 支持通过 CSS 变量覆盖背景图片或颜色 */
.section-banner {
    background-image: var(--banner-image, none);
    background-color: var(--banner-color, transparent)
}

/* 预置纯色 */
.bg-solid-primary {
    --banner-color: var(--primary);
}

.bg-solid-muted {
    --banner-color: #1f2937;
}

.bg-solid-soft {
    --banner-color: rgba(79, 70, 229, 0.06);
    color: var(--text)
}

/* 预置网络图片示例（请替换为你喜欢的图） */
.bg-image-1 {
    --banner-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1350&q=80');
}

.bg-image-2 {
    --banner-image: url('https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=1350&q=80');
}

/* 预置纹理/图案（SVG data URI，低流量） */
.bg-pattern-1 {
    --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='200'><rect width='100%' height='100%' fill='%23f8fafc'/><circle cx='50' cy='50' r='30' fill='%23eef2ff' opacity='0.6'/></svg>");
}

/* 可调遮罩（在需要时为横幅加遮罩层，保证文字可读） */
.section-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--banner-overlay, rgba(0, 0, 0, 0.3));
    pointer-events: none
}

.section-banner>* {
    position: relative;
    z-index: 1
}

/* 响应式微调 */
/* @media (max-width:780px) {
    .section-banner {
        padding: 36px 0
    }
}

@media (max-width:420px) {
    .section-banner {
        padding: 28px 0
    }
} */

/* =======================
   使用说明：
   - 使用 .section-banner 将样式应用到任意 section
   - 优先通过内联 style 或类设置 --banner-image 或 --banner-color
   - 如果使用网络图，建议将图片下载到 public/img 并使用本地路径以避免外部依赖
======================= */

/* 强制手机端为一行横排导航 */
@media screen and (max-width: 768px) {

    /* header layout */
    header {
        background: #111;
    }

    header .container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 16px;
        gap: 12px;
    }

    /* Logo: keep horizontal and left-aligned */
    header .logo {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        font-size: 1.8rem !important;
        color: #ffcc00 !important;
        margin-right: 8px;
        display: inline-block;
        line-height: 1;
    }

    /* Navigation: collapse by default on mobile */
    header nav {
        flex: 1 1 auto;
    }

    header nav ul {
        display: none !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin: 8px 0 0;
        padding: 12px 0 0;
        list-style: none;
        white-space: normal !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    header nav ul.active {
        display: flex !important;
    }

    header nav ul li {
        margin: 0;
    }

    header nav ul li a {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        font-size: 0.95rem !important;
        color: #fff !important;
        padding: 10px 12px !important;
        line-height: 1;
        display: block;
        width: 100%;
        text-align: center;
    }

    header .header-actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 10px;
    }

    /* show mobile toggle on mobile */
    .mobile-toggle {
        display: inline-flex !important;
    }

    /* ensure hero doesn't get hidden under header */
    #hero {
        height: 78vh;
    }
}

/* =======================
   Extracted inline/page styles from index.html
   (centralized here so index.html is clean)
======================= */

/* Header specific inline styles */
header#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    color: #fff;
    z-index: 999;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

header#header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
}

header#header .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffcc00;
    flex-shrink: 0;
}

header#header nav {
    flex: 1 1 auto;
}

header#header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    gap: 20px;
}

header#header nav ul li {
    margin: 0;
}

header#header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    white-space: nowrap;
}

header#header .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #fff;
}

/* sticky header & nav hover moved from inline <style> */
header#header.sticky {
    background: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

header#header nav ul li a:hover {
    color: #ffcc00;
}

html[lang="en-MY"] header#header .container {
    max-width: 1380px;
    gap: 12px;
}

html[lang="en-MY"] header#header .logo {
    font-size: 1.55rem;
}

html[lang="en-MY"] header#header nav ul {
    gap: 14px;
}

html[lang="en-MY"] header#header nav ul li a {
    font-size: 0.95rem;
    padding: 5px 6px;
}

html[lang="en-MY"] header#header .header-actions {
    gap: 8px;
}

/* About section (moved inline styles) */
section#about {
    padding: 60px 20px;
    background: linear-gradient(135deg, #1a1a1a, #2b2b2b);
    color: #fff;
    text-align: center;
}

section#about .container {
    max-width: 1100px;
    margin: 0 auto;
}

section#about h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

section#about p {
    font-size: 1.1rem;
    color: #ddd;
    margin-bottom: 40px;
}

/* Cards inside about/features used dark card background */
#about .card,
#features .card {
    background: #262626;
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

#about .card div,
#features .card div {
    font-size: 2rem;
    margin-bottom: 15px;
}

#about .card h3,
#features .card h3 {
    margin-bottom: 10px;
}

#about .card p,
#features .card p {
    color: #bbb;
}

/* hover effects (moved from inline <style>) */
#about .card:hover,
#features .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Gallery item styles moved from inline attributes */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    display: block;
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    font-size: 0.95rem;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* testimonials moved */
section#testimonials {
    padding: 60px 20px;
    background: linear-gradient(135deg, #1a1a1a, #2b2b2b);
    color: #fff;
    text-align: center;
}

section#testimonials .container {
    max-width: 1000px;
    margin: 0 auto;
}

section#testimonials h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

section#testimonials p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 40px;
}

.testimonial-card {
    background: #262626;
    border-radius: 12px;
    padding: 25px;
    text-align: left;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.testimonial-card p {
    color: #ddd;
    font-style: italic;
}

/* FAQ moved from inline <style> */
#faq {
    padding: 60px 20px;
    background: #181818;
    color: #fff;
    text-align: center;
}

#faq .container {
    max-width: 900px;
    margin: 0 auto;
}

#faq h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

#faq p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 40px;
}

#faq .faq-list {
    text-align: left;
}

#faq details {
    background: #262626;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffcc00;
    outline: none;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

#faq summary+p {
    margin-top: 0;
    padding: 0 18px 18px;
    text-align: left;
    color: #ddd;
}

#faq summary+div {
    padding: 0 18px 18px;
    text-align: left;
    color: #ddd;
}

#faq .faq-list a {
    color: #89b5ff;
    text-decoration: underline;
}

#faq .faq-list a:hover {
    color: #bcd4ff;
}

#faq details[open] summary {
    color: #fff;
}

#faq summary::-webkit-details-marker {
    display: none;
}

#faq summary::after {
    content: "➕";
    font-size: 1.2rem;
    transition: transform 0.3s;
    margin-left: 16px;
    flex: 0 0 auto;
}

#faq details[open] summary::after {
    content: "➖";
}

/* About section: make the three cards a centered horizontal row */
#about .card-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    padding: 0 12px;
}

/* Give each about-card a fixed max width so three fit nicely */
#about .card {
    flex: 0 0 320px;
    /* fixed base width, won't grow */
    max-width: 320px;
}

/* On small screens allow wrapping and full width cards */
@media screen and (max-width: 720px) {
    #about .card-grid {
        flex-wrap: wrap;
    }

    #about .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Features section: same horizontal centered layout as About */
#features .card-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    padding: 0 12px;
}

#features .card {
    flex: 0 0 320px;
    max-width: 320px;
}

@media screen and (max-width: 720px) {
    #features .card-grid {
        flex-wrap: wrap;
    }

    #features .card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Local JB section: 2x2 desktop layout with full-width media cards */
#local-jb .container {
    max-width: 1120px;
    margin: 0 auto;
}

#local-jb .card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

#local-jb .card {
    background: #262626;
    border-radius: 14px;
    overflow: hidden;
    padding: 0 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#local-jb .card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center top;
    background: #111;
    display: block;
    margin: 0 0 14px;
}

#local-jb .card h3,
#local-jb .card p {
    padding: 0 16px;
}

#local-jb .card p {
    color: #cfd4db;
    margin-bottom: 0;
}

#local-jb .container > p a {
    color: #8fc3ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#local-jb .container > p a:hover {
    color: #c7e2ff;
}

#local-jb .local-jb-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#local-jb .local-jb-actions .btn {
    min-width: 200px;
    text-align: center;
}

@media screen and (max-width: 1100px) {
    #local-jb .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #local-jb .card img {
        aspect-ratio: 4 / 5;
    }
}

@media screen and (max-width: 700px) {
    #local-jb .card-grid {
        grid-template-columns: 1fr;
    }

    #local-jb .local-jb-actions .btn {
        min-width: 0;
        width: 100%;
    }
}

/* Keep the page and hero edge-to-edge on narrow/mobile viewports. */
html,
body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

header#header {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

#hero {
    width: 100%;
    max-width: none;
}

@media screen and (max-width: 768px) {
    #header,
    #header.sticky {
        padding: 3px 8px !important;
    }

    header#header .container {
        padding: 3px 10px;
        min-height: 0;
        gap: 0 12px !important;
        row-gap: 0;
    }

    #header nav {
        height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    #header:has(nav ul.active) {
        background: #111;
    }

    #header:has(nav ul.active) nav {
        height: auto;
        margin-top: 8px;
    }

    #header .logo-icon {
        width: 30px !important;
        height: 36px !important;
    }

    #hero {
        width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        min-height: 100svh;
        height: 100vh;
        height: 100svh;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background-size: cover;
        background-position: center center;
    }

    html[lang="en-MY"] #hero h1 {
        font-size: clamp(1.55rem, 6.8vw, 2.2rem);
        line-height: 1.15;
        margin-bottom: 44px;
    }

    #hero p {
        margin-bottom: 64px;
    }

    #hero::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(7, 10, 22, 0.72) 100%);
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }

    #hero .hero-actions {
        width: min(78vw, 300px);
        gap: 18px;
        transform: translateY(18px);
    }

    #hero .hero-actions a {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.98) 100%);
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 0.98rem;
    }
}

@media screen and (min-width: 769px) {
    #header,
    #header.sticky {
        padding: 5px 16px !important;
    }

    header#header .container {
        max-width: 1380px !important;
        padding: 8px 16px !important;
    }

    #header .logo-icon {
        width: 48px !important;
        height: 52px !important;
    }
}

/* Keep the language switch and menu toggle anchored in the same top-right position
   on both language pages, regardless of the label length. */
header#header .header-actions {
    flex-shrink: 0;
    margin-left: auto;
}

header#header .lang-switch {
    width: 154px;
    min-width: 154px;
    flex: 0 0 154px;
}

header#header .lang-switch a {
    width: 54px;
    min-width: 54px;
    flex: 0 0 54px;
    padding-left: 0;
    padding-right: 0;
}

header#header .mobile-toggle {
    flex: 0 0 44px;
}