/* Canopi shared design tokens — pulled from design system */
:root {
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --teal:        #0D9488;
  --teal-light:  #14B8A6;
  --teal-dark:   #0B7A70;
  --orange:      #F97316;
  --orange-warm: #D97706;
  --blue:        #1E40AF;
  --blue-light:  #3B82F6;
  --red:         #DC2626;
  --green:       #16A34A;
  --white:       #FFFFFF;
  --shadow-sm:   0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md:   0 4px 16px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:   0 12px 32px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --shadow-xl:   0 24px 64px rgba(15,23,42,.14), 0 6px 16px rgba(15,23,42,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--slate-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

/* ------------ Reusable primitives ------------ */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--teal);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px; font-weight: 600;
  font-size: 15px; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: all .18s cubic-bezier(.4,0,.2,1);
}
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--slate-700); border-color: var(--slate-200); }
.btn-ghost:hover { color: var(--slate-900); border-color: var(--slate-400); }
.btn-dark { background: var(--slate-900); color: #fff; }
.btn-dark:hover { background: var(--slate-800); transform: translateY(-1px); }
.btn-on-dark { background: #fff; color: var(--slate-900); }
.btn-on-dark:hover { background: var(--slate-100); transform: translateY(-1px); }
.btn-on-dark-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.btn-on-dark-ghost:hover { border-color: rgba(255,255,255,.6); }

/* WhatsApp underline marker */
.under-teal { box-shadow: inset 0 -.4em 0 rgba(13,148,136,.18); }
.under-orange { box-shadow: inset 0 -.4em 0 rgba(249,115,22,.22); }

/* Tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  background: var(--slate-100); color: var(--slate-600);
  border: 1px solid var(--slate-200);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,.15);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(13,148,136,.15); }
  50%      { box-shadow: 0 0 0 6px rgba(13,148,136,.05); }
}

/* Common card */
.card {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Logo */
.logo-svg { height: 38px; }

/* ------------ Hero shared bits ------------ */
.hero-grad-light {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(13,148,136,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 28%, rgba(249,115,22,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(30,64,175,.05) 0%, transparent 55%);
}
.hero-grad-dark {
  background:
    radial-gradient(ellipse at 22% 32%, rgba(13,148,136,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 18%, rgba(249,115,22,.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(30,64,175,.18) 0%, transparent 55%);
}

/* Subtle animations */
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shimmer-x { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes fade-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes count-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ticker / marquee */
.ticker-track { display: flex; gap: 64px; animation: ticker 36s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }