/* DreamSoul · 官网 v0
   设计取向：暗底 + 单一冷色高光；克制、少动效、留白足；首屏用真视频当主视觉。

   【手机版溢出的教训】所有网格列一律写 `minmax(0,1fr)`：
   `1fr` 等价于 `minmax(auto,1fr)`，当某个子元素的最小内容宽度偏大时，
   整列会被撑得比视口还宽，页面就横向溢出、右侧被切掉（实测 430px 视口下出现过）。 */

:root{
  --bg:#06090f;
  --bg-soft:#0a0f18;
  --panel:#0d131d;
  --panel-2:#111a26;
  --line:#1e2a3a;
  --text:#e9eff8;
  --muted:#8b9bb0;
  --accent:#4fd1e0;
  --accent-2:#7aa2ff;
  --radius:14px;
  --maxw:1120px;
  --pad:clamp(20px,4vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:100%;overflow-x:hidden;overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .6em;line-height:1.25;letter-spacing:.2px;overflow-wrap:anywhere}
h1{font-size:clamp(34px,6vw,62px);font-weight:800}
h2{font-size:clamp(24px,3.4vw,38px);font-weight:750}
h3{font-size:19px;font-weight:700}
h4{font-size:16px;font-weight:700;margin-bottom:.2em}
p{margin:0 0 1em}
strong{color:#fff}
img,video,svg,table,input,select,textarea{max-width:100%}
.muted{color:var(--muted)}
.sub{color:var(--muted);max-width:62ch;margin-bottom:2em}

/* 网格子项默认允许收缩（否则内容会顶破列宽） */
.hero>*,.compare>*,.cards>*,.proof-grid>*,.contact-grid>*,.arch>*{min-width:0}

/* ── 顶栏 ─────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--pad);
  background:rgba(6,9,15,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px;white-space:nowrap}
.brand svg{width:26px;height:26px;color:var(--accent)}
/* LOGO 的 @ 符号：图片本身是透明底，深色页面上直接用；
   比内联 SVG 更能立住"这是个品牌"（原图黑底已抠掉，没留黑方块） */
.brand-mark{width:30px;height:30px;display:block;flex:none}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;min-width:0}
.nav-links a{color:var(--muted);white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  color:var(--bg)!important;background:var(--accent);padding:8px 16px;border-radius:999px;
  font-weight:700;flex:none;
}

/* ── 通用块 ───────────────────────────── */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,110px) var(--pad)}
.sec h2{max-width:24ch}

/* ── 首屏 ─────────────────────────────── */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,90px) var(--pad) clamp(30px,5vw,60px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.eyebrow{
  display:inline-block;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:2px;
  border:1px solid rgba(79,209,224,.35);border-radius:999px;padding:5px 14px;margin-bottom:22px;
}
.lede{font-size:clamp(16px,1.6vw,19px);color:#c7d3e2;max-width:34ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid transparent;
  transition:transform .15s,box-shadow .2s,background .2s;cursor:pointer;
}
.btn.primary{background:var(--accent);color:#04161a;box-shadow:0 8px 30px -12px var(--accent)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px -12px var(--accent)}
.btn.ghost{border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero-facts{list-style:none;display:flex;gap:22px;padding:0;margin:0;flex-wrap:wrap;color:var(--muted);font-size:14px}
.hero-facts li{white-space:nowrap}
.hero-facts span{color:var(--accent);font-weight:800;font-size:20px;margin-right:4px}
.hero-media{margin:0;position:relative}
.hero-media video{
  width:100%;aspect-ratio:2/3;max-height:min(74vh,620px);object-fit:cover;
  border-radius:20px;border:1px solid var(--line);background:var(--panel);
  box-shadow:0 40px 80px -50px rgba(79,209,224,.55);
}
.hero-media figcaption{
  position:absolute;left:14px;bottom:14px;font-size:12px;color:#cfe9ee;
  background:rgba(6,9,15,.6);padding:4px 12px;border-radius:999px;backdrop-filter:blur(6px);
}

/* ── 对比 ─────────────────────────────── */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin:34px 0}
.cmp{padding:26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.cmp.old{opacity:.72}
.cmp.old h3{color:var(--muted)}
.cmp.new{border-color:rgba(79,209,224,.45);background:linear-gradient(180deg,rgba(79,209,224,.07),transparent 60%),var(--panel-2)}
.cmp p{margin:0;color:#c2cede}
.pull{font-size:clamp(17px,2vw,21px);border-left:3px solid var(--accent);padding-left:18px;color:#dbe6f3}

/* ── 卡片 ─────────────────────────────── */
.cards{display:grid;gap:18px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);transition:border-color .2s,transform .2s;
}
.card:hover{border-color:rgba(79,209,224,.5);transform:translateY(-2px)}
.card ul{margin:.2em 0 0;padding-left:1.1em;color:#bccbdd;font-size:14.5px}
.card li{margin:.35em 0}
.card .pain{color:var(--accent-2);font-style:normal}
.card .num{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--accent);margin-bottom:10px}
.card .ev{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--muted);
}
.cards.tight .mini{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.cards.tight p{margin:0;color:#bccbdd;font-size:14px}

/* ── 架构图 ───────────────────────────── */
.arch{
  margin-top:34px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);display:grid;gap:14px;justify-items:center;text-align:center;
}
.arch-node{
  padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-weight:700;font-size:15px;
}
.arch-node.out{border-color:rgba(122,162,255,.45);color:#cfdcff}
.arch-flow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.arch-flow span{
  padding:8px 18px;border-radius:10px;background:rgba(79,209,224,.09);
  border:1px solid rgba(79,209,224,.3);color:#bff0f6;font-weight:700;font-size:14px;
}

/* ── 证据 ─────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;align-items:start}
.proof-video{margin:0}
.proof-video video{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#000}
.proof-video figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.proof-side img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.proof-side .cap{font-size:13px;color:var(--muted);margin-top:10px}
.stats{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px;table-layout:fixed}
.stats th,.stats td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.stats th{color:var(--muted);font-weight:600}
.stats td{text-align:right;color:#fff;font-weight:700}

/* ── FAQ ─────────────────────────────── */
.faq{display:grid;gap:10px;max-width:820px}
details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 18px}
details[open]{border-color:rgba(79,209,224,.4)}
summary{cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";color:var(--accent);margin-right:10px;font-weight:800}
details[open] summary::before{content:"－"}
details p{margin:.8em 0 0;color:#bccbdd;font-size:14.5px}

/* ── 联系 ─────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px;align-items:start}
.lead{display:grid;gap:14px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.lead label{display:grid;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.lead input,.lead select,.lead textarea{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--text);font:inherit;font-size:15px;
}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--accent)}
.lead button{justify-self:start}
.form-note{font-size:12.5px;color:var(--muted);margin:0}
.contact-side{display:grid;gap:16px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.qr{
  aspect-ratio:1;width:100%;max-width:200px;display:grid;place-content:center;text-align:center;gap:4px;
  border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px;
}
.qr span{font-size:12px;opacity:.7}
/* 真二维码：白底 + 留白（扫码要有静区），别用暗色卡片压它 */
.qr-img{
  width:100%;max-width:200px;height:auto;display:block;
  background:#fff;padding:10px;border-radius:12px;border:1px solid var(--line);
}

/* ── 页脚 ─────────────────────────────── */
.foot{
  max-width:var(--maxw);margin:0 auto;padding:30px var(--pad) 50px;color:var(--muted);font-size:13.5px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.foot a:hover{color:var(--accent)}

/* ── 响应式 ───────────────────────────── */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-media{order:-1}
  .hero-media video{aspect-ratio:16/10;max-height:44vh}
  .cards.three,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .compare{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .nav-links{gap:14px;font-size:13px}
  .nav-links a:not(.nav-cta){display:none}
  .cards.three,.cards.four{grid-template-columns:minmax(0,1fr)}
  .hero-facts{gap:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}