/* =========================================================
   Floow Gen 4 — shared design tokens
   Palette lifted verbatim from v2.floowagents.com (the live
   apex design the client asked us to keep). Both sample
   directions use these, so the only thing that differs
   between them is treatment — never colour.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand — from website/assets/css/style.css :root */
  --navy:      #0A0F1C;
  --navy-2:    #111827;
  --charcoal:  #1E293B;
  --cyan:      #06B6D4;
  --purple:    #6366F1;
  --violet:    #8B5CF6;
  --light:     #F1F5F9;
  --muted:     #94A3B8;

  /* Derived — measured against their grounds */
  --ink:       #0B1220;   /* on light bands */
  --ink-soft:  #475569;   /* body on light, 7.4:1 on #F8FAFC */
  --band:      #F6F8FB;   /* light band ground */
  --line:      rgba(255,255,255,0.10);
  --line-dark: rgba(15,23,42,0.10);

  /* The brand cyan/purple/violet are FILL colours. Each has an -ink
     variant that is the only one allowed to carry small text, because the
     raw brand values measure below 4.5:1 at body sizes. Ratios measured,
     not estimated:
       --cyan-ink   #5EE7F5 on navy    12.96:1
       --violet-ink #A78BFA on cards    6.79:1  (raw violet was 4.06:1)
       --purple-ink #4F46E5 on white    5.73:1  (raw purple was 4.47:1)  */
  --cyan-ink:   #5EE7F5;
  --violet-ink: #A78BFA;
  --purple-ink: #4F46E5;

  --grad: linear-gradient(100deg, var(--cyan) 0%, var(--purple) 55%, var(--violet) 100%);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow: 0 18px 50px rgba(2, 8, 23, 0.45);
  --shadow-light: 0 14px 40px rgba(15, 23, 42, 0.10);

  --wrap: 1180px;
  --gut:  24px;
}

* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--navy);
  color: var(--light);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .num {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0;
  font-weight: 800;
}

p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 880px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Eyebrow tag — the device used on every section of the live site */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(6,182,212,0.35);
  background: rgba(6,182,212,0.10);
  color: var(--cyan-ink);
}
.tag--dark {
  border-color: rgba(99,102,241,0.30);
  background: rgba(99,102,241,0.08);
  color: #4F46E5;
}
.tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  padding: 15px 28px; border-radius: var(--r-pill);
  text-decoration: none; border: 1px solid transparent;
  min-height: 52px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn--primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 30px rgba(99,102,241,0.35);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(99,102,241,0.45); }
.btn--ghost {
  border-color: rgba(255,255,255,0.22); color: var(--light);
  background: rgba(255,255,255,0.04);
}
.btn--ghost:hover { background: rgba(255,255,255,0.09); }
.btn--ink {
  border-color: rgba(15,23,42,0.18); color: var(--ink); background: #fff;
}
.btn--ink:hover { background: #F1F5F9; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bands */
.band { padding: clamp(64px, 8vw, 116px) 0; }
.band--light { background: var(--band); color: var(--ink); }
.band--light p { color: var(--ink-soft); }
.band--tight { padding: clamp(48px, 5vw, 76px) 0; }

.head { max-width: 760px; }
.head--center { margin: 0 auto; text-align: center; }
.head h2 { font-size: clamp(30px, 4.2vw, 46px); margin: 18px 0 16px; }
.head p  { font-size: 18px; color: var(--muted); margin: 0; }
.band--light .head p { color: var(--ink-soft); }

@media (max-width: 720px) {
  :root { --gut: 18px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}