/*
 * Home page (front-page.php) design system — copied verbatim from
 * index.html's <style> block. The #r1fh floating-header rules, the shared
 * .r1-nav-menu/.r1-drop/.r1-pillnav base rules, and the .site-footer rules
 * were extracted into assets/css/base.css (shared globally) and are NOT
 * duplicated here. Everything else — CSS variables, hero, KPI cards,
 * partner badges, services tabs, plan/proof/feature grids, animations,
 * responsive breakpoints — is preserved exactly as authored.
 */
:root {
  --slate-950: #020617;
  --slate-900: #020617;
  --slate-700: #020617;
  --slate-600: #020617;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --emerald-800: #133020;
  --emerald-700: #183c28;
  --emerald-600: #183c28;
  --emerald-400: #34d399;
  --emerald-300: #6ee7b7;
  --emerald-200: #a7f3d0;
  --emerald-50: #ecfdf5;
  --hero-dark: #183D28;
  --gold: #f0b429;
  --gold-dark: #d99a1c;
  --white: #ffffff;
  --radius-xl: 2rem;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 45px rgba(2, 6, 23, 0.22);
}

h1, h2, h3, p { margin-top: 0; }

.eyebrow {
  color: var(--emerald-700);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-dark .eyebrow { color: var(--emerald-300); }

/* .site-header now lives in base.css (shared header component). */
.r1-pillnav::before { background: rgba(255,255,255,1); }
.r1-pillnav .btn { padding: .625rem 1.5rem; border-radius: .75rem; font-weight: 500; }

/* Hover tooltip for CTA buttons */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--slate-950);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 10px;
  width: max-content;
  max-width: 230px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 70;
  box-shadow: 0 12px 28px rgba(2,6,23,.28);
}
.tooltip:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tooltip::after { z-index: 90; }

/* KPI stat cards */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.kpi-card { background: var(--white); border-radius: 1.5rem; padding: 1.75rem; text-align: center; box-shadow: var(--shadow-sm); }
.kpi-number { font-size: 2.75rem; font-weight: 800; color: var(--emerald-700); margin-bottom: .4rem; }
.kpi-label { color: #020617; font-size: 1rem; line-height: 1.5; }

/* Trusted-by partner badges */
.partners-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; margin-top: 2.5rem; }
.partner-badge { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--slate-950); font-size: 1.05rem; letter-spacing: -.01em; opacity: .85; }
.partner-badge img, .partner-badge svg { height: 22px; }
.partners-row img { height: 51px; width: auto; display: block; }

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-dark);
  height: 100vh;
  padding-top: 96px;
  display: flex;
  align-items: center;
}

/* .nav / .brand / .brand-logo / .site-header now live in base.css (shared
   header component) — do not redefine them here, see base.css's comment. */

.hero-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: center;
}
.hero-tagline { font-style: italic; color: rgba(255,255,255,.6); font-size: 1.15rem; margin-bottom: 2rem; }

.hero .pill {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.hero .lead { color: rgba(255,255,255,.75); margin-bottom: 1.5rem; }
.hero .muted { color: rgba(255,255,255,.55); margin-top: 1.25rem; }
.hero .btn-outline { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; }
.hero .btn-outline:hover { background: rgba(255,255,255,.14); }

/* Hero visual: floating mock-card stack */
.hero-visual { position: relative; width: 100%; max-width: 480px; height: 360px; margin-inline: auto; }
.mock-card {
  position: absolute;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.card-face {
  --ry: 15deg;
  --rx: -15deg;
  transform: perspective(450px) rotateY(var(--ry)) rotateX(var(--rx));
  transition: transform .5s cubic-bezier(.22,.8,.25,1);
}
.hero-visual:hover .card-face {
  transform: perspective(450px) rotateY(0deg) rotateX(0deg);
}

.chip-blue { left: 0; top: 6%; width: 44%; z-index: 1; animation-duration: 6.5s; }
.chip-blue .card-face { background: linear-gradient(135deg,#4f8ef7,#2454d1); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.35); padding: 14px; }
.chip-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.chip-brand { color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.chip-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.chip-bars span { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); margin-bottom: 8px; }
.chip-bars span:nth-child(1) { width: 70%; }
.chip-bars span:nth-child(2) { width: 55%; }
.chip-bars span:nth-child(3) { width: 40%; margin-bottom: 0; }

.chip-light { right: 2%; top: 0; width: 42%; z-index: 1; animation-duration: 5.5s; animation-delay: .3s; }
.chip-light .card-face { background: #eef1f4; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.25); padding: 16px; }
.chip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.chip-check { width: 16px; height: 16px; border-radius: 4px; background: var(--emerald-600); color: #fff; font-size: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.chip-line { flex: 1; height: 7px; border-radius: 4px; background: #c7cdd4; }
.chip-line.short { max-width: 60%; }

.chip-main { left: 8%; top: 20%; width: 80%; z-index: 2; animation-duration: 7s; animation-delay: .15s; }
.chip-main .card-face { background: #173f30; border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,.45); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.chip-toolbar { display: flex; gap: 6px; padding: 10px 14px; background: rgba(0,0,0,.2); }
.chip-toolbar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.chip-body { display: flex; gap: 14px; padding: 16px; }
.chip-sidebar { display: flex; flex-direction: column; gap: 8px; width: 22%; }
.chip-sidebar span { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.chip-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.chip-label { background: #fff; color: #0f172a; font-size: 11px; font-weight: 700; padding: 8px 10px; border-radius: 8px; display: inline-flex; width: max-content; }
.chip-content span { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.chip-content span:nth-child(2) { width: 85%; }
.chip-content span:nth-child(3) { width: 65%; }
.chip-content span:nth-child(4) { width: 75%; }

.chip-fonteva { left: 32%; bottom: -6%; width: 46%; z-index: 3; animation-duration: 5s; animation-delay: .5s; }
.chip-fonteva .card-face { aspect-ratio: 1/1; background: #fff; border-radius: 18px; box-shadow: 0 25px 55px rgba(0,0,0,.4); display: grid; place-items: center; }
.fonteva-logo { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 700; color: #374151; }
.fonteva-mark { width: 24px; height: 24px; border-radius: 7px 7px 7px 0; background: #2563eb; }

h1 {
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  margin-bottom: 1.5rem;
  max-width: 900px;
  color: #fff;
  font-weight: 700;
}
h1 span { display: block; }
h1 .w-bold { font-weight: 800; }
h2 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 1.5rem;
}
h3 { line-height: 1.2; }
.lead { color: var(--slate-950); font-size: 1.25rem; line-height: 1.6; max-width: 48rem; }
.body-lg { color: var(--slate-950); font-size: 1.125rem; line-height: 1.75; }
.section-dark .body-lg { color: var(--slate-300); }
.muted { color: var(--slate-500); font-size: .875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; margin-bottom: 1.25rem; }
.btn-primary { background: var(--emerald-700); color: var(--white); }
.btn-primary:hover { background: var(--emerald-800); }
.section-emerald .btn-primary { background: var(--white); color: var(--emerald-800); }
.section-emerald .btn-primary:hover { background: var(--emerald-50); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-outline { border-color: var(--slate-300); background: #fff; color: var(--slate-950); }
.btn-outline:hover { background: var(--slate-100); }
.section-emerald .btn-outline, .section-dark .btn-outline { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: var(--white); }
.section-emerald .btn-outline:hover, .section-dark .btn-outline:hover { background: rgba(255,255,255,.14); }

.card {
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.glass { box-shadow: var(--shadow-lg); }
.glass h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.problem-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.problem-item {
  display: flex;
  gap: .75rem;
  border-radius: 1rem;
  background: var(--slate-100);
  padding: 1rem;
  color: var(--slate-700);
}
.problem-item i, .outcome i { color: var(--emerald-700); flex: 0 0 auto; margin-top: .1rem; }

.center { text-align: center; }
.narrow { max-width: 64rem; margin-inline: auto; }
.narrow-copy { max-width: 48rem; margin-inline: auto; }

.guide-grid, .support-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 85%; margin-inline: auto; }
.proof-grid > *:first-child { grid-column: 1 / -1; }
.proof-card { text-align: center; border: 0; }
.proof-number { font-size: 2.5rem; font-weight: 800; margin-bottom: .5rem; color: var(--emerald-700); }
.proof-label { color: #020617; font-size: 1rem; line-height: 1.5; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.plan-step { color: var(--emerald-700); font-size: .875rem; font-weight: 800; }
.plan-card h3 { font-size: 1.5rem; margin: 1rem 0; }
.plan-card p:last-child { color: var(--slate-950); line-height: 1.75; margin-bottom: 0; }

.services-header { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; }
.icon-box {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 1rem;
  background: rgba(52,211,153,.15);
  color: var(--emerald-300);
}
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag { background: rgba(255,255,255,.1); color: var(--slate-200); border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; }
.text-link { display: inline-flex; gap: .5rem; align-items: center; margin-top: 1.75rem; color: var(--emerald-300); font-weight: 700; text-decoration: none; }

.services-tabs { display: flex; align-items: stretch; gap: 2.5rem; margin-top: 3rem; }
.tabs-list { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 320px; }
.tab-item {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1rem 1.25rem; border-radius: 1rem;
  background: transparent; border: 1px solid transparent;
  color: var(--slate-300); font: inherit; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tab-item:hover { background: rgba(255,255,255,.08); color: var(--white); }
.tab-item.active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); color: var(--white); }
.tab-item .icon-box { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }
.tab-item .tab-title { font-weight: 700; font-size: 1.05rem; }
.tab-panel-wrap {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start;
}
.tab-panel {
  width: 100%; height: 80%;
  overflow: auto;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.5rem;
  padding: 4.5rem;
  box-shadow: var(--shadow-lg);
  color: var(--white);
  transition: opacity .25s ease, transform .25s ease;
  opacity: 1; transform: translateY(0);
}
.tab-panel.is-switching { opacity: 0; transform: translateY(10px); }
.tab-panel h3 { font-size: 1.5rem; margin: 1.5rem 0 1rem; }
.tab-panel p { color: var(--slate-300); line-height: 1.75; font-size: 1.25rem; }

.support-grid { grid-template-columns: 1fr 1fr; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.feature-card i { color: var(--emerald-700); }
.feature-card h3 { margin: 1rem 0 .5rem; }
.feature-card p { color: var(--slate-950); font-size: 1rem; line-height: 1.6; margin-bottom: 0; }

.outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.outcome { display: flex; gap: .75rem; background: var(--white); padding: 1.25rem; border-radius: 1.5rem; box-shadow: var(--shadow-sm); font-weight: 700; }

.cta { max-width: 64rem; margin-inline: auto; text-align: center; }
.cta p { color: var(--emerald-50); font-size: 1.125rem; line-height: 1.75; max-width: 44rem; margin-inline: auto; }
.cta .actions { justify-content: center; }

.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .7s ease forwards; }
.fade-delay { animation-delay: .12s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .hero { height: auto; min-height: 70vh; padding: 6.5rem 0 3rem; }
  .hero-grid, .guide-grid, .support-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 2.5rem; }
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .tab-panel { padding: 2rem; }
  .tooltip::after { display: none; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 2rem, 80rem); }
  .section { padding: 4rem 0; }
  .actions, .services-header { align-items: stretch; flex-direction: column; }
  .btn { width: 100%; }
  .proof-grid, .plan-grid, .feature-grid, .outcomes-grid, .kpi-grid { grid-template-columns: 1fr; }
  /* .footer-contact responsive rule now lives in base.css (shared footer). */
  .services-tabs { flex-direction: column; }
  .tabs-list { flex: 1 1 auto; width: 100%; }
  h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-visual { max-width: 320px; height: 300px; }
  .partners-row { gap: 1.5rem; }
}