/* ── References page — scoped under ref- prefix ── */
:root {
  --rf-navy: #082a46;
  --rf-ink: #0a2540;
  --rf-blue: #24a9df;
  --rf-blue-dark: #12629b;
  --rf-muted: #6b7c93;
  --rf-soft: #f6f9fc;
  --rf-line: #e6edf5;
  --rf-shadow: 0 28px 80px rgba(8,42,70,.14);
  --rf-shadow-soft: 0 14px 40px rgba(8,42,70,.07);
}

.ref-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto }

/* ── Kicker ── */
.ref-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--rf-blue-dark); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; margin-bottom: 18px }
.ref-kicker i { width: 9px; height: 9px; border-radius: 99px; background: var(--rf-blue); box-shadow: 0 0 0 6px rgba(36,169,223,.12); display: inline-block; flex-shrink: 0 }

/* ── Buttons ── */
.ref-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; min-height: 52px; padding: 0 28px; font-weight: 900; cursor: pointer; transition: .18s ease; white-space: nowrap; text-decoration: none; font-size: 15px }
.ref-btn-primary { background: var(--rf-blue); color: #fff; box-shadow: 0 16px 36px rgba(36,169,223,.28) }
.ref-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 44px rgba(36,169,223,.34) }
.ref-btn-secondary { border: 1px solid #dce6f1; background: #fff; color: #24384f; box-shadow: 0 12px 30px rgba(8,42,70,.06) }
.ref-btn-secondary:hover { transform: translateY(-1px) }
.ref-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px }

/* ── Hero ── */
.ref-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 20% 8%, rgba(36,169,223,.12), transparent 30%), radial-gradient(circle at 90% 12%, rgba(8,42,70,.08), transparent 24%), linear-gradient(180deg, #fff 0%, #f8fbff 100%); padding: 82px 0 104px }
.ref-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 82px; background: #fff; clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); pointer-events: none }
.ref-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center }
.ref-h1 { margin: 0; color: var(--rf-ink); font-size: clamp(42px, 5vw, 70px); line-height: 1.02; letter-spacing: -.06em; font-weight: 900 }
.ref-lead { margin: 24px 0 0; color: #4f6177; font-size: 20px; line-height: 1.68; max-width: 760px }

/* ── Hero card ── */
.ref-hero-card { position: relative; background: rgba(255,255,255,.94); border: 1px solid rgba(226,236,246,.95); border-radius: 34px; box-shadow: var(--rf-shadow); padding: 28px; min-height: 430px; overflow: hidden }
.ref-hero-card::before { content: ""; position: absolute; inset: -1px; border-radius: 34px; padding: 1px; background: linear-gradient(135deg, rgba(36,169,223,.48), rgba(8,42,70,.08)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none }
.ref-board { position: absolute; inset: 28px; border-radius: 26px; background: linear-gradient(180deg, #fbfdff, #f4f8fc); border: 1px solid var(--rf-line); padding: 22px; overflow: hidden }
.ref-board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(36,169,223,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(36,169,223,.07) 1px, transparent 1px); background-size: 42px 42px }
.ref-mini-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; height: 100% }
.ref-mini-card { border: 1px solid #dce6f1; background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 14px 34px rgba(8,42,70,.08); display: flex; flex-direction: column; justify-content: space-between }
.ref-mini-card strong { font-size: 18px; letter-spacing: -.04em; color: var(--rf-ink) }
.ref-mini-card span { color: var(--rf-muted); font-size: 13px; line-height: 1.45 }
.ref-mini-card em { font-style: normal; color: var(--rf-blue-dark); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em }

/* ── Trust stats ── */
.ref-trust { position: relative; z-index: 3; margin-top: -46px }
.ref-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.ref-trust article { background: #fff; border: 1px solid var(--rf-line); border-radius: 24px; padding: 24px; box-shadow: 0 14px 40px rgba(8,42,70,.06) }
.ref-trust strong { display: block; font-size: 28px; letter-spacing: -.05em; color: var(--rf-blue-dark); line-height: 1; margin-bottom: 7px }
.ref-trust p { margin: 0; color: var(--rf-muted); line-height: 1.55; font-size: 14px; font-weight: 700 }

/* ── Section ── */
.ref-section { padding: 76px 0; background: #fff }
.ref-section-soft { background: var(--rf-soft) }
.ref-section-logo { background: radial-gradient(circle at 18% 8%, rgba(36,169,223,.10), transparent 30%), radial-gradient(circle at 86% 18%, rgba(8,42,70,.06), transparent 24%), linear-gradient(180deg, #fff 0%, #fbf8ff 100%) }
.ref-section-head { text-align: center; max-width: 780px; margin: 0 auto 38px }
.ref-section-head span { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-blue-dark) }
.ref-section-head h2 { margin: 12px 0 0; font-size: 38px; letter-spacing: -.05em; color: var(--rf-ink); line-height: 1.14 }
.ref-section-head p { margin: 16px auto 0; color: var(--rf-muted); line-height: 1.65; max-width: 700px }

/* ── Typing animation box ── */
.ref-search-wrap { max-width: 960px; margin: 0 auto 56px; text-align: center }
.ref-search-wrap h3 { margin: 0 0 22px; font-size: 34px; line-height: 1.12; letter-spacing: -.05em; color: #3a315d }
.ref-typebox { min-height: 74px; display: grid; grid-template-columns: 1fr 54px; align-items: center; background: #fff; border: 1px solid rgba(226,236,246,.95); border-radius: 22px; box-shadow: 0 18px 54px rgba(8,42,70,.12); overflow: hidden }
.ref-typebox-text { display: flex; align-items: center; height: 100%; padding: 0 28px; color: #8a8f98; font-size: 17px; font-weight: 700 }
#rfSectorTypeText { color: #4c5b6b; font-weight: 700; margin-left: 6px; letter-spacing: -0.01em }
.ref-typebox-cursor { display: inline-block; width: 2px; height: 24px; background: var(--rf-blue); margin-left: 4px; animation: rfBlink .85s infinite; vertical-align: middle }
.ref-typebox-icon { font-size: 30px; line-height: 1; color: #7d8794; display: flex; align-items: center; justify-content: center }
@keyframes rfBlink { 0%, 45% { opacity: 1 } 46%, 100% { opacity: 0 } }
.ref-popular-tags { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px }
.ref-popular-tags strong { font-size: 15px; color: #6b7280; margin-right: 6px }
.ref-popular-tags a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid #dfe6ef; border-radius: 12px; background: rgba(255,255,255,.82); color: #9097a2; font-weight: 800; box-shadow: 0 8px 18px rgba(8,42,70,.06); text-decoration: none }
.ref-popular-tags a:hover { color: var(--rf-blue-dark) }

/* ── Logo cloud ── */
.ref-logo-cloud { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; align-items: center; margin-top: 10px }
.ref-logo-item { height: 110px; display: flex; align-items: center; justify-content: center; border: 1px solid #e6edf5; background: rgba(255,255,255,.86); border-radius: 22px; transition: .2s ease; box-shadow: 0 10px 26px rgba(8,42,70,.045); text-decoration: none }
.ref-logo-item:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(8,42,70,.08) }
.ref-logo-item img { display: block; max-width: 150px; max-height: 42px; width: auto; height: auto; object-fit: contain; opacity: .72; filter: grayscale(1); transition: .2s ease }
.ref-logo-item:hover img { opacity: 1; filter: grayscale(0) }
.ref-disclaimer { margin: 38px auto 0; max-width: 860px; text-align: center; color: #8b97a8; font-size: 12px; line-height: 1.7 }

/* ── Filter row ── */
.ref-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px }
.ref-filter { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid #dce6f1; border-radius: 999px; background: #fff; color: #344963; font-weight: 900; font-size: 14px; text-decoration: none }
.ref-filter.active { background: #ecf8fd; border-color: rgba(36,169,223,.45); color: var(--rf-blue-dark) }

/* ── Project cards ── */
.ref-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.ref-project-card { background: #fff; border: 1px solid var(--rf-line); border-radius: 28px; overflow: hidden; box-shadow: 0 14px 40px rgba(8,42,70,.06); transition: .18s ease }
.ref-project-card:hover { transform: translateY(-4px); box-shadow: var(--rf-shadow-soft) }
.ref-project-thumb { height: 170px; background: radial-gradient(circle at 18% 18%, rgba(36,169,223,.16), transparent 32%), linear-gradient(135deg, #eef8ff, #fff); border-bottom: 1px solid var(--rf-line); position: relative; overflow: hidden }
.ref-project-thumb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(36,169,223,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(36,169,223,.08) 1px, transparent 1px); background-size: 36px 36px }
.ref-project-thumb strong { position: absolute; left: 22px; bottom: 20px; font-size: 26px; letter-spacing: -.055em; color: var(--rf-navy) }
.ref-project-body { padding: 24px }
.ref-project-body small { display: inline-flex; color: var(--rf-blue-dark); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px }
.ref-project-body h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.04em; color: var(--rf-ink) }
.ref-project-body p { margin: 0 0 18px; color: var(--rf-muted); line-height: 1.62; font-size: 15px }
.ref-link { color: var(--rf-blue-dark); font-weight: 900; font-size: 14px; text-decoration: none }
.ref-link:hover { text-decoration: underline }

/* ── Sector cards ── */
.ref-sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.ref-sector-card { background: #fff; border: 1px solid var(--rf-line); border-radius: 24px; padding: 24px; min-height: 138px; box-shadow: 0 10px 28px rgba(8,42,70,.045); transition: .18s; text-decoration: none; display: block }
.ref-sector-card:hover { transform: translateY(-3px) }
.ref-sector-card strong { display: block; font-size: 18px; letter-spacing: -.03em; margin-bottom: 8px; color: var(--rf-ink) }
.ref-sector-card span { display: block; color: var(--rf-muted); font-size: 14px; line-height: 1.5 }

/* ── Proof / Approach ── */
.ref-proof-wrap { display: grid; grid-template-columns: .92fr 1.08fr; gap: 26px; align-items: start }
.ref-proof-note { background: #082a46; color: #fff; border-radius: 34px; padding: 34px; position: sticky; top: 110px; overflow: hidden; box-shadow: var(--rf-shadow) }
.ref-proof-note::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/img/cubes-pattern.svg'); background-size: 420px; opacity: .13 }
.ref-proof-note > * { position: relative; z-index: 2 }
.ref-proof-note > span { color: #aee5fb; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 0 }
.ref-proof-note h2 { margin: 12px 0 14px; color: #fff; font-size: 36px; line-height: 1.12; letter-spacing: -.05em }
.ref-proof-note p { margin: 0; color: rgba(255,255,255,.74); line-height: 1.7 }
.ref-proof-list { display: grid; gap: 16px }
.ref-proof-card { background: #fff; border: 1px solid var(--rf-line); border-radius: 28px; padding: 28px; box-shadow: var(--rf-shadow-soft) }
.ref-proof-badge { display: inline-flex; min-height: 28px; align-items: center; border-radius: 999px; background: #ecf8fd; color: var(--rf-blue-dark); padding: 0 12px; font-size: 12px; font-weight: 900; margin-bottom: 14px }
.ref-proof-card h3 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.04em; color: var(--rf-ink) }
.ref-proof-card p { margin: 0; color: var(--rf-muted); line-height: 1.6 }

/* ── Footer CTA ── */
.ref-footer-cta { position: relative; overflow: hidden; background: #082a46; color: #fff; padding: 90px 0 120px }
.ref-footer-cta::before { content: ""; position: absolute; inset: 0; background-image: url('/assets/img/cubes-pattern.svg'); background-size: 420px; opacity: .16 }
.ref-footer-cta::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -72px; height: 120px; background: #fff; transform: rotate(-3deg); transform-origin: left top }
.ref-footer-cta .ref-container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center }
.ref-footer-cta h2 { margin: 0; font-size: 40px; letter-spacing: -.05em; line-height: 1.1; color: #fff }
.ref-footer-cta p { margin: 14px 0 0; color: rgba(255,255,255,.72); line-height: 1.65; max-width: 700px }

/* ── Responsive ── */
@media (max-width: 1020px) {
  .ref-hero-grid, .ref-proof-wrap { grid-template-columns: 1fr }
  .ref-logo-cloud { grid-template-columns: repeat(4, 1fr) }
  .ref-project-grid { grid-template-columns: repeat(2, 1fr) }
  .ref-sector-grid { grid-template-columns: repeat(2, 1fr) }
  .ref-trust-grid { grid-template-columns: repeat(2, 1fr) }
  .ref-proof-note { position: relative; top: 0 }
}

@media (max-width: 760px) {
  .ref-hero { padding: 54px 0 86px }
  .ref-hero-grid { gap: 34px }
  .ref-lead { font-size: 17px }
  .ref-hero-card { min-height: 390px; border-radius: 26px; padding: 16px }
  .ref-board { inset: 16px }
  .ref-mini-grid { grid-template-columns: 1fr }
  .ref-trust-grid, .ref-project-grid, .ref-sector-grid { grid-template-columns: 1fr }
  .ref-logo-cloud { grid-template-columns: repeat(2, 1fr); gap: 14px }
  .ref-logo-item { height: 92px; border-radius: 18px }
  .ref-logo-item img { max-width: 120px; max-height: 34px }
  .ref-section { padding: 56px 0 }
  .ref-section-head h2 { font-size: 30px }
  .ref-proof-note, .ref-proof-card { border-radius: 24px; padding: 24px }
  .ref-footer-cta { padding: 70px 0 104px }
  .ref-footer-cta .ref-container { grid-template-columns: 1fr }
  .ref-footer-cta h2 { font-size: 30px }
  .ref-search-wrap h3 { font-size: 26px }
}