/* 三曦心理 · 全站样式
   改这里 → 跑 deploy/site/build.py → 复制到 deploy/www/assets/css/style.css
   配色：墨绿(专业/安定) + 曦光金(品牌「曦」= 晨光) + 暖纸底(不冷) */

:root{
  --ink:#16292c; --ink2:#3c5459; --ink3:#6b8085;
  --paper:#fbfaf7; --card:#fff; --line:#e6e2d9;
  --teal:#2f6b5e; --teal-d:#22503f; --teal-l:#eaf2ef;
  --gold:#b8842b; --gold-l:#f6ecd8;
  --warm:#f7f3ea;
  --r:16px; --max:1120px;
  --sh:0 1px 2px rgba(22,41,44,.04), 0 8px 24px rgba(22,41,44,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.75 system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-d)}
h1,h2,h3,h4{line-height:1.3; margin:0; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.center{text-align:center}
.mut{color:var(--ink2)}
.small{font-size:14px}

/* ── 页头 ─────────────────────────────── */
.hd{position:sticky; top:0; z-index:60; background:rgba(251,250,247,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.hd .wrap{display:flex; align-items:center; gap:28px; height:66px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink); letter-spacing:.02em}
.logo:hover{color:var(--ink)}
.logo svg{flex:none}
.nav{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav a{color:var(--ink2); font-size:15px; font-weight:500; padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--teal); border-bottom-color:var(--teal)}
.burger{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.25s}
.hd.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd.open .burger span:nth-child(2){opacity:0}
.hd.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── 按钮 ─────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:999px;
  background:var(--teal); color:#fff; font-weight:600; font-size:16px; border:0; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s}
.btn:hover{background:var(--teal-d); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(47,107,94,.24)}
.btn.ghost{background:transparent; color:var(--teal); border:1.5px solid var(--teal)}
.btn.ghost:hover{background:var(--teal-l); box-shadow:none}

/* ── Hero ─────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:96px 0 84px;
  background:
    radial-gradient(900px 460px at 78% -8%, rgba(184,132,43,.16), transparent 62%),
    radial-gradient(760px 420px at 12% 8%, rgba(47,107,94,.10), transparent 60%),
    var(--warm)}
.hero h1{font-size:clamp(30px,4.6vw,50px); letter-spacing:-.02em; max-width:15em}
.hero .lead{font-size:clamp(16px,1.6vw,19px); color:var(--ink2); max-width:34em; margin:22px 0 0}
.hero .cta{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.pill{padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:14px; color:var(--ink2); font-weight:500}

/* ── 通用区块 ─────────────────────────── */
section{padding:76px 0}
section.alt{background:var(--warm)}
section.white{background:#fff}
.sec-h{margin-bottom:44px}
.sec-h .kick{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; margin-bottom:10px}
.sec-h h2{font-size:clamp(24px,3vw,34px)}
.sec-h p{color:var(--ink2); margin-top:14px; max-width:40em}

/* ── 卡片网格 ─────────────────────────── */
.grid{display:grid; gap:22px}
.g3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
  box-shadow:var(--sh); transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column}
a.card:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(22,41,44,.05),0 16px 36px rgba(22,41,44,.1); color:inherit}
.card .icon{width:44px; height:44px; border-radius:12px; background:var(--teal-l); color:var(--teal);
  display:grid; place-items:center; margin-bottom:18px}
.card h3{font-size:19px; margin-bottom:10px}
.card p{color:var(--ink2); font-size:15px; margin:0}
.card .more{margin-top:18px; font-size:14px; font-weight:600; color:var(--teal)}

/* ── 关于 ─────────────────────────────── */
.about{display:grid; grid-template-columns:1.25fr .75fr; gap:52px; align-items:start}
.facts{list-style:none; padding:0; margin:26px 0 0}
.facts li{padding:13px 0; border-bottom:1px dashed var(--line); font-size:15px; color:var(--ink2)}
.facts li:last-child{border-bottom:0}
.facts b{color:var(--ink); font-weight:600}
.aside{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh)}
.aside h3{font-size:16px; margin-bottom:14px}
.aside ul{margin:0; padding-left:18px; color:var(--ink2); font-size:15px}
.aside li{margin-bottom:9px}

/* ── 适合 / 不适合 ────────────────────── */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.fit .card{padding:32px}
.fit .card.no{background:#fdf8f6}
.fit h3{display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:18px}
.fit ul{list-style:none; margin:0; padding:0}
.fit li{position:relative; padding-left:26px; margin-bottom:12px; color:var(--ink2); font-size:15px}
.fit li::before{position:absolute; left:0; top:0; font-weight:700}
.fit .yes li::before{content:"✓"; color:var(--teal)}
.fit .no  li::before{content:"×"; color:#b4553f}

/* ── 图集 ─────────────────────────────── */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.gal figure{margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh)}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; background:var(--warm)}
.gal figcaption{padding:16px 18px; font-size:14px; color:var(--ink2); line-height:1.6}
.gal figcaption b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}

/* 灯箱 */
.lb{position:fixed; inset:0; z-index:200; background:rgba(12,22,24,.9); display:none; place-items:center; padding:5vh 5vw}
.lb.on{display:grid}
.lb img{max-width:100%; max-height:82vh; border-radius:10px}
.lb .cap{color:#e8e4dc; text-align:center; margin-top:16px; font-size:15px}
.lb .x{position:absolute; top:18px; right:24px; background:none; border:0; color:#fff; font-size:34px; cursor:pointer; line-height:1}

/* ── 视频区 ───────────────────────────── */
/* 竖屏源片（抖音式 1080×1920）：视频放左边竖框，文字放右边。塞进 16:9 会很难看。 */
.vrow{display:grid; gap:44px; align-items:center}
.vrow:has(.portrait){grid-template-columns:minmax(280px,400px) 1fr}
.vrow:has(.portrait) > p{color:var(--ink2); font-size:15.5px; margin:0}
.vwrap{border-radius:var(--r); overflow:hidden; background:#0e1b1d;
  box-shadow:var(--sh); position:relative}
.vwrap:not(.portrait){max-width:880px}
.vwrap video{width:100%; display:block; background:#0e1b1d}
.vwrap:not(.portrait) video{aspect-ratio:16/9}
.vwrap.portrait video{aspect-ratio:9/16}
@media (max-width:860px){
  .vrow:has(.portrait){grid-template-columns:1fr; gap:24px}
  .vwrap.portrait{max-width:400px; margin:0 auto}
}
.vph{aspect-ratio:16/9; display:grid; place-content:center; justify-items:center;
  text-align:center; gap:6px; color:#9fb2b3; padding:24px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#16292c,#22403a)}
.vwrap.portrait .vph{aspect-ratio:9/16}
.vph.has-poster{color:#e8e4dc}
.vph .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.42; filter:saturate(.85)}
.vph .ov{position:relative; z-index:1; display:grid; justify-items:center; gap:6px;
  padding:0 8px}
.vph.has-poster .ov{background:rgba(14,27,29,.55); border-radius:14px; padding:18px 20px}
.vph b{color:#e8e4dc; font-size:17px}
.vph code{background:rgba(255,255,255,.08); padding:1px 6px; border-radius:5px; font-size:13px}
.vph .small{max-width:34em; font-size:13.5px; line-height:1.7; margin:0}
.vph .play{width:64px; height:64px; border-radius:50%; border:2px solid #f0e2c6;
  position:relative; margin-bottom:10px; opacity:.85}
.vph .play::after{content:""; position:absolute; left:50%; top:50%; translate:-40% -50%;
  border-left:18px solid #f0e2c6; border-top:11px solid transparent; border-bottom:11px solid transparent}

/* ── 主理人卡片 ───────────────────────── */
.card.person{padding:0; overflow:hidden}
.card.person .portrait{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top;
  background:var(--warm)}
.card.person h3{margin:22px 26px 4px; font-size:20px}
.card.person .role{margin:0 26px 12px; color:var(--gold); font-weight:600; font-size:14px}
.card.person p:not(.role):not(.tags){margin:0 26px; color:var(--ink2); font-size:15px}
.card.person .tags{margin:16px 26px 26px; display:flex; flex-wrap:wrap; gap:8px}

/* ── 服务子页 Hero ─────────────────────── */
.phero{padding:64px 0 56px; background:var(--warm); border-bottom:1px solid var(--line)}
.crumb{font-size:13px; color:var(--ink3); margin-bottom:18px}
.crumb a{color:var(--ink3)}
.crumb a:hover{color:var(--teal)}
.phero h1{font-size:clamp(28px,3.8vw,40px); max-width:16em}
.phero .lead{font-size:18px; color:var(--ink2); max-width:36em; margin-top:18px}

/* GEO 速读框（AI 引擎读它 —— 建站手册 §4） */
.geo{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:12px; padding:24px 26px; margin-top:32px; max-width:52em}
.geo .t{font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--gold); margin-bottom:10px}
.geo p{margin:0; color:var(--ink2); font-size:15.5px}

/* ── 立场 ─────────────────────────────── */
.stand{background:var(--teal); color:#fff; border-radius:var(--r); padding:44px 44px}
.stand h2{color:#fff; font-size:clamp(22px,2.6vw,28px)}
.stand .sub{color:#cfe2dc; margin-top:12px}
.stand ul{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px}
.stand li{position:relative; padding-left:30px; color:#e8f1ee}
.stand li::before{content:"—"; position:absolute; left:0; color:var(--gold-l); font-weight:700}

/* ── FAQ ─────────────────────────────── */
.faq{display:grid; gap:16px; max-width:56em}
.qa{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 26px}
.qa h3{font-size:16.5px; color:var(--ink); margin-bottom:10px}
.qa p{margin:0; color:var(--ink2); font-size:15px}

/* ── CTA ─────────────────────────────── */
.cta-band{background:var(--warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:72px 0}
.cta-box{display:grid; grid-template-columns:1.4fr .6fr; gap:44px; align-items:center}
.qr{width:240px; max-width:100%; border-radius:14px; border:1px solid var(--line); background:#fff;
  padding:12px; box-shadow:var(--sh)}
/* ⚠️ 二维码图必须是正方形：img 只约束 width，高度交给 height:auto 按比例走。
   曾因 img 带 height="347" 属性而纵向拉伸近一倍（2026-10-14 修复）。*/

/* ── 二维码弹窗 ───────────────────────────────
   照 haoshengduok.top 的 contactModal 搬来，配色换成本站墨绿 + 纸白。
   原理：display:none 的全屏遮罩，JS 加一个 .show 类 → display:flex 就弹出来。
   全站只有 shell() 输出一份（生成器结构，不像模板站要每个模板插一遍）。*/
.modal-overlay{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(22,41,44,.72); z-index:999;
  justify-content:center; align-items:center; padding:20px}
.modal-overlay.show{display:flex}          /* ← 开合全靠这一行 */
.modal-box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px 26px; text-align:center; max-width:340px; width:100%;
  box-shadow:0 24px 60px rgba(22,41,44,.3)}
.modal-box img{width:220px; height:auto; margin:0 auto 16px}
.modal-box .mt{font-size:15px; font-weight:600; color:var(--ink); margin:0 0 6px}
.modal-box .ms{font-size:12px; color:var(--ink3); margin:0}
.modal-box .close-btn{
  display:inline-block; margin-top:20px; cursor:pointer; font-family:inherit;
  color:var(--teal); font-size:14px; letter-spacing:2px;
  background:none; border:1px solid rgba(47,107,94,.35);
  border-radius:999px; padding:8px 26px}
.modal-box .close-btn:hover{background:var(--teal-l); color:var(--teal-d)}

/* ── 页脚 ─────────────────────────────── */
footer{background:#122326; color:#9fb2b3; padding:56px 0 34px; font-size:14px}
footer a{color:#c6d6d5}
footer a:hover{color:#fff}
.fcols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.fcols h4{color:#fff; font-size:15px; margin-bottom:14px}
.fcols ul{list-style:none; padding:0; margin:0}
.fcols li{margin-bottom:9px}
.fbot{margin-top:40px; padding-top:24px; border-top:1px solid #233b3e; color:#7d9294; font-size:13px;
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}

/* ── 响应式 ───────────────────────────── */
@media (max-width:900px){
  .about,.fit,.cta-box,.fcols{grid-template-columns:1fr}
  .fcols{gap:28px}
  .nav{position:fixed; inset:66px 0 auto; background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 20px; display:none}
  .hd.open .nav{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); border-left:0}
  .burger{display:block}
  section{padding:56px 0}
  .hero{padding:64px 0 56px}
  .stand{padding:32px 26px}
}