/* ============================================================
   EXPO DESIGN OVERLAY
   作用：body.expo-theme — 以 expo style 重新詮釋頁面
   light variant 為預設（無 .day-mode 才是 light 喔？不，原專案
   邏輯：預設無 class = night，加 .day-mode = day）
   ▸ body.expo-theme.day-mode → expo LIGHT（cool gray 底、純黑大標）
   ▸ body.expo-theme（無 day-mode）→ expo DARK（near-black 底）
   ============================================================ */

/* ---------- LIGHT variant tokens（含 day-mode）----------
   ▸ design-2025.css 既有的 sketch 變數（--paper / --ink / --accent ...）
     在這裡被覆蓋為 expo 對應色，讓 HTML 內現有 inline style="color: var(--xxx)"
     自動拿到 expo 顏色，不必逐處改 inline → class。
   ▸ 額外新增 --ex-* token 給 expo overlay CSS 自己用。 */
body.expo-theme {
    /* 覆蓋 sketch 變數（影響 HTML inline style 與 design-2025.css 規則） */
    --paper: var(--ex-bg);
    --paper-dark: var(--ex-surface);
    --ink: var(--ex-text);
    --ink-light: var(--ex-text-2);
    --ink-wash: var(--ex-text-3);
    --accent: var(--ex-link);
    --accent-hover: #0a5fa8;
    --sketch-border: var(--ex-border);
    --glass: rgba(0, 0, 0, 0.04);
    --glass-border: rgba(0, 0, 0, 0.06);
    --sketch-radius: 16px;
    --gray: var(--ex-text-2);

    /* expo 自家 token — source of truth（其他規則皆以 var(--ex-*) 引用） */
    --ex-bg: #f0f0f3;
    --ex-surface: #ffffff;
    --ex-ink: #000000;
    --ex-text: #1c2024;
    --ex-text-2: #60646c;
    --ex-text-3: #b0b4ba;
    --ex-border: #e0e1e6;
    --ex-border-strong: #d9d9e0;
    --ex-link: #0d74ce;
    --ex-shadow-1: rgba(0, 0, 0, 0.08) 0px 3px 6px, rgba(0, 0, 0, 0.07) 0px 2px 4px;
    --ex-shadow-2: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.05) 0px 3px 6px;

    background: var(--ex-bg);
    color: var(--ex-text);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

body.expo-theme .container {
    max-width: 1280px;
}

/* ---------- Navigation ---------- */
body.expo-theme nav,
body.expo-theme .navbar {
    background: rgba(240, 240, 243, 0.7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent !important;
}
body.expo-theme nav.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid var(--ex-border) !important;
}
body.expo-theme .logo {
    color: var(--ex-ink) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
}
body.expo-theme .nav-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    white-space: nowrap;
}
body.expo-theme .nav-links a .zh {
    order: 1;
    font-family: 'Inter', 'Noto Sans TC', 'PingFang TC', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--ex-text) !important;
    letter-spacing: 0 !important;
    margin-top: 0 !important;
    white-space: nowrap;
}
body.expo-theme .nav-links a .en {
    order: 2;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    color: var(--ex-text-2) !important;
    letter-spacing: 0.8px !important;
    margin-top: 2px;
    text-transform: uppercase;
}
body.expo-theme .nav-links a:hover .zh,
body.expo-theme .nav-links a.active .zh {
    color: var(--ex-ink) !important;
}
body.expo-theme .nav-links a:hover .en,
body.expo-theme .nav-links a.active .en {
    color: var(--ex-text) !important;
}
body.expo-theme .nav-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
body.expo-theme .nav-cta .zh {
    order: 1;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}
body.expo-theme .nav-cta .en {
    order: 2;
    font-size: 0.65rem !important;
    margin-top: 2px;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
}

/* ---------- Hero ---------- */
body.expo-theme .hero-wrapper {
    background: var(--ex-bg);
    padding-top: 120px;
}
body.expo-theme .tech-grid-bg {
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
}
body.expo-theme .hero-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ex-text);
    background: var(--ex-surface);
    border: 1px solid var(--ex-border-strong);
    border-radius: 9999px;
    padding: 6px 14px;
}
body.expo-theme .hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: var(--ex-ink);
    letter-spacing: -3px;
    line-height: 1.05;
    font-size: clamp(2.75rem, 6.5vw, 4.5rem);
}
body.expo-theme .hero-title .highlight {
    color: var(--ex-link);
}
body.expo-theme .hero-desc {
    font-family: 'Inter', sans-serif;
    color: var(--ex-text-2);
    border-left: none;
    padding-left: 0;
    font-size: 1.125rem;
    line-height: 1.55;
    max-width: 540px;
}
body.expo-theme .hero-desc strong {
    color: var(--ex-text);
    font-weight: 600;
}
body.expo-theme .hero-image-container {
    border: 1px solid var(--ex-border);
    border-radius: 24px;
    background: var(--ex-surface);
    padding: 8px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 30px,
        rgba(0, 0, 0, 0.05) 0px 4px 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.expo-theme .hero-image-container:hover {
    transform: translateY(-2px);
    box-shadow:
        rgba(0, 0, 0, 0.12) 0px 16px 36px,
        rgba(0, 0, 0, 0.06) 0px 5px 10px;
}
body.expo-theme .hero-image-container img {
    border-radius: 18px;
}
body.expo-theme .hero-decoration {
    display: none;
}

/* ---------- Buttons ---------- */
body.expo-theme .btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
    padding: 12px 26px;
    border-radius: 9999px;
    border-width: 1px;
}
body.expo-theme .btn-primary {
    background: var(--ex-ink);
    color: var(--ex-surface);
    border-color: var(--ex-ink);
    box-shadow: none;
}
body.expo-theme .btn-primary:hover {
    background: var(--ex-text);
    border-color: var(--ex-text);
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, 0.12) 0 8px 18px;
}
body.expo-theme .btn-outline-light {
    background: var(--ex-surface);
    color: var(--ex-text);
    border: 1px solid var(--ex-border-strong);
}
body.expo-theme .btn-outline-light:hover {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-ink);
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, 0.08) 0 6px 14px;
}

/* ---------- Sections ---------- */
body.expo-theme .services-wrapper {
    background: var(--ex-bg);
    padding: 96px 0;
}
body.expo-theme .services-wrapper[style*="paper-dark"],
body.expo-theme section[style*="paper-dark"] {
    background: var(--ex-surface) !important;
}
body.expo-theme .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--ex-ink);
    letter-spacing: -2px;
    line-height: 1.1;
    font-size: clamp(2rem, 4.5vw, 3rem);
}
body.expo-theme .section-title::after {
    background: var(--ex-ink);
}
body.expo-theme .section-head p {
    color: var(--ex-text-2) !important;
    font-size: 1.125rem;
    font-family: 'Inter', sans-serif;
}
body.expo-theme .section-head p a {
    color: var(--ex-link) !important;
}

/* ---------- Cards (feature / pricing / exp / intro / service / plan / stat / portfolio / process) ---------- */
body.expo-theme .feature-box,
body.expo-theme .feature-card,
body.expo-theme .exp-card,
body.expo-theme .pricing-card,
body.expo-theme .plan-card,
body.expo-theme .stat-card,
body.expo-theme .intro-card,
body.expo-theme .service-card,
body.expo-theme .service-item-modern,
body.expo-theme .portfolio-card,
body.expo-theme .process-step {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 16px;
    box-shadow: none;
    padding: 32px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.expo-theme .feature-box:hover,
body.expo-theme .feature-card:hover,
body.expo-theme .exp-card:hover,
body.expo-theme .pricing-card:hover,
body.expo-theme .plan-card:hover,
body.expo-theme .stat-card:hover,
body.expo-theme .intro-card:hover,
body.expo-theme .service-card:hover,
body.expo-theme .service-item-modern:hover,
body.expo-theme .portfolio-card:hover,
body.expo-theme .process-step:hover {
    transform: translateY(-3px);
    border-color: var(--ex-text);
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 3px 6px,
        rgba(0, 0, 0, 0.07) 0px 2px 4px;
    background: var(--ex-surface);
}
body.expo-theme .feature-box h3,
body.expo-theme .feature-card h3,
body.expo-theme .exp-card h3,
body.expo-theme .intro-card h3,
body.expo-theme .pricing-card h3,
body.expo-theme .plan-card h3,
body.expo-theme .stat-card h3,
body.expo-theme .service-card h3,
body.expo-theme .service-item-modern h3,
body.expo-theme .portfolio-card h3,
body.expo-theme .process-step h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.25px;
    color: var(--ex-ink) !important;
}
body.expo-theme .feature-box h3 span,
body.expo-theme .feature-card h3 span,
body.expo-theme .exp-card h3 i,
body.expo-theme .intro-card h3 i,
body.expo-theme .service-card h3 i,
body.expo-theme .process-step h3 span {
    color: var(--ex-link) !important;
}
body.expo-theme .feature-box p,
body.expo-theme .feature-card p,
body.expo-theme .exp-card .exp-desc,
body.expo-theme .pricing-card p,
body.expo-theme .plan-card p,
body.expo-theme .stat-card p,
body.expo-theme .intro-card p,
body.expo-theme .service-card p,
body.expo-theme .service-item-modern p,
body.expo-theme .portfolio-card p,
body.expo-theme .process-step p {
    color: var(--ex-text-2) !important;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}
/* stat-card 數字會用得很大；給點額外調性 */
body.expo-theme .stat-card .stat-number,
body.expo-theme .stat-card strong {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: var(--ex-ink) !important;
    letter-spacing: -1.5px;
}

/* portfolio-card-body 內文容器 */
body.expo-theme .portfolio-card-body {
    background: transparent;
}

/* pricing-table / pricing-table-container */
body.expo-theme .pricing-table,
body.expo-theme .pricing-table-container {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 16px;
}
body.expo-theme .pricing-table th {
    background: var(--ex-bg);
    color: var(--ex-ink);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
body.expo-theme .pricing-table td {
    color: var(--ex-text);
    border-color: var(--ex-border);
}

/* 額外按鈕變體：pf-btn、demo-btn 走跟 btn-primary 同樣的 pill 規則 */
body.expo-theme .pf-btn,
body.expo-theme .demo-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0;
    padding: 12px 26px;
    border-radius: 9999px;
    border: 1px solid var(--ex-ink);
    background: var(--ex-ink);
    color: var(--ex-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.expo-theme .pf-btn:hover,
body.expo-theme .demo-btn:hover {
    background: var(--ex-text);
    border-color: var(--ex-text);
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, 0.12) 0 8px 18px;
}
body.expo-theme .feature-box img {
    border-radius: 12px !important;
    box-shadow:
        rgba(0, 0, 0, 0.08) 0px 3px 6px,
        rgba(0, 0, 0, 0.07) 0px 2px 4px;
    margin-bottom: 24px !important;
}

/* ---------- Arrow links ---------- */
body.expo-theme .arrow-link {
    color: var(--ex-text);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
body.expo-theme .arrow-link:hover {
    color: var(--ex-link);
}

/* ---------- Pricing ---------- */
body.expo-theme .pricing-card.featured {
    border: 2px solid var(--ex-ink);
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 20px,
        rgba(0, 0, 0, 0.05) 0px 3px 6px;
}
body.expo-theme .pricing-card.featured:hover {
    box-shadow:
        rgba(0, 0, 0, 0.14) 0px 16px 30px,
        rgba(0, 0, 0, 0.06) 0px 4px 8px;
}
body.expo-theme .pricing-badge {
    background: var(--ex-ink);
    color: var(--ex-surface);
    top: -14px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 9999px;
    border-bottom-left-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.18) 0 4px 12px;
}
body.expo-theme .price-tag {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    color: var(--ex-ink);
    letter-spacing: -1.5px;
    font-size: 2.25rem;
}
body.expo-theme .price-tag span {
    color: var(--ex-text-3);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0;
}
body.expo-theme .feature-list li {
    color: var(--ex-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    padding-left: 24px;
}
body.expo-theme .feature-list li::before {
    content: "✓";
    color: var(--ex-link);
    font-weight: 700;
}
body.expo-theme .feature-list li strong {
    color: var(--ex-ink);
    font-weight: 600;
}

/* ---------- Tech marquee ---------- */
body.expo-theme .tech-marquee-wrapper {
    background: var(--ex-surface);
    border-top: 1px solid var(--ex-border);
    border-bottom: 1px solid var(--ex-border);
}
body.expo-theme .tech-marquee-wrapper::before {
    background: linear-gradient(to right, var(--ex-surface), transparent);
}
body.expo-theme .tech-marquee-wrapper::after {
    background: linear-gradient(to left, var(--ex-surface), transparent);
}
body.expo-theme .tech-item {
    color: var(--ex-text-2);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
body.expo-theme .tech-item:hover {
    color: var(--ex-ink);
    text-shadow: none;
}
body.expo-theme .tech-item:hover i {
    filter: none;
}

/* ---------- Ultimate tags ---------- */
body.expo-theme .ultimate-tag {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 9999px;
    color: var(--ex-text);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 10px 22px;
    box-shadow: rgba(0, 0, 0, 0.04) 0 1px 2px;
}
body.expo-theme .ultimate-tag:hover {
    background: var(--ex-ink);
    color: var(--ex-surface);
    border-color: var(--ex-ink);
    box-shadow: rgba(0, 0, 0, 0.12) 0 6px 14px;
    transform: scale(1.04);
}

/* ---------- Lightbox / Process flow images ---------- */
body.expo-theme .lightbox-trigger img,
body.expo-theme .maintenance-visual {
    border: 1px solid var(--ex-border) !important;
    border-radius: 24px !important;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 24px,
        rgba(0, 0, 0, 0.05) 0px 3px 6px !important;
}
body.expo-theme .lightbox-content img {
    border: 1px solid var(--ex-surface);
    border-radius: 16px;
}
body.expo-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.85);
}
body.expo-theme .lightbox-close {
    color: var(--ex-surface);
}
body.expo-theme .lightbox-close:hover {
    color: var(--ex-surface);
    opacity: 1;
}

/* ---------- Read more / small CTA ---------- */
body.expo-theme .read-more-btn {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border-strong);
    color: var(--ex-text);
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 8px 18px;
    font-size: 0.85rem;
}
body.expo-theme .read-more-btn:hover {
    background: var(--ex-ink);
    color: var(--ex-surface);
    border-color: var(--ex-ink);
}

/* ---------- Text highlight ---------- */
body.expo-theme .text-highlight {
    color: var(--ex-ink);
    border-bottom: 2px solid var(--ex-link);
}

/* ---------- Ivan intro / 內嵌大區塊 ---------- */
body.expo-theme .ivan-intro {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 24px;
    box-shadow:
        rgba(0, 0, 0, 0.05) 0px 4px 12px;
}

/* ---------- 內嵌 var() inline style 處理 ----------
   多數透過上方 token 覆蓋已自動套用 expo 用色（color/background/border-color/
   sketch-radius），不再需要字串匹配。
   保留唯一一條：sketch 風 4px 偏移硬陰影 → 換成 expo whisper shadow，
   這個改寫不是純顏色 token 能解決。 */
body.expo-theme [style*="box-shadow: 4px 4px 0 var(--ink-wash)"] {
    box-shadow: var(--ex-shadow-2) !important;
}
/* 把 sketch 不規則 border-radius 在 inline 場景也兜成 16px。
   --sketch-radius 已被 token 覆蓋為 16px，inline `border-radius: var(--sketch-radius)`
   會自動生效，這條僅作為防呆（萬一未來 inline 換成寫死 hex 形式）。 */
body.expo-theme [style*="border-radius: var(--sketch-radius)"] {
    border-radius: 16px !important;
}

/* ---------- CTA footer ---------- */
body.expo-theme .cta-footer {
    background: var(--ex-ink) !important;
    color: var(--ex-surface) !important;
    border-radius: 32px;
    margin: 96px 24px;
    padding: 80px 40px !important;
    border: none !important;
    text-align: center;
}
body.expo-theme .cta-footer .container {
    text-align: center;
}
body.expo-theme .cta-footer h2,
body.expo-theme .cta-footer h3 {
    color: var(--ex-surface) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -2px;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin-bottom: 24px;
}
body.expo-theme .cta-footer p {
    color: var(--ex-text-3) !important;
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 auto 16px;
}
body.expo-theme .cta-footer .btn,
body.expo-theme .cta-footer .btn-black {
    margin-top: 24px;
}
body.expo-theme .cta-footer .btn-primary {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}
body.expo-theme .cta-footer .btn-primary:hover {
    background: var(--ex-bg);
    color: var(--ex-ink);
    border-color: var(--ex-bg);
}
body.expo-theme .cta-footer .btn-outline-light {
    background: transparent;
    color: var(--ex-surface);
    border-color: #555860;
}
body.expo-theme .cta-footer .btn-outline-light:hover {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}
/* scope .btn-black 到 cta-footer 內，避免影響其他頁面的同名按鈕 */
body.expo-theme .cta-footer .btn-black {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border: 1px solid var(--ex-surface);
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 14px 32px;
    font-size: 1rem;
    box-shadow: none;
}
body.expo-theme .cta-footer .btn-black:hover {
    background: var(--ex-bg);
    transform: translateY(-1px);
    box-shadow: rgba(255, 255, 255, 0.15) 0 6px 18px;
}

/* ---------- Footer ---------- */
body.expo-theme footer {
    background: var(--ex-surface) !important;
    color: var(--ex-text-2) !important;
    border-top: 1px solid var(--ex-border) !important;
}
body.expo-theme footer a {
    color: var(--ex-text) !important;
}
body.expo-theme footer a:hover {
    color: var(--ex-ink) !important;
}

/* ---------- Skip link ---------- */
body.expo-theme .skip-link {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border: 1px solid var(--ex-ink);
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
}

/* ---------- 字體統一 ---------- */
body.expo-theme,
body.expo-theme h1,
body.expo-theme h2,
body.expo-theme h3,
body.expo-theme h4,
body.expo-theme h5,
body.expo-theme p,
body.expo-theme li,
body.expo-theme button,
body.expo-theme a {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

/* ---------- Mobile spacing ---------- */
@media (max-width: 768px) {
    body.expo-theme .services-wrapper {
        padding: 64px 0;
    }
    body.expo-theme .hero-title {
        letter-spacing: -1.5px;
    }
    body.expo-theme .section-title {
        letter-spacing: -1.5px;
    }
    body.expo-theme .cta-footer {
        margin: 64px 16px;
        padding: 56px 24px !important;
        border-radius: 24px;
    }
}

/* ---------- Nav RWD ----------
   ≤1280px: hamburger / 1281-1440px: 純中文水平 / ≥1441px: 中英文雙語水平
   注意 — 此區段（含 #main-nav 在 selector 內）specificity 較高，
   下方 dark variant 需用同等 specificity 的 nav#main-nav 才能蓋過。 */
@media (max-width: 1280px) {
    body.expo-theme .nav-links {
        display: none !important;
    }
    body.expo-theme .mobile-menu {
        display: flex !important;
    }
    body.expo-theme.day-mode nav#main-nav {
        background: rgba(240, 240, 243, 0.85) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--ex-border) !important;
    }
    body.expo-theme:not(.day-mode) nav#main-nav {
        background: rgba(11, 11, 12, 0.85) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--ex-border) !important;
    }
}
@media (min-width: 1281px) and (max-width: 1440px) {
    body.expo-theme .nav-links {
        gap: 18px;
    }
    body.expo-theme .nav-links a .en,
    body.expo-theme .nav-cta .en {
        display: none;
    }
    body.expo-theme .nav-cta {
        padding: 6px 14px !important;
    }
}
body.expo-theme .nav-container {
    flex-wrap: nowrap;
    gap: 16px;
}
body.expo-theme .nav-links {
    flex-wrap: nowrap;
    gap: 22px;
}

/* ---------- Theme toggle ---------- */
body.expo-theme .theme-toggle {
    border-radius: 9999px;
    border: 1px solid var(--ex-border-strong);
    color: var(--ex-text);
    width: 44px;
    height: 44px;
}
body.expo-theme .theme-toggle:hover {
    background: var(--ex-ink);
    color: var(--ex-surface);
    border-color: var(--ex-ink);
}

/* ---------- Nav CTA pill ---------- */
body.expo-theme .nav-cta {
    border-radius: 9999px !important;
    border: 1px solid var(--ex-ink) !important;
    color: var(--ex-ink) !important;
    padding: 8px 18px !important;
}
body.expo-theme .nav-cta .en,
body.expo-theme .nav-cta .zh {
    color: var(--ex-ink) !important;
}
body.expo-theme .nav-cta:hover {
    background: var(--ex-ink) !important;
}
body.expo-theme .nav-cta:hover .en,
body.expo-theme .nav-cta:hover .zh {
    color: var(--ex-surface) !important;
}

/* ---------- Mobile nav overlay ---------- */
body.expo-theme .mobile-nav {
    background: rgba(255, 255, 255, 0.98) !important;
}
body.expo-theme .mobile-nav a {
    color: var(--ex-text) !important;
    font-family: 'Inter', sans-serif;
}
body.expo-theme .mobile-menu span {
    background-color: var(--ex-ink) !important;
}

/* ============================================================
   EXPO DARK VARIANT
   ▸ body.expo-theme（無 .day-mode）→ 切換為 dark
   ▸ body.expo-theme.day-mode → 上面 light variant
   ============================================================ */
body.expo-theme:not(.day-mode) {
    /* sketch 變數覆蓋為 expo dark 用色 */
    --paper: var(--ex-bg);
    --paper-dark: var(--ex-surface);
    --ink: var(--ex-text);
    --ink-light: var(--ex-text-2);
    --ink-wash: var(--ex-text-3);
    --accent: var(--ex-link);
    --accent-hover: #3a8be8;
    --sketch-border: var(--ex-border);
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --gray: var(--ex-text-2);

    /* expo dark token — source of truth */
    --ex-bg: #0b0b0c;
    --ex-surface: #16171a;
    --ex-ink: #ffffff;
    --ex-text: #e4e4e7;
    --ex-text-2: #a1a1aa;
    --ex-text-3: #71717a;
    --ex-border: #26282d;
    --ex-border-strong: #3a3d44;
    --ex-link: #4a9eff;
    --ex-shadow-1: rgba(0, 0, 0, 0.5) 0px 8px 18px, rgba(0, 0, 0, 0.3) 0px 3px 6px;
    --ex-shadow-2: rgba(0, 0, 0, 0.5) 0px 16px 40px, rgba(0, 0, 0, 0.3) 0px 6px 12px;

    background: var(--ex-bg);
    color: var(--ex-text);
}

/* Nav */
body.expo-theme:not(.day-mode) nav,
body.expo-theme:not(.day-mode) .navbar {
    background: rgba(11, 11, 12, 0.7) !important;
    border-bottom: 1px solid transparent !important;
}
body.expo-theme:not(.day-mode) nav.scrolled,
body.expo-theme:not(.day-mode) nav#main-nav {
    border-bottom-color: var(--ex-border) !important;
}
body.expo-theme:not(.day-mode) .logo {
    color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .nav-links a {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .nav-links a .zh {
    color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .nav-links a .en {
    color: var(--ex-text-3) !important;
}
body.expo-theme:not(.day-mode) .nav-cta .zh {
    color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .nav-cta .en {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .nav-links a:hover .zh,
body.expo-theme:not(.day-mode) .nav-links a.active .zh {
    color: var(--ex-link) !important;
}
body.expo-theme:not(.day-mode) .nav-links a:hover .en,
body.expo-theme:not(.day-mode) .nav-links a.active .en {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .nav-cta {
    border: 1px solid var(--ex-ink) !important;
    color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .nav-cta:hover {
    background: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .nav-cta:hover .en,
body.expo-theme:not(.day-mode) .nav-cta:hover .zh {
    color: var(--ex-bg) !important;
}
body.expo-theme:not(.day-mode) .theme-toggle {
    border: 1px solid var(--ex-border-strong);
    color: var(--ex-ink);
}
body.expo-theme:not(.day-mode) .theme-toggle:hover {
    background: var(--ex-ink);
    color: var(--ex-bg);
    border-color: var(--ex-ink);
}
body.expo-theme:not(.day-mode) .mobile-menu span {
    background-color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .mobile-nav {
    background: rgba(11, 11, 12, 0.98) !important;
}
body.expo-theme:not(.day-mode) .mobile-nav a {
    color: var(--ex-text) !important;
}

/* Hero */
body.expo-theme:not(.day-mode) .hero-wrapper {
    background: var(--ex-bg);
}
body.expo-theme:not(.day-mode) .tech-grid-bg {
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}
body.expo-theme:not(.day-mode) .hero-label {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ex-border);
    color: var(--ex-text);
}
body.expo-theme:not(.day-mode) .hero-title {
    color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .hero-title .highlight {
    color: var(--ex-link);
}
body.expo-theme:not(.day-mode) .hero-desc {
    color: var(--ex-text-2);
}
body.expo-theme:not(.day-mode) .hero-desc strong {
    color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .hero-image-container {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    box-shadow:
        rgba(0, 0, 0, 0.5) 0px 16px 40px,
        rgba(0, 0, 0, 0.3) 0px 6px 12px;
}

/* Buttons */
body.expo-theme:not(.day-mode) .btn-primary {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .btn-primary:hover {
    background: var(--ex-text);
    border-color: var(--ex-text);
    box-shadow: rgba(255, 255, 255, 0.15) 0 8px 20px;
}
body.expo-theme:not(.day-mode) .btn-outline-light {
    background: transparent;
    color: var(--ex-surface);
    border: 1px solid var(--ex-border-strong);
}
body.expo-theme:not(.day-mode) .btn-outline-light:hover {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}

/* Sections */
body.expo-theme:not(.day-mode) .services-wrapper {
    background: var(--ex-bg);
}
body.expo-theme:not(.day-mode) .services-wrapper[style*="paper-dark"],
body.expo-theme:not(.day-mode) section[style*="paper-dark"] {
    background: var(--ex-surface) !important;
}
body.expo-theme:not(.day-mode) .section-title {
    color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .section-title::after {
    background: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .section-head p {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .section-head p a {
    color: var(--ex-link) !important;
}

/* Cards */
body.expo-theme:not(.day-mode) .feature-box,
body.expo-theme:not(.day-mode) .feature-card,
body.expo-theme:not(.day-mode) .exp-card,
body.expo-theme:not(.day-mode) .pricing-card,
body.expo-theme:not(.day-mode) .plan-card,
body.expo-theme:not(.day-mode) .stat-card,
body.expo-theme:not(.day-mode) .intro-card,
body.expo-theme:not(.day-mode) .service-card,
body.expo-theme:not(.day-mode) .service-item-modern,
body.expo-theme:not(.day-mode) .portfolio-card,
body.expo-theme:not(.day-mode) .process-step {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    box-shadow: none;
}
body.expo-theme:not(.day-mode) .feature-box:hover,
body.expo-theme:not(.day-mode) .feature-card:hover,
body.expo-theme:not(.day-mode) .exp-card:hover,
body.expo-theme:not(.day-mode) .pricing-card:hover,
body.expo-theme:not(.day-mode) .plan-card:hover,
body.expo-theme:not(.day-mode) .stat-card:hover,
body.expo-theme:not(.day-mode) .intro-card:hover,
body.expo-theme:not(.day-mode) .service-card:hover,
body.expo-theme:not(.day-mode) .service-item-modern:hover,
body.expo-theme:not(.day-mode) .portfolio-card:hover,
body.expo-theme:not(.day-mode) .process-step:hover {
    border-color: var(--ex-link);
    background: var(--ex-surface);
    box-shadow:
        rgba(0, 0, 0, 0.5) 0px 8px 18px,
        rgba(0, 0, 0, 0.3) 0px 3px 6px;
}
body.expo-theme:not(.day-mode) .feature-box h3,
body.expo-theme:not(.day-mode) .feature-card h3,
body.expo-theme:not(.day-mode) .exp-card h3,
body.expo-theme:not(.day-mode) .intro-card h3,
body.expo-theme:not(.day-mode) .pricing-card h3,
body.expo-theme:not(.day-mode) .plan-card h3,
body.expo-theme:not(.day-mode) .stat-card h3,
body.expo-theme:not(.day-mode) .service-card h3,
body.expo-theme:not(.day-mode) .service-item-modern h3,
body.expo-theme:not(.day-mode) .portfolio-card h3,
body.expo-theme:not(.day-mode) .process-step h3 {
    color: var(--ex-surface) !important;
}
body.expo-theme:not(.day-mode) .feature-box h3 span,
body.expo-theme:not(.day-mode) .feature-card h3 span,
body.expo-theme:not(.day-mode) .exp-card h3 i,
body.expo-theme:not(.day-mode) .intro-card h3 i,
body.expo-theme:not(.day-mode) .service-card h3 i,
body.expo-theme:not(.day-mode) .process-step h3 span {
    color: var(--ex-link) !important;
}
body.expo-theme:not(.day-mode) .feature-box p,
body.expo-theme:not(.day-mode) .feature-card p,
body.expo-theme:not(.day-mode) .exp-card .exp-desc,
body.expo-theme:not(.day-mode) .pricing-card p,
body.expo-theme:not(.day-mode) .plan-card p,
body.expo-theme:not(.day-mode) .stat-card p,
body.expo-theme:not(.day-mode) .intro-card p,
body.expo-theme:not(.day-mode) .service-card p,
body.expo-theme:not(.day-mode) .service-item-modern p,
body.expo-theme:not(.day-mode) .portfolio-card p,
body.expo-theme:not(.day-mode) .process-step p {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .stat-card .stat-number,
body.expo-theme:not(.day-mode) .stat-card strong {
    color: var(--ex-surface) !important;
}

/* pricing-table dark */
body.expo-theme:not(.day-mode) .pricing-table,
body.expo-theme:not(.day-mode) .pricing-table-container {
    background: var(--ex-surface);
    border-color: var(--ex-border);
}
body.expo-theme:not(.day-mode) .pricing-table th {
    background: var(--ex-bg);
    color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .pricing-table td {
    color: var(--ex-text);
    border-color: var(--ex-border);
}

/* pf-btn / demo-btn dark variant — 反白 */
body.expo-theme:not(.day-mode) .pf-btn,
body.expo-theme:not(.day-mode) .demo-btn {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .pf-btn:hover,
body.expo-theme:not(.day-mode) .demo-btn:hover {
    background: var(--ex-text);
    border-color: var(--ex-text);
    box-shadow: rgba(255, 255, 255, 0.15) 0 8px 20px;
}

/* Arrow link */
body.expo-theme:not(.day-mode) .arrow-link {
    color: var(--ex-text);
}
body.expo-theme:not(.day-mode) .arrow-link:hover {
    color: var(--ex-link);
}

/* Pricing */
body.expo-theme:not(.day-mode) .pricing-card.featured {
    border: 2px solid var(--ex-surface);
    box-shadow:
        rgba(255, 255, 255, 0.08) 0px 10px 30px,
        rgba(0, 0, 0, 0.5) 0px 4px 8px;
}
body.expo-theme:not(.day-mode) .pricing-badge {
    background: var(--ex-surface);
    color: var(--ex-ink);
    box-shadow: rgba(255, 255, 255, 0.2) 0 4px 12px;
}
body.expo-theme:not(.day-mode) .price-tag {
    color: var(--ex-surface);
}
body.expo-theme:not(.day-mode) .price-tag span {
    color: var(--ex-text-3);
}
body.expo-theme:not(.day-mode) .feature-list li {
    color: var(--ex-text);
}
body.expo-theme:not(.day-mode) .feature-list li::before {
    color: var(--ex-link);
}
body.expo-theme:not(.day-mode) .feature-list li strong {
    color: var(--ex-surface);
}

/* Tech marquee */
body.expo-theme:not(.day-mode) .tech-marquee-wrapper {
    background: var(--ex-surface);
    border-top: 1px solid var(--ex-border);
    border-bottom: 1px solid var(--ex-border);
}
body.expo-theme:not(.day-mode) .tech-marquee-wrapper::before {
    background: linear-gradient(to right, var(--ex-surface), transparent);
}
body.expo-theme:not(.day-mode) .tech-marquee-wrapper::after {
    background: linear-gradient(to left, var(--ex-surface), transparent);
}
body.expo-theme:not(.day-mode) .tech-item {
    color: var(--ex-text-2);
}
body.expo-theme:not(.day-mode) .tech-item:hover {
    color: var(--ex-surface);
}

/* Ultimate tags */
body.expo-theme:not(.day-mode) .ultimate-tag {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    color: var(--ex-text);
    box-shadow: none;
}
body.expo-theme:not(.day-mode) .ultimate-tag:hover {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}

/* Lightbox triggers */
body.expo-theme:not(.day-mode) .lightbox-trigger img,
body.expo-theme:not(.day-mode) .maintenance-visual {
    border: 1px solid var(--ex-border) !important;
    box-shadow:
        rgba(0, 0, 0, 0.5) 0px 12px 30px,
        rgba(0, 0, 0, 0.3) 0px 4px 8px !important;
}

/* Read more */
body.expo-theme:not(.day-mode) .read-more-btn {
    background: transparent;
    border: 1px solid var(--ex-border-strong);
    color: var(--ex-text);
}
body.expo-theme:not(.day-mode) .read-more-btn:hover {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border-color: var(--ex-surface);
}

/* Text highlight */
body.expo-theme:not(.day-mode) .text-highlight {
    color: var(--ex-surface);
    border-bottom: 2px solid var(--ex-link);
}

/* Ivan intro */
body.expo-theme:not(.day-mode) .ivan-intro {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
}

/* Dark variant：inline var() 已透過上方 token 覆蓋同步成 dark 色，無需字串匹配。 */

/* CTA footer — invert to white card in dark mode */
body.expo-theme:not(.day-mode) .cta-footer {
    background: var(--ex-surface) !important;
}
body.expo-theme:not(.day-mode) .cta-footer h2,
body.expo-theme:not(.day-mode) .cta-footer h3 {
    color: var(--ex-ink) !important;
}
body.expo-theme:not(.day-mode) .cta-footer p {
    color: var(--ex-text-2) !important;
}
body.expo-theme:not(.day-mode) .cta-footer .btn-black,
body.expo-theme:not(.day-mode) .cta-footer .btn {
    background: var(--ex-ink);
    color: var(--ex-surface);
    border-color: var(--ex-ink);
}
body.expo-theme:not(.day-mode) .cta-footer .btn-black:hover,
body.expo-theme:not(.day-mode) .cta-footer .btn:hover {
    background: var(--ex-text);
    border-color: var(--ex-text);
    box-shadow: rgba(0, 0, 0, 0.2) 0 8px 20px;
}

/* Footer */
body.expo-theme:not(.day-mode) footer {
    background: var(--ex-bg) !important;
    color: var(--ex-text-2) !important;
    border-top: 1px solid var(--ex-border) !important;
}
body.expo-theme:not(.day-mode) footer a {
    color: var(--ex-text) !important;
}
body.expo-theme:not(.day-mode) footer a:hover {
    color: var(--ex-ink) !important;
}

/* Skip link */
body.expo-theme:not(.day-mode) .skip-link {
    background: var(--ex-surface);
    color: var(--ex-ink);
    border: 1px solid var(--ex-ink);
}

/* ============================================================
   HOME REDESIGN — Digital Operating System
   Scoped to index.html os-* classes.
   ============================================================ */
body.expo-theme .os-hero {
    min-height: auto;
    padding: 152px 0 88px;
}

body.expo-theme .os-hero #hero-canvas {
    display: none;
}

body.expo-theme .os-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(48px, 6vw, 88px);
}

body.expo-theme .os-hero .hero-content {
    padding-left: 0;
}

body.expo-theme .os-hero .hero-title {
    max-width: 760px;
    margin-bottom: 24px;
    font-size: clamp(3.15rem, 6vw, 5.75rem);
    line-height: 0.95;
    letter-spacing: -4px;
}

body.expo-theme .os-hero .hero-title .highlight {
    display: block;
    color: var(--ex-ink) !important;
}

body.expo-theme:not(.day-mode) .os-hero .hero-title,
body.expo-theme:not(.day-mode) .os-hero .hero-title .highlight {
    color: var(--ex-ink) !important;
}

body.expo-theme:not(.day-mode) .os-hero .btn-outline-light {
    color: var(--ex-ink);
    border-color: var(--ex-border-strong);
    background: transparent;
}

body.expo-theme .hero-subtitle-en {
    margin: 0 0 20px;
    color: var(--ex-text-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.expo-theme .os-hero .hero-desc {
    border-bottom: 0;
}

body.expo-theme .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body.expo-theme .os-product-stage {
    min-height: 520px;
    position: relative;
    display: grid;
    align-items: center;
}

body.expo-theme .os-stage-main {
    overflow: hidden;
    border: 1px solid var(--ex-border);
    border-radius: 32px;
    background: var(--ex-surface);
    padding: 10px;
    box-shadow:
        rgba(15, 23, 42, 0.12) 0 24px 60px,
        rgba(15, 23, 42, 0.06) 0 8px 18px;
}

body.expo-theme .os-stage-main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border-radius: 24px;
}

body.expo-theme .os-stage-card {
    position: absolute;
    width: min(240px, 42%);
    padding: 18px 20px;
    border: 1px solid var(--ex-border);
    border-radius: 24px;
    background: color-mix(in srgb, var(--ex-surface) 94%, transparent);
    box-shadow:
        rgba(15, 23, 42, 0.12) 0 16px 36px,
        rgba(15, 23, 42, 0.05) 0 4px 10px;
}

body.expo-theme .os-stage-card span,
body.expo-theme .os-pillar-copy span,
body.expo-theme .os-directory-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--ex-text-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.expo-theme .os-stage-card strong {
    display: block;
    color: var(--ex-ink);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

body.expo-theme .os-stage-card small {
    display: block;
    margin-top: 8px;
    color: var(--ex-text-2);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.expo-theme .os-stage-card-a {
    top: 8%;
    left: -6%;
}

body.expo-theme .os-stage-card-b {
    right: -4%;
    bottom: 18%;
}

body.expo-theme .os-stage-card-c {
    left: 10%;
    bottom: -4%;
}

body.expo-theme .os-trust-strip {
    background: var(--ex-surface);
    border-top: 1px solid var(--ex-border);
    border-bottom: 1px solid var(--ex-border);
}

body.expo-theme .os-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
}

body.expo-theme .os-trust-grid div {
    padding: 24px 22px;
    border-right: 1px solid var(--ex-border);
}

body.expo-theme .os-trust-grid div:last-child {
    border-right: 0;
}

body.expo-theme .os-trust-grid strong,
body.expo-theme .os-trust-grid span {
    display: block;
}

body.expo-theme .os-trust-grid strong {
    color: var(--ex-ink);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

body.expo-theme .os-trust-grid span {
    margin-top: 6px;
    color: var(--ex-text-2);
    font-size: 0.88rem;
    line-height: 1.45;
}

body.expo-theme .os-section-head {
    max-width: 820px;
}

body.expo-theme .os-section-head .section-title {
    display: block;
    margin-bottom: 20px;
}

body.expo-theme .os-section-head .section-title::after {
    display: none;
}

body.expo-theme:not(.day-mode) .os-section-head .section-title {
    color: var(--ex-ink) !important;
}

body.expo-theme:not(.day-mode) .os-section-head p {
    color: var(--ex-text-2) !important;
}

body.expo-theme .os-pillars-section,
body.expo-theme .os-directory-section,
body.expo-theme .os-faq-section {
    padding: clamp(84px, 9vw, 132px) 0;
}

body.expo-theme .os-pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

body.expo-theme .os-pillar {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--ex-border);
    border-radius: 28px;
    background: var(--ex-surface);
}

body.expo-theme .os-pillar-featured {
    grid-row: span 2;
}

body.expo-theme .os-pillar-media {
    overflow: hidden;
    background: transparent;
}

body.expo-theme .os-pillar-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: top center;
}

body.expo-theme .os-pillar-featured .os-pillar-media img {
    min-height: 420px;
}

body.expo-theme .os-pillar-copy {
    padding: clamp(28px, 4vw, 44px);
}

body.expo-theme .os-pillar-copy h3 {
    max-width: 620px;
    margin: 0 0 14px;
    color: var(--ex-ink) !important;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

body.expo-theme .os-pillar-copy p {
    max-width: 620px;
    margin-bottom: 22px;
    color: var(--ex-text-2) !important;
    font-size: 1rem;
    line-height: 1.65;
}

body.expo-theme .os-showcase-section {
    padding: clamp(84px, 9vw, 140px) 0;
    background: var(--ex-surface);
}

body.expo-theme .os-showcase-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

body.expo-theme .os-showcase-copy h2 {
    max-width: 640px;
    margin-bottom: 20px;
    color: var(--ex-ink);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
}

body.expo-theme:not(.day-mode) .os-showcase-copy h2 {
    color: var(--ex-ink) !important;
}

body.expo-theme .os-showcase-copy p {
    max-width: 560px;
    color: var(--ex-text-2);
    font-size: 1.08rem;
    line-height: 1.65;
}

body.expo-theme:not(.day-mode) .os-showcase-copy p {
    color: var(--ex-text-2) !important;
}

body.expo-theme .os-check-list {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

body.expo-theme .os-check-list li {
    position: relative;
    padding-left: 28px;
    color: var(--ex-text);
    line-height: 1.5;
}

body.expo-theme .os-check-list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--ex-link);
}

body.expo-theme .os-case-stack {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
    align-items: end;
}

body.expo-theme .os-case {
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--ex-border);
    border-radius: 24px;
    background: var(--ex-bg);
    box-shadow: rgba(15, 23, 42, 0.08) 0 14px 32px;
}

body.expo-theme .os-case-large {
    grid-row: span 2;
}

body.expo-theme .os-case img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
}

body.expo-theme .os-case-large img {
    aspect-ratio: 4 / 5;
}

body.expo-theme .os-case figcaption {
    padding: 12px 16px 14px;
    color: var(--ex-text-2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.expo-theme .os-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.expo-theme .os-directory-item {
    display: grid;
    align-content: start;
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--ex-border);
    border-radius: 24px;
    background: var(--ex-surface);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

body.expo-theme .os-directory-item:hover {
    transform: translateY(-3px);
    border-color: var(--ex-ink);
    box-shadow:
        rgba(15, 23, 42, 0.08) 0 10px 24px,
        rgba(15, 23, 42, 0.05) 0 3px 8px;
}

body.expo-theme .os-directory-item strong {
    color: var(--ex-ink);
    font-size: 1.28rem;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

body.expo-theme:not(.day-mode) .os-directory-item strong {
    color: var(--ex-ink) !important;
}

body.expo-theme .os-directory-item small {
    margin-top: 14px;
    color: var(--ex-text-2);
    font-size: 0.92rem;
    line-height: 1.55;
}

body.expo-theme:not(.day-mode) .os-directory-item small {
    color: var(--ex-text-2) !important;
}

body.expo-theme .os-faq-container {
    max-width: 920px;
    margin: 0 auto;
}

body.expo-theme .os-final-cta {
    margin: 0;
}

body.expo-theme .os-final-cta .hero-label {
    margin-bottom: 24px;
    color: var(--ex-surface);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
}

@media (max-width: 1080px) {
    body.expo-theme .os-hero-grid,
    body.expo-theme .os-showcase-grid {
        grid-template-columns: 1fr;
    }

    body.expo-theme .os-hero .hero-content {
        order: 1;
    }

    body.expo-theme .os-product-stage {
        order: 2;
    }

    body.expo-theme .os-product-stage {
        min-height: 480px;
    }

    body.expo-theme .os-trust-grid,
    body.expo-theme .os-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.expo-theme .os-pillar-grid {
        grid-template-columns: 1fr;
    }

    body.expo-theme .os-pillar-featured {
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    body.expo-theme .os-hero {
        padding: 124px 0 64px;
    }

    body.expo-theme .os-hero .hero-title {
        font-size: clamp(2.7rem, 14vw, 4.4rem);
        letter-spacing: -2.8px;
    }

    body.expo-theme .os-product-stage {
        min-height: auto;
        display: block;
    }

    body.expo-theme .os-stage-main {
        border-radius: 24px;
    }

    body.expo-theme .os-stage-card {
        position: static;
        width: auto;
        margin-top: 12px;
    }

    body.expo-theme .os-trust-grid,
    body.expo-theme .os-directory-grid,
    body.expo-theme .os-case-stack {
        grid-template-columns: 1fr;
    }

    body.expo-theme .os-trust-grid div {
        border-right: 0;
        border-bottom: 1px solid var(--ex-border);
    }

    body.expo-theme .os-pillar-media img,
    body.expo-theme .os-pillar-featured .os-pillar-media img {
        min-height: 240px;
    }

    body.expo-theme .os-showcase-copy h2,
    body.expo-theme .os-pillar-copy h3 {
        letter-spacing: -0.045em;
    }
}