/* ============================================================
   海丝包网 — 「Aurora」浅色主题
   浅中带艳 · 游戏感 · 高端专业
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* 底色层次 — 暖灰紫调，不刺眼的浅色 */
  --bg-root:      #f5f3fb;
  --bg-sidebar:   #efecf7;
  --bg-surface:   #faf9fd;
  --bg-card:      #ffffff;
  --bg-card-alt:  #f7f5fc;
  /* 边框 — 柔和但有层次 */
  --b-hairline:   #e7e3f2;
  --b-subtle:     #ddd9ec;
  --b-default:    #cec9e2;
  --b-strong:     #b5aed4;
  --b-accent:     rgba(109,40,217,0.30);
  /* 文字 */
  --t-100:        #15122a;
  --t-200:        #4b4768;
  --t-300:        #76729a;
  --t-400:        #a09cb8;
  /* 品牌强调色 — 紫 + 金 = 浅中带艳 */
  --brand:        #6d28d9;
  --brand-soft:   #8b5cf6;
  --brand-glow:   rgba(109,40,217,0.22);
  --gold:         #d4950e;
  --gold-soft:    #f0b828;
  --gold-glow:    rgba(212,149,14,0.25);
  --pink:         #c73d7c;
  --pink-soft:    #e85d9a;
  /* 渐变 */
  --grad-brand:   linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --grad-warm:    linear-gradient(135deg, #8b5cf6 0%, #d9468c 50%, #d4950e 100%);
  /* 排版 */
  --font-body:    'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:    'JetBrains Mono','Consolas',monospace;
  --font-display: 'DM Serif Display','Noto Sans SC',Georgia,serif;
  /* 度量 */
  --sidebar-w:    240px;
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior:smooth; font-size:16px; }
/* 隐藏滚动条 */
html, body, .sidebar, .main {
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar { display:none; }
section::-webkit-scrollbar { width:4px; }
section::-webkit-scrollbar-track { background:transparent; }
section::-webkit-scrollbar-thumb { background:rgba(167,139,250,.3); border-radius:3px; }

body {
  font-family:var(--font-body);
  background:var(--bg-root);
  color:var(--t-100);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
  display:flex;
  min-height:100vh;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ============================================================
   仙雾消散入场动画
   ============================================================ */
.stage {
  position:fixed; inset:0; z-index:9999;
  pointer-events:all;
}
body.door-locked { overflow:hidden; }

.mist-veil {
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(ellipse 80% 60% at 50% 45%, rgba(245,243,251,0.3) 0%, rgba(245,243,251,0.9) 60%, #f5f3fb 100%);
}
.mist-glow {
  position:absolute; border-radius:50%; z-index:2;
  filter:blur(60px);
}
.mist-glow--a {
  width:70%; height:60%; top:10%; left:15%;
  background:radial-gradient(ellipse at center, rgba(167,139,250,0.5) 0%, transparent 70%);
}
.mist-glow--b {
  width:55%; height:50%; top:35%; left:40%;
  background:radial-gradient(ellipse at center, rgba(196,180,255,0.4) 0%, transparent 65%);
}
.mist-glow--c {
  width:80%; height:45%; top:5%; left:5%;
  background:radial-gradient(ellipse at center, rgba(220,210,255,0.3) 0%, transparent 60%);
}
.mist-spark {
  position:absolute; z-index:4;
  width:4px; height:4px; border-radius:50%;
  background:#c4b5fd;
  box-shadow:0 0 6px #c4b5fd, 0 0 12px rgba(167,139,250,0.5);
  animation:sparkDrift var(--drift, 2s) ease-in-out infinite;
}
@keyframes sparkDrift {
  0%,100% { transform:translate(0,0) scale(1); opacity:0.5; }
  25%  { transform:translate(8px,-10px) scale(1.6); opacity:0.9; }
  50%  { transform:translate(-4px,-4px) scale(1); opacity:0.4; }
  75%  { transform:translate(6px,5px) scale(1.4); opacity:0.7; }
}
.stage.fade-out .mist-veil,
.stage.fade-out .mist-glow,
.stage.fade-out .mist-spark {
  animation:fadeAll 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stage.fade-out .mist-spark {
  animation:fadeAll 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             sparkDrift var(--drift,2s) ease-in-out infinite;
}
@keyframes fadeAll {
  0% { opacity:1; }
  100% { opacity:0; }
}
.stage.done {
  pointer-events:none; opacity:0;
  transition:opacity 0.3s;
}

/* ---------- 光标光晕 ---------- */
.cursor-glow {
  position:fixed; z-index:0; pointer-events:none;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,40,217,0.04) 0%, transparent 60%);
  transform:translate(-50%,-50%);
  transition:opacity 0.5s;
  opacity:0;
}
.cursor-glow.active { opacity:1; }

/* ---------- 粒子画布 ---------- */
#particles {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.25;
}

/* ---------- 网格纹理 ---------- */
.grid-texture {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(109,40,217,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black 25%, transparent 70%);
}

/* ============================================================
   侧边栏
   ============================================================ */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--bg-sidebar);
  border-right:1px solid var(--b-hairline);
  z-index:100;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
}
.sidebar-inner {
  flex:1; display:flex; flex-direction:column;
  padding:36px 28px 24px;
}

.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:40px;
}
.sidebar-logo-text {
  font-size:18px; font-weight:800; letter-spacing:-0.3px;
  color:var(--t-100);
}
.sidebar-logo-accent {
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* 侧边栏导航 */
.side-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.side-nav-item {
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; border-radius:8px;
  position:relative;
  transition:background 0.2s, color 0.2s;
}
.side-nav-item:hover { background:rgba(109,40,217,0.04); }
.side-nav-num {
  font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  color:var(--t-400);
  letter-spacing:1px; width:22px;
  transition:color 0.3s;
}
.side-nav-label {
  font-size:14px; font-weight:500;
  color:var(--t-300);
  letter-spacing:0.3px;
  transition:color 0.3s;
}
.side-nav-indicator {
  margin-left:auto;
  width:6px; height:6px; border-radius:50%;
  background:transparent;
  border:1px solid var(--b-subtle);
  transition:all 0.3s var(--ease);
}
/* 激活态 — 紫底 + 左侧竖线 */
.side-nav-item.active {
  background:linear-gradient(90deg, rgba(109,40,217,0.08) 0%, rgba(109,40,217,0.02) 100%);
  box-shadow:inset 3px 0 0 var(--brand);
}
.side-nav-item.active .side-nav-num { color:var(--brand-soft); }
.side-nav-item.active .side-nav-label { color:var(--t-100); font-weight:600; }
.side-nav-item.active .side-nav-indicator {
  background:var(--brand); border-color:var(--brand);
  box-shadow:0 0 10px var(--brand-glow);
}

/* 侧边栏底部 */
.sidebar-foot { margin-top:auto; }
.sidebar-divider { height:1px; background:var(--b-subtle); margin-bottom:16px; }
.sidebar-telegram {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  font-size:13px; font-weight:500; color:var(--t-300);
  transition:all 0.25s; margin-bottom:12px;
}
.sidebar-telegram:hover { background:rgba(109,40,217,0.04); color:var(--brand); }

.side-lang {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 14px; border-radius:8px;
  background:var(--bg-card); border:1px solid var(--b-subtle);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  color:var(--t-300); cursor:pointer;
  transition:all 0.25s; margin-bottom:16px;
}
.side-lang:hover { border-color:var(--b-strong); color:var(--t-100); }
.side-lang-text {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:rgba(109,40,217,0.08); border-radius:6px;
  font-size:12px; font-weight:700; color:var(--brand); flex-shrink:0;
}
.side-lang-label { font-size:12px; font-weight:400; color:var(--t-400); }

.sidebar-copy { font-size:11px; color:var(--t-400); letter-spacing:0.5px; }

/* ============================================================
   主内容区
   ============================================================ */
.main {
  margin-left:var(--sidebar-w);
  flex:1; min-width:0;
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:100vh;
}
.container { width:100%; max-width:1600px; margin:0 auto; padding:0 5%; }

/* ============================================================
   Section 通用 — 单区切换模式
   ============================================================ */
section {
  display:none;
  position:relative; z-index:1; padding:100px 0;
}
section.active { display:block; flex:1; }
/* Hero 特殊：flex 居中 + 撑满视口 */
#hero { padding-top:0; padding-bottom:40px; }
#hero.active { display:flex; align-items:center; }
.section-head { margin-bottom:64px; }
.section-chip {
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:2px;
  color:var(--brand-soft);
  margin-bottom:14px;
  padding:5px 14px; border-radius:4px;
  background:rgba(109,40,217,0.05);
  border:1px solid rgba(109,40,217,0.12);
}
.section-title {
  font-size:clamp(28px,3.8vw,44px);
  font-weight:800; letter-spacing:-0.8px;
  margin-bottom:14px; line-height:1.15;
  color:var(--t-100);
}
.section-sub {
  font-size:15px; color:var(--t-300);
  max-width:480px; line-height:1.7;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:0; padding-bottom:40px; overflow:hidden;
}
/* 浅色光球 */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(140px); z-index:0;
}
.hero-orb--1 {
  width:600px; height:600px; background:rgba(139,92,246,0.06);
  top:-200px; right:-200px;
}
.hero-orb--2 {
  width:450px; height:450px;
  background:linear-gradient(135deg, rgba(212,149,14,0.04), rgba(200,61,124,0.03));
  bottom:-150px; left:-150px;
}
.hero .container { position:relative; z-index:2; }

.hero-topline {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--t-300); letter-spacing:0.4px;
  margin-bottom:80px;
  padding:7px 20px; border-radius:50px;
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  box-shadow:0 2px 12px rgba(0,0,0,0.03);
}
.topline-dot {
  width:6px; height:6px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px #22c55e;
  animation:pulse-dot 2s infinite;
}
.topline-sep { color:var(--t-400); }
.topline-status { color:#16a34a; font-weight:600; }

.hero-body { margin-bottom:72px; }
.hero-title {
  font-size:clamp(42px,8vw,88px);
  font-weight:900; line-height:0.95;
  letter-spacing:-3px; margin-bottom:28px;
}
.hero-title-line { display:block; }
.hero-em {
  font-style:italic;
  background:var(--grad-warm);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub-block { max-width:600px; }
.hero-subtitle {
  font-size:clamp(20px,3vw,30px);
  font-weight:600; letter-spacing:-0.5px;
  color:var(--t-200); margin-bottom:20px; line-height:1.3;
}
.hero-desc {
  font-size:15px; color:var(--t-300);
  line-height:1.9; margin-bottom:36px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* 按钮 — 游戏感 */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; border:none; cursor:pointer;
  border-radius:6px; transition:all 0.3s var(--ease);
  white-space:nowrap; font-size:14px; padding:14px 28px;
  letter-spacing:0.3px; position:relative;
}
.btn-primary {
  background:var(--grad-brand); color:#fff;
  box-shadow:0 4px 20px var(--brand-glow), 0 1px 2px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(109,40,217,0.35), 0 2px 6px rgba(0,0,0,0.15);
}
.btn-outline {
  background:var(--bg-card); color:var(--t-100);
  border:1px solid var(--b-default);
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.btn-outline:hover {
  border-color:var(--brand-soft);
  background:rgba(109,40,217,0.02);
  box-shadow:0 4px 16px rgba(109,40,217,0.08);
}

/* Hero 指标 */
.hero-metrics {
  display:flex; gap:0;
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  border-radius:10px; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.04);
}
.metric {
  flex:1; text-align:center;
  padding:28px 20px;
  border-right:1px solid var(--b-hairline);
}
.metric:last-child { border-right:none; }
.metric-value {
  font-size:38px; font-weight:900; letter-spacing:-1.5px;
  margin-bottom:2px;
}
.metric-suffix {
  font-size:20px; font-weight:700;
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.metric-label {
  font-size:11px; color:var(--t-400); letter-spacing:1.5px;
  text-transform:uppercase; font-weight:600;
}

/* ============================================================
   Services
   ============================================================ */
.services { background:var(--bg-surface); }
.services-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
}
.service-card {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  border-radius:10px;
  padding:40px 36px;
  box-shadow:0 2px 16px rgba(0,0,0,0.03);
  transition:border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.service-card-accent {
  position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:10px 10px 0 0;
  background:linear-gradient(90deg, var(--brand-soft), var(--pink-soft));
  opacity:0; transition:opacity 0.3s;
}
.service-card:hover {
  border-color:var(--b-accent);
  box-shadow:0 8px 32px rgba(109,40,217,0.08), 0 2px 8px rgba(0,0,0,0.04);
  transform:translateY(-3px);
}
.service-card:hover .service-card-accent { opacity:1; }
.service-card--alt .service-card-accent {
  background:linear-gradient(90deg, var(--pink-soft), var(--gold-soft));
}

.card-icon {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(109,40,217,0.06), rgba(139,92,246,0.04));
  border-radius:8px; color:var(--brand-soft); margin-bottom:20px;
}
.service-card--alt .card-icon {
  background:linear-gradient(135deg, rgba(199,61,124,0.06), rgba(212,149,14,0.04));
  color:var(--pink-soft);
}
.card-tag {
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--brand-soft);
  padding:4px 12px; border-radius:3px;
  background:rgba(109,40,217,0.05);
  margin-bottom:12px;
}
.service-card--alt .card-tag {
  color:var(--pink-soft);
  background:rgba(199,61,124,0.05);
}
.service-card h3 {
  font-size:22px; font-weight:700; margin-bottom:14px; letter-spacing:-0.3px;
}
.service-card p {
  font-size:13.5px; color:var(--t-300); line-height:1.8; margin-bottom:22px;
}
.card-list {
  list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px;
}
.card-list li {
  font-size:13px; color:var(--t-200);
  padding-left:18px; position:relative;
}
.card-list li::before {
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%;
  background:var(--brand-soft);
}
.service-card--alt .card-list li::before { background:var(--pink-soft); }

.card-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:var(--brand);
  transition:gap 0.25s;
}
.service-card--alt .card-link { color:var(--pink); }
.card-link:hover { gap:12px; }

/* ============================================================
   Demo
   ============================================================ */
.demo { background:var(--bg-root); }
.demo-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.demo-card {
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  border-radius:10px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.03);
  transition:border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.demo-card:hover {
  border-color:var(--b-accent);
  box-shadow:0 12px 36px rgba(109,40,217,0.06);
  transform:translateY(-3px);
}
.demo-browser {
  display:flex; align-items:center; gap:7px;
  padding:12px 16px;
  background:var(--bg-card-alt);
  border-bottom:1px solid var(--b-hairline);
}
.demo-dot { width:9px; height:9px; border-radius:50%; }
.demo-dot--r { background:#ff5f57; }
.demo-dot--y { background:#febc2e; }
.demo-dot--g { background:#28c840; }
.demo-url {
  margin-left:8px; font-size:11px; color:var(--t-400);
  font-family:var(--font-mono); letter-spacing:-0.2px;
}
.demo-screen {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #2a2744 0%, #3d3860 100%);
  border-bottom:1px solid var(--b-subtle);
  aspect-ratio:9/16;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
}
.demo-frame {
  width:100%; height:100%; border:none;
  display:block; pointer-events:none;
  border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:#fff;
}
.demo-card:hover .demo-frame {
  pointer-events:auto;
}
/* ====== 演示站预览模态框 ====== */
.demo-modal {
  display:none; position:fixed; inset:0; z-index:99999;
  align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease-out);
}
.demo-modal.open { display:flex; opacity:1; }
.demo-modal-backdrop {
  position:absolute; inset:0;
  background:rgba(21,18,42,.7);
  backdrop-filter:blur(10px);
}
.demo-modal-box {
  position:relative; width:95vw; height:95vh; max-width:1400px;
  background:var(--bg-card); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 25px 80px rgba(21,18,42,.35), 0 0 0 1px var(--b-subtle);
  transform:scale(.96) translateY(12px);
  transition:transform .35s var(--ease-out);
}
.demo-modal.open .demo-modal-box { transform:scale(1) translateY(0); }
.demo-modal-toolbar {
  display:flex; align-items:center; justify-content:center;
  padding:10px 20px;
  background:var(--bg-card-alt);
  border-bottom:1px solid var(--b-hairline);
  position:relative; flex-shrink:0;
}
.demo-modal-devices {
  display:flex; gap:4px;
  background:var(--bg-root); border-radius:10px; padding:4px;
  border:1px solid var(--b-hairline);
}
.dm-device-btn {
  display:flex; align-items:center; gap:6px;
  padding:6px 16px; border:none; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--t-400);
  transition:all .25s var(--ease-out);
  font-family:var(--font-body);
}
.dm-device-btn svg { width:15px; height:15px; }
.dm-device-btn.active {
  background:var(--bg-card); color:var(--brand);
  box-shadow:0 1px 4px rgba(21,18,42,.1), 0 0 0 1px var(--b-subtle);
}
.dm-device-btn:hover:not(.active) { color:var(--t-200); }
.demo-modal-close {
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  width:34px; height:34px; border:none;
  background:var(--bg-root); color:var(--t-400);
  font-size:18px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; line-height:1;
  border:1px solid var(--b-hairline);
}
.demo-modal-close:hover {
  background:var(--brand); color:#fff;
  border-color:var(--brand); box-shadow:0 2px 12px var(--brand-glow);
}
.demo-modal-body {
  flex:1; display:flex; align-items:flex-start; justify-content:center;
  overflow:auto; background:var(--bg-root);
  transition:all .3s var(--ease-out);
  padding:0;
}
.demo-modal-body.is-mobile {
  padding:24px 0;
}
.demo-modal-body.is-mobile .demo-modal-iframe {
  width:375px; height:calc(95vh - 110px);
  border-radius:24px; box-shadow:0 8px 40px rgba(21,18,42,.2);
  flex:none; border:1px solid var(--b-hairline);
}
.demo-modal-iframe {
  flex:1; width:100%; height:100%; border:none; display:block;
  transition:all .35s var(--ease-out);
}
.demo-modal-tip {
  padding:12px 20px; text-align:center; font-size:13px;
  color:var(--t-300); background:var(--bg-card-alt);
  border-top:1px solid var(--b-hairline);
  flex-shrink:0; letter-spacing:.2px;
}
.demo-modal-tip strong { color:var(--brand); font-weight:700; }
.demo-tag {
  font-size:11px; font-weight:700; letter-spacing:2px;
  padding:6px 16px; border-radius:4px;
  background:#fff; border:1px solid #e5e7eb;
  display:inline-block;
}
.demo-info { padding:22px; }
.demo-info h4 { font-size:16px; font-weight:700; margin-bottom:6px; }
.demo-info p {
  font-size:13px; color:var(--t-300); line-height:1.65; margin-bottom:14px;
}
.demo-link {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:700; color:var(--brand);
  transition:gap 0.25s;
}
.demo-link:hover { gap:9px; }
.demo-admin-info {
  margin-top:10px; padding:10px 12px;
  background:var(--bg-card-alt); border-radius:6px;
  border:1px solid var(--b-hairline);
}
.demo-admin-row {
  display:flex; align-items:baseline; gap:6px;
  font-size:12px; line-height:1.8;
}
.demo-admin-label {
  flex-shrink:0; color:var(--t-400); font-size:11px;
  font-weight:600; letter-spacing:.3px; min-width:56px;
}
.demo-admin-value {
  color:var(--t-200); word-break:break-all;
}
.demo-admin-link { color:var(--brand); }
.demo-admin-link:hover { text-decoration:underline; }
.demo-admin-contact {
  margin-top:10px; font-size:12px; color:var(--t-400);
  padding:8px 12px; background:var(--bg-card-alt);
  border-radius:6px; border:1px solid var(--b-hairline);
  text-align:center;
}

/* ============================================================
   Advantages
   ============================================================ */
.advantages { background:var(--bg-surface); }
.adv-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.adv-item {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  border-radius:10px;
  padding:36px 28px 30px;
  box-shadow:0 2px 12px rgba(0,0,0,0.02);
  transition:border-color 0.3s, box-shadow 0.3s;
  overflow:hidden;
}
.adv-item::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand-soft), var(--brand), var(--brand-soft));
  opacity:0; transition:opacity 0.3s;
}
.adv-item:hover {
  border-color:var(--b-accent);
  box-shadow:0 8px 28px rgba(109,40,217,0.06);
}
.adv-item:hover::before { opacity:1; }
.adv-num {
  display:block;
  font-family:var(--font-mono);
  font-size:48px; font-weight:700; line-height:1;
  background:linear-gradient(180deg, rgba(109,40,217,0.12), rgba(109,40,217,0.03));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:16px;
}
.adv-item h4 {
  font-size:16px; font-weight:700; margin-bottom:10px; letter-spacing:-0.2px;
}
.adv-item p {
  font-size:13px; color:var(--t-300); line-height:1.75;
}

/* ============================================================
   Contact
   ============================================================ */
.contact { background:var(--bg-root); }
.contact-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-bottom:28px;
}
.contact-card {
  background:var(--bg-card);
  border:1px solid var(--b-subtle);
  border-radius:10px;
  padding:36px 32px;
  box-shadow:0 2px 12px rgba(0,0,0,0.02);
}
.contact-card h3 {
  font-size:14px; font-weight:700; margin-bottom:22px;
  color:var(--t-300); letter-spacing:1px;
}
.contact-links { display:flex; flex-direction:column; gap:12px; }
.contact-link {
  display:flex; align-items:center; gap:14px;
  padding:16px;
  background:var(--bg-card-alt);
  border:1px solid var(--b-hairline);
  border-radius:8px;
  transition:all 0.3s;
}
.contact-link:hover {
  border-color:var(--b-accent);
  background:var(--bg-card);
  box-shadow:0 4px 16px rgba(109,40,217,0.06);
}
.contact-link-icon {
  width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(109,40,217,0.08), rgba(139,92,246,0.04));
  border-radius:8px; color:var(--brand-soft);
}
.contact-link-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.contact-link-label { font-size:10px; color:var(--t-400); letter-spacing:1.5px; text-transform:uppercase; }
.contact-link-user { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
.contact-link-arrow {
  color:var(--t-400); flex-shrink:0;
  transition:transform 0.3s, color 0.3s;
}
.contact-link:hover .contact-link-arrow { transform:translateX(3px); color:var(--brand); }

/* 地址 */
.address-block { margin-bottom:22px; }
.address-line { font-size:14px; color:var(--t-300); line-height:1.9; }
.address-line--name { color:var(--t-100); font-weight:600; font-size:14.5px; }
.address-map {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:var(--bg-card-alt);
  border:1px solid var(--b-hairline);
  border-radius:8px; font-size:12.5px; color:var(--t-300);
}
.map-marker {
  width:7px; height:7px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
  box-shadow:0 0 8px var(--brand-glow);
  animation:pulse-dot 2s infinite;
}

/* 标签 */
.contact-tags { display:flex; flex-wrap:wrap; gap:10px; }
.contact-tags span {
  font-size:11.5px; font-weight:600;
  padding:7px 16px; border-radius:4px;
  background:var(--bg-card-alt);
  border:1px solid var(--b-hairline);
  color:var(--t-300); letter-spacing:0.3px;
  transition:all 0.3s;
}
.contact-tags span:hover {
  background:rgba(109,40,217,0.04);
  border-color:var(--b-accent);
  color:var(--brand);
}

/* ============================================================
   移动端底部导航
   ============================================================ */
.mobile-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--bg-sidebar);
  border-top:1px solid var(--b-subtle);
  padding:8px 0 max(8px, env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center;
  box-shadow:0 -2px 16px rgba(0,0,0,0.04);
}
.mobile-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 12px; border-radius:6px;
  font-size:10px; font-weight:600; color:var(--t-400);
  transition:color 0.25s;
}
.mobile-nav-item.active { color:var(--brand); }
.mobile-nav-item svg { opacity:0.45; }
.mobile-nav-item.active svg { opacity:1; }

/* ============================================================
   Animations
   ============================================================ */
@keyframes pulse-dot {
  0%,100% { opacity:1; }
  50% { opacity:0.3; }
}
[data-reveal] {
  opacity:0; transform:translateY(36px);
  transition:opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].revealed {
  opacity:1; transform:translateY(0);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px) {
  :root { --sidebar-w:0px; }
  .sidebar { display:none; }
  .main { margin-left:0; padding-bottom:180px; }
  .mobile-nav { display:flex; }
  .container { padding:0 24px; }

  .hero { padding-top:60px; min-height:auto; }
  .hero-title { font-size:clamp(32px,6vw,56px); }
  .hero-topline { margin-bottom:48px; }
  .hero-metrics { display:grid; grid-template-columns:repeat(2,1fr); }
  .metric { border-bottom:1px solid var(--b-hairline); }
  .metric:nth-child(3), .metric:nth-child(4) { border-bottom:none; }

  .services-grid { grid-template-columns:1fr; }
  .adv-grid { grid-template-columns:repeat(2,1fr); }
  .demo-grid { grid-template-columns:1fr 1fr; }
  .demo-card:nth-child(3) { grid-column:1/-1; max-width:400px; justify-self:center; }
  .contact-layout { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .container { padding:0 16px; }
  section { padding:80px 0; }
  .demo-grid { grid-template-columns:1fr; }
  .demo-card:nth-child(3) { grid-column:auto; max-width:none; }
  .adv-grid { grid-template-columns:1fr; }
  .hero-metrics { grid-template-columns:repeat(2,1fr); }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { justify-content:center; }
}

/* ============================================================
   演示站静态 fallback 样式
   ============================================================ */
.demo-screen--sports {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #a78bfa 100%);
}
.demo-screen--casino {
  background: linear-gradient(135deg, #9d174d 0%, #c73d7c 50%, #e85d9a 100%);
}
.demo-screen--app {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
}

/* ============================================================
   移动端 Top Bar
   ============================================================ */
.mobile-topbar {
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:99;
  background:rgba(245,243,251,0.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--b-subtle);
  padding:10px 20px;
  justify-content:space-between; align-items:center;
}
.mobile-topbar-logo {
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:800;
}
.mobile-topbar-logo span:last-child {
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.mobile-menu-btn {
  display:flex; flex-direction:column; gap:4px;
  background:none; border:none; cursor:pointer;
  padding:6px; width:28px; z-index:201;
}
.mobile-menu-btn span {
  display:block; width:100%; height:2px;
  background:var(--t-200); border-radius:1px;
  transition:transform 0.3s, opacity 0.3s;
}
.mobile-menu-btn.open span:nth-child(1) {
  transform:rotate(45deg) translate(4px,4px);
}
.mobile-menu-btn.open span:nth-child(2) {
  transform:rotate(-45deg) translate(4px,-4px);
}

/* ---------- 移动端抽屉侧边栏 overlay ---------- */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0; z-index:149;
  background:rgba(0,0,0,0.35);
  opacity:0; transition:opacity 0.35s;
  pointer-events:none;
}
.sidebar-overlay.show {
  display:block; opacity:1; pointer-events:all;
}

/* ---------- Responsive 覆盖：抽屉侧边栏 ---------- */
@media (max-width:1024px) {
  .mobile-topbar { display:flex; }
  .sidebar {
    display:flex !important;
    position:fixed; left:-290px; top:0; bottom:0;
    width:280px; z-index:150;
    transition:left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow:none; border-right:none;
  }
  .sidebar.open {
    left:0;
    box-shadow:6px 0 48px rgba(0,0,0,0.12);
  }
  .main { padding-top:52px; }
}