/* ============================================================
   KOP-SQL 企业官网 - 白色科技风
   与平台内部 OceanTech 主题保持一致
   ============================================================ */
:root {
  --blue:#1d4ed8;
  --cyan:#06b6d4;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#0f172a;
  line-height:1.65;
  background:
    radial-gradient(760px 420px at 8% 0%, rgba(29,78,216,.08), transparent 62%),
    radial-gradient(800px 460px at 96% 28%, rgba(6,182,212,.06), transparent 60%),
    linear-gradient(160deg,#ffffff 0%,#f6f9fc 100%);
  position:relative;
}
body::before {
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,43,70,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,43,70,.04) 1px, transparent 1px);
  background-size:52px 52px;
}
a { color:inherit; text-decoration:none; }

/* ---------- 导航 ---------- */
.nav {
  position:sticky; top:0; z-index:10;
  height:66px; padding:0 40px;
  display:flex; align-items:center; gap:36px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e5e7eb;
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-logo {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(29,78,216,.4);
}
.nav-name { font-size:18px; font-weight:700; letter-spacing:.4px; color:#0f172a; }
.nav-menu { display:flex; gap:26px; margin-left:10px; }
.nav-menu a { font-size:14px; color:#475569; transition:color .15s; }
.nav-menu a:hover { color:#1d4ed8; }
.nav-actions { margin-left:auto; display:flex; gap:12px; }
.nav .btn-sm { padding:9px 20px; font-size:14px; }
.lang-switch {
  padding:7px 12px; border-radius:8px; font-size:14px; cursor:pointer;
  color:#475569; background:#fff; border:1px solid rgba(29,78,216,.25);
  transition:all .15s; user-select:none; white-space:nowrap;
  font-family:inherit; outline:none;
}
.lang-switch:hover { color:#1d4ed8; border-color:rgba(29,78,216,.5); }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:10px;
  font-size:15px; font-weight:600; letter-spacing:.5px;
  transition:all .15s; cursor:pointer; border:none;
}
.btn-primary {
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff; box-shadow:0 10px 24px rgba(29,78,216,.35);
}
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(29,78,216,.35);
  color:#1d4ed8;
}
.btn-ghost:hover { background:rgba(29,78,216,.08); }

/* ---------- Hero ---------- */
.hero {
  max-width:1200px; margin:0 auto;
  padding:96px 40px 72px;
  display:flex; align-items:center; gap:64px;
}
.hero-left { flex:1.05; }
.hero-badge {
  display:inline-block; padding:6px 14px; margin-bottom:20px;
  font-size:13px; letter-spacing:1.5px; color:#1d4ed8;
  border:1px solid rgba(29,78,216,.3); border-radius:999px;
  background:rgba(29,78,216,.06);
}
.hero h1 {
  font-size:46px; line-height:1.25; font-weight:800; letter-spacing:1px;
  background:linear-gradient(120deg,#0f2b46 20%,#1d4ed8 70%,#06b6d4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[lang="en"] .hero h1 { font-size:36px; letter-spacing:.3px; }
.hero-sub { margin:22px 0 30px; font-size:17px; color:#475569; max-width:520px; }
.hero-slogan {
  margin:0 0 18px; font-size:16px; letter-spacing:1.4px;
  font-family:Consolas,"Courier New",monospace; font-weight:600;
  background:linear-gradient(120deg,#06b6d4,#1d4ed8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-btns { display:flex; gap:16px; }
.hero-note { margin-top:26px; font-size:13px; color:#64748b; letter-spacing:.8px; }
/* Hero 之后紧跟的首个区块（产品功能）：收紧上方留白（Hero 自身已有 72px 下内边距） */
.hero + .section { padding-top:24px; }

.hero-right { flex:1; }
.console {
  background:#ffffff;
  border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 30px 80px rgba(15,43,70,.10);
  overflow:hidden;
}
.console-head {
  display:flex; align-items:center; gap:8px;
  padding:13px 16px; border-bottom:1px solid #eef2f7;
  background:#f8fafc;
}
.dot { width:11px; height:11px; border-radius:50%; }
.dot-r { background:#f87171; } .dot-y { background:#fbbf24; } .dot-g { background:#34d399; }
.console-title { margin-left:8px; font-size:13px; color:#64748b; }
.console-body { padding:8px 16px; }
.row {
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px dashed #eef2f7;
}
.row:last-child { border-bottom:none; }
.row code {
  flex:1; font-family:Consolas,"Courier New",monospace;
  font-size:13px; color:#334155; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.tag {
  flex-shrink:0; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}
.tag-ok { color:#059669; background:rgba(5,150,105,.10); }
.tag-warn { color:#d97706; background:rgba(217,119,6,.10); }
.tag-reject { color:#dc2626; background:rgba(220,38,38,.10); }
.console-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px; border-top:1px solid #eef2f7;
  font-size:12px; color:#94a3b8;
}
.console-link { color:#1d4ed8; }

/* ---------- 支持的数据库 ---------- */
.db-flex { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.db-card {
  width:180px; padding:22px 14px 18px; text-align:center;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px;
  transition:all .18s;
}
.db-card:hover {
  border-color:rgba(6,182,212,.55); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,43,70,.08);
}
.db-logo {
  height:48px; width:auto; max-width:132px; margin:0 auto 14px;
  display:block; object-fit:contain;
}
.db-card b { display:block; font-size:14px; font-weight:600; color:#0f172a; }
.db-foot { margin-top:26px; text-align:center; font-size:13px; color:#94a3b8; }

/* ---------- 区块 ---------- */
.section { max-width:1200px; margin:0 auto; padding:84px 40px; }
.section-alt { background:rgba(241,245,249,.55); border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; max-width:none; padding-left:40px; padding-right:40px; }
.section-alt > .section-head,
.section-alt > .grid-3 { max-width:1200px; margin-left:auto; margin-right:auto; }
.section-head { text-align:center; margin-bottom:52px; }
.section-tag {
  display:inline-block; font-size:13px; letter-spacing:2px; color:#1d4ed8;
  margin-bottom:12px;
}
.section-head h2 { font-size:32px; font-weight:800; letter-spacing:.5px; }
.section-head p { margin-top:12px; color:#64748b; font-size:15px; }

/* ---------- 卡片 ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card {
  background:#ffffff;
  border:1px solid #e5e7eb; border-radius:16px;
  padding:28px 26px;
  transition:all .18s;
}
.card:hover { border-color:rgba(6,182,212,.55); transform:translateY(-3px); }
.card-icon {
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:#fff; margin-bottom:16px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:0 6px 16px rgba(29,78,216,.35);
}
.card h3 { font-size:18px; margin-bottom:10px; }
.card p { font-size:14px; color:#64748b; }

/* ---------- 指标 ---------- */
.metrics {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  margin-bottom:52px;
}
.metric {
  text-align:center; padding:30px 20px;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:16px;
}
.metric b {
  display:block; font-size:36px; font-weight:800;
  background:linear-gradient(120deg,#0f2b46,#06b6d4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metric span { font-size:13px; color:#64748b; }

/* ---------- CTA ---------- */
.cta {
  text-align:center; padding:64px 40px;
  border:1px solid rgba(29,78,216,.18); border-radius:20px;
  background:
    radial-gradient(480px 240px at 50% 0%, rgba(29,78,216,.08), transparent 70%),
    #ffffff;
}
.cta h2 { font-size:30px; font-weight:800; }
.cta p { margin:14px 0 30px; color:#64748b; }
.cta-btns { display:flex; justify-content:center; gap:16px; }

/* ---------- 页脚 ---------- */
.footer {
  border-top:1px solid #e5e7eb;
  padding:44px 40px 38px; text-align:center;
}
.footer-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.footer-brand b { font-size:16px; color:#0f172a; }
.footer-brand span:last-child { font-size:13px; color:#64748b; }
.footer-info { font-size:12px; color:#94a3b8; line-height:2; }
.footer-info a { color:#94a3b8; }
.footer-info a:hover { color:#1d4ed8; }

/* ---------- 关注我们：微信二维码小气泡 ---------- */
.qr-anchor { position:relative; display:inline-block; }
.qr-pop {
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%);
  width:300px; padding:16px; z-index:60; text-align:center;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.qr-pop::after {
  content:""; position:absolute; left:50%; bottom:-7px; margin-left:-6px;
  width:12px; height:12px; background:#ffffff;
  border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  transform:rotate(45deg);
}
.qr-img { display:block; width:100%; height:auto; border-radius:6px; }
.qr-title { font-size:15px; font-weight:700; color:#0f172a; margin-bottom:10px; }
.qr-tip { margin-top:10px; font-size:13px; line-height:1.5; color:#64748b; }

/* ---------- 响应式 ---------- */
@media (max-width:960px) {
  .hero { flex-direction:column; padding-top:60px; }
  .hero h1 { font-size:36px; }
  .grid-3, .metrics { grid-template-columns:repeat(2,1fr); }
  .nav-menu { display:none; }
}
@media (max-width:620px) {
  .grid-3, .metrics { grid-template-columns:1fr; }
  .nav { padding:0 20px; }
  .hero, .section { padding-left:22px; padding-right:22px; }
  .db-card { width:44%; padding:16px 8px 14px; }
  .db-logo { height:42px; max-width:112px; margin-bottom:12px; }
}