/* =========================================================
   邀请有礼 — 正文样式。Hero 走全站内页 page-hero.css。
   Relies on design tokens in /css/base/variables.css.
   ========================================================= */

/* ── Section base ────────────────────────────────────────── */
.rf-section { padding: clamp(64px, 8vw, 96px) 0 clamp(56px, 7vw, 80px); position: relative; overflow: hidden; }
.rf-section.alt-bg { background: #f8faff; }
.rf-section.alt-bg::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(0,149,255,.35) 50%, transparent 90%);
}
.rf-section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.rf-section-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: 2.5px;
  color: var(--primary-blue); text-transform: uppercase; margin: 0 0 .5rem;
}
.rf-section-title {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: 800; color: #1A2332; margin: 0 0 .625rem; letter-spacing: -.5px;
}
.rf-section-subtitle { color: #5a6578; font-size: .9375rem; line-height: 1.7; margin: 0; }

/* ── Link generator ──────────────────────────────────────── */
.rf-gen {
  max-width: 760px; margin: 0 auto;
  background: #fff; border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 1.5px solid rgba(0, 149, 255, .12);
  box-shadow: 0 12px 40px rgba(0, 102, 204, .08);
}
.rf-gen-label {
  display: block; font-size: .9375rem; font-weight: 700;
  color: #1A2332; margin-bottom: .625rem;
}
.rf-gen-input-row { display: flex; gap: .625rem; flex-wrap: wrap; }
.rf-gen-input {
  flex: 1 1 240px; min-width: 0;
  font-size: 1rem; color: #1A2332;
  padding: .875rem 1rem;
  border: 1.5px solid var(--neutral-gray-200); border-radius: 12px;
  background: #f8faff; transition: border-color .15s, box-shadow .15s;
  font-family: inherit; text-transform: uppercase;
}
.rf-gen-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(0, 149, 255, .12);
  background: #fff;
}
.rf-gen-hint {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8125rem; color: #8895a7; margin: .75rem 0 0;
}

.rf-links { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.rf-link-card {
  border: 1.5px solid var(--neutral-gray-200); border-radius: 16px;
  padding: 1.125rem 1.25rem;
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.rf-link-card[data-disabled="true"] { opacity: .55; }
.rf-link-card:not([data-disabled="true"]):hover {
  border-color: rgba(0, 149, 255, .35);
  box-shadow: 0 8px 24px rgba(0, 149, 255, .1);
}
.rf-link-head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem;
}
.rf-link-tag {
  font-size: .8125rem; font-weight: 700; color: var(--primary-blue-dark);
  background: #eaf4ff; border-radius: 8px; padding: .2rem .6rem;
}
.rf-link-desc { font-size: .8125rem; color: #8895a7; }
.rf-link-body { display: flex; gap: .625rem; align-items: stretch; flex-wrap: wrap; }
.rf-link-url {
  flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center;
  font-family: var(--font-family-mono, monospace);
  font-size: .8125rem; color: #475569;
  background: #f8faff; border: 1px solid var(--neutral-gray-200);
  border-radius: 10px; padding: .625rem .875rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-copy-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 600;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-bright) 100%);
  color: #fff; border: none; border-radius: 10px;
  padding: .625rem 1.125rem; cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.rf-copy-btn:hover { opacity: .9; }
.rf-copy-btn:active { transform: scale(.97); }
.rf-copy-btn:disabled { opacity: .45; cursor: not-allowed; }
.rf-copy-btn.copied { background: linear-gradient(135deg, #10b981, #34d399); }

/* ── 12 optional modules ─────────────────────────────────── */
.rf-reward-note {
  display: flex; align-items: center; gap: .625rem;
  justify-content: center; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto 40px;
  background: #eaf4ff; border: 1px solid rgba(0, 149, 255, .2);
  border-radius: 14px; padding: .875rem 1.25rem;
  color: var(--primary-blue-dark); font-size: .9375rem; font-weight: 600;
}
.rf-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* 外层 .rf-module 为稳定的网格单元（自身永不位移），hover 判定区固定不动；
   位移只作用在内层 .rf-module-card 上，光标停在卡片边缘时不会出现“弹回→再 hover”的无限抖动。 */
.rf-module { display: flex; }

/* 按行分色：桌面三列下每行 3 张同色——第一行红、第二行橙、第三行绿、第四行蓝（取对比安全、低饱和版本）
   --rf-c 主色（图标/序号/链接），--rf-c-soft 图标块浅底，--rf-c-bd hover 边框，--rf-c-sh hover 阴影 */
.rf-module.rf-c-red    { --rf-c:#E5484D; --rf-c-soft:#FCEBEB; --rf-c-bd:#F5C9C9; --rf-c-sh:rgba(229,72,77,.16); }
.rf-module.rf-c-orange { --rf-c:#D97706; --rf-c-soft:#FBF0E0; --rf-c-bd:#F0D6A8; --rf-c-sh:rgba(217,119,6,.16); }
.rf-module.rf-c-green  { --rf-c:#15A05A; --rf-c-soft:#E8F6EE; --rf-c-bd:#BFE6CE; --rf-c-sh:rgba(21,160,90,.16); }
.rf-module.rf-c-blue   { --rf-c:#2D7DD2; --rf-c-soft:#E8F2FC; --rf-c-bd:#C4E0F5; --rf-c-sh:rgba(45,125,210,.16); }

.rf-module-card {
  position: relative;
  flex: 1;
  background: #fff; border-radius: 18px;
  padding: 22px 22px 20px;
  border: 1.5px solid var(--neutral-gray-200, #e2e8f0);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .05);
  display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.rf-module:hover .rf-module-card {
  border-color: var(--rf-c-bd, rgba(0, 149, 255, .32));
  box-shadow: 0 14px 36px var(--rf-c-sh, rgba(0, 149, 255, .14));
  transform: translateY(-3px);
}
.rf-module-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.rf-module-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rf-c-soft, #eaf4ff);
  color: var(--rf-c, var(--primary-blue));
  flex: 0 0 auto;
}
.rf-module-num {
  font-size: 1.875rem; font-weight: 800; line-height: 1;
  color: var(--rf-c, var(--primary-blue)); opacity: .26;
  font-family: var(--font-family-mono, monospace);
}
.rf-module-name {
  font-size: 1.0625rem; font-weight: 700; color: #1A2332;
  margin: 0 0 .625rem;
}
.rf-module-desc {
  font-size: .875rem; color: #5a6578; line-height: 1.7;
  margin: 0 0 1.125rem; flex: 1;
}
.rf-module-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; font-weight: 600; color: var(--rf-c, var(--primary-blue-dark));
  text-decoration: none; align-self: flex-end;
  transition: gap .2s, opacity .2s;
}
.rf-module-link:hover { opacity: .82; gap: .55rem; }

/* ── CTA ─────────────────────────────────────────────────── */
.rf-cta {
  background: linear-gradient(135deg, var(--primary-navy-700) 0%, var(--primary-navy-500) 55%, var(--primary-blue-dark) 100%);
  color: #fff; text-align: center;
  padding: clamp(56px, 7vw, 80px) 0;
  position: relative; overflow: hidden;
}
.rf-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 5%, rgba(0, 212, 255, .22), transparent 50%),
    radial-gradient(circle at 10% 95%, rgba(0, 149, 255, .18), transparent 55%);
  pointer-events: none;
}
.rf-cta .container { position: relative; z-index: 1; }
.rf-cta h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; margin: 0 0 .75rem; color: #fff; }
.rf-cta p { color: rgba(255,255,255,.85); font-size: 1rem; margin: 0 0 1.75rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rf-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rf-modules { grid-template-columns: 1fr; }
  .rf-copy-btn { width: 100%; justify-content: center; }
  .rf-link-url { flex-basis: 100%; }
}