/* ==========================================================================
   RetroForge — 重建页统一排版层 (rfp)
   与全站统一设计层（--rf-* 变量）配套使用。
   目标：图文协调、卡片等高、间距统一、手机端自适应。
   ========================================================================== */

.rfp-wrap{max-width:var(--rf-max,1200px);margin:0 auto;padding:0 22px;position:relative;z-index:1;}

/* 重建页整页底色（避免深色文字/白字落到白底上不可见） */
.rfp-body{background:var(--rf-bg,#121315)!important;color:var(--rf-fg,#f4f5f6);}

/* ---------- 盒模型 ----------
   本层组件大量使用 width:100% + padding，若不统一 border-box，
   按钮/卡片会比容器宽出 padding 的量（手机端会被 overflow:hidden 切掉右边）。
   统一层（.rfh / .rff）也是 border-box，这里保持一致。 */
.rfp-body *,.rfp-body *::before,.rfp-body *::after{box-sizing:border-box;}

/* ---------- 区块外壳 ---------- */
.rfp-sec,.rfp-hero{position:relative;overflow:hidden;}
.rfp-sec{padding:76px 0;background:var(--rf-bg,#121315);}
.rfp-sec--alt{padding:76px 0;background:var(--rf-bg2,#17191d);}
.rfp-hero{padding:84px 0 72px;
  background:radial-gradient(900px 420px at 18% 0%,rgba(61,220,132,.10),transparent 62%),var(--rf-bg,#121315);}
.rfp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.rfp-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;}
.rfp-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,19,21,.72),rgba(18,19,21,.94));}

/* ---------- 通用小件 ---------- */
.rfp-eyebrow{margin:0 0 12px;font-family:var(--rf-fh);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rf-green,#3ddc84);}
.rfp-sec__head{max-width:760px;margin:0 auto 40px;text-align:center;}
.rfp-sec__title{margin:0 0 14px;font-family:var(--rf-fh);font-weight:700;
  font-size:clamp(24px,3.1vw,36px);line-height:1.2;color:#fff;letter-spacing:-.01em;}
.rfp-lede{margin:0;font-size:16px;line-height:1.7;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-sec__head .rfp-lede{font-size:16.5px;}

.rfp-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.rfp-btns--center{justify-content:center;margin:0 0 26px;}
.rfp-sec__head .rfp-btns{justify-content:center;}
/* 按钮统一尺寸：min-height + 居中对齐，桌面手机一套标尺。
   不用上下 padding 撑高，避免文案换行时两个按钮差一大截。 */
.rfp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:10px;
  font-family:var(--rf-fh);font-weight:600;font-size:15px;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;border:1px solid transparent;box-sizing:border-box;
  max-width:100%;
  transition:transform .16s,background .16s,border-color .16s,color .16s;}
.rfp-btn--primary{background:var(--rf-green,#3ddc84);color:#0b1a11;border-color:var(--rf-green,#3ddc84);}
.rfp-btn--primary:hover{background:#54e894;border-color:#54e894;transform:translateY(-1px);}
.rfp-btn--wa{background:#1f9d54;color:#fff;border-color:#1f9d54;}
.rfp-btn--wa:hover{background:#25b863;border-color:#25b863;transform:translateY(-1px);}
.rfp-btn--ghost{background:transparent;color:var(--rf-fg,#f4f5f6);
  border-color:var(--rf-line2,rgba(255,255,255,.18));}
.rfp-btn--ghost:hover{border-color:var(--rf-green,#3ddc84);color:var(--rf-green,#3ddc84);}
.rfp-btn--block{display:flex;width:100%;min-height:50px;margin-top:16px;}
/* 首屏两个按钮等宽，视觉上成对 */
.rfp-hero__text .rfp-btns .rfp-btn{min-width:170px;}
.rfp-hero__text .rfp-btns .rfp-btn--block{min-width:0;}

/* ---------- 主视觉 ---------- */
.rfp-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
/* 首屏没有配图时：单栏居中（原来右边空着一整块，看着像没做完） */
.rfp-hero--solo .rfp-hero__grid{grid-template-columns:1fr;gap:0;}
.rfp-hero--solo .rfp-hero__text{max-width:840px;margin:0 auto;text-align:center;}
.rfp-hero--solo .rfp-hero__title{font-size:clamp(30px,4.6vw,52px);}
.rfp-hero--solo .rfp-hero__text .rfp-lede{margin-left:auto;margin-right:auto;}
.rfp-hero--solo .rfp-btns{justify-content:center;}
.rfp-hero--solo .rfp-hero__meta{justify-content:center;}
.rfp-hero__title{margin:0 0 18px;font-family:var(--rf-fh);font-weight:700;
  font-size:clamp(30px,4.4vw,50px);line-height:1.1;color:#fff;letter-spacing:-.02em;}
.rfp-hero__text .rfp-lede{font-size:17.5px;max-width:56ch;}
.rfp-hero__media{margin:0;border-radius:16px;overflow:hidden;background:var(--rf-card,#1b1e22);
  border:1px solid var(--rf-line,rgba(255,255,255,.10));box-shadow:0 24px 60px rgba(0,0,0,.42);}
.rfp-hero__media--multi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  border:0;background:transparent;box-shadow:none;border-radius:0;}
/* 防御：即使误加了 --multi，只有一个孩子时也铺满整行（避免单视频只占一半宽） */
.rfp-hero__media--multi:has(> :only-child){grid-template-columns:1fr;}
.rfp-hero__media--multi > *{border-radius:14px;overflow:hidden;border:1px solid var(--rf-line,rgba(255,255,255,.10));}
.rfp-hero__media--multi > img{aspect-ratio:16/10;object-fit:cover;height:100%;}
.rfp-hero__media img{display:block;width:100%;height:auto;}
/* 首屏图强行统一比例（原图是竖构图手机照时，不放任它把首屏撑成一堵墙） */
.rfp-hero__media--ratio img{width:100%;height:100%;aspect-ratio:var(--hero-ratio,1.333);
  object-fit:cover;}
/* 抠掉背景的透明产品图：不套卡片底/边框/阴影，直接坐在页面底色上 */
.rfp-hero__media--cutout{background:transparent;border:0;box-shadow:none;border-radius:0;
  overflow:visible;}
.rfp-hero__media--cutout img{filter:drop-shadow(0 26px 46px rgba(0,0,0,.58));}
.rfp-hero__meta{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;}
.rfp-hero__meta li{position:relative;padding-left:18px;font-size:14px;color:var(--rf-fg3,rgba(244,245,246,.5));}
.rfp-hero__meta li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:50%;background:var(--rf-green,#3ddc84);}

/* ---------- 数据带（5V / 3.3V ｜ 100k+ ｜ 20k+ 这类并排小数据块） ---------- */
.rfp-stats{display:grid;grid-template-columns:repeat(var(--rfp-cols,3),minmax(0,1fr));gap:18px;
  margin-top:44px;padding-top:36px;border-top:1px solid var(--rf-line,rgba(255,255,255,.10));}
.rfp-stat{padding:22px 24px;border-radius:14px;background:var(--rf-card,#1b1e22);
  border:1px solid var(--rf-line,rgba(255,255,255,.10));}
.rfp-stat__num{margin:0 0 8px;font-family:var(--rf-fh);font-weight:700;
  font-size:clamp(22px,2.5vw,30px);line-height:1.15;color:#fff;letter-spacing:-.01em;}
.rfp-stat__label{margin:0;font-size:14px;line-height:1.55;color:var(--rf-fg2,rgba(244,245,246,.74));}

/* ---------- 卡片栅格 ---------- */
.rfp-cards{display:grid;grid-template-columns:repeat(var(--rfp-cols,3),minmax(0,1fr));gap:26px;}
.rfp-card{display:flex;flex-direction:column;background:var(--rf-card,#1b1e22);
  border:1px solid var(--rf-line,rgba(255,255,255,.10));border-radius:16px;overflow:hidden;
  transition:border-color .2s,transform .2s;}
.rfp-card:hover{border-color:var(--rf-line2,rgba(255,255,255,.18));transform:translateY(-2px);}
.rfp-cards--uniform .rfp-card__media{aspect-ratio:4/3;}
.rfp-card__media{margin:0;overflow:hidden;background:#0f1113;
  display:grid;grid-auto-rows:1fr;gap:2px;}
.rfp-card__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  aspect-ratio:var(--gal-ratio,1.333);}
.rfp-card__media--empty{aspect-ratio:4/3;
  background:
    radial-gradient(circle at 50% 42%,rgba(61,220,132,.13),transparent 62%),
    linear-gradient(160deg,#1d2025,#15171a);}
.rfp-card__media--empty::after{content:"RetroForge";display:flex;align-items:center;
  justify-content:center;height:100%;font-family:var(--rf-fh);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(244,245,246,.26);}
/* 视频卡片：媒体位就是视频本身（16:9），不套 4:3 空底、不留底色边 */
.rfp-cards .rfp-card__media--video{aspect-ratio:16/9;background:transparent;
  display:block;gap:0;border-radius:0;}
.rfp-card__media--video .rfp-video{border-radius:0;width:100%;height:100%;}
.rfp-card__body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;
  justify-content:center;}
.rfp-card__body h3{margin:0;font-family:var(--rf-fh);font-size:18.5px;font-weight:600;
  line-height:1.32;color:#fff;}
.rfp-card__label{margin:0;font-family:var(--rf-fh);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rf-green,#3ddc84);}
.rfp-card__stat{margin:0;font-family:var(--rf-fh);font-size:20px;font-weight:700;line-height:1.3;
  color:#fff;}
.rfp-prose__label{margin:0 0 8px!important;font-family:var(--rf-fh);font-size:11.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rf-green,#3ddc84);}
.rfp-card__body p{margin:0;font-size:14.5px;line-height:1.68;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-card__body a{color:var(--rf-green,#3ddc84);text-decoration:none;}
.rfp-card__body a:hover{text-decoration:underline;}
.rfp-card__body .rfp-btn{align-self:flex-start;margin-top:8px;}

/* ---------- 左右分栏（文 | 图）：原设计里「一段文字 + 一张图」的区块 ---------- */
.rfp-split{display:grid;grid-template-columns:1fr 1.05fr;gap:46px;align-items:center;}
.rfp-split__text{max-width:520px;}
.rfp-split__text h3{margin:0 0 12px;font-family:var(--rf-fh);font-size:22px;font-weight:600;
  line-height:1.3;color:#fff;}
.rfp-split__text h3:first-child{margin-top:0;}
.rfp-split__text p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-split__text p:last-child{margin-bottom:0;}
.rfp-split__text .rfp-card__label{margin:0 0 10px;}
.rfp-split__text .rfp-card__stat{font-size:22px;}
.rfp-split__text .rfp-btn{margin-top:16px;}
.rfp-split__media{margin:0;border:1px solid var(--rf-line,rgba(255,255,255,.10));border-radius:16px;
  overflow:hidden;background:#0f1113;box-shadow:0 18px 44px rgba(0,0,0,.34);}
.rfp-split__media img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;
  object-position:center;}

/* ---------- 图文并排（纯文字区块） ---------- */
.rfp-prose{max-width:820px;margin:0 auto;}
.rfp-prose h3{margin:32px 0 10px;font-family:var(--rf-fh);font-size:20px;font-weight:600;color:#fff;}
.rfp-prose h3:first-child{margin-top:0;}
.rfp-prose p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-rich{margin:0 0 16px;font-size:15.5px;line-height:1.75;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-rich ul,.rfp-rich ol{margin:0;padding-left:20px;}
.rfp-rich li{margin-bottom:8px;}
/* 正文里的强调词要看得见（否则 <strong> 和普通文字一个颜色，白写了） */
.rfp-prose strong,.rfp-split__text strong,.rfp-card__body strong,
.rfp-rich strong,.rfp-stat__label strong{color:#fff;font-weight:600;}

/* ---------- 图集 ----------
   列数由张数决定（--gal-cols，渲染时按 4 张 = 2x2 等规则算好），
   不再让浏览器 auto-fit 自己断行（1200px 里 4 张会断成 3+1，最后一行孤零零一张）。 */
.rfp-gallery{display:grid;grid-template-columns:repeat(var(--gal-cols,3),minmax(0,1fr));gap:16px;}
.rfp-gallery figure{margin:0;border-radius:14px;overflow:hidden;background:#0f1113;
  border:1px solid var(--rf-line,rgba(255,255,255,.10));}
.rfp-gallery img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:var(--gal-ratio,1.333);transition:transform .35s;}
.rfp-gallery figure:hover img{transform:scale(1.03);}
/* 最后一行只排到 2 张（如 5 张 = 3+2）时把这行居中，不留半边空 */
.rfp-gallery--center-last{grid-template-columns:repeat(6,minmax(0,1fr));}
.rfp-gallery--center-last > figure{grid-column:span 2;}
.rfp-gallery--center-last > figure:nth-last-child(2){grid-column:2/span 2;}
.rfp-gallery--center-last > figure:last-child{grid-column:4/span 2;}

/* ---------- 视频 ---------- */
.rfp-video{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;}
.rfp-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;}
.rfp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.rfp-video__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;
  border:0;background:var(--rf-green,#3ddc84);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .18s;}
.rfp-video__play:hover{transform:scale(1.07);}
.rfp-video__play span{width:0;height:0;margin-left:5px;border-left:18px solid #0b1a11;
  border-top:11px solid transparent;border-bottom:11px solid transparent;}

/* ---------- 问答 ---------- */
.rfp-faq{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.rfp-faq__item{background:var(--rf-card,#1b1e22);border:1px solid var(--rf-line,rgba(255,255,255,.10));
  border-radius:12px;overflow:hidden;}
.rfp-faq__item summary{padding:18px 22px;font-family:var(--rf-fh);font-size:16px;font-weight:600;
  color:#fff;cursor:pointer;list-style:none;position:relative;padding-right:52px;}
.rfp-faq__item summary::-webkit-details-marker{display:none;}
.rfp-faq__item summary::after{content:"+";position:absolute;right:22px;top:50%;
  transform:translateY(-50%);font-size:22px;line-height:1;color:var(--rf-green,#3ddc84);
  font-family:var(--rf-fh);transition:transform .2s;}
.rfp-faq__item[open] summary::after{content:"–";}
.rfp-faq__a{padding:0 22px 20px;}
.rfp-faq__a p{margin:0;font-size:14.5px;line-height:1.7;color:var(--rf-fg2,rgba(244,245,246,.74));}

/* ---------- 联系区 ----------
   align-items:stretch -> 表单卡与右侧信息卡等高（原来是 start，两栏底边对不齐）；
   信息卡用 flex 把 WhatsApp 按钮压到底部，跟表单卡底边齐平。 */
.rfp-contact{display:grid;grid-template-columns:1.35fr .85fr;gap:34px;align-items:stretch;}
.rfp-contact__form{background:var(--rf-card,#1b1e22);border:1px solid var(--rf-line,rgba(255,255,255,.10));
  border-radius:16px;padding:30px;}
.rfp-contact__side{background:var(--rf-card2,#212429);border:1px solid var(--rf-line,rgba(255,255,255,.10));
  border-radius:16px;padding:26px;display:flex;flex-direction:column;}
.rfp-contact__side figure{margin:0 0 20px;border-radius:12px;overflow:hidden;}
.rfp-contact__side figure img{display:block;width:100%;height:auto;}
.rfp-contact__list{list-style:none;margin:0;padding:0;flex:1 1 auto;}
.rfp-contact__list li{display:flex;flex-direction:column;gap:3px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-contact__list li:last-child{border-bottom:0;}
.rfp-contact__list strong{font-family:var(--rf-fh);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rf-green,#3ddc84);}
.rfp-contact__list a{color:var(--rf-fg,#f4f5f6);text-decoration:none;font-size:15px;}
.rfp-contact__list a:hover{color:var(--rf-green,#3ddc84);}
.rfp-contact__side .rfp-btn--block{margin-top:auto;}
.rfp-contact__notes{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);}
.rfp-contact__notes p{margin:0 0 8px;font-size:13.5px;line-height:1.6;
  color:var(--rf-fg3,rgba(244,245,246,.5));}

/* ---------- 表单 ---------- */
.rfp-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rfp-field{display:flex;flex-direction:column;gap:7px;}
.rfp-field--full{grid-column:1/-1;}
.rfp-field span{font-size:13px;font-weight:500;color:var(--rf-fg2,rgba(244,245,246,.74));}
.rfp-field input,.rfp-field textarea{width:100%;box-sizing:border-box;padding:12px 14px;
  background:#12141a;border:1px solid var(--rf-line2,rgba(255,255,255,.18));border-radius:9px;
  color:#fff;font-family:var(--rf-fb,inherit);font-size:14.5px;line-height:1.5;resize:vertical;}
.rfp-field input:focus,.rfp-field textarea:focus{outline:0;border-color:var(--rf-green,#3ddc84);
  box-shadow:0 0 0 3px rgba(61,220,132,.14);}
.rfp-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.rfp-form__note{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--rf-fg3,rgba(244,245,246,.5));}
.rfp-form .rfp-btn{grid-column:1/-1;justify-self:start;}

/* ---------- 响应式 ---------- */
@media (max-width:1040px){
  .rfp-hero__grid{grid-template-columns:1fr;gap:34px;}
  .rfp-hero__media{order:-1;}
  .rfp-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rfp-contact{grid-template-columns:1fr;}
  .rfp-split{grid-template-columns:1fr;gap:30px;}
  .rfp-split__text{max-width:none;}
}
@media (max-width:720px){
  .rfp-sec,.rfp-sec--alt{padding:52px 0;}
  .rfp-hero{padding:40px 0 44px;}
  .rfp-wrap{padding:0 16px;}
  .rfp-cards{grid-template-columns:1fr;gap:18px;}
  .rfp-card__body{padding:20px 20px 22px;}
  .rfp-card__stat{font-size:18.5px;}
  .rfp-gallery{grid-template-columns:1fr;gap:12px;}
  /* 单列时清掉"末行居中"的显式列位置，否则会撑出横向溢出 */
  .rfp-gallery--center-last > figure,
  .rfp-gallery--center-last > figure:nth-last-child(2),
  .rfp-gallery--center-last > figure:last-child{grid-column:auto;}
  .rfp-stats{grid-template-columns:1fr;gap:12px;margin-top:34px;padding-top:28px;}
  .rfp-stat{padding:18px 20px;}
  .rfp-form{grid-template-columns:1fr;}
  .rfp-contact__form,.rfp-contact__side{padding:20px;}
  .rfp-sec__head{margin-bottom:28px;text-align:left;}
  .rfp-sec__head .rfp-btns{justify-content:flex-start;}
  .rfp-hero__meta{gap:8px 18px;}

  /* 主视觉：媒体铺满整行 —— 视频/图片不再出现"小窗口" */
  .rfp-hero__grid{gap:26px;}
  .rfp-hero__media{width:100%;box-shadow:0 14px 34px rgba(0,0,0,.36);border-radius:14px;}
  .rfp-hero__media--multi{grid-template-columns:1fr;gap:12px;}   /* 两个视频在手机上改为上下排列 */
  .rfp-hero__title{font-size:27px;line-height:1.18;margin-bottom:14px;}
  .rfp-hero__text .rfp-lede{font-size:16px;}
  .rfp-sec__title{font-size:23px;}
  .rfp-hero__meta{margin-top:18px;}

  /* 正文可读性 */
  .rfp-prose h3,.rfp-split__text h3{font-size:18.5px;}
  .rfp-prose p,.rfp-split__text p,.rfp-rich,.rfp-card__body p{font-size:14.8px;}
  .rfp-split__media img{max-height:none;}
  .rfp-split__text .rfp-card__stat{font-size:19px;}

  /* 视频播放按钮在窄屏略小，避免压住封面主体 */
  .rfp-video__play{width:54px;height:54px;}
  .rfp-video__play span{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;}
  .rfp-btns{gap:10px;margin-top:18px;}

  /* 首屏行动按钮：手机上两个并排填满整行，指头好按 */
  .rfp-hero__text .rfp-btns{gap:10px;}
  .rfp-hero__text .rfp-btns .rfp-btn{flex:1 1 calc(50% - 5px);min-width:0;}
  /* 区块头/表单里的按钮同样填满可用宽度 */
  .rfp-sec__head .rfp-btns .rfp-btn{flex:1 1 calc(50% - 5px);min-width:0;}
  .rfp-form .rfp-btn{width:100%;justify-self:stretch;}
}

/* 小屏手机（iPhone SE / 安卓 360px 等） */
@media (max-width:430px){
  .rfp-hero__title{font-size:24px;}
  .rfp-sec__title{font-size:21px;}
  .rfp-eyebrow{font-size:11px;letter-spacing:.16em;}
  /* 太窄就不并排了：一个按钮占一行，高度 52px，拇指点得准 */
  .rfp-btn{font-size:14.5px;padding:0 18px;min-height:50px;}
  .rfp-hero__text .rfp-btns .rfp-btn,
  .rfp-sec__head .rfp-btns .rfp-btn{flex:1 1 100%;min-height:52px;}
  .rfp-btns{gap:9px;}
  .rfp-contact__form,.rfp-contact__side{padding:16px;}
  .rfp-card__body{padding:18px;}
  .rfp-faq__item summary{padding:16px 18px;padding-right:46px;font-size:15px;}
  .rfp-faq__a{padding:0 18px 18px;}
  .rfp-hero{padding:34px 0 38px;}
  .rfp-sec,.rfp-sec--alt{padding:44px 0;}
}