/* 基礎變數 */
:root { --c-bg:#eef4f8; --c-panel:#fff; --c-ink:#10203f; --c-muted:#64748b; --c-line:#dce6f3; --c-blue:#1f67d2; --c-blue-dark:#143d8c; --c-teal:#147c7a; --c-gold:#d08a1d; --c-warn:#fff7e7; --g-hero:linear-gradient(90deg,rgba(244,248,252,.98) 0%,rgba(244,248,252,.9) 38%,rgba(244,248,252,.28) 72%,rgba(244,248,252,.08) 100%); --g-hero-mobile:linear-gradient(180deg,rgba(244,248,252,.99) 0%,rgba(244,248,252,.92) 44%,rgba(244,248,252,.18) 100%); --g-dark:linear-gradient(135deg,#0f2e68 0%,#143d8c 100%); --shadow:0 18px 42px rgba(16,32,63,.12); }
/* 全域排版 */
body.china-esim-page { margin:0; min-height:100vh; background:var(--c-bg); color:var(--c-ink); font-family:Arial,"Microsoft JhengHei","PingFang TC",sans-serif; }
.fw-black { font-weight:900; }
.site-header { background:rgba(255,255,255,.88); border-bottom:1px solid rgba(220,230,243,.9); backdrop-filter:blur(12px); }
.site-header .navbar { min-height:70px; }
.site-header .navbar-brand { color:var(--c-blue-dark); }
.site-header .nav-link { color:#1d3768; font-weight:800; }
.site-header .nav-link.active,.site-header .nav-link:hover { color:var(--c-blue); }
.member-pill { border:1px solid rgba(31,103,210,.18); border-radius:999px; background:#f5f9ff; }
.site-footer { margin-top:48px; padding:30px 0; border-top:1px solid var(--c-line); background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); color:var(--c-muted); }
.site-footer-inner { width:min(1180px,calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; justify-content:space-between; gap:18px 28px; }
.site-footer-copy { min-width:0; }
.site-footer-head { display:flex; align-items:center; gap:12px; }
.site-footer-mascot { width:64px; height:64px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(16,32,63,.12)); }
.site-footer-brand { display:inline-flex; align-items:center; color:var(--c-blue-dark); font-size:18px; font-weight:900; }
.site-footer-tagline { display:block; margin-top:4px; line-height:1.6; }
.site-footer strong { color:var(--c-blue-dark); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; }
.footer-links a { color:var(--c-blue-dark); font-weight:800; text-decoration:none; padding:6px 0; }
.visitor-stats { display:flex; flex-wrap:wrap; gap:8px; color:var(--c-muted); font-size:13px; }
.visitor-stats .visitor-stat { min-height:32px; display:inline-flex; gap:5px; align-items:center; color:inherit; text-decoration:none; border:1px solid var(--c-line); border-radius:999px; background:rgba(255,255,255,.82); padding:5px 10px; box-shadow:0 6px 18px rgba(16,32,63,.06); }
.visitor-stats a.visitor-stat:hover,.footer-links a:hover { color:var(--c-blue); }
.visitor-stat-primary { border-color:rgba(31,103,210,.22) !important; background:#eef6ff !important; }
.visitor-stat-label { min-height:32px; display:inline-flex; align-items:center; color:var(--c-blue-dark); font-weight:900; }
.visitor-stats strong { color:var(--c-blue-dark); }
@media (max-width:720px) { .site-footer-inner { grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } .site-footer-mascot { width:56px; height:56px; } }
.eyebrow { margin:0 0 8px; color:var(--c-teal); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:0; }
.section-head { max-width:820px; margin-bottom:22px; }
.section-head h2,.info-band h2 { color:#10285b; font-size:clamp(28px,4vw,44px); line-height:1.14; font-weight:900; }
.section-head p:not(.eyebrow),.section-card p,.accordion-body { color:var(--c-muted); line-height:1.65; }
/* 輪播區域 */
.hero-section { min-height:760px; position:relative; overflow:hidden; background:var(--g-hero),url("../img/china-esim-hero-ai.png") center right/cover no-repeat; }
.hero-section::after { content:""; position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(180deg,rgba(238,244,248,0),var(--c-bg)); pointer-events:none; }
.min-vh-hero { min-height:690px; position:relative; z-index:1; }
.hero-section h1 { max-width:760px; color:#0d2f68; font-size:clamp(46px,6.5vw,86px); line-height:.98; font-weight:900; }
.hero-lead { max-width:700px; margin-top:18px; color:#1d355e; font-size:clamp(18px,2.2vw,23px); line-height:1.65; }
.hero-tags { display:flex; flex-wrap:wrap; gap:9px; }
.hero-tags span { min-height:36px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(31,103,210,.18); border-radius:999px; background:rgba(255,255,255,.84); color:var(--c-blue-dark); padding:7px 12px; font-size:13px; font-weight:900; }
/* 主內容 */
.main-wrap { margin-top:-74px; position:relative; z-index:2; padding-bottom:12px; }
.section-card { margin-top:24px; border:1px solid var(--c-line); border-radius:8px; background:var(--c-panel); padding:clamp(22px,4vw,34px); box-shadow:0 10px 26px rgba(16,32,63,.08); }
/* 快速購買 */
.quick-buy-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:1px; overflow:hidden; border:1px solid var(--c-line); border-radius:8px; background:var(--c-line); box-shadow:var(--shadow); }
.quick-buy-grid div,.quick-buy-grid a { min-height:130px; display:grid; align-content:center; gap:7px; background:#fff; padding:20px; text-decoration:none; }
.quick-buy-grid span,.quick-buy-grid small { color:var(--c-muted); line-height:1.45; }
.quick-buy-grid div > span { font-size:13px; font-weight:900; }
.quick-buy-grid strong { color:#10285b; font-size:clamp(24px,3vw,34px); line-height:1.08; }
.quick-buy-grid a { min-width:130px; place-items:center; background:var(--c-blue); color:#fff; font-size:20px; font-weight:900; }
/* 商品篩選 */
.choose-section h3 { margin-bottom:10px; color:#10285b; font-size:19px; font-weight:900; }
.choice-grid { display:flex; flex-wrap:wrap; gap:8px; }
.choice-btn { min-height:40px; border:1px solid var(--c-line); border-radius:8px; background:#f8fbff; color:#1d3768; padding:9px 12px; font-weight:900; }
.choice-btn.is-active { border-color:var(--c-blue); background:var(--c-blue); color:#fff; box-shadow:0 8px 18px rgba(31,103,210,.18); }
.choice-summary { border:1px solid rgba(31,103,210,.18); border-radius:8px; background:#f4f8ff; color:var(--c-blue-dark); padding:12px 14px; font-weight:900; }
/* 方案卡片 */
.currency-form { max-width:680px; margin-top:18px; }
.currency-note { margin-top:10px; }
.plan-card { display:grid; gap:12px; border:1px solid rgba(31,103,210,.2); border-radius:8px; background:#fff; padding:22px; box-shadow:0 10px 22px rgba(16,32,63,.06); }
.plan-card:hover { border-color:var(--c-blue); box-shadow:0 16px 30px rgba(16,32,63,.11); }
.plan-badge { width:fit-content; border-radius:999px; background:#eef7ff; color:var(--c-blue-dark); padding:6px 10px; font-size:13px; font-weight:900; }
.plan-card h3 { color:#10285b; font-size:27px; line-height:1.22; font-weight:900; }
.plan-card strong { color:var(--c-blue); font-size:42px; line-height:1; font-weight:900; }
.plan-card ul { margin:0; padding-left:20px; color:var(--c-muted); line-height:1.65; }
.plan-specs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; overflow:hidden; border:1px solid var(--c-line); border-radius:8px; background:var(--c-line); }
.plan-specs div { background:#f8fbff; padding:12px; }
.plan-specs dt { color:var(--c-muted); font-size:12px; font-weight:900; margin-bottom:5px; }
.plan-specs dd { margin:0; color:#10285b; font-weight:900; }
/* eSIM介紹 */
.info-band { margin-top:24px; padding:clamp(28px,5vw,44px) 0; background:var(--g-dark); }
.info-band h2,.info-band p,.info-band .eyebrow { color:#fff; }
.info-band p:not(.eyebrow) { color:rgba(255,255,255,.78); line-height:1.7; }
.info-band article { min-height:150px; display:grid; gap:8px; align-content:center; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.08); padding:18px; }
.info-band article i { color:#fff; font-size:28px; }
.info-band article strong { color:#fff; font-size:22px; }
.info-band article span { color:rgba(255,255,255,.74); line-height:1.55; }
/* 安裝教學 */
.step-row article { min-height:250px; display:grid; gap:10px; align-content:start; border:1px solid var(--c-line); border-radius:8px; background:#fbfdff; padding:20px; }
.step-row span { color:var(--c-gold); font-size:30px; font-weight:900; }
.step-row h3,.alert-list strong { color:#10285b; font-size:20px; font-weight:900; }
.step-row p,.alert-list span { color:var(--c-muted); line-height:1.6; }
/* 注意事項 */
.alert-list { display:grid; gap:12px; }
.alert-list article { display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:start; border:1px solid var(--c-line); border-radius:8px; background:var(--c-warn); padding:16px; }
/* 支援機型 */
.device-table { overflow:hidden; border:1px solid var(--c-line); border-radius:8px; background:var(--c-line); }
.device-table div { display:grid; grid-template-columns:190px minmax(0,1fr); gap:1px; border-bottom:1px solid var(--c-line); }
.device-table div:last-child { border-bottom:0; }
.device-table strong,.device-table span { background:#fff; padding:16px; line-height:1.55; }
.device-table strong { color:#10285b; }
.device-table span { color:var(--c-muted); }
/* FAQ */
.faq-section .accordion-item { border-color:var(--c-line); }
.faq-section .accordion-button { color:#10285b; font-weight:900; }
.faq-section .accordion-button:not(.collapsed) { background:#eef7ff; color:var(--c-blue-dark); }
/* 回到頂部 */
.back-to-top { position:fixed; right:18px; bottom:18px; z-index:10; width:44px; height:44px; display:none; align-items:center; justify-content:center; border:0; border-radius:999px; background:var(--c-blue); color:#fff; box-shadow:var(--shadow); }
.back-to-top.is-show { display:inline-flex; }
/* 響應式 */
@media (max-width:991.98px) { .hero-section { background:linear-gradient(180deg,rgba(244,248,252,.98) 0%,rgba(244,248,252,.82) 48%,rgba(244,248,252,.18) 100%),url("../img/china-esim-hero-ai.png") center right/cover no-repeat; } .quick-buy-grid { grid-template-columns:1fr; } .quick-buy-grid a { min-height:64px; } }
@media (max-width:575.98px) { .hero-section { min-height:760px; background:var(--g-hero-mobile),url("../img/china-esim-hero-ai.png") center bottom/cover no-repeat; } .min-vh-hero { min-height:660px; align-items:start!important; padding-top:64px; } .hero-section h1 { font-size:clamp(40px,13vw,58px); } .main-wrap { margin-top:-44px; } .plan-specs,.device-table div,.alert-list article { grid-template-columns:1fr; } .step-row article { min-height:0; } }