/* =============================================================================
   Theme: T6 Personal Brand / Portfolio
   Domains: mickeys.ai
   Style: Storytelling-Driven — human, warm, founder-narrative, illustrative
   Font: Fraunces (display serif) + Figtree (body) — warm, character-rich
   Palette: warm off-white, rich plum/navy primary, amber accent
   ============================================================================= */

@import url('https://fonts.bunny.net/css?family=fraunces:100,200,300,400,400i,700,900|figtree:300,400,500,600,700&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --warm-bg: #fefbf5;
  --warm-card: #fff9f0;
  --warm-border: #ede4d6;
  --warm-ink: #1c1410;
  --warm-mid: #7a6e64;
}

body {
  font-family: var(--font-body);
  background: var(--warm-bg);
  color: var(--warm-ink);
}

/* ── Nav — personal, minimal, handcrafted feel ─────────────────────────── */
.site-header {
  background: var(--warm-bg);
  border-bottom: 1px solid var(--warm-border);
  position: sticky; top: 0; z-index: 100;
}
.site-logo-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.nav-link { font-family: var(--font-body); font-weight: 500; color: var(--warm-mid); }
.nav-link:hover, .nav-link--active { color: var(--warm-ink); }
.nav-cta {
  background: var(--color-accent);
  color: #fff;
  border-radius: 100px;
  padding: 0.45rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ── Hero — storytelling centered, warm ─────────────────────────────────── */
.hero {
  background: var(--warm-bg);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--warm-card);
  border: 1px solid var(--warm-border);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warm-mid);
  margin-bottom: 2rem;
}
.hero-badge::before { content: '✦'; color: var(--color-accent); }
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--warm-ink);
  margin-bottom: 1.5rem;
}
.hero-headline em {
  font-style: italic;
  color: var(--color-primary);
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--warm-mid);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.75;
  font-weight: 400;
}
.hero-actions { justify-content: center; }
.hero-trust { justify-content: center; margin-top: 2rem; }
.trust-badge {
  background: var(--warm-card);
  border-color: var(--warm-border);
  color: var(--warm-mid);
  border-radius: 100px;
}
.hero-graphic { display: none; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { background: var(--warm-bg); }
.section--tinted { background: var(--warm-card); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--warm-ink);
}
.section-sub { color: var(--warm-mid); }

/* ── Value props — warm card tiles ─────────────────────────────────────── */
.prop-card {
  background: var(--warm-card);
  border: 1px solid var(--warm-border);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.prop-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.08); }
.prop-icon { color: var(--color-accent); }
.prop-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--warm-ink); }
.prop-body { color: var(--warm-mid); }

/* ── Service cards ──────────────────────────────────────────────────────── */
.services-section { background: var(--warm-card); }
.service-card {
  background: var(--warm-bg);
  border: 1px solid var(--warm-border);
  border-radius: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.08); }
.service-card-title { font-family: var(--font-display); font-weight: 700; color: var(--warm-ink); }

/* ── Proof ──────────────────────────────────────────────────────────────── */
.proof-section { background: var(--color-primary); }
.proof-stat {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  font-style: italic;
  color: var(--color-accent);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-accent {
  background: var(--color-primary);
  color: #fff;
  border-radius: 100px;
  font-weight: 700;
  padding: 0.85rem 2.2rem;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-accent:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.btn-outline { border-radius: 100px; font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--warm-ink); }
.footer-brand-name { font-family: var(--font-display); font-style: italic; }