/* ============================================================
   FinthCare design tokens
   Drop this into your project root and import once at app entry.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --orange:      #F26B1F;  /* primary brand */
  --orange-700:  #D35911;  /* hover/pressed */
  --orange-50:   #FFF3EB;  /* soft brand bg */

  --ink:         #1A1A1A;  /* primary text, dark surfaces */
  --ink-2:       #2B2B2B;  /* secondary body text */

  --slate:       #6B7280;  /* muted text */
  --slate-2:     #98A2AE;  /* very muted */

  --surface:     #F7F7F8;  /* page background */
  --card:        #F4F4F4;  /* default soft container */
  --card-2:      #EFEFEF;  /* deeper soft container */

  --white:       #FFFFFF;
  --line:        #E9E9EC;  /* hairline borders */

  /* ---------- Type ---------- */
  --font-sans: 'Pretendard Variable', Pretendard,
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Web scale (halve for desktop landing pages) */
  --fs-display: 64px;  --lh-display: 1.05;  --tr-display: -0.035em;
  --fs-h1:      48px;  --lh-h1:      1.1;   --tr-h1:      -0.025em;
  --fs-h2:      32px;  --lh-h2:      1.2;   --tr-h2:      -0.015em;
  --fs-h3:      22px;  --lh-h3:      1.3;   --tr-h3:      -0.01em;
  --fs-body:    16px;  --lh-body:    1.55;
  --fs-small:   14px;  --lh-small:   1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;

  /* ---------- Spacing (8px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---------- Radius ---------- */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-hover:   0 8px 24px rgba(0,0,0,0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  200ms;
  --dur-slow: 400ms;
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* ---------- Type utilities ---------- */
.h-display { font-size: var(--fs-display); line-height: var(--lh-display);
             letter-spacing: var(--tr-display); font-weight: var(--fw-black);
             color: var(--ink); margin: 0; }
.h-1 { font-size: var(--fs-h1); line-height: var(--lh-h1);
       letter-spacing: var(--tr-h1); font-weight: var(--fw-heavy);
       color: var(--ink); margin: 0; }
.h-2 { font-size: var(--fs-h2); line-height: var(--lh-h2);
       letter-spacing: var(--tr-h2); font-weight: var(--fw-bold);
       color: var(--ink); margin: 0; }
.h-3 { font-size: var(--fs-h3); line-height: var(--lh-h3);
       letter-spacing: var(--tr-h3); font-weight: var(--fw-bold);
       color: var(--ink); margin: 0; }
.t-body  { font-size: var(--fs-body);  line-height: var(--lh-body); color: var(--ink-2); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.t-num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: var(--radius-pill);
  background: var(--orange); color: var(--white);
  font-family: inherit; font-weight: var(--fw-bold); font-size: var(--fs-body);
  border: 0; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) ease, transform var(--dur-med) ease;
}
.btn:hover { background: var(--orange-700); }
.btn:active { transform: scale(0.98); }

.btn-ghost {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--surface); }

/* ---------- Eyebrow pill ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--orange-50); color: var(--orange);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  white-space: nowrap;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--orange);
}

/* ---------- Pill / badge ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
}
.pill-brand     { background: var(--orange);    color: var(--white); }
.pill-brand-soft{ background: var(--orange-50); color: var(--orange); }
.pill-ghost     { background: var(--white);     color: var(--ink);
                  border: 1px solid var(--line); }

/* ---------- Card ---------- */
.card-soft {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.card-white {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* ---------- Stat tile ---------- */
.stat-tile {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.stat-tile .num {
  font-size: 72px; line-height: 0.9; letter-spacing: -0.04em;
  font-weight: var(--fw-black); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-tile .num sup,
.stat-tile .num .unit {
  font-size: 28px; color: var(--slate); font-weight: var(--fw-heavy);
  margin-left: 4px; vertical-align: super;
}
.stat-tile .label { font-size: var(--fs-body); color: var(--slate);
                    font-weight: var(--fw-medium); margin: 0; }
.stat-tile-hero .num { color: var(--orange); }

/* ---------- Logo grid cell ---------- */
.logo-cell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.logo-cell img {
  max-width: 100%; max-height: 40px; object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: 0.8;
  transition: filter var(--dur-med) ease, opacity var(--dur-med) ease;
}
.logo-cell:hover img { filter: none; opacity: 1; }