/* ============================================================
   SOLUNA — global.css
   Shared tokens, reset, typography, utility classes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300;1,9..144,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Tokens ────────────────────────────────────────────── */
:root {
  /* Brand */
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-light:  #3b82f6;
  --cyan:        #06b6d4;
  --violet:      #7c3aed;
  --pink:        #ec4899;
  --emerald:     #10b981;
  --amber:       #f59e0b;
  --red:         #ef4444;

  /* Ink */
  --ink:         #080c14;
  --ink-2:       #141926;
  --ink-3:       #1e2535;

  /* Surface */
  --white:       #ffffff;
  --off:         #f8f9fc;
  --off-2:       #f1f4f9;
  --border:      rgba(0,0,0,.07);
  --border-2:    rgba(0,0,0,.13);

  /* Text */
  --muted:       #64748b;
  --muted-2:     #94a3b8;

  /* Gradients */
  --g-brand:  linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
  --g-blue:   linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  --g-green:  linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --g-warm:   linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --g-violet: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);

  /* Shadows */
  --sh-xs:  0 2px 8px  rgba(0,0,0,.05);
  --sh-sm:  0 4px 16px rgba(0,0,0,.07);
  --sh:     0 8px 32px rgba(0,0,0,.09);
  --sh-lg:  0 24px 64px rgba(0,0,0,.12);
  --sh-xl:  0 40px 100px rgba(0,0,0,.16);

  /* Radii */
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Layout */
  --max-w: 1280px;
  --nav-h: 76px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body  { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--ink); overflow-x: hidden; line-height: 1.6; }
img   { display: block; max-width: 100%; height: auto; }
a     { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
::-webkit-scrollbar         { width: 3px; }
::-webkit-scrollbar-thumb   { background: var(--blue); border-radius: 3px; }

/* ── Typography scale ──────────────────────────────────── */
.display {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.04em;
}
.display--xl  { font-size: clamp(56px, 7vw,  96px); }
.display--lg  { font-size: clamp(44px, 5vw,  72px); }
.display--md  { font-size: clamp(36px, 4vw,  56px); }
.display--sm  { font-size: clamp(28px, 3vw,  40px); }

.body--lg  { font-size: 18px; line-height: 1.75; }
.body--md  { font-size: 16px; line-height: 1.75; }
.body--sm  { font-size: 14px; line-height: 1.65; }
.body--xs  { font-size: 12px; line-height: 1.5; }
.mono      { font-family: 'DM Mono', monospace; }

/* ── Gradient text ─────────────────────────────────────── */
.grad         { background: var(--g-brand);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad--blue   { background: var(--g-blue);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad--green  { background: var(--g-green);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad--violet { background: var(--g-violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad--warm   { background: var(--g-warm);   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Layout ────────────────────────────────────────────── */
.section         { padding: 100px 80px; }
.section--sm     { padding: 72px  80px; }
.section--dark   { background: var(--ink-2); }
.section--off    { background: var(--off); }
.section--center { text-align: center; }
.container       { max-width: var(--max-w); margin: 0 auto; width: 100%; }

/* ── Section header ────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px; border-radius: 50px;
  background: white; border: 1px solid var(--border-2);
  font-size: 11px; font-weight: 700; color: var(--blue);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 20px;
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.eyebrow--light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.eyebrow--light .eyebrow__dot { background: white; }

.section-title    { font-family: 'Fraunces', serif; font-weight: 700; line-height: 1.06; letter-spacing: -.035em; color: var(--ink); }
.section-subtitle { font-size: 17px; color: var(--muted); line-height: 1.75; max-width: 560px; margin-top: 16px; }
.section-center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 50px;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.btn--ink     { background: var(--ink);    color: white; box-shadow: 0 8px 24px rgba(8,12,20,.25); }
.btn--ink:hover    { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(8,12,20,.3); }
.btn--grad    { background: var(--g-brand); color: white; box-shadow: 0 8px 24px rgba(37,99,235,.28); }
.btn--grad:hover   { transform: translateY(-2px); opacity: .9; }
.btn--ghost   { background: white; border: 1.5px solid var(--border-2); color: var(--ink); }
.btn--ghost:hover  { border-color: var(--blue); color: var(--blue); }
.btn--white   { background: white; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.btn--white:hover  { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.btn--wghost  { border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
.btn--wghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.btn__arrow   { transition: transform .2s; display: inline-block; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── Cards (shared base) ───────────────────────────────── */
.card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.card--lift:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

/* ── Badge chips ───────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.chip--blue   { background: #eff6ff; color: var(--blue); }
.chip--violet { background: #f5f3ff; color: var(--violet); }
.chip--green  { background: #f0fdf4; color: #16a34a; }
.chip--pink   { background: #fdf2f8; color: #be185d; }
.chip--cyan   { background: #ecfeff; color: #0e7490; }
.chip--amber  { background: #fffbeb; color: #92400e; }
.chip--ink    { background: var(--off-2); color: var(--muted); }

/* ── Icon box ──────────────────────────────────────────── */
.icon-box {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Stat block ────────────────────────────────────────── */
.stat-val   { font-family: 'Fraunces', serif; font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 500; }

/* ── Scroll reveal ─────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.from-l { transform: translateX(-40px); }
.reveal.from-r { transform: translateX(40px); }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

/* ── Divider ───────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section, .section--sm { padding: 72px 40px; }
}
@media (max-width: 640px) {
  .section, .section--sm { padding: 60px 20px; }
}