*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #e8e8e8; color: #1a1a2e; line-height: 1.6; overflow-x: hidden;}
img { max-width:100%; display:block; border:none; }
a { text-decoration:none; color:inherit; }
:root { --blue-dark: #1a3050; --blue-mid: #2c4a6f; --orange: #ff5722; --orange-light: #ff7043; --green-bg: #e8f5e9; --green-text: #2e7d32; --card-bg: #fffbe6; --radius: 14px; --radius-lg: 18px; }
.page-wrap { max-width: 480px; margin: 0 auto; background: #f6f7f9; position: relative; min-height: 100vh; padding-bottom: 80px;}
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(26, 48, 80, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.header-back { color:#fff; font-size:14px; display:flex; align-items:center; gap:4px; }
.header-logo-placeholder { border: 1.5px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 4px 12px; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 1px; line-height: 1; }
.header-logo-placeholder .orange { color: var(--orange-light); }
.header-right { width:40px; }

/* ===== Hero ===== */
.hero { background: linear-gradient(180deg, #2c4a6f 0%, #1a3050 60%, #152238 100%); padding: 30px 16px 24px; position:relative; overflow:hidden; }
.hero-tag { display:inline-block; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:12px; padding:4px 12px; border-radius:20px; margin-bottom:12px; backdrop-filter:blur(4px); }
.hero h1 { font-size:24px; font-weight:500; color:#fff; line-height:1.35; margin-bottom:8px; letter-spacing:-0.3px; }
.hero h1 span { color:var(--orange-light); }
.hero-sub { font-size:15px; color:rgba(255,255,255,0.85); line-height:1.5; margin-bottom:12px; }
.hero-rating { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; color:rgba(255,255,255,0.9); }
.stars { color:#ffc107; font-size:15px; letter-spacing:1px; }
.hero-badge { display:inline-block; background:rgba(255,255,255,0.15); color:#fff; font-size:13px; padding:6px 14px; border-radius:20px; margin-bottom:8px; }
.hero-partner { display:inline-block; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.9); font-size:12px; padding:4px 12px; border-radius:20px; margin-bottom:16px; backdrop-filter:blur(4px); }

/* ===== Carousel (统一 16:9) ===== */
.carousel-wrap { position:relative; margin-bottom:16px; }
.carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:var(--radius-lg); }
.carousel::-webkit-scrollbar { display:none; }
.carousel-item { flex:0 0 100%; scroll-snap-align:start; position:relative; }
.carousel-img { width:100%; aspect-ratio:16/9; min-height:180px; background:linear-gradient(135deg,#e3f2fd,#bbdefb); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; color:#5c8ab5; font-size:14px; text-align:center; }
.carousel-label { position:absolute; top:12px; left:12px; background:#fff; color:#333; font-size:12px; padding:4px 10px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.08); z-index:2; }
.carousel-dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); transition:all 0.3s; }
.carousel-dot.active { width:18px; border-radius:3px; background:#fff; }

/* ===== Session Tabs ===== */
.session-tabs-wrap { margin-bottom:12px; }
.session-tabs-label { font-size:11px; color:#999; margin-bottom:6px; text-align:left; padding:0 2px; }
.session-tabs { display:flex; gap:6px; justify-content:flex-start; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding: 0 8px 2px; }
.session-tabs::-webkit-scrollbar { display:none; }
.session-tab { flex:0 0 auto; background:#f5f5f5; border:1.5px solid transparent; border-radius:8px; padding:5px 8px; font-size:12px; color:#555; font-weight:500; cursor:pointer; transition:all 0.2s; text-align:center; line-height:1.25; min-width:72px; position:relative; }
.session-tab .tab-date { display:block; font-size:12px; font-weight:500; white-space:nowrap; }
.session-tab .tab-stock { display:block; font-size:10px; color:#888; margin-top:1px; font-weight:400; white-space:nowrap; }
.session-tab.active { background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 2px 6px rgba(255,87,34,0.22); }
.session-tab.active .tab-stock { color:rgba(255,255,255,0.9); }
.session-tab.disabled { background:#f0f0f0; color:#bbb; border-color:transparent; cursor:not-allowed; }
.session-tab.disabled .tab-stock { color:#ccc; }
.session-tab.disabled::after { content:"满"; position:absolute; top:-4px; right:-4px; background:#bbb; color:#fff; font-size:9px; padding:1px 5px; border-radius:6px; font-weight:500; line-height:1.2; z-index:2; }

.price-section { margin:-20px 16px 12px; position:relative; z-index:10; }
.price-card { background:#fff; border-radius:var(--radius-lg); box-shadow:0 4px 16px rgba(0,0,0,0.06); padding:14px 14px 14px; text-align:center; border-top:3px solid var(--orange); }
.price-row { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:10px; }
.price-original { text-align:center; }
.price-original .label { font-size:12px; color:#999; }
.price-original .value { font-size:18px; color:#999; text-decoration:line-through; }
.price-current { text-align:center; }
.price-current .label { font-size:13px; color:var(--orange); font-weight:500; }
.price-current .value { font-size:42px; color:var(--orange); font-weight:500; line-height:1; }
.price-current .unit { font-size:14px; color:#666; font-weight:400; }
.price-tags { display:flex; justify-content:center; gap:10px; margin-bottom:2px; }
.price-tag-red { background:#ffebee; color:#c62828; font-size:12px; padding:4px 10px; border-radius:6px; font-weight:500; }
.price-tag-orange { background:#fff3e0; color:#e65100; font-size:12px; padding:4px 10px; border-radius:6px; font-weight:500; }
.guarantee-bar { margin:0 16px 12px; background:var(--green-bg); border:1px solid #d4edda;border-radius:var(--radius); padding:12px 16px; display:flex; justify-content:center; gap:20px; font-size:13px; color:var(--green-text); font-weight:500; }

/* ===== Sections ===== */
.section { background:#fff; border-radius:var(--radius-lg); margin:0 16px 12px; padding:20px 16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:4px; line-height:1.4; }
.section-subtitle { font-size:13px; color:#888; margin-bottom:16px; }

/* ===== Safety ===== */
.safety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center; }
.safety-icon { width:52px; height:52px; border-radius:50%; background:#e3f2fd; color:#1565c0; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.safety-label { font-size:12px; color:#555; line-height:1.4; }
.safety-label strong { display:block; color:#333; font-size:13px; margin-bottom:2px; }

/* ===== Pain & Gain ===== */
.pain-head { margin-bottom:16px; }
.pain-box { background:var(--card-bg); border-radius:var(--radius); padding:16px; }
.pain-box h4 { color:var(--orange); font-size:16px; font-weight:600; margin-bottom:12px; }
.pain-list { list-style:none; }
.pain-list li { font-size:14px; color:#555; line-height:1.8; padding-left:16px; position:relative; }
.pain-list li::before { content:"•"; position:absolute; left:0; color:var(--orange); font-weight:500; }

.outcome-section { background:#f6fdf6; border-radius:var(--radius); padding:16px; margin-top:16px; border:1px solid #d4edda; }
.outcome-title { font-size:16px; color:var(--green-text); font-weight:600; margin-bottom:12px; }
.outcome-list { list-style:none; }
.outcome-list li { font-size:14px; color:#555; line-height:1.8; padding-left:22px; position:relative; margin-bottom:8px; }
.outcome-list li::before { content:"✓"; position:absolute; left:0; color:var(--green-text); font-weight:500; font-size:15px; }
.outcome-stat { margin-top:12px; padding:10px 12px; background:#fff; border-radius:8px; font-size:13px; color:#555; border-left:3px solid var(--orange); }
.outcome-stat strong { color:var(--orange); font-weight:600; }

/* ===== Compare ===== */
.compare-section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:6px; line-height:1.4; }
.compare-section-sub { font-size:14px; color:#888; margin-bottom:20px; }
.compare-grid { display:flex; flex-direction:column; gap:12px; }
.compare-item { display:flex; gap:12px; }
.compare-left-box, .compare-right-box { flex:1; border-radius:12px; padding:16px; font-size:13px; line-height:1.6; }
.compare-left-box { background:#f8f9fa; color:#666; }
.compare-left-box .compare-label { font-size:13px; color:#999; margin-bottom:8px; }
.compare-left-box .compare-text { font-size:14px; color:#555; }
.compare-right-box { background:#fff; border:1px solid #ffe0b2; border-left:3px solid var(--orange); box-shadow:0 2px 8px rgba(255,87,34,0.06); position:relative; }
.compare-right-box .compare-label { font-size:13px; color:var(--orange); font-weight:600; margin-bottom:8px; }
.compare-right-box .compare-text { font-size:14px; color:#333; }
.compare-summary { text-align:center; margin-top:16px; font-size:14px; color:#555; line-height:1.6; }
.compare-summary strong { color:var(--orange); }

/* ===== Highlights with Images (统一比例) ===== */
.highlight-card { background:var(--card-bg); border-radius:var(--radius); padding:18px; margin-bottom:12px; }
.highlight-card:last-child { margin-bottom:0; }
.highlight-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.highlight-header h4 { font-size:17px; color:var(--orange); font-weight:600; }
.highlight-desc { font-size:14px; color:#555; line-height:1.7; margin-bottom:12px; }
.highlight-imgs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.highlight-img { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,#e3f2fd,#bbdefb); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#5c8ab5; font-size:12px; text-align:center; }
.highlight-imgs.single { grid-template-columns: 1fr; }
.highlight-imgs.single .highlight-img { grid-column: 1 / -1; aspect-ratio:16/9; }
.highlight-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px; }
.highlight-tags span { background:#fff; color:#666; font-size:12px; padding:5px 12px; border-radius:16px; border:1px solid #FFE0B2; font-weight:500; }

/* ===== Experience ===== */
.exp-section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:4px; line-height:1.4; }
.exp-section-sub { font-size:13px; color:#888; margin-bottom:16px; }
.exp-card { background: transparent; border-radius: 0; padding: 20px 0; margin-bottom: 0; border-bottom: 1px solid #f0f0f0; }
.exp-card:last-child { border-bottom: none; }
.exp-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.exp-icon { font-size: 20px; line-height: 1; }
.exp-header h4 { font-size:17px; color:var(--blue-dark); font-weight:500; }
.exp-desc { font-size:14px; color:#555; line-height:1.7; margin-bottom:8px; }
.exp-note { font-size:12px; color:#999; margin-top:8px; padding:8px; background:#fff; border-radius:6px; }
.exp-quote { margin-top:10px; padding:10px 12px; background:var(--card-bg); border-radius:8px; border-left:3px solid var(--orange); font-size:13px; color:var(--orange); }
.exp-list { list-style:none; margin-top:8px; }
.exp-list li { font-size:13px; color:#555; line-height:2; padding-left:18px; position:relative; }
.exp-list li::before { content:"✓"; position:absolute; left:0; color:var(--green-text); font-weight:500; }

/* ===== Timeline ===== */
.timeline-section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:4px; line-height:1.4; display:flex; align-items:center; gap:8px; }
.timeline-section-sub { font-size:13px; color:#888; margin-bottom:20px; }
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:linear-gradient(to bottom, var(--orange), #ffd8b2); border-radius:2px; }
.tl-item { position:relative; padding-bottom:20px; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-23px; top:4px; width:14px; height:14px; background:#fff; border:2.5px solid var(--orange); border-radius:50%; z-index:2; box-shadow: 0 0 0 2px rgba(255,87,34,0.12); }
.tl-time { font-size:14px; color:var(--orange); font-weight:500; margin-bottom:4px; }
.tl-title { font-size:15px; font-weight:500; color:var(--blue-dark); margin-bottom:4px; }
.tl-desc { font-size:13px; color:#777; line-height:1.6; }

/* ===== Testimonials ===== */
.testimonial-section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:4px; line-height:1.4; }
.testimonial-section-sub { font-size:13px; color:#888; margin-bottom:16px; }
.testimonial-card { background:#fff; border-radius:var(--radius); padding:16px; margin-bottom:12px; position:relative; border-left:3px solid var(--orange); box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.testimonial-card:last-child { margin-bottom:0; }
.testimonial-quote { font-size:14px; color:#444; line-height:1.8; font-style:italic; margin-bottom:10px; }
.testimonial-author { font-size:13px; color:var(--orange); font-weight:600; }

/* ===== Service / Notice ===== */
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
.service-item { display:flex; align-items:center; gap:10px; background:#f8f9fa; border-radius:10px; padding:12px; }
.service-icon { font-size:24px; flex-shrink:0; }
.service-text { font-size:13px; color:var(--blue-dark); font-weight:500; }
.notice-box { background:#e8eaf6; border-radius:10px; padding:14px; }
.notice-title { font-size:14px; font-weight:600; color:var(--blue-dark); margin-bottom:8px; }
.notice-list { list-style:none; font-size:13px; color:#555; }
.notice-list li { padding:4px 0; padding-left:14px; position:relative; }
.notice-list li::before { content:"•"; position:absolute; left:0; color:var(--orange); }

/* ===== FAQ ===== */
.faq-section-title { font-size:18px; font-weight:500; color:var(--blue-dark); margin-bottom:16px; line-height:1.4; display:flex; align-items:center; gap:6px; }
.faq-item { border-bottom:1px solid #f0f0f0; }
.faq-item:last-child { border-bottom:none; }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:16px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.faq-question h4 { font-size:15px; color:var(--blue-dark); font-weight:400; line-height:1.5; padding-right:12px; }
.faq-arrow { width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#999; font-size:12px; transition:transform 0.3s; flex-shrink:0; }
.faq-item.active .faq-arrow { transform:rotate(180deg); color:var(--orange); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s ease; }
.faq-item.active .faq-answer { max-height:300px; padding-bottom:16px; }
.faq-answer p { font-size:14px; color:#666; line-height:1.8; }

/* ===== Brand Footer Block ===== */
.brand-block { background: linear-gradient(180deg, #2c4a6f 0%, #1a3050 100%); margin:0 16px 12px; border-radius:var(--radius-lg); padding:28px 20px 24px; text-align:center; color:#fff; }
.brand-logo-text { display:inline-block; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 6px 16px; font-size: 17px; font-weight: 500; color: #fff; letter-spacing: 1px; line-height: 1; margin-bottom:16px; }
.brand-logo-text .orange { color: var(--orange-light); }
.brand-desc { font-size:14px; color:rgba(255,255,255,0.85); line-height:1.8; margin-bottom:16px; }
.brand-email { font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:4px; }
.brand-email a { color:var(--orange-light); font-weight:500; }
.brand-company { font-size:12px; color:rgba(255,255,255,0.5); }

/* ===== Footer Links ===== */
.footer-links { text-align:center; padding:12px 16px 8px; color:#aaa; font-size:11px; line-height:2; }
.footer-links a { color:var(--blue-mid); }

/* ===== Bottom Bar ===== */
.bottom-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; z-index:1000; background:#fff; border-top:1px solid #eee; padding:6px 16px 8px; display:flex; gap:10px; align-items:center; box-shadow:0 -2px 10px rgba(0,0,0,0.05); }
.btn-consult { flex:1; background:#fff; color:#555; border:1px solid #ddd; padding:9px 0; border-radius:10px; font-size:14px; font-weight:500; text-align:center; display:flex; align-items:center; justify-content:center; gap:4px; }
.btn-apply { flex:2; background:linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 100%); color:#fff; border:none; padding:9px 0; border-radius:10px; font-size:15px; font-weight:600; text-align:center; display:flex; align-items:center; justify-content:center; gap:4px; box-shadow:0 4px 12px rgba(255,87,34,0.25); }

/* 底部栏改造：咨询+收藏+立即报名 */
.bottom-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 10px;
}
.bottom-bar-left {
    display: flex;
    align-items: center;
    gap: 2px;
}
.bottom-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 52px;
    padding: 4px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.bottom-icon-btn .icon { font-size: 22px; line-height: 1; }
.bottom-icon-btn .label { font-size: 10px; color: #666; font-weight: 500; }
.bottom-icon-btn.active .icon { filter: drop-shadow(0 0 2px rgba(255,112,67,0.3)); }
.bottom-icon-btn.active .label { color: var(--orange); font-weight: 600; }
.btn-apply {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
}