@import url("/assets/css/devtool-fonts.css?v=20261012b");
/* ==========================================================================
   ss.kajiejie.com — 首页营销页 sink1 · dark-devtool-ui 皮肤
   --------------------------------------------------------------------------
   设计系统：GitHub Primer Dark + 青绿 #00d4aa（对齐 landing.html 视觉）
   特效：粒子连线画布（#particle-canvas，由 skin-particles.js 驱动）
         + 径向渐变光晕层（body::after）——两层都在内容之下
   挂载：sink1 系模板（index_default / about / terms / login / forget）
   ========================================================================== */

:root {
  --bg-deep: #070b10;
  --bg-main: #0d1117;
  --bg-card: #161b22;
  --bg-elevated: #1c2128;
  --fg: #e6edf3;
  --fg-muted: #7d8590;
  --accent: #00d4aa;
  --accent-glow: rgba(0, 212, 170, 0.3);
  --accent-secondary: #ff9500;
  --border: #30363d;
  --danger: #f85149;
  --success: #3fb950;
  --font-display: 'Space Grotesk', 'DM Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'DM Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
   0. 底层：底色 / 粒子层 / 光晕层
   ========================================================== */
html { background: var(--bg-deep); }
body { background: transparent !important; }

/* 粒子画布（固定全屏，位于内容之下） */
#particle-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* 径向渐变光晕（青绿 + 橙，低透明度） */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 212, 170, .08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255, 149, 0, .05) 0%, transparent 50%);
}

/* 若页面没有粒子画布，内容也保持可读层级 */
.content-wrapper, .login_box, #header-section, footer, .contact-details {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   1. 导航栏（玻璃态）
   ========================================================== */
body #header-section .navbar {
  background: rgba(7, 11, 16, .9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}

body #header-section .nav-link {
  color: var(--fg-muted) !important;
  border-radius: 6px;
  transition: all .2s ease;
}
body #header-section .nav-link:hover,
body #header-section .nav-link:focus {
  color: var(--fg) !important;
  background: rgba(255, 255, 255, .05) !important;
}

body #header-section img { filter: brightness(1.2) saturate(1.05); }

body #header-section .navbar-toggler {
  color: var(--fg-muted) !important;
  border-color: var(--border) !important;
}

/* 导航按钮：幽灵描边（按压压制行内蓝色） */
body #header-section .btn-info {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
  transition: all .3s var(--ease) !important;
}
body #header-section .btn-info:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(0, 212, 170, .05) !important;
  transform: translateY(-1px);
}

/* ==========================================================
   2. Banner（原图 + 暗色渐变覆盖）
   ========================================================== */
body .banner {
  background: linear-gradient(180deg, rgba(7, 11, 18, .8) 0%, rgba(7, 11, 18, .95) 100%),
    url("/assets/sink1/img/545481120.png") no-repeat 50% / cover !important;
}

body .banner h1 {
  color: var(--fg) !important;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
body .banner h6 { color: var(--fg-muted) !important; }
body .banner font { color: var(--accent) !important; }
body .banner .img-fluid { filter: brightness(.9); }

/* 主 CTA：青绿渐变 + 扫光 */
body .banner .btn-opacity-light {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #00a080 100%) !important;
  color: var(--bg-deep) !important;
  font-weight: 600;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: all .3s var(--ease) !important;
}
body .banner .btn-opacity-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 170, .4);
}
body .banner .btn-opacity-success {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
  transition: all .3s var(--ease) !important;
}
body .banner .btn-opacity-success:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(0, 212, 170, .05) !important;
  transform: translateY(-1px);
}

/* ==========================================================
   3. 内容区通用
   ========================================================== */
body .content-wrapper { background: transparent !important; color: var(--fg-muted); }

body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--fg);
  font-family: var(--font-display);
}

body .text-muted { color: var(--fg-muted) !important; }
body .section-subtitle { color: var(--accent) !important; }

/* ==========================================================
   4. 产品优势卡片（描边卡片 + hover 上浮）
   ========================================================== */
body .color-cards {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  transition: all .3s var(--ease);
}
body .color-cards:hover {
  border-color: rgba(0, 212, 170, .3) !important;
  transform: translateY(-4px);
}

body .color-cards .card-details { background: transparent !important; }
body .color-cards .card-details p { color: var(--fg-muted) !important; }
body .color-cards:hover .card-details p { color: var(--accent) !important; }

body .color-cards .card-desc-box { background: rgba(7, 11, 16, .85) !important; }

body .btn-white {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
  transition: all .3s var(--ease) !important;
}
body .btn-white:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ==========================================================
   5. CTA 区块 / 联系信息 / 页脚
   ========================================================== */
body .contact-us-bgimage {
  background: linear-gradient(180deg, rgba(7, 11, 18, .86) 0%, rgba(7, 11, 18, .95) 100%),
    url("../image/gdpr.jpg") 50% / cover no-repeat !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
}

body .contact-us-bgimage h4 { color: var(--fg) !important; }

body .btn-outline-danger {
  color: var(--fg) !important;
  border: 1.5px solid var(--border) !important;
  background: transparent !important;
  border-radius: 10px !important;
  transition: all .3s var(--ease) !important;
}
body .btn-outline-danger:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(0, 212, 170, .05) !important;
  transform: translateY(-1px);
}

body .contact-details {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}
body .contact-details img { filter: brightness(1.2) saturate(1.05); }
body .contact-details p, body .contact-details a { color: var(--fg-muted) !important; }
body .contact-details a:hover p { color: var(--accent) !important; }
body .contact-details h5 { color: var(--fg) !important; }
body .contact-details .mdi { color: var(--fg-muted) !important; transition: color .2s ease; }
body .contact-details a:hover .mdi { color: var(--accent) !important; }

body footer.border-top { border-color: var(--border) !important; }
body footer p, body footer a { color: var(--fg-muted) !important; }
body footer a:hover { color: var(--accent) !important; }

body .adcenter { opacity: .9; }