/* ============================================================
   Suvayo — shared brand tokens
   Source of truth: the Suvayo app / interactive demo
   (sampled from suvayo-app.onrender.com :root tokens).
   Marketing surfaces extend these; they do not fork them.
   ============================================================ */

:root{
  /* ---- core (verbatim from the app/demo) ---- */
  --ink:#0f172a;
  --muted:#667085;
  --text-muted:#64748b;
  --text-faint:#94a3b8;
  --accent:#4f46e5;
  --accent-strong:#4338ca;
  --accent-soft:#eef2ff;
  --accent-grad:linear-gradient(135deg,#6366f1 0%,#4f46e5 55%,#4338ca 100%);
  --card:#ffffff;
  --border:#e6e8ef;
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 2px 8px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 34px rgba(15,23,42,.12);
  --shadow-pop:0 24px 64px rgba(15,23,42,.24);
  --ease:.14s cubic-bezier(.4,0,.2,1);
  --ring:rgba(79,70,229,.45);
  --ok:#16a34a;
  --app-bg:#eef1f6;          /* the app's chrome background */
  --surface-2:#f8fafc;

  /* ---- marketing extensions ---- */
  --page-bg:#ffffff;
  --band:#f8fafc;            /* alternate section band */
  --band-deep:#0f172a;       /* single dark inversion band (PE / final CTA) */
  --band-deep-text:#e2e8f0;
  --radius-xl:24px;          /* marquee screenshot frames */
  --maxw:1120px;

  /* type scale (marketing) */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-hero:clamp(2.5rem,5.5vw,4rem);
  --fs-h2:clamp(1.9rem,3.6vw,2.75rem);
  --fs-h3:1.3rem;
  --fs-lead:clamp(1.05rem,1.6vw,1.22rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-eyebrow:.8125rem;
  --track-display:-.035em;
  --track-h2:-.025em;

  /* rhythm */
  --sec-pad:clamp(4.5rem,9vw,7.5rem);

  color-scheme:light;
}

/* ---- shared primitives ---- */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;font-size:.96rem;line-height:1;
  padding:14px 24px;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;text-decoration:none;white-space:nowrap;
  touch-action:manipulation;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:none}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--text-faint);background:var(--surface-2)}
.band-deep .btn-ghost{border-color:rgba(255,255,255,.25);color:#fff}
.band-deep .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}

.eyebrow{
  display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}