* {
box-sizing: border-box;
}

html,
body {
margin: 0;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
background: #EEF4FF;
background-image: radial-gradient(circle at 10% 8%, rgba(167,194,255,0.26), transparent 28%), radial-gradient(circle at 86% 12%, rgba(157,145,255,0.20), transparent 30%), linear-gradient(rgba(238,244,255,0.92), rgba(238,244,255,0.92)), url('bg.webp');
background-size: auto, auto, cover, cover;
background-attachment: scroll;
color: #35405A;
padding-top: 72px;
line-height: 1.72;
}

body.drawer-open {
overflow: hidden;
}

img {
max-width: 100%;
height: auto;
display: block;
}

a {
color: inherit;
}

.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(12px);
box-shadow: 0 8px 24px rgba(126,140,255,0.16);
}

.header-inner {
max-width: 1280px;
margin: 0 auto;
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
overflow: visible;
padding: 0 20px;
}

.brand-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}

.brand-logo img {
width: 154px;
max-height: 48px;
object-fit: contain;
}

.nav-core {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
min-width: 0;
}

.nav-core a {
white-space: nowrap;
color: #35405A;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 8px 10px;
border-radius: 999px;
transition: all .22s ease;
}

.nav-core a:hover,
.nav-core a.active {
color: #8A7CFF;
background: #F2F0FF;
}

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

.more-menu {
position: relative;
flex-shrink: 0;
}

.more-trigger {
border: 1px solid rgba(126,140,255,0.22);
background: #FFFFFF;
color: #35405A;
border-radius: 999px;
padding: 9px 16px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}

.more-dropdown {
position: absolute;
right: 0;
top: calc(100% + 12px);
min-width: 220px;
background: #FFFFFF;
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 18px 42px rgba(126,140,255,0.18);
z-index: 100000;
border-radius: 18px;
padding: 10px;
display: none;
grid-template-columns: 1fr;
gap: 4px;
}

.more-menu:hover .more-dropdown,
.more-menu.open .more-dropdown {
display: grid;
}

.more-dropdown a {
text-decoration: none;
color: #35405A;
padding: 9px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}

.more-dropdown a:hover,
.more-dropdown a.active {
color: #8A7CFF;
background: #F2F0FF;
}

.main-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #A7C2FF 0%, #9D91FF 55%, #8B7BFF 100%);
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
font-weight: 800;
box-shadow: 0 12px 26px rgba(126,140,255,0.22);
transition: transform .22s ease, box-shadow .22s ease;
white-space: nowrap;
border: 0;
}

.main-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(126,140,255,0.30);
}

.header-btn {
padding: 10px 22px;
min-width: 82px;
}

.mobile-menu-toggle {
display: none;
width: 42px;
height: 42px;
border: 0;
border-radius: 14px;
background: #F4F8FF;
box-shadow: inset 0 0 0 1px rgba(126,140,255,0.18);
padding: 10px;
}

.mobile-menu-toggle span {
display: block;
height: 2px;
background: #8A7CFF;
border-radius: 3px;
margin: 5px 0;
}

.drawer-mask {
position: fixed;
inset: 0;
background: rgba(39,48,74,0.36);
z-index: 100000;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}

.mobile-drawer {
position: fixed;
top: 0;
left: 0;
width: min(84vw, 336px);
height: 100vh;
background: #FFFFFF;
z-index: 100000;
box-shadow: 18px 0 42px rgba(39,48,74,0.20);
transform: translateX(-105%);
transition: transform .28s ease;
padding: 18px;
overflow-y: auto;
}

.drawer-open .drawer-mask {
opacity: 1;
pointer-events: auto;
}

.drawer-open .mobile-drawer {
transform: translateX(0);
}

.drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}

.drawer-logo img {
width: 146px;
max-height: 46px;
object-fit: contain;
}

.drawer-close {
width: 38px;
height: 38px;
border: 0;
border-radius: 12px;
background: #F2F0FF;
color: #8A7CFF;
font-size: 24px;
line-height: 1;
cursor: pointer;
}

.drawer-nav {
display: grid;
gap: 8px;
}

.drawer-nav a {
text-decoration: none;
color: #35405A;
background: #F4F8FF;
border: 1px solid rgba(126,140,255,0.14);
border-radius: 14px;
padding: 12px 14px;
font-weight: 700;
}

.drawer-nav a.active,
.drawer-nav a:hover {
color: #8A7CFF;
background: #F2F0FF;
}

main {
position: relative;
z-index: 1;
}

.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}

.section {
padding: 46px 0;
}

.section-soft {
padding: 52px 0;
background: linear-gradient(180deg, rgba(255,255,255,0.44), rgba(244,248,255,0.84));
}

.section-title {
font-size: clamp(26px, 3vw, 40px);
line-height: 1.24;
margin: 0 0 14px;
color: #7E8CFF;
letter-spacing: .02em;
}

.section-subtitle {
max-width: 780px;
margin: 0 0 26px;
color: #68728A;
font-size: 16px;
}

h1,
h2,
h3,
.section-title {
color: #7E8CFF;
}

h1 {
font-size: clamp(32px, 4vw, 52px);
line-height: 1.18;
margin: 0 0 18px;
}

h2 {
font-size: clamp(24px, 2.5vw, 34px);
line-height: 1.28;
margin: 0 0 16px;
}

h3 {
margin: 0 0 10px;
font-size: 20px;
}

p {
margin: 0 0 14px;
}

.text-link {
color: #8A7CFF;
font-weight: 800;
text-decoration: none;
}

.text-link:hover {
text-decoration: underline;
}

.banner-slider {
max-width: 1280px;
margin: 24px auto 30px;
border-radius: 18px;
background: #FFFFFF;
box-shadow: 0 14px 36px rgba(126,140,255,0.16);
overflow: hidden;
position: relative;
z-index: 1;
aspect-ratio: 16 / 6.2;
}

.slider-track,
.slide {
width: 100%;
height: 100%;
}

.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}

.slide.active {
opacity: 1;
pointer-events: auto;
}

.banner-slider img {
width: 100%;
height: 100%;
object-fit: contain;
background: #EEF4FF;
}

.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,0.86);
color: #8A7CFF;
font-size: 32px;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 22px rgba(126,140,255,0.20);
}

.slider-prev { left: 16px; }
.slider-next { right: 16px; }

.slider-dots {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
display: flex;
justify-content: center;
gap: 8px;
}

.slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,0.78);
cursor: pointer;
box-shadow: 0 0 0 1px rgba(126,140,255,0.16);
}

.slider-dot.active {
width: 24px;
border-radius: 999px;
background: linear-gradient(135deg, #A7C2FF 0%, #9D91FF 55%, #8B7BFF 100%);
}

.notice-strip {
max-width: 1280px;
margin: 0 auto 34px;
padding: 0 20px;
}

.notice-strip-inner {
background: rgba(255,255,255,0.92);
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 14px 36px rgba(126,140,255,0.16);
border-radius: 18px;
padding: 16px 20px;
display: flex;
gap: 12px;
align-items: center;
color: #68728A;
}

.notice-badge,
.eyebrow,
.card-number,
.tag {
display: inline-flex;
align-items: center;
width: fit-content;
border-radius: 999px;
background: #F2F0FF;
color: #8A7CFF;
font-weight: 800;
font-size: 13px;
padding: 5px 12px;
margin-bottom: 12px;
}

.hero-card,
.card,
.zone-card,
.info-card,
.review-card,
.article-card,
.side-panel,
.notice-card,
.faq-card,
.contact-card {
background: rgba(255,255,255,0.92);
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 14px 36px rgba(126,140,255,0.16);
border-radius: 22px;
}

.hero-card {
padding: clamp(24px, 4vw, 46px);
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 30px;
align-items: center;
}

.hero-card p {
color: #68728A;
font-size: 17px;
}

.hero-actions {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
}

.hero-actions .main-btn {
padding: 12px 26px;
}

.hero-highlights {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.mini-card {
background: linear-gradient(180deg, #F4F8FF, #FFFFFF);
border: 1px solid rgba(126,140,255,0.16);
border-radius: 18px;
padding: 18px;
}

.mini-card strong {
display: block;
color: #8A7CFF;
font-size: 18px;
margin-bottom: 6px;
}

.channel-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

.card,
.info-card,
.review-card,
.faq-card,
.contact-card {
padding: 22px;
}

.card p,
.zone-card p,
.info-card p,
.review-card p,
.faq-card p,
.article-card p,
.notice-card p,
.contact-card p {
color: #68728A;
}

.card h3,
.zone-card h3,
.info-card h3 {
color: #8A7CFF;
}

.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: stretch;
}

.feature-row.reverse .feature-media {
order: -1;
}

.feature-copy,
.feature-media {
background: rgba(255,255,255,0.92);
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 14px 36px rgba(126,140,255,0.16);
border-radius: 22px;
padding: 26px;
}

.feature-copy ul,
.article-card ul,
.notice-card ul,
.info-list {
padding-left: 20px;
margin: 12px 0 0;
color: #68728A;
}

.feature-media {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #F4F8FF, #FFFFFF);
}

.content-img,
.zone-card img,
.app-section img,
.banner-slider img {
max-width: 100%;
height: auto;
}

.feature-media img,
.media-box img,
.zone-card img {
width: 100%;
max-height: 390px;
object-fit: contain;
background: #F4F8FF;
border-radius: 18px;
}

.two-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}

.three-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}

.zone-card {
overflow: hidden;
}

.zone-card .zone-body {
padding: 22px;
}

.zone-card img {
max-height: 250px;
border-radius: 0;
}

.app-section {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}

.review-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.review-card strong {
display: block;
color: #8A7CFF;
margin-bottom: 8px;
}

.faq-list {
display: grid;
gap: 14px;
}

.faq-card h3 {
font-size: 18px;
}

.inner-hero {
padding: 54px 0 28px;
}

.inner-hero .inner-wrap {
background: rgba(255,255,255,0.92);
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 14px 36px rgba(126,140,255,0.16);
border-radius: 26px;
padding: clamp(26px, 5vw, 58px);
}

.inner-hero p {
max-width: 850px;
color: #68728A;
font-size: 17px;
}

.split-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 24px;
align-items: start;
}

.article-card {
padding: clamp(24px, 4vw, 38px);
}

.article-card h2:not(:first-child) {
margin-top: 30px;
}

.side-panel {
padding: 20px;
position: relative;
}

.media-box {
background: #F4F8FF;
border-radius: 18px;
padding: 12px;
margin-bottom: 18px;
}

.notice-card {
padding: 18px;
background: #F2F0FF;
box-shadow: none;
}

.point-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.contact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.site-footer {
background: #27304A;
color: #EEF4FF;
margin-top: 38px;
padding: 48px 0 0;
}

.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px 36px;
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 28px;
}

.footer-brand img {
width: 160px;
max-height: 50px;
object-fit: contain;
margin-bottom: 14px;
}

.footer-brand p,
.footer-bottom {
color: rgba(238,244,255,0.78);
}

.footer-col h3 {
color: #EEF4FF;
font-size: 17px;
margin-bottom: 12px;
}

.footer-col a {
display: block;
color: rgba(238,244,255,0.78);
text-decoration: none;
margin: 8px 0;
}

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

.footer-bottom {
border-top: 1px solid rgba(238,244,255,0.14);
text-align: center;
padding: 16px 20px 22px;
font-size: 14px;
}

.mobile-quick {
display: none;
}

@media (max-width: 1180px) {
.nav-core { gap: 6px; }
.nav-core a { padding: 8px 8px; font-size: 14px; }
.brand-logo img { width: 140px; }
}

@media (max-width: 1024px) {
.nav-core {
display: none;
}
.channel-grid,
.point-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-layout {
grid-template-columns: 1fr;
}
.side-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.media-box { margin-bottom: 0; }
.footer-inner {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 768px) {
body {
padding-top: 64px;
padding-bottom: 64px;
}

.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
}

.header-inner {
min-height: 64px;
padding: 0 14px;
gap: 8px;
}

.mobile-drawer,
.drawer-mask {
z-index: 100000;
}

.mobile-menu-toggle { display: block; flex-shrink: 0; }
.brand-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.brand-logo img { width: 132px; max-height: 42px; }
.more-menu { display: none; }
.header-actions { margin-left: auto; }
.header-btn { padding: 9px 16px; min-width: 68px; }

.banner-slider {
margin: 16px 14px 24px;
border-radius: 16px;
aspect-ratio: 16 / 8.8;
}
.slider-arrow { width: 34px; height: 34px; font-size: 26px; }
.slider-prev { left: 8px; }
.slider-next { right: 8px; }
.notice-strip { padding: 0 14px; }
.notice-strip-inner { align-items: flex-start; }
.container { padding: 0 14px; }
.section, .section-soft { padding: 34px 0; }
.hero-card,
.feature-row,
.two-grid,
.three-grid,
.app-section,
.review-grid,
.contact-grid,
.side-panel {
grid-template-columns: 1fr;
}
.hero-highlights,
.channel-grid,
.point-grid {
grid-template-columns: 1fr;
}
.feature-row.reverse .feature-media { order: 0; }
.zone-card img { max-height: 220px; }
.inner-hero { padding: 32px 0 18px; }
.footer-inner { grid-template-columns: 1fr; }
.mobile-quick {
position: fixed;
left: 12px;
right: 12px;
bottom: 10px;
z-index: 99998;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(126,140,255,0.18);
box-shadow: 0 10px 28px rgba(126,140,255,0.22);
border-radius: 18px;
padding: 8px;
}
.mobile-quick a {
text-align: center;
text-decoration: none;
color: #35405A;
font-size: 13px;
font-weight: 800;
padding: 6px 0;
border-radius: 12px;
}
.mobile-quick a:hover {
color: #8A7CFF;
background: #F2F0FF;
}
}

@media (max-width: 420px) {
.brand-logo img { width: 118px; }
.header-btn { padding: 8px 13px; }
.hero-actions { align-items: stretch; }
.hero-actions .main-btn { width: 100%; }
}