/* ============================================================
   page-resources.css — Enterprise Knowledge Hub
   Fully scoped to .rs- prefix. No global side-effects.
   ============================================================ */

/* ── 01 · HERO ──────────────────────────────────────────── */
.rs-hero {
  padding: clamp(60px, 9vw, 110px) 0 clamp(60px, 8vw, 100px);
}

.rs-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Breadcrumb */
.rs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  color: #4D5A77;
  letter-spacing: .04em;
}
.rs-crumbs a { color: #4D5A77; text-decoration: none; transition: color .2s cubic-bezier(.22,.61,.36,1); }
.rs-crumbs a:hover { color: #1E63E9; }
.rs-crumb-sep { opacity: .45; }
.rs-crumbs-here { color: #0B1E3F; font-weight: 600; }
.rs-crumbs svg { flex-shrink: 0; opacity: .4; }

/* Eyebrow tag — matches .tag in architecture-design */
.rs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 6px 14px;
  background: #FCFDFF;
  border: 1px solid #DCE3F1;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: #4D5A77;
  letter-spacing: .02em;
}
.rs-hero-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1E63E9;
  animation: rsPulse 1.6s infinite;
  flex-shrink: 0;
}
@keyframes rsPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

/* Hero title */
.rs-hero-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #0B1E3F;
  margin: 0 0 22px;
}
.rs-hero-title em {
  font-style: normal;
  color: #1E63E9;
}

/* Lede */
.rs-hero-lede {
  font-size: clamp(1.04rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: #4D5A77;
  max-width: 560px;
  margin: 0;
}

/* CTA row — matches architecture-design .cta-row */
.rs-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Primary CTA — matches .btn-cta */
.rs-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #1E63E9, #1648A6);
  color: #FCFDFF;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 24px -10px rgba(30,99,233,.55);
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.rs-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.rs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -14px rgba(30,99,233,.55);
}
.rs-btn-primary:hover::before { transform: translateX(100%); }
.rs-btn-primary svg { transition: transform .2s; }
.rs-btn-primary:hover svg { transform: translateX(4px); }

/* Ghost / line CTA — matches .btn-line */
.rs-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  background: rgba(255,255,255,.6);
  color: #0B1E3F;
  border: 1px solid #DCE3F1;
  backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s;
}
.rs-btn-ghost:hover { border-color: #1E63E9; color: #1E63E9; }

/* Trust chips — light style */
.rs-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 46px;
}
.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: #FCFDFF;
  border: 1px solid #DCE3F1;
  border-radius: 999px;
  font-size: .78rem;
  color: #4D5A77;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}
.rs-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1E63E9;
  flex-shrink: 0;
}

/* ── Hero Visual ── */
.rs-hero-vis {
  position: relative;
  width: 100%;
  min-height: 480px;
  max-width: 520px;
  margin-inline: auto;
}

/* Mouse-parallax container */
.rs-parallax-scene {
  position: absolute;
  inset: 0;
  perspective: 900px;
  perspective-origin: center;
}

.rs-parallax-layer {
  position: absolute;
  inset: 0;
  transition: transform .08s linear;
  will-change: transform;
}

.rs-svg-wrap {
  width: 100%;
  height: 100%;
}

/* ── 02 · METRICS STRIP ──────────────────────────────────── */
.rs-metrics {
  background: #F7F9FE;
  border-top: 1px solid #DCE3F1;
  border-bottom: 1px solid #DCE3F1;
  padding: 28px 0;
}

.rs-metrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}

.rs-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.rs-metric-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #0B1E3F;
  line-height: 1;
  letter-spacing: -.04em;
}
.rs-metric-num span { color: #1E63E9; }

.rs-metric-lbl {
  font-size: .8rem;
  color: #4D5A77;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
}

.rs-metrics-sep {
  width: 1px;
  height: 40px;
  background: #DCE3F1;
  flex-shrink: 0;
}

/* ── 03 · SECTION HEADINGS ──────────────────────────────── */
.rs-section {
  padding: clamp(72px, 10vw, 120px) 0;
}
.rs-section--alt {
  background: #F7F9FE;
}
.rs-section--dark {
  background: linear-gradient(165deg, #06091a, #0b1e3f);
  color: #FCFDFF;
}

.rs-section-head {
  margin-bottom: clamp(40px, 6vw, 64px);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}
.rs-section-head--left {
  text-align: left;
  margin-inline: 0;
}

.rs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: #1E63E9;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rs-kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5EEAD4;
  flex-shrink: 0;
}
.rs-section--dark .rs-kicker { color: #5EEAD4; }

.rs-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #0F172A;
  margin-bottom: 16px;
}
.rs-section--dark .rs-section-title { color: #FCFDFF; }
.rs-section-title em {
  font-style: normal;
  background: linear-gradient(135deg, #1E63E9, #5EEAD4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rs-section-lede {
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: #4D5A77;
}
.rs-section--dark .rs-section-lede { color: rgba(255,255,255,.65); }

/* ── 04 · FEATURED CARDS ────────────────────────────────── */
.rs-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rs-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #DCE3F1;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    border-color .3s,
    box-shadow .45s cubic-bezier(.16,1,.3,1);
}

.rs-feat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Soft radial spotlight — matches Solutions .scard-inner::before language */
  background: radial-gradient(ellipse at 50% 0%, rgba(30,99,233,.07), transparent 68%);
  transition: opacity .4s cubic-bezier(.22,.61,.36,1);
  z-index: 0;
  pointer-events: none;
}

/* Solutions-aligned hover: navy shadow, semi-transparent border, -5px lift */
.rs-feat:hover {
  transform: translateY(-5px);
  border-color: rgba(30, 99, 233, .35);
  box-shadow: 0 30px 60px -25px rgba(11, 30, 63, .25);
}
.rs-feat:hover::before { opacity: 1; }

.rs-feat > * { position: relative; z-index: 1; }

.rs-feat-badge {
  padding: 14px 20px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: #1E63E9;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rs-feat-vis {
  height: 170px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(30,99,233,.04), rgba(30,99,233,.0));
}
.rs-feat-vis svg { width: 100%; height: 100%; display: block; }

.rs-feat-body {
  padding: 18px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-feat-label {
  font-size: .78rem;
  font-family: 'JetBrains Mono', monospace;
  color: #4D5A77;
  letter-spacing: .04em;
}

.rs-feat-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}

.rs-feat-desc {
  font-size: .88rem;
  line-height: 1.6;
  color: #4D5A77;
  flex: 1;
}

.rs-feat-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid #EEF2FB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rs-free-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: #4D5A77;
  padding: 4px 10px;
  background: #EEF2FB;
  border-radius: 4px;
}

.rs-feat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: #1E63E9;
}
.rs-feat-link svg {
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
.rs-feat:hover .rs-feat-link svg { transform: translateX(5px); }

/* ── 05 · FILTER BAR ────────────────────────────────────── */
.rs-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.rs-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: #4D5A77;
  letter-spacing: .04em;
  margin-right: 4px;
  white-space: nowrap;
}

.rs-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid #DCE3F1;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #0B1E3F;
  background: #fff;
  cursor: pointer;
  transition:
    background .2s,
    border-color .2s,
    color .2s,
    box-shadow .2s,
    transform .18s;
  position: relative;
  overflow: hidden;
  min-height: 36px;
}

.rs-filter-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1E63E9, #5EEAD4);
  opacity: 0;
  transition: opacity .2s;
  z-index: 0;
}
.rs-filter-tag span { position: relative; z-index: 1; }

.rs-filter-tag:hover { border-color: #1E63E9; color: #1E63E9; }
.rs-filter-tag.rs-active {
  background: #0B1E3F;
  border-color: #0B1E3F;
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(11,30,63,.35);
}
.rs-filter-tag.rs-active:hover { transform: translateY(-1px); }

.rs-filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  padding: 1px 6px;
  background: rgba(30,99,233,.12);
  border-radius: 4px;
  color: #1E63E9;
  transition: background .2s, color .2s;
}
.rs-filter-tag.rs-active .rs-filter-count {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
}

/* ── 06 · RESOURCES GRID ────────────────────────────────── */
.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.rs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid #DCE3F1;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    border-color .2s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1);
}

/* Soft radial spotlight — matches Solutions .scard-inner::before */
.rs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(30,99,233,.06), transparent 70%);
  opacity: 0;
  transition: opacity .4s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 0;
}
.rs-card > * { position: relative; z-index: 1; }

/* Solutions-aligned hover: navy shadow, semi-transparent blue border, -3px lift */
.rs-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 99, 233, .4);
  box-shadow: 0 20px 40px -20px rgba(11, 30, 63, .25);
}
.rs-card:hover::before { opacity: 1; }

/* Type-colored top accent bar */
.rs-card-accent {
  height: 3px;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
}
.rs-card-accent--whitepaper  { background: linear-gradient(90deg, #1E63E9, #4F8BFF); }
.rs-card-accent--guide       { background: linear-gradient(90deg, #5EEAD4, #1E63E9); }
.rs-card-accent--template    { background: linear-gradient(90deg, #FF6B35, #FFB199); }
.rs-card-accent--checklist   { background: linear-gradient(90deg, #5EEAD4, #0b1e3f); }
.rs-card-accent--playbook    { background: linear-gradient(90deg, #7C3AED, #5EEAD4); }
.rs-card-accent--advisory    { background: linear-gradient(90deg, #FF6B35, #1E63E9); }
.rs-card-accent--default     { background: linear-gradient(90deg, #1E63E9, #5EEAD4); }

.rs-card-inner {
  padding: 22px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.rs-type-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: .04em;
  font-weight: 500;
}
.rs-type-badge--whitepaper  { background: rgba(30,99,233,.1);  color: #1E63E9; }
.rs-type-badge--guide       { background: rgba(94,234,212,.15); color: #0b6b5a; }
.rs-type-badge--template    { background: rgba(255,107,53,.1); color: #d9510a; }
.rs-type-badge--checklist   { background: rgba(94,234,212,.12); color: #0b6b5a; }
.rs-type-badge--playbook    { background: rgba(124,58,237,.1); color: #6d28d9; }
.rs-type-badge--advisory    { background: rgba(255,107,53,.1); color: #d9510a; }
.rs-type-badge--default     { background: rgba(30,99,233,.08); color: #1E63E9; }

.rs-domain-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: #EEF2FB;
  color: #4D5A77;
  letter-spacing: .02em;
}

.rs-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0F172A;
  transition: color .2s;
}
.rs-card:hover .rs-card-title { color: #1E63E9; }

.rs-card-desc {
  font-size: .875rem;
  line-height: 1.6;
  color: #4D5A77;
  flex: 1;
}

.rs-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #EEF2FB;
  margin-top: auto;
}

.rs-card-download {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: #4D5A77;
}

.rs-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .85rem;
  font-weight: 700;
  color: #1E63E9;
}
.rs-card-cta svg { transition: transform .22s cubic-bezier(.16,1,.3,1); }
.rs-card:hover .rs-card-cta svg { transform: translateX(4px); }

/* Empty state */
.rs-empty {
  text-align: center;
  padding: 64px 24px;
  color: #4D5A77;
  font-size: 1rem;
  grid-column: 1 / -1;
}

/* Hidden filter state */
.rs-card.rs-hide { display: none; }

/* ── 07 · DOMAIN COVERAGE STRIP ─────────────────────────── */
.rs-domains {
  padding: clamp(48px, 6vw, 72px) 0;
  background: #F7F9FE;
  border-top: 1px solid #DCE3F1;
  border-bottom: 1px solid #DCE3F1;
}

.rs-domains-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.rs-domain-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #DCE3F1;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  color: #0F172A;
  transition: border-color .2s, box-shadow .25s, transform .25s;
}
.rs-domain-item:hover {
  border-color: #1E63E9;
  box-shadow: 0 8px 24px -12px rgba(30,99,233,.2);
  transform: translateY(-2px);
}
.rs-domain-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 08 · CTA SECTION ───────────────────────────────────── */

/* Section wrapper — padding-bottom only, matching .cta-sec */
.rs-cta {
  padding-bottom: 0; /* Removed to fix double spacing before footer */
}

/* Cinematic card — exact match to .cta-card */
.rs-cta-card {
  position: relative;
  padding: clamp(40px, 6vw, 80px);
  background: linear-gradient(160deg, #0B1E3F 0%, #0F2A55 60%, #1648A6 130%);
  border-radius: 20px;
  color: #FCFDFF;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 40px 80px -40px rgba(11,30,63,.55);
}

/* Drifting ambient glow blobs — exact match to .cta-lights */
.rs-cta-lights {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(closest-side, rgba(255,107,53,.4), transparent 60%) 80% 20% / 40% 50% no-repeat,
    radial-gradient(closest-side, rgba(79,139,255,.4), transparent 60%) 15% 80% / 50% 60% no-repeat;
  filter: blur(60px);
  pointer-events: none;
  animation: rsCTADrift 14s ease-in-out infinite;
}

@keyframes rsCTADrift {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-30px, 24px); }
}

.rs-cta-card-body { position: relative; z-index: 1; }

/* Kicker — accent-2 coral matches .cta-card .kicker using --c-accent-2 */
.rs-cta-kicker { color: #FFB199; justify-content: center; display: inline-flex; }

/* Headline — matches .cta-card h2 exactly */
.rs-cta-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #FCFDFF;
  margin: 18px auto 14px;
  max-width: 700px;
}
.rs-cta-title em {
  font-style: normal;
  background: linear-gradient(120deg, #FCFDFF, #5EEAD4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Body copy — matches .cta-card p */
.rs-cta-lede {
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin: 0 auto 30px;
}

/* Button row — matches .cta-btns */
.rs-cta-btns {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Primary button — matches .btn.btn-cta.btn-lg with shimmer sweep */
.rs-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: #1D3FB0;
  color: #FCFDFF;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 24px -10px rgba(11,30,63,.5);
  transition: transform 200ms cubic-bezier(.22,.61,.36,1), box-shadow 200ms cubic-bezier(.22,.61,.36,1);
}
.rs-cta-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.rs-cta-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(11,30,63,.55); }
.rs-cta-btn-primary:hover::before { transform: translateX(100%); }

/* Ghost / line button — matches .cta-card .btn-line.btn-lg */
.rs-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: rgba(255,255,255,.06);
  color: #FCFDFF;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background 200ms cubic-bezier(.22,.61,.36,1), border-color 200ms cubic-bezier(.22,.61,.36,1);
}
.rs-cta-btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
}

/* Supporting resource cards — matches .rgrid + .rcard from solutions */
.rs-rcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rs-rcard {
  display: block;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid #DCE3F1;
  border-radius: 14px;
  text-decoration: none;
  transition:
    transform  480ms cubic-bezier(.16,1,.3,1),
    box-shadow 480ms cubic-bezier(.22,.61,.36,1),
    border-color 200ms cubic-bezier(.22,.61,.36,1);
}
.rs-rcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -22px rgba(11,30,63,.25);
  border-color: #1E63E9;
}

/* Mono tag — matches .rtag */
.rs-rtag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: #5EEAD4;
  letter-spacing: .04em;
}

/* Card heading — matches .rcard h3 */
.rs-rcard h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0B1E3F;
  letter-spacing: -.02em;
  margin: 10px 0 8px;
}

/* Card body text — matches .rcard p */
.rs-rcard p {
  color: #4D5A77;
  font-size: .94rem;
  margin-bottom: 14px;
}

/* Inline CTA — matches .rcta + animated arrow */
.rs-rcta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1E63E9;
  font-weight: 700;
  font-size: .94rem;
}
.rs-rcta span {
  display: inline-block;
  transition: transform 200ms cubic-bezier(.16,1,.3,1);
}
.rs-rcard:hover .rs-rcta span { transform: translateX(6px); }

/* ── 09 · SVG ANIMATIONS ────────────────────────────────── */

/*
 * ARCHITECTURE NOTE — SVG transform collision fix
 * ──────────────────────────────────────────────
 * CSS `transform` property *replaces* (not adds to) an SVG element's
 * `transform` attribute when both exist on the same node.  If a <g>
 * had transform="translate(x,y)" AND a CSS animation setting
 * transform: translateY(-6px), the animation would collapse all cards
 * to the SVG origin one-by-one as each positive delay expired.
 *
 * Fix: each leaf node is now wrapped in a plain <g transform="…">
 * for positioning, while the inner <g class="rs-leaf-node"> carries
 * only the CSS animation (no SVG transform attribute).  Delays are
 * negative so every node is already mid-cycle at first paint.
 */

/* Ambient glow rings — use transform:scale() not `r` for full browser support */
.rs-amb-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: rsAmbRing 5s ease-out infinite;
}
.rs-amb-ring:nth-child(2) { animation-duration: 7s;  animation-delay: -2s; }
.rs-amb-ring:nth-child(3) { animation-duration: 9s;  animation-delay: -4s; }
@keyframes rsAmbRing {
  /* scale(2.625) = 210/80, matching the original r-based radius sweep */
  0%   { transform: scale(1);     opacity: .35; }
  100% { transform: scale(2.625); opacity: 0;   }
}

/* Animated branch paths (stroke-dashoffset flow) */
.rs-branch {
  stroke-dasharray: 8 6;
  animation: rsBranchFlow 3s linear infinite;
}
.rs-branch:nth-child(2) { animation-duration: 3.5s; animation-delay: -.5s; }
.rs-branch:nth-child(3) { animation-duration: 2.8s; animation-delay: -1s;  }
.rs-branch:nth-child(4) { animation-duration: 3.8s; animation-delay: -1.5s;}
.rs-branch:nth-child(5) { animation-duration: 3.2s; animation-delay: -2s;  }
.rs-branch:nth-child(6) { animation-duration: 4s;   animation-delay: -2.5s;}
@keyframes rsBranchFlow { to { stroke-dashoffset: -56; } }

/*
 * Leaf node float — inner <g> only (no SVG transform attribute on this element).
 * Delays come from inline style on each node; all are negative so nodes are
 * visible and animated from the very first frame — no positive-delay wait.
 */
.rs-leaf-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: rsLeafFloat 6s ease-in-out infinite;
  /* animation-fill-mode intentionally omitted (defaults to none) — correct for infinite */
}
@keyframes rsLeafFloat {
  0%, 100% { transform: translateY(0px);  opacity: 1;   }
  50%       { transform: translateY(-7px); opacity: .96; }
}

/* Hub pulse rings — <circle> elements (no SVG transform attr conflict) */
.rs-hub-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: rsHubRing 3s ease-out infinite;
}
.rs-hub-ring:nth-child(2) { animation-delay: -1s; }
.rs-hub-ring:nth-child(3) { animation-delay: -2s; }
@keyframes rsHubRing {
  0%   { transform: scale(.5);  opacity: .7; }
  100% { transform: scale(1.8); opacity: 0;  }
}

/* Particle field float — cx/cy attributes are not CSS transforms so no conflict */
.rs-particle {
  animation: rsParticleFloat 8s ease-in-out infinite;
}
.rs-particle:nth-child(2n) { animation-duration: 10s; animation-delay: -3s; }
.rs-particle:nth-child(3n) { animation-duration: 7s;  animation-delay: -5s; }
.rs-particle:nth-child(4n) { animation-duration: 12s; animation-delay: -1s; }
@keyframes rsParticleFloat {
  0%, 100% { transform: translate(0,    0);    opacity: .5; }
  33%       { transform: translate(8px, -12px); opacity: .9; }
  66%       { transform: translate(-6px, 4px);  opacity: .6; }
}

/* ── 10 · SCROLL REVEAL ─────────────────────────────────── */
.rs-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .75s cubic-bezier(.22,.61,.36,1),
    transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--ri, 0) * 80ms);
}
.rs-reveal.rs-in { opacity: 1; transform: none; }

/*
 * .rs-reveal sets transition:opacity,transform (section 10).
 * Because it comes later in the file than .rs-feat / .rs-card,
 * it wins the cascade for elements that carry both classes —
 * border-color and box-shadow lose their transitions.
 * Fix: 2-class selectors (specificity 0,2,0 > 0,1,0) placed here,
 * after .rs-reveal, restore the full hover-transition set once
 * the element is in-view. Opacity is kept so the fade still works.
 */
.rs-feat.rs-in {
  transition:
    opacity     .6s  cubic-bezier(.22,.61,.36,1),
    transform   .45s cubic-bezier(.16,1,.3,1),
    border-color .2s  cubic-bezier(.22,.61,.36,1),
    box-shadow  .45s cubic-bezier(.16,1,.3,1);
}
.rs-card.rs-in {
  transition:
    opacity     .6s  cubic-bezier(.22,.61,.36,1),
    transform   .45s cubic-bezier(.16,1,.3,1),
    border-color .2s  cubic-bezier(.22,.61,.36,1),
    box-shadow  .45s cubic-bezier(.16,1,.3,1);
}

/* ── 11 · RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  .rs-hero-grid  { grid-template-columns: 1fr; }
  .rs-hero-vis   { max-width: 440px; margin: 40px auto 0; }
  .rs-feat-grid  { grid-template-columns: repeat(2, 1fr); }
  .rs-metrics-sep { display: none; }
}

@media (max-width: 720px) {
  .rs-feat-grid  { grid-template-columns: 1fr; }
  .rs-grid       { grid-template-columns: 1fr; }
  .rs-hero-lede  { max-width: 100%; }
  .rs-filter-bar { gap: 8px; }
  .rs-filter-label { width: 100%; }
  .rs-cta-btns   { flex-direction: column; align-items: stretch; }
  .rs-cta-btn-primary,
  .rs-cta-btn-ghost { justify-content: center; }
  .rs-rcard-grid { grid-template-columns: 1fr; }
}

/* ── 12 · REDUCED MOTION ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rs-amb-ring,
  .rs-branch,
  .rs-leaf-node,
  .rs-hub-ring,
  .rs-particle,
  .rs-cta-lights { animation: none !important; }

  .rs-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .rs-feat,
  .rs-card {
    transition: none !important;
  }

  .rs-hero-eyebrow-dot,
  .rs-chip-dot { animation: none !important; }
}