/* ═══════════════════════════════════════════
   REFERENZEN — Apple × Framer × Aurora
   ═══════════════════════════════════════════ */

/* Hero counters */
.rf-counter-grid {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:32px 48px;
}
.rf-counter-num {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:clamp(48px, 6vw, 84px);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:0.95;
  color:#fff;
  background:linear-gradient(135deg,#fff 0%,#a5f3fc 60%,#22d3ee 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rf-counter-lbl {
  font-size:13px;
  color:rgba(255,255,255,0.55);
  margin-top:6px;
  line-height:1.4;
}

/* Filter pills */
.rf-filters {
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  margin:0 auto 64px;
  max-width:920px;
}
.rf-filter {
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  border-radius:100px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  font-family:inherit;
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.rf-filter:hover { color:#fff; border-color:rgba(34,211,238,0.4); background:rgba(34,211,238,0.06); }
.rf-filter.on {
  background:rgba(34,211,238,0.12);
  border-color:rgba(34,211,238,0.5);
  color:#fff;
  box-shadow:0 0 20px rgba(34,211,238,0.2);
}
.rf-filter-count {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  color:rgba(255,255,255,0.4);
  font-weight:400;
}
.rf-filter.on .rf-filter-count { color:#22d3ee; }

/* Case grid — asymmetric */
.rf-grid {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:24px;
}
.rf-case {
  position:relative;
  grid-column:span 3;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  cursor:pointer;
}
.rf-case.featured { grid-column:span 6; }
.rf-case:hover {
  transform:translateY(-4px);
  border-color:rgba(34,211,238,0.4);
  background:rgba(34,211,238,0.04);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(34,211,238,0.2);
}

.rf-case-cover {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg, var(--cv-from,#1e3a5f), var(--cv-to,#0a1929));
}
.rf-case.featured .rf-case-cover { aspect-ratio:21/9; }
.rf-case-cover::after {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0,0,0,0.4), transparent 70%);
}
.rf-case-cover::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 60% 60% at 70% 30%, #000, transparent 70%);
}
.rf-case-cover-inner {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.95);
  z-index:2;
}

.rf-case-body {
  padding:28px 32px 32px;
  display:flex; flex-direction:column; gap:14px;
  flex:1;
}
.rf-case.featured .rf-case-body { padding:36px 44px 44px; }

.rf-case-meta {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.5);
}
.rf-case-meta span { color:#22d3ee; }
.rf-case-name {
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.6);
  margin:-4px 0 -2px;
}
.rf-case-h {
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.2;
  color:#fff;
  text-wrap:balance;
}
.rf-case.featured .rf-case-h {
  font-size:clamp(28px, 3vw, 40px);
  letter-spacing:-0.035em;
  line-height:1.1;
}
.rf-case-lead {
  font-size:14px;
  color:rgba(255,255,255,0.65);
  line-height:1.55;
}
.rf-case.featured .rf-case-lead {
  font-size:17px;
  max-width:580px;
}

.rf-case-metrics {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.rf-metric-val {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:22px;
  font-weight:600;
  color:#fff;
  letter-spacing:-0.02em;
  line-height:1;
}
.rf-metric-val.up { color:#86efac; }
.rf-metric-val.down { color:#fca5a5; }
.rf-metric-lbl {
  font-size:11px;
  color:rgba(255,255,255,0.5);
  margin-top:6px;
  line-height:1.3;
}

.rf-case-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500;
  color:#22d3ee;
  margin-top:6px;
  transition:gap 0.25s;
}
.rf-case:hover .rf-case-link { gap:12px; }

@media (max-width:920px) {
  .rf-grid { grid-template-columns:1fr; }
  .rf-case, .rf-case.featured { grid-column:span 1; }
}

/* Featured story w/ before-after slider */
.rf-feature {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:center;
}
@media (max-width:980px) {
  .rf-feature { grid-template-columns:1fr; gap:48px; }
}

.rf-compare {
  position:relative;
  aspect-ratio:16/10;
  border-radius:24px;
  overflow:hidden;
  background:#0a1929;
  border:1px solid rgba(255,255,255,0.1);
  user-select:none;
  cursor:ew-resize;
}
.rf-compare-side {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.rf-compare-before {
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 28px),
    linear-gradient(135deg, #2d2417, #1a1408);
  color:rgba(255,255,255,0.55);
}
.rf-compare-after {
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%, rgba(34,211,238,0.18), transparent 60%),
    linear-gradient(135deg, #0c2438, #061a33);
  color:#fff;
  clip-path:inset(0 0 0 50%);
}
.rf-compare-handle {
  position:absolute; top:0; bottom:0;
  left:50%;
  width:2px;
  background:#22d3ee;
  box-shadow:0 0 20px rgba(34,211,238,0.5);
  transform:translateX(-50%);
  pointer-events:none;
}
.rf-compare-handle::before {
  content:'';
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  border-radius:50%;
  background:#22d3ee;
  transform:translate(-50%,-50%);
  box-shadow:0 0 30px rgba(34,211,238,0.6);
  animation:rfPulse 2.4s ease-in-out infinite;
}
.rf-compare-handle::after {
  content:'⇄';
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700;
  color:#001020;
  transform:translate(-50%,-50%);
  z-index:1;
}
@keyframes rfPulse {
  0%, 100% { box-shadow:0 0 30px rgba(34,211,238,0.6); }
  50%      { box-shadow:0 0 50px rgba(34,211,238,0.9); }
}
.rf-compare-label {
  position:absolute; top:20px;
  padding:6px 14px;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:100px;
  font-size:11px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
  z-index:3;
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
}
.rf-compare:hover .rf-compare-label { opacity:1; }
.rf-compare-label.before { left:20px; }
.rf-compare-label.after  { right:20px; }

/* Aggregate metrics bar */
.rf-agg {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  overflow:hidden;
}
@media (max-width:820px) { .rf-agg { grid-template-columns:repeat(2, 1fr); } }
.rf-agg-cell {
  padding:36px 28px;
  background:#0a0e16;
  display:flex; flex-direction:column; gap:8px;
}
.rf-agg-num {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:clamp(36px, 4vw, 56px);
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:1;
  background:linear-gradient(135deg,#fff 0%,#a5f3fc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rf-agg-lbl {
  font-size:12px;
  color:rgba(255,255,255,0.55);
  letter-spacing:0.02em;
}
.rf-agg-spark {
  height:32px; width:100%;
  margin-top:6px;
  overflow:visible;
}
.rf-agg-spark-line {
  fill:none;
  stroke:#22d3ee;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  animation:rfDraw 1.4s 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.4));
}
.rf-agg-spark-area {
  fill:url(#rfSparkGrad);
  opacity:0;
  animation:rfFade 0.8s 1.2s ease-out forwards;
}
@keyframes rfDraw { to { stroke-dashoffset:0; } }
@keyframes rfFade { to { opacity:1; } }

/* Big quotes */
.rf-quotes {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:980px) { .rf-quotes { grid-template-columns:1fr; } }
.rf-quote {
  position:relative;
  padding:40px 32px 32px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  display:flex; flex-direction:column;
  gap:24px;
}
.rf-quote::before {
  content:'\201C';
  position:absolute;
  top:-8px; left:24px;
  font-size:140px;
  font-family:Georgia, serif;
  color:#22d3ee;
  line-height:1;
  opacity:0.55;
  pointer-events:none;
  text-shadow:0 0 30px rgba(34,211,238,0.4);
}
.rf-quote-text {
  font-size:17px;
  line-height:1.5;
  color:rgba(255,255,255,0.9);
  font-weight:400;
  letter-spacing:-0.01em;
  position:relative;
  z-index:1;
  margin-top:32px;
}
.rf-quote-author {
  display:flex; align-items:center; gap:14px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.rf-quote-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--av-from,#22d3ee), var(--av-to,#0284c7));
  color:#001020;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  letter-spacing:-0.02em;
}
.rf-quote-name { font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
.rf-quote-role { font-size:12px; color:rgba(255,255,255,0.55); margin-top:3px; }

/* Logo wall */
.rf-logos {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  overflow:hidden;
}
@media (max-width:780px) { .rf-logos { grid-template-columns:repeat(3, 1fr); } }
.rf-logo {
  background:#0a0e16;
  padding:36px 24px;
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia, serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,0.4);
  transition:all 0.3s;
  text-align:center;
  line-height:1.2;
}
.rf-logo:hover {
  color:#fff;
  background:rgba(34,211,238,0.05);
}
.rf-logo small {
  display:block;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  margin-top:4px;
}

/* CTA band */
.rf-cta {
  position:relative;
  padding:80px 48px;
  background:rgba(34,211,238,0.04);
  border:1px solid rgba(34,211,238,0.15);
  border-radius:32px;
  text-align:center;
  overflow:hidden;
}
.rf-cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(34,211,238,0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(99,102,241,0.12), transparent 60%);
  pointer-events:none;
}
.rf-cta > * { position:relative; z-index:1; }