/* ============================================================
   河汉数据 · 产品融合页共用样式
   复用 style.css 的头部/页脚/按钮/入场动效，本文件仅提供产品区块
   ============================================================ */

/* ---------- 主题（覆盖全局渐变与强调色，实现"河汉数据"壳 + 产品个性） ---------- */
body.theme--laohuangli{
  --acc:#FFB84D; --acc-2:#FF7A3C;
  --grad:linear-gradient(120deg,#FFB84D 0%,#FF7A3C 55%,#E85D3A 100%);
  --cyan:#FFB84D; --blue:#FF7A3C; --violet:#E85D3A;
}
body.theme--xiaoyu{
  --acc:#FF9A52; --acc-2:#FF5F2E;
  --grad:linear-gradient(120deg,#FFC26B 0%,#FF9A52 48%,#FF5F2E 100%);
  --cyan:#FF9A52; --blue:#FF7A3C; --violet:#FF5F2E;
}
body.theme--laohuangli .blob--a{background:radial-gradient(circle,rgba(255,184,77,.5),transparent 62%)}
body.theme--laohuangli .blob--b{background:radial-gradient(circle,rgba(255,122,60,.45),transparent 62%)}
body.theme--laohuangli .blob--c{background:radial-gradient(circle,rgba(232,93,58,.45),transparent 62%)}
body.theme--xiaoyu .blob--a{background:radial-gradient(circle,rgba(255,194,107,.5),transparent 62%)}
body.theme--xiaoyu .blob--b{background:radial-gradient(circle,rgba(255,154,82,.45),transparent 62%)}
body.theme--xiaoyu .blob--c{background:radial-gradient(circle,rgba(255,95,46,.45),transparent 62%)}

/* ---------- 产品 Hero ---------- */
.p-hero{
  position:relative;min-height:92svh;
  display:flex;align-items:center;
  padding:120px 0 76px;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 0%,#0A1436 0%,#04091B 55%);
}
.p-hero__inner{position:relative;z-index:4;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,5vw,72px);align-items:center}
.p-hero__copy{position:relative;z-index:5}
.p-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--acc)}
.p-hero__eyebrow img{width:26px;height:26px;border-radius:8px;object-fit:cover}
.p-hero__title{margin:0;font-size:clamp(46px,6.6vw,92px);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.p-hero__motto{display:block;margin-top:12px;font-size:clamp(15px,1.9vw,22px);font-weight:700;letter-spacing:.24em;color:var(--acc)}
.p-hero__lead{max-width:34em;margin:22px 0 0;font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.9;color:var(--ink-2)}
.p-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.p-hero__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:34px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.p-hero__meta li{display:flex;align-items:center;gap:18px}
.p-hero__meta li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.p-hero__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.p-hero__halo{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(79,124,255,.14),transparent 70%);filter:blur(30px);z-index:0}
.p-phones{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:560px;z-index:1}
.p-phones .device--back{position:absolute;right:56%;bottom:2%;transform:rotate(6deg) scale(.9);transform-origin:bottom right;z-index:1;opacity:.95}
.p-phones .device--front{position:relative;z-index:2;transform:rotate(-2deg)}

/* ---------- 通用产品区块 ---------- */
.p-section{padding-block:clamp(72px,9vw,124px)}
.p-section--alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.p-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.p-media{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px}
.p-media__fig{display:flex;flex-direction:column;align-items:center;gap:14px}
.p-media__fig figcaption{font-size:12px;letter-spacing:.08em;color:var(--ink-3)}

/* 要点列表 */
.p-points{margin:26px 0 0;border-top:1px solid var(--line)}
.p-points li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.p-points__num{flex:0 0 auto;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.5;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-points h3{margin:0;font-size:16px;font-weight:700}
.p-points p{margin:3px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.p-tags li{padding:5px 13px;border-radius:99px;font-size:12px;letter-spacing:.06em;color:var(--ink-2);background:rgba(126,148,255,.08);border:1px solid var(--line)}
.p-note{margin:20px 0 0;padding-left:12px;border-left:2px solid var(--acc);font-size:13px;line-height:1.8;color:var(--ink-3)}

/* 命理/排盘列表 + 双手机 */
.p-charts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.p-charts__rows li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.p-charts__rows .num{font-size:22px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-charts__rows h3{margin:0;font-size:16.5px;font-weight:700}
.p-charts__rows p{margin:4px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.p-charts__media{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.p-charts__media .device--back{position:absolute;right:58%;bottom:4%;transform:rotate(5deg) scale(.9);transform-origin:bottom right;z-index:1;opacity:.95}
.p-charts__media .device--front{position:relative;z-index:2;transform:rotate(-3deg)}

/* 更多功能宫格 + 截图画廊 */
.p-index{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:clamp(40px,5vw,60px)}
.p-index__item{padding:20px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.p-index__item:hover{transform:translateY(-3px);border-color:rgba(126,148,255,.34)}
.p-index__item h3{margin:0 0 6px;font-size:15px;font-weight:700}
.p-index__item p{margin:0;font-size:12px;line-height:1.7;color:var(--ink-2)}
.p-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.p-gallery .device{width:100%;aspect-ratio:390/750}
.p-gallery figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;color:var(--ink-3);text-align:center}

/* 会员方案 */
.p-plans{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:20px;justify-content:center;margin-top:8px}
.plan{padding:30px 28px;border-radius:20px;background:var(--panel);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-4px)}
.plan--vip{position:relative;border-color:rgba(255,184,77,.45);background:linear-gradient(160deg,rgba(255,184,77,.1),var(--panel));box-shadow:0 20px 50px rgba(255,122,60,.14)}
.plan--vip::before{content:"推荐";position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 14px;border-radius:99px;background:var(--grad);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em}
.plan__period{margin:0;font-size:13px;letter-spacing:.16em;color:var(--ink-3);font-weight:600}
.plan__price{margin:8px 0 4px;font-size:clamp(40px,5vw,54px);line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan__price .cur{font-size:.5em;vertical-align:.4em;margin-right:2px}
.plan__desc{margin:0 0 16px;font-size:13px;color:var(--ink-2)}
.plan ul{border-top:1px solid var(--line);padding-top:14px}
.plan li{display:flex;gap:9px;padding:7px 0;font-size:13px;color:var(--ink-2)}
.plan li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--grad);margin-top:8px}

/* 浏览器桌面框 */
.p-browser{width:min(760px,100%);border-radius:16px;overflow:hidden;background:#0A1230;border:1px solid rgba(126,148,255,.35);box-shadow:var(--shadow)}
.p-browser__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(126,148,255,.08);border-bottom:1px solid var(--line)}
.p-browser__bar i{width:9px;height:9px;border-radius:50%}
.p-browser__bar i:nth-child(1){background:#FF5F57}
.p-browser__bar i:nth-child(2){background:#FFBD2E}
.p-browser__bar i:nth-child(3){background:#28C840}
.p-browser img{width:100%}
.p-facts{margin:28px 0 0;border-top:1px solid var(--line)}
.p-facts li{padding:14px 0;border-bottom:1px solid var(--line)}
.p-facts h3{margin:0 0 4px;font-size:15.5px;font-weight:700}
.p-facts p{margin:0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}

/* ---------- 小鱼游记专用 ---------- */
.p-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(44px,6vw,80px);border-top:1px solid var(--line)}
.p-feature__index{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.p-feature__index .num{color:var(--acc);font-weight:800;font-size:15px}
.p-feature h3{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.2;letter-spacing:-.02em;font-weight:800}
.p-feature__lead{margin:16px 0 0;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.p-feature__list{margin:26px 0 0;border-top:1px solid var(--line)}
.p-feature__list li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.7}
.p-feature__list strong{font-weight:600;color:var(--ink)}
.p-feature__list span{color:var(--ink-2)}
.p-media--left{justify-content:flex-start}
.p-map{width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.p-map img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p-map figcaption{position:absolute;left:14px;bottom:12px;padding:5px 12px;border-radius:99px;background:rgba(4,9,27,.72);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.03em;color:var(--ink-2)}
.p-media .device{width:min(250px,40%)}
.p-side-stat{padding-bottom:22px;border-bottom:1px solid var(--line);min-width:130px}
.p-side-stat .big{display:block;font-size:clamp(42px,5vw,62px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--acc)}
.p-side-stat p{margin:12px 0 0;font-size:12px;line-height:1.8;color:var(--ink-2)}
.p-specs{margin:0 0 26px;min-width:170px;border-top:1px solid var(--line)}
.p-specs div{padding:12px 0;border-bottom:1px solid var(--line)}
.p-specs dt{font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:3px}
.p-specs dd{margin:0;font-size:15px;font-weight:600}
.p-specs .spec-note{font-size:11px;font-weight:400;color:var(--ink-2);line-height:1.6;margin-top:5px}
.p-template{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(200px,38%)}
.p-template figure{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.p-template img{width:100%;aspect-ratio:4/5;object-fit:cover}
.p-template figure:nth-child(1){transform:rotate(-2deg)}
.p-template figure:nth-child(2){transform:rotate(1.5deg)}
.p-template figure:nth-child(3){transform:rotate(1deg)}
.p-template figure:nth-child(4){transform:rotate(-1.5deg)}

/* 五处胜境 */
.p-scenic{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px)}
.p-scenic a{display:block;min-width:0}
.p-scenic figure{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line)}
.p-scenic img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--ease)}
.p-scenic a:hover img{transform:scale(1.06)}
.p-scenic figcaption{padding-top:12px}
.p-scenic figcaption strong{display:flex;align-items:baseline;gap:6px;font-size:15.5px;font-weight:700}
.p-scenic figcaption small{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--ink-3)}
.p-scenic figcaption p{margin:4px 0 0;font-size:11.5px;color:var(--ink-3)}
.p-stats{display:flex;flex-wrap:wrap;gap:0 clamp(30px,4vw,56px);margin:clamp(40px,5vw,60px) 0 0;padding-top:22px;border-top:1px solid var(--line)}
.p-stats div{display:flex;flex-direction:column;gap:2px}
.p-stats dt{font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.p-stats dd{margin:0;font-size:clamp(30px,3.6vw,44px);line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-stats dd .unit{font-size:12px;font-weight:600;color:var(--ink-2);margin-left:4px}

/* 一册鱼忆 跑马灯 */
.p-marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding-block:6px 8px}
.p-marquee__track{display:flex;gap:16px;width:max-content;animation:marqueeP 46s linear infinite}
.p-marquee:hover .p-marquee__track{animation-play-state:paused}
@keyframes marqueeP{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.p-marquee figure{width:clamp(150px,15vw,210px);flex:0 0 auto}
.p-marquee img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:1px solid var(--line);box-shadow:0 16px 36px rgba(0,0,0,.4);transition:transform .5s var(--ease)}
.p-marquee figure:hover img{transform:translateY(-6px)}
.p-marquee figcaption{margin-top:9px;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}

/* 小鱼会员 */
.p-member__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,88px);align-items:center}
.p-price{font-size:clamp(58px,8vw,104px);line-height:.95;font-weight:800;letter-spacing:-.05em;color:var(--acc)}
.p-price-badge{display:inline-block;margin-left:12px;padding:5px 12px;border-radius:99px;background:rgba(255,154,82,.16);border:1px solid rgba(255,154,82,.4);color:var(--acc);font-size:10.5px;font-weight:700;letter-spacing:.1em;vertical-align:26px}
.p-benefits{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:28px 0 0;border-top:1px solid var(--line)}
.p-benefits li{position:relative;padding:11px 0 11px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.p-benefits li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* 获取 */
.p-get{background:#030713;border-top:1px solid var(--line)}
.p-get__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,80px);align-items:center}
.p-get__lede{max-width:30em;margin:18px 0 0;font-size:15px;line-height:1.9;color:var(--ink-2)}
.p-get__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.p-contact{margin-top:30px;border-top:1px solid var(--line)}
.p-contact li{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.p-contact .label{font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.p-contact a{font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .p-index{grid-template-columns:repeat(2,1fr)}
  .p-gallery{grid-template-columns:repeat(2,1fr)}
  .p-scenic{grid-template-columns:repeat(3,1fr);gap:14px}
  .p-scenic a:nth-child(n+4){display:none}
}
@media (max-width:960px){
  .p-hero{min-height:auto;padding:110px 0 64px}
  .p-hero__inner{grid-template-columns:1fr;gap:40px}
  .p-hero__visual{min-height:0}
  .p-phones{min-height:420px}
  .p-split{grid-template-columns:1fr;gap:36px}
  .p-split--media-left .p-media{order:-1}
  .p-charts{grid-template-columns:1fr;gap:40px}
  .p-charts__media{min-height:440px}
  .p-feature{grid-template-columns:1fr;gap:36px}
  .p-feature--flip .p-feature__copy{order:-1}
  .p-media{min-height:0}
  .p-member__inner{grid-template-columns:1fr;gap:40px}
  .p-get__inner{grid-template-columns:1fr;gap:36px}
  .p-media--left{justify-content:center}
}
@media (max-width:720px){
  .p-hero{padding:100px 0 56px}
  .p-phones{min-height:340px}
  .p-phones .device--back{right:62%}
  .p-index{grid-template-columns:1fr 1fr}
  .p-gallery{grid-template-columns:1fr 1fr;gap:14px}
  .p-plans{grid-template-columns:1fr}
  .p-scenic{grid-template-columns:1fr 1fr}
  .p-scenic a:nth-child(n+3){display:none}
  .p-stats{row-gap:18px}
  .p-benefits{grid-template-columns:1fr}
  .p-media .device{width:min(230px,60%)}
  .p-template{width:calc(56% - 20px)}
}
@media (prefers-reduced-motion:reduce){
  .p-marquee__track{animation:none}
  .blob{animation:none}
}