/* =========================================================
   Referral (推荐有礼) — page styles
   Visual language matched to /ai-boost & /ai-employee.
   Relies on design tokens in /css/base/variables.css.
   ========================================================= */

/* ── Hero ───────────────────────────────────────────────── */
.rf-hero {
  position: relative;
  background: linear-gradient(135deg, #001428 0%, #002952 25%, #003d7a 50%, #0055a8 75%, #003d7a 100%);
  overflow: hidden;
  color: #fff;
  padding: clamp(140px, 13vw, 180px) 0 clamp(56px, 7vw, 88px);
}
.rf-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(0, 212, 255, .15) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0, 149, 255, .12) 0%, transparent 40%),
    radial-gradient(circle at 40% 40%, rgba(0, 180, 255, .08) 0%, transparent 50%);
  z-index: 1;
}
.rf-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 120%, rgba(0, 149, 255, .4) 0%, transparent 60%);
  z-index: 1;
}
.rf-hero .container { position: relative; z-index: 10; }

.rf-hero-inner { max-width: 100%; }
/* 大屏下标题与副标题保持单行不换行（容器最宽 1200/1280px，足够容纳） */
@media (min-width: 1100px) {
  .rf-hero-title,
  .rf-hero-subtitle { white-space: nowrap; }
}
.rf-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0, 149, 255, .15);
  border: 1px solid rgba(0, 212, 255, .35);
  border-radius: 9999px; padding: .375rem 1rem;
  font-size: .875rem; color: #7dd3fc;
  margin-bottom: 1.5rem; letter-spacing: .5px;
}
.rf-hero-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800; line-height: 1.2; margin: 0 0 1.125rem;
  background: linear-gradient(135deg, #ffffff 0%, #b3ecff 30%, #00D4FF 60%, #ffffff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 24px rgba(0, 212, 255, .3));
}
.rf-hero-subtitle {
  font-size: 1.0625rem; color: rgba(255,255,255,.82);
  line-height: 1.75; font-weight: 300; margin: 0 0 1.75rem;
}

/* Reward steps inside hero — 大屏单行右对齐，移动端竖排左对齐 */
.rf-steps { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .rf-steps { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}
.rf-step {
  display: inline-flex; align-items: center; gap: .625rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: .7rem 1.125rem;
  font-size: .9375rem; color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}
.rf-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(135deg, #0095FF, #00D4FF);
  color: #fff; font-size: .8125rem; font-weight: 800; flex: 0 0 auto;
}

/* ── 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: #0095FF; 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: #0066cc;
  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, #0095FF 0%, #00D4FF 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: #0066cc; 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, #0095ff);
  flex: 0 0 auto;
}
.rf-module-num {
  font-size: 1.875rem; font-weight: 800; line-height: 1;
  color: var(--rf-c, #0095ff); 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, #0066cc);
  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, #003d7a 0%, #0055a8 55%, #0066cc 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: 900px) {
  .rf-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rf-modules { grid-template-columns: 1fr; }
  .rf-copy-btn { width: 100%; justify-content: center; }
  .rf-link-url { flex-basis: 100%; }
}