:root {
  --page-bg:#FFF8F0;
  --nav-bg:rgba(38,20,12,0.94);
  --title:#24130C;
  --brand:#FF6B35;
  --deep:#2B1A3F;
  --blue:#00E5B0;
  --gold:#FFD166;
  --rose:#B8336A;
  --light-blue:#E9FFF8;
  --light-gold:#FFF1C7;
  --text:#2A1F1A;
  --muted:#75645A;
  --soft:#A9978C;
  --card:#FFFFFF;
  --dark-card:#24130C;
  --border:rgba(255,107,53,0.18);
  --shadow:0 20px 46px rgba(97,45,16,0.14);
  --btn:linear-gradient(135deg, #FF6B35 0%, #FFB703 48%, #00E5B0 100%);
  --radius:24px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:radial-gradient(circle at 10% 10%, rgba(0,229,176,0.12), transparent 28%), radial-gradient(circle at 88% 12%, rgba(255,209,102,0.22), transparent 28%), var(--page-bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
.site-header {
  position:sticky;
  top:0;
  width:100%;
  z-index:9999;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 26px rgba(97,45,16,0.16);
}
.header-inner {
  max-width:1280px;
  margin:0 auto;
  min-height:72px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.site-logo, .footer-logo {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#FFF3E8;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.site-logo img { max-height:44px; }
.footer-logo img { max-height:40px; }
.nav-core { display:flex; align-items:center; justify-content:center; gap:12px; flex:1; }
.nav-core a {
  color:#FFF3E8;
  text-decoration:none;
  border-radius:999px;
  padding:8px 12px;
  font-size:15px;
  transition:.2s ease;
  white-space:nowrap;
}
.nav-core a:hover, .nav-core a.active { color:#FFFFFF; background:rgba(0,229,176,0.16); }
.header-actions { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.main-btn, .ghost-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  transition:.2s ease;
}
.main-btn {
  background:var(--btn);
  color:#FFFFFF;
  box-shadow:0 14px 32px rgba(255,107,53,0.22);
}
.main-btn:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(255,107,53,0.28); }
.ghost-btn { color:var(--brand); background:#FFF6EC; border:1px solid var(--border); }
.menu-toggle, .drawer-close {
  border:1px solid rgba(255,243,232,0.26);
  background:rgba(255,255,255,0.08);
  color:#FFF3E8;
  border-radius:999px;
  min-height:40px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:700;
}
.mobile-menu-slot { display:none; }
.drawer-mask {
  position:fixed;
  inset:0;
  background:rgba(26,15,10,0.45);
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}
.site-drawer {
  position:fixed;
  top:0;
  right:0;
  width:min(420px,88vw);
  height:100vh;
  z-index:10001;
  background:linear-gradient(180deg,#2B1A3F 0%,#24130C 100%);
  color:#FFF3E8;
  transform:translateX(105%);
  transition:.3s ease;
  padding:24px;
  overflow-y:auto;
  box-shadow:-18px 0 42px rgba(0,0,0,0.24);
}
.drawer-open { overflow-x:hidden; }
.drawer-open .drawer-mask { opacity:1; pointer-events:auto; }
.drawer-open .site-drawer { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.drawer-head strong { font-size:22px; }
.drawer-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.drawer-links a {
  color:#FFF3E8;
  text-decoration:none;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
}
.drawer-links a.active, .drawer-links a:hover { background:rgba(0,229,176,0.18); }
.drawer-note { margin-top:22px; color:#FFE7D3; font-size:14px; }
.container, .section, .hero, .sub-hero, .footer-inner, .footer-bottom {
  width:min(1180px, calc(100% - 40px));
  margin-inline:auto;
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:48px;
  align-items:center;
  padding:82px 0 56px;
  min-height:calc(100vh - 72px);
}
.hero-copy { position:relative; z-index:1; }
.section-kicker, .badge, .tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#5B250F;
  background:linear-gradient(135deg, rgba(255,209,102,0.9), rgba(0,229,176,0.2));
  border:1px solid rgba(255,107,53,0.2);
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  font-weight:800;
}
h1, h2, h3, .section-title { color:var(--title); line-height:1.2; margin:0 0 16px; }
h1 { font-size:clamp(42px, 8vw, 82px); letter-spacing:-.04em; }
h2 { font-size:clamp(28px, 4vw, 44px); letter-spacing:-.025em; }
h3 { font-size:22px; }
p { margin:0 0 14px; }
.lead { color:var(--muted); font-size:18px; max-width:720px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 22px; }
.hero-points { display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; margin:0; }
.hero-points li { background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 14px; color:var(--muted); box-shadow:0 10px 26px rgba(97,45,16,0.08); }
.hero-visual { position:relative; }
.hero-visual::before {
  content:"";
  position:absolute;
  inset:-18px;
  background:linear-gradient(135deg,rgba(255,107,53,.2),rgba(0,229,176,.18));
  border-radius:36px;
  transform:rotate(-3deg);
}
.hero-visual img, .content-img, .zone-card img, .app-section img, .sub-visual img, .media-img {
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.hero-visual img, .sub-visual img {
  position:relative;
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:var(--shadow);
  background:#fff;
}
.floating-card {
  position:absolute;
  right:18px;
  bottom:24px;
  width:min(250px, 58%);
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow);
}
.floating-card strong { display:block; color:var(--deep); margin-bottom:4px; }
.section { padding:56px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.section-head p { color:var(--muted); max-width:650px; }
.grid-4, .grid-3, .grid-2, .capsule-grid, .review-grid, .faq-grid, .service-grid { display:grid; gap:20px; }
.grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.capsule-grid { grid-template-columns:repeat(5, minmax(0,1fr)); }
.card, .zone-card, .info-card, .review-card, .faq-item, .content-card {
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:22px;
}
.info-card, .content-card, .review-card, .faq-item { padding:24px; }
.info-card h3, .content-card h3 { margin-bottom:10px; }
.info-card p, .content-card p, .review-card p, .faq-item p { color:var(--muted); }
.zone-card { overflow:hidden; }
.zone-card .zone-body { padding:24px; }
.zone-card img { width:100%; background:#fff; }
.text-link { color:var(--brand); font-weight:800; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.capsule {
  padding:18px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 16px 36px rgba(97,45,16,.08);
}
.capsule strong { color:var(--deep); display:block; margin-bottom:4px; }
.capsule span { display:block; color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:4px; }
.brand-panel, .security-panel, .sub-hero, .app-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);
  gap:34px;
  align-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(233,255,248,.82));
  border:1px solid var(--border);
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:34px;
}
.brand-panel img, .security-panel img, .app-panel img { border-radius:28px; background:#fff; border:1px solid var(--border); }
.split-card { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.media-card { background:#fff; border:1px solid var(--border); border-radius:26px; overflow:hidden; box-shadow:var(--shadow); }
.media-card .body { padding:24px; }
.mini-list { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.mini-list li { color:var(--muted); padding-left:18px; position:relative; }
.mini-list li::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); position:absolute; left:0; top:.78em; }
.security-panel { grid-template-columns:minmax(280px,.82fr) minmax(0,1fr); }
.alert-box {
  background:linear-gradient(135deg, rgba(43,26,63,.96), rgba(36,19,12,.96));
  color:#FFF3E8;
  border-radius:28px;
  padding:30px;
  box-shadow:var(--shadow);
}
.alert-box h2, .alert-box h3 { color:#fff; }
.alert-box p { color:#FFE7D3; }
.sub-hero { margin-top:42px; padding:44px; }
.sub-hero h1 { font-size:clamp(36px, 6vw, 62px); }
.sub-visual { position:relative; }
.content-section { padding:48px 0; }
.rich-text { color:var(--muted); }
.rich-text p { margin-bottom:16px; }
.content-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:24px; align-items:start; }
.content-aside { display:grid; gap:18px; }
.notice-strip { background:#FFF1C7; border:1px solid rgba(255,209,102,.6); border-radius:24px; padding:22px; color:#5B250F; }
.review-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.faq-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.page-faq-list { display:grid; gap:18px; }
.page-faq-list .faq-item h3 { font-size:20px; }
.site-footer { background:#1A0F0A; color:#FFF3E8; margin-top:54px; }
.footer-inner { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:28px; padding:48px 0 28px; }
.footer-brand p, .footer-bottom p { color:#EBD4C2; }
.footer-col { display:grid; align-content:start; gap:8px; }
.footer-col h3 { color:#fff; margin-bottom:8px; font-size:18px; }
.footer-col a { color:#FFE7D3; text-decoration:none; }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:18px 0 24px; }
.mobile-bottom-nav { display:none; }
@media (max-width: 1080px) {
  .nav-core { display:none; }
  .hero, .brand-panel, .security-panel, .app-panel, .sub-hero, .content-layout { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-3, .review-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .capsule-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
  body { padding-bottom:68px; }
  .header-inner { min-height:64px; padding:0 14px; gap:10px; }
  .mobile-menu-slot { display:block; order:1; }
  .site-logo { order:2; font-size:0; }
  .site-logo span { font-size:17px; }
  .site-logo img { max-height:36px; }
  .header-actions { order:3; }
  .menu-toggle-desktop { display:none; }
  .nav-cta { min-height:36px; padding:8px 12px; font-size:13px; }
  .container, .section, .hero, .sub-hero, .footer-inner, .footer-bottom { width:min(100% - 28px, 1180px); }
  .hero { padding:46px 0 34px; min-height:auto; gap:26px; }
  .hero-points { gap:8px; }
  .section { padding:38px 0; }
  .section-head { display:block; }
  .grid-4, .grid-3, .grid-2, .capsule-grid, .review-grid, .faq-grid, .split-card { grid-template-columns:1fr; }
  .brand-panel, .security-panel, .sub-hero, .app-panel { padding:22px; border-radius:26px; }
  .drawer-links { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .floating-card { position:relative; right:auto; bottom:auto; width:100%; margin-top:12px; }
  .mobile-bottom-nav {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:fixed;
    left:12px;
    right:12px;
    bottom:10px;
    z-index:9998;
    background:rgba(38,20,12,.94);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    padding:8px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
  }
  .mobile-bottom-nav a { color:#FFF3E8; text-align:center; text-decoration:none; font-weight:800; font-size:13px; padding:8px 4px; border-radius:16px; }
  .mobile-bottom-nav a:hover { background:rgba(0,229,176,.15); }
}