*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --bg:#F5F7FF; --nav:rgba(12,18,40,.94); --title:#131A35; --brand:#5B6CFF;
  --deep:#16213E; --cyan:#00D4FF; --gold:#FFC857; --accent:#D94F70; --violet:#7A5CFF;
  --text:#1F2740; --muted:#66708A; --soft:#9AA4BA; --card:#FFFFFF; --card-blue:#EFF8FF;
  --border:rgba(91,108,255,.18); --shadow:0 20px 46px rgba(25,43,91,.14);
  --footer:#0B1024; --footer-text:#EEF2FF; --radius:24px; --max:1240px;
}
html { scroll-behavior:smooth; background:var(--bg); }
body {
  margin:0; min-width:320px; overflow-x:hidden; color:var(--text); line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 8%,rgba(122,92,255,.10),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(0,212,255,.09),transparent 28%),var(--bg);
}
body.drawer-open { overflow:hidden; }
img { max-width:100%; height:auto; }
a { color:var(--brand); }
button,a { -webkit-tap-highlight-color:transparent; }

.site-header {
  position:sticky; top:0; width:100%; z-index:9999; background:var(--nav);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 26px rgba(25,43,91,.16);
}
.header-inner {
  width:min(calc(100% - 32px),1280px); margin:0 auto; min-height:72px; display:flex;
  align-items:center; justify-content:space-between; gap:22px;
}
.site-logo,.drawer-brand,.footer-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.site-logo img,.drawer-brand img,.footer-logo img { max-height:44px; width:auto; display:block; object-fit:contain; }
.site-logo strong { font-size:21px; letter-spacing:.5px; }
.nav-core { display:flex; align-items:center; justify-content:center; gap:10px; flex:1; }
.nav-core a {
  color:#EEF2FF; text-decoration:none; border-radius:999px; padding:8px 12px; font-size:15px;
  white-space:nowrap; transition:.2s ease;
}
.nav-core a:hover,.nav-core a.active { color:#fff; background:rgba(0,212,255,.16); }
.header-actions { display:flex; align-items:center; gap:10px; }
.main-btn,.secondary-btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px;
  border-radius:999px; text-decoration:none; font-weight:700; transition:transform .2s ease,box-shadow .2s ease;
}
.main-btn {
  background:linear-gradient(135deg,#5B6CFF 0%,#7A5CFF 48%,#00D4FF 100%);
  color:#fff; box-shadow:0 14px 32px rgba(91,108,255,.22);
}
.secondary-btn { color:var(--brand); background:rgba(255,255,255,.82); border:1px solid var(--border); }
.main-btn:hover,.secondary-btn:hover { transform:translateY(-2px); }
.menu-toggle,.drawer-close { border:0; cursor:pointer; }
.menu-toggle {
  width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.10);
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.menu-toggle span { width:18px; height:2px; border-radius:2px; background:#fff; }
.mobile-menu-toggle { display:none; }
.drawer-overlay {
  position:fixed; inset:0; z-index:10000; background:rgba(5,10,25,.52); opacity:0; transition:opacity .22s ease;
}
.drawer-overlay.is-visible { opacity:1; }
.site-drawer {
  position:fixed; top:0; right:0; width:min(390px,90vw); height:100vh; z-index:10001;
  padding:22px; background:#fff; box-shadow:-28px 0 70px rgba(7,17,42,.18);
  transform:translateX(105%); transition:transform .25s ease; overflow-y:auto;
}
.site-drawer.is-open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--border); }
.drawer-brand { color:var(--title); font-weight:800; font-size:20px; }
.drawer-close { width:42px; height:42px; border-radius:12px; background:var(--card-blue); color:var(--title); font-size:28px; line-height:1; }
.drawer-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:20px 0; }
.drawer-nav a { display:block; padding:12px 14px; border-radius:14px; background:#F7F8FF; color:var(--text); text-decoration:none; font-weight:600; }
.drawer-nav a:hover { background:#EAF7FF; color:var(--brand); }
.drawer-note { padding:18px; border-radius:18px; background:linear-gradient(135deg,#EFF8FF,#F5F0FF); border:1px solid var(--border); }
.drawer-note strong { color:var(--title); }
.drawer-note p { margin:6px 0 0; color:var(--muted); font-size:14px; }

main { display:block; }
.section,.inner-section { width:min(calc(100% - 32px),var(--max)); margin:0 auto; padding:76px 0; }
.section-tight { width:min(calc(100% - 32px),var(--max)); margin:0 auto; padding:28px 0; }

.hero {
  width:min(calc(100% - 32px),var(--max)); margin:0 auto; padding:68px 0 44px;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:58px;
}
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-kicker,.badge,.tag,.label {
  display:inline-flex; align-items:center; gap:8px; color:#725CD4; font-weight:800; letter-spacing:.04em; font-size:14px;
}
.eyebrow { padding:8px 14px; border:1px solid rgba(91,108,255,.20); border-radius:999px; background:rgba(255,255,255,.72); }
.hero h1 { margin:18px 0 4px; color:var(--title); font-size:clamp(52px,7vw,88px); line-height:1.02; letter-spacing:-.04em; }
.hero-subtitle { margin:10px 0 20px; font-size:clamp(24px,3vw,36px); line-height:1.35; font-weight:800; color:var(--deep); }
.hero-text { margin:0; color:var(--muted); font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hero-point { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid var(--border); color:var(--text); font-size:14px; }
.hero-visual { position:relative; min-width:0; }
.hero-visual::before {
  content:""; position:absolute; inset:8% -7% -8% 10%; z-index:-1; border-radius:48px;
  background:radial-gradient(circle at 30% 30%,rgba(122,92,255,.25),transparent 35%),
             radial-gradient(circle at 75% 35%,rgba(0,212,255,.22),transparent 34%),
             linear-gradient(145deg,rgba(255,255,255,.85),rgba(234,247,255,.60));
}
.hero-visual img,.content-img,.zone-card img,.app-section img,.inner-hero img {
  max-width:100%; width:100%; height:auto; object-fit:contain; display:block;
}
.hero-visual img { border-radius:34px; box-shadow:0 32px 70px rgba(33,49,102,.20); }

.service-strip {
  width:min(calc(100% - 32px),var(--max)); margin:10px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.strip-item {
  padding:18px; border-radius:18px; background:rgba(255,255,255,.90); border:1px solid var(--border);
  box-shadow:0 14px 32px rgba(25,43,91,.08);
}
.strip-item h2 { margin:0 0 4px; color:var(--title); font-size:18px; }
.strip-item p { margin:0; color:var(--muted); font-size:14px; }

.section-head { max-width:760px; margin-bottom:30px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-title,.section h2,.inner-section h2 { color:var(--title); }
.section-title { margin:8px 0 12px; font-size:clamp(30px,4vw,46px); line-height:1.18; }
.section-head p { margin:0; color:var(--muted); }

.channel-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.channel-pill {
  min-height:128px; padding:18px; border-radius:20px; text-decoration:none; background:#fff;
  border:1px solid var(--border); box-shadow:0 14px 32px rgba(25,43,91,.08); transition:transform .2s ease;
}
.channel-pill strong { display:block; color:var(--title); margin-bottom:6px; }
.channel-pill span { display:block; color:var(--muted); font-size:13px; line-height:1.6; }
.channel-pill:hover { transform:translateY(-2px); }

.split-section,.dual-grid,.triple-grid,.security-grid,.info-grid,.feature-grid { display:grid; gap:24px; }
.split-section { grid-template-columns:1fr 1fr; align-items:center; }
.dual-grid { grid-template-columns:repeat(2,1fr); }
.triple-grid { grid-template-columns:repeat(3,1fr); }
.security-grid { grid-template-columns:repeat(2,1fr); }
.info-grid { grid-template-columns:repeat(3,1fr); }
.feature-grid { grid-template-columns:repeat(3,1fr); }

.card,.zone-card,.info-card,.review-card,.faq-item,.notice-card,.inner-card {
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:22px;
}
.content-panel { padding:28px; }
.content-panel h2,.zone-card h2,.zone-card h3,.info-card h3,.inner-card h2,.inner-card h3 { margin-top:0; color:var(--title); }
.content-panel p,.zone-card p,.info-card p,.inner-card p { color:var(--muted); }
.zone-card { padding:24px; }
.zone-card img { margin-bottom:20px; border-radius:18px; background:var(--card-blue); }
.zone-card .text-link,.info-card .text-link,.content-panel .text-link,.notice-card .text-link {
  display:inline-flex; margin-top:8px; text-decoration:none; font-weight:700;
}
.mini-list { display:grid; gap:10px; padding:0; margin:18px 0 0; list-style:none; }
.mini-list li { position:relative; padding-left:18px; color:var(--text); }
.mini-list li::before {
  content:""; position:absolute; left:0; top:.73em; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--cyan));
}
.info-card { padding:22px; }
.info-card h3 { margin-bottom:8px; }
.info-card p { margin-bottom:0; }
.dark-card { background:linear-gradient(145deg,#11182F,#172144); color:#fff; }
.dark-card h2,.dark-card h3,.dark-card p,.dark-card li { color:#fff; }

.security-card { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; align-items:center; padding:26px; }
.security-card img { width:100%; border-radius:18px; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card { padding:22px; }
.review-card p { margin:0; color:var(--text); }
.review-card span { display:block; margin-top:12px; color:var(--soft); font-size:13px; }

.faq-list { display:grid; gap:14px; }
.faq-item { padding:22px; box-shadow:0 12px 28px rgba(25,43,91,.07); }
.faq-item h3 { margin:0 0 8px; color:var(--title); font-size:18px; }
.faq-item p { margin:0; color:var(--muted); }
.notice-card { padding:28px; background:linear-gradient(135deg,#FFF9E9,#F3F2FF 55%,#EAF7FF); }
.notice-card h2 { margin:0 0 10px; color:var(--title); }
.notice-card p { margin:0; color:var(--muted); }

.inner-hero {
  width:min(calc(100% - 32px),var(--max)); margin:0 auto; padding:62px 0 34px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
}
.inner-hero h1 { margin:8px 0 14px; color:var(--title); font-size:clamp(38px,5vw,62px); line-height:1.12; }
.inner-hero p { margin:0; color:var(--muted); font-size:17px; }
.inner-hero img { max-height:460px; border-radius:28px; box-shadow:0 28px 62px rgba(25,43,91,.16); }
.breadcrumb { width:min(calc(100% - 32px),var(--max)); margin:22px auto 0; color:var(--soft); font-size:14px; }
.breadcrumb a { text-decoration:none; }
.prose { max-width:860px; }
.prose p { color:var(--muted); margin:0 0 18px; }
.prose h2 { margin:36px 0 12px; font-size:28px; }
.prose h3 { color:var(--title); margin-top:24px; }

.steps { counter-reset:step; display:grid; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
.steps li {
  counter-increment:step; position:relative; padding:16px 16px 16px 56px; border-radius:16px;
  background:#fff; border:1px solid var(--border); color:var(--text);
}
.steps li::before {
  content:counter(step); position:absolute; left:16px; top:14px; width:28px; height:28px; display:grid;
  place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--violet)); color:#fff; font-weight:800;
}
.feedback-box { padding:22px; border-radius:20px; background:linear-gradient(135deg,#F3F0FF,#EAF7FF); border:1px solid var(--border); }
.feedback-box p { margin:0; color:var(--text); }
.feedback-box span { display:block; margin-top:10px; color:var(--soft); font-size:14px; }

.cta-band {
  width:min(calc(100% - 32px),var(--max)); margin:18px auto 76px; padding:30px; border-radius:28px;
  background:linear-gradient(135deg,#182445,#253367 58%,#284F73); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.cta-band h2 { margin:0 0 6px; color:#fff; }
.cta-band p { margin:0; color:#DCE5FF; }
.cta-band .main-btn { flex:0 0 auto; }

.site-footer { background:var(--footer); color:var(--footer-text); padding:58px 0 24px; }
.footer-inner {
  width:min(calc(100% - 32px),var(--max)); margin:0 auto; display:grid;
  grid-template-columns:1.5fr repeat(3,1fr); gap:32px;
}
.footer-brand p { max-width:380px; color:#BFC9E5; }
.footer-col h2 { margin:0 0 14px; color:#fff; font-size:16px; }
.footer-col a { display:block; margin:7px 0; color:#C8D2EA; text-decoration:none; font-size:14px; }
.footer-col a:hover,.footer-inline a:hover { color:#fff; }
.footer-bottom {
  width:min(calc(100% - 32px),var(--max)); margin:34px auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center;
  justify-content:space-between; gap:18px; color:#9FAAC7; font-size:13px;
}
.footer-bottom p { margin:0; }
.footer-inline { display:flex; gap:14px; flex-wrap:wrap; }
.footer-inline a { color:#C8D2EA; text-decoration:none; }
.mobile-bottom-nav { display:none; }

@media (max-width:1080px) {
  .nav-core { gap:2px; }
  .nav-core a { padding:8px 9px; font-size:14px; }
  .channel-grid { grid-template-columns:repeat(3,1fr); }
  .service-strip,.reviews-grid,.feature-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  body { padding-bottom:70px; }
  .header-inner { min-height:64px; display:grid; grid-template-columns:1fr auto 1fr; gap:8px; }
  .mobile-menu-toggle { display:inline-flex; justify-self:start; }
  .site-logo { justify-self:center; }
  .site-logo strong { display:none; }
  .nav-core,.desktop-menu-toggle { display:none; }
  .header-actions { justify-self:end; }
  .header-cta { min-height:40px; padding:8px 14px; font-size:14px; }
  .hero,.inner-hero,.split-section { grid-template-columns:1fr; }
  .hero { padding-top:44px; gap:34px; }
  .hero-visual { max-width:620px; margin:0 auto; }
  .service-strip,.dual-grid,.security-grid,.info-grid,.triple-grid { grid-template-columns:1fr; }
  .security-card { grid-template-columns:1fr; }
  .channel-grid { grid-template-columns:repeat(2,1fr); }
  .inner-hero { gap:28px; }
  .inner-hero img { max-height:none; }
  .mobile-bottom-nav {
    position:fixed; left:10px; right:10px; bottom:10px; z-index:9000; display:grid;
    grid-template-columns:repeat(4,1fr); border:1px solid rgba(91,108,255,.20);
    border-radius:18px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
    box-shadow:0 14px 36px rgba(25,43,91,.18); overflow:hidden;
  }
  .mobile-bottom-nav a { padding:12px 4px; text-align:center; text-decoration:none; color:var(--text); font-size:13px; font-weight:700; }
  .mobile-bottom-nav a:hover { color:var(--brand); background:var(--card-blue); }
  .cta-band { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
  .section,.inner-section { padding:56px 0; }
  .hero h1 { font-size:54px; }
  .hero-subtitle { font-size:26px; }
  .service-strip,.reviews-grid,.feature-grid,.channel-grid,.footer-inner { grid-template-columns:1fr; }
  .channel-pill { min-height:0; }
  .drawer-nav { grid-template-columns:1fr; }
  .site-drawer { width:min(360px,94vw); }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
  .content-panel,.zone-card,.security-card,.notice-card { padding:22px; }
  .inner-hero h1 { font-size:42px; }
}