* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: linear-gradient(180deg, #DDE0F4 0%, #EEF0FA 48%, #F7F7FC 100%);
    color: #2E2E3A;
    line-height: 1.75;
    overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: #8c6de6; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(221,224,244,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(140,109,230,0.08);
}
.nav-shell {
    max-width: 1200px;
    min-height: 76px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.brand-logo img, .mobile-logo img { width: 144px; height: auto; }
.nav-core { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; min-width: 0; }
.nav-core a {
    color: #554B7A;
    background: rgba(255,255,255,0.55);
    border-radius: 999px;
    padding: 10px 18px;
    white-space: nowrap;
    transition: all .25s ease;
    border: 1px solid rgba(255,255,255,0.4);
}
.nav-core a:hover, .nav-core a.active {
    color: #8c6de6;
    background: #FFFFFF;
    box-shadow: 0 8px 18px rgba(140,109,230,0.12);
}
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.overview-btn, .main-btn { border: none; cursor: pointer; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.overview-btn {
    background: rgba(255,255,255,0.68);
    color: #554B7A;
    padding: 10px 18px;
    border: 1px solid rgba(140,109,230,0.16);
    box-shadow: 0 8px 18px rgba(140,109,230,0.08);
}
.main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #8c6de6;
    color: #FFFFFF;
    padding: 11px 22px;
    box-shadow: 0 10px 22px rgba(140,109,230,0.22);
    transition: all .25s ease;
    font-weight: 700;
}
.main-btn:hover { background: #7E5DDD; color: #FFFFFF; transform: translateY(-1px); }
.mobile-top { display: none; }
.menu-btn {
    width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(140,109,230,0.16);
    background: rgba(255,255,255,0.7); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.menu-btn span { width: 18px; height: 2px; border-radius: 3px; background: #8c6de6; }
.panel-mask, .drawer-mask {
    position: fixed; inset: 0; opacity: 0; visibility: hidden; background: rgba(46,46,58,0.32);
    z-index: 9998; transition: all .25s ease;
}
.panel-mask.open, .drawer-mask.open { opacity: 1; visibility: visible; }
.category-panel {
    position: fixed; top: 0; right: 0; width: min(430px, 92vw); height: 100vh; background: #FFFFFF;
    box-shadow: 0 18px 48px rgba(140,109,230,0.14); z-index: 10000; transform: translateX(105%);
    transition: transform .32s ease; overflow-y: auto;
}
.category-panel.open { transform: translateX(0); }
.panel-head, .drawer-head {
    min-height: 76px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
    background: #F7F7FC; border-bottom: 1px solid rgba(140,109,230,0.14);
}
.panel-head strong { color: #8c6de6; font-size: 22px; }
.panel-head button, .drawer-head button {
    width: 38px; height: 38px; border-radius: 999px; border: none; background: #FFFFFF; color: #8c6de6;
    font-size: 24px; cursor: pointer; box-shadow: 0 8px 20px rgba(140,109,230,0.1);
}
.panel-content { padding: 22px; }
.panel-content section { margin-bottom: 24px; }
.panel-content h3 { margin: 0 0 12px; color: #8c6de6; font-size: 17px; }
.panel-link {
    display: block; padding: 13px 14px; margin-bottom: 10px; border-radius: 16px; background: #F7F7FC;
    border: 1px solid rgba(140,109,230,0.12); transition: all .22s ease;
}
.panel-link:hover { background: #FFFFFF; border-color: rgba(140,109,230,0.3); box-shadow: 0 10px 22px rgba(140,109,230,0.1); }
.panel-link span { display: block; color: #2E2E3A; font-weight: 700; }
.panel-link em { display: block; color: #66667A; font-style: normal; font-size: 13px; margin-top: 2px; }
.mobile-drawer {
    position: fixed; top: 0; left: 0; width: min(84vw, 320px); height: 100vh; background: linear-gradient(180deg, #FFFFFF, #F7F7FC);
    z-index: 10000; transform: translateX(-105%); transition: transform .32s ease; overflow-y: auto; box-shadow: 18px 0 48px rgba(140,109,230,0.16);
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-head img { width: 130px; }
.drawer-links { padding: 16px; display: grid; gap: 8px; }
.drawer-links a { padding: 12px 14px; border-radius: 15px; color: #554B7A; background: rgba(255,255,255,0.78); border: 1px solid rgba(140,109,230,0.12); }
.drawer-links a:hover { color: #8c6de6; background: #FFFFFF; }
.mobile-bottom { display: none; }
.container, .main-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.page-main { padding: 30px 0 62px; }
.banner-slider {
    max-width: 1200px; height: 390px; margin: 28px auto 36px; border-radius: 24px; background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(140,109,230,0.10); overflow: hidden; position: relative; z-index: 1;
    border: 1px solid rgba(140,109,230,0.12);
}
.banner-slider .slide { display: none; width: 100%; height: 100%; }
.banner-slider .slide.active { display: block; }
.banner-slider img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: 1px solid rgba(140,109,230,0.18);
    border-radius: 999px; background: rgba(255,255,255,0.78); color: #8c6de6; box-shadow: 0 10px 22px rgba(140,109,230,0.12);
    width: 44px; height: 44px; font-size: 26px; cursor: pointer;
}
.slider-arrow.prev { left: 18px; }
.slider-arrow.next { right: 18px; }
.slider-dots {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3;
}
.slider-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(140,109,230,0.25); padding: 0; cursor: pointer; }
.slider-dots button.active { background: #8c6de6; }
.section { margin: 34px 0; }
.hero-card, .card, .zone-card, .info-card, .page-hero, .section-card, .review-card, .faq-card, .notice-card, .media-card, .quote-card {
    background: rgba(255,255,255,0.92); border: 1px solid rgba(140,109,230,0.16); box-shadow: 0 14px 36px rgba(140,109,230,0.10); border-radius: 24px;
}
.hero-card { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; padding: 34px; align-items: center; }
.section-kicker, .tag, .label, .num, .badge { color: #8c6de6; font-weight: 700; }
.kicker-line {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; background: #EEF0FA;
    border: 1px solid rgba(140,109,230,0.14); border-radius: 999px; color: #8c6de6; font-weight: 700; margin-bottom: 12px;
}
h1, h2, h3, .section-title { color: #8c6de6; line-height: 1.28; }
h1 { font-size: clamp(30px, 5vw, 52px); margin: 0 0 18px; }
h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; }
h3 { font-size: 20px; }
p { margin: 0 0 14px; }
.text-muted, .small-text { color: #66667A; }
.tag-list, .point-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; }
.tag-list li, .point-list li { padding: 8px 12px; border-radius: 999px; background: #F7F7FC; color: #554B7A; border: 1px solid rgba(140,109,230,0.14); }
.content-img, .zone-card img, .app-section img, .hero-visual img, .media-card img { max-width: 100%; height: auto; object-fit: contain; }
.hero-visual, .media-visual {
    background: #F7F7FC; border-radius: 22px; min-height: 240px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 16px; border: 1px solid rgba(140,109,230,0.12);
}
.hero-visual img, .media-visual img { width: 100%; max-height: 300px; object-fit: contain; }
.quick-capsules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quick-capsules a, .mini-card {
    border-radius: 20px; padding: 18px; background: rgba(255,255,255,0.86); border: 1px solid rgba(140,109,230,0.16);
    box-shadow: 0 12px 28px rgba(140,109,230,0.08); transition: all .22s ease;
}
.quick-capsules a:hover, .mini-card:hover { transform: translateY(-2px); border-color: rgba(140,109,230,0.34); box-shadow: 0 16px 32px rgba(140,109,230,0.12); }
.quick-capsules strong { display: block; color: #2E2E3A; font-size: 18px; margin: 4px 0; }
.quick-capsules em { color: #66667A; font-style: normal; }
.platform-strip {
    padding: 24px 28px; border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(238,240,250,0.92));
    border: 1px solid rgba(140,109,230,0.14); box-shadow: 0 14px 34px rgba(140,109,230,0.08);
}
.info-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.info-card { padding: 22px; }
.info-card .num { font-size: 26px; display: block; margin-bottom: 6px; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.zone-card { overflow: hidden; }
.zone-card .zone-img { height: 190px; background: #F7F7FC; display: flex; align-items: center; justify-content: center; padding: 12px; }
.zone-card .zone-img img { max-height: 170px; width: 100%; object-fit: contain; }
.zone-card .zone-body, .section-card { padding: 24px; }
.service-list { padding: 0; margin: 16px 0 0; list-style: none; }
.service-list li { margin: 8px 0; padding-left: 18px; position: relative; color: #554B7A; }
.service-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8c6de6; position: absolute; left: 0; top: 12px; }
.text-link { display: inline-flex; margin-top: 8px; font-weight: 700; color: #8c6de6; }
.app-section { display: grid; grid-template-columns: .92fr 1.08fr; gap: 26px; align-items: center; }
.app-section .media-visual { min-height: 260px; }
.app-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.app-points span { background: #F7F7FC; border: 1px solid rgba(140,109,230,0.14); border-radius: 16px; padding: 12px 14px; color: #554B7A; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card, .faq-card, .notice-card { padding: 22px; }
.review-card strong { color: #8c6de6; }
.faq-list { display: grid; gap: 14px; }
.faq-card h3 { margin: 0 0 8px; }
.about-brief { display: grid; grid-template-columns: 1fr .72fr; gap: 20px; align-items: center; }
.page-hero {
    padding: 40px; margin: 28px 0; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(238,240,250,0.9));
}
.page-hero p { max-width: 860px; color: #554B7A; }
.page-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.media-card { overflow: hidden; }
.media-card .media-visual { border-radius: 0; min-height: 250px; }
.inline-notice { border-left: 4px solid #8c6de6; padding: 16px 18px; background: rgba(255,255,255,0.74); border-radius: 16px; color: #554B7A; }
.site-footer { background: #4B4A6B; color: #F3F2FB; margin-top: 20px; }
.footer-inner {
    width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 26px;
    display: grid; grid-template-columns: 1.05fr 1.6fr; gap: 34px;
}
.footer-brand img { width: 142px; margin-bottom: 14px; }
.footer-brand p, .footer-note p { color: rgba(243,242,251,0.82); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.footer-links h3 { color: #FFFFFF; margin-top: 0; }
.footer-links a { display: block; color: rgba(243,242,251,0.84); margin: 7px 0; }
.footer-links a:hover { color: #FFFFFF; }
.footer-note { width: min(1200px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.14); padding: 18px 0 26px; }
@media (max-width: 1024px) {
    .nav-core a { padding: 9px 13px; }
    .banner-slider { height: 300px; }
    .quick-capsules, .info-board { grid-template-columns: repeat(2, 1fr); }
    .three-col, .review-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-card, .app-section, .about-brief, .page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body { padding-bottom: 72px; }
    .desktop-nav { display: none; }
    .mobile-top { display: flex; min-height: 66px; padding: 0 14px; }
    .mobile-logo img { width: 126px; }
    .mobile-main { padding: 9px 14px; font-size: 13px; }
    .mobile-bottom {
        position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; z-index: 9997;
        background: rgba(255,255,255,0.96); border-top: 1px solid rgba(140,109,230,0.16); box-shadow: 0 -10px 22px rgba(140,109,230,0.08); padding: 7px 0 6px;
    }
    .mobile-bottom a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #66667A; font-size: 12px; }
    .mobile-bottom a span { font-size: 16px; line-height: 1; }
    .mobile-bottom a.active { color: #8c6de6; font-weight: 700; }
    .container, .main-container { width: min(100% - 28px, 1200px); }
    .page-main { padding-top: 18px; }
    .banner-slider { width: calc(100% - 28px); height: 220px; margin: 18px auto 24px; border-radius: 18px; }
    .slider-arrow { width: 36px; height: 36px; font-size: 20px; }
    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }
    .hero-card, .page-hero { padding: 24px; border-radius: 20px; }
    .hero-visual, .media-visual { min-height: 180px; padding: 12px; }
    .quick-capsules { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
    .quick-capsules a { min-width: 210px; scroll-snap-align: start; }
    .two-col, .three-col, .review-grid, .info-board, .footer-inner, .footer-links { grid-template-columns: 1fr; }
    .zone-card .zone-img { height: 160px; }
    .app-points { grid-template-columns: 1fr; }
    .footer-inner { gap: 18px; }
}
@media (max-width: 420px) {
    .banner-slider { height: 190px; }
    h1 { font-size: 29px; }
}