/* Variant: Float — centred headline surrounded by gently floating interface snippets; pastel.
   Hero markup in src/variants/float; the rest is shared content. Light only. */

:root {
  --bg: #fbfaff;
  --surface: #ffffff;
  --muted: #f3f0fa;
  --ink: #171427;
  --ink-2: #5a566e;
  --line: #e8e4f2;
  --accent: #0d7f74;
  --accent-ink: #ffffff;
  --accent-soft: #dcf3ef;
  --green-soft: #dcf3ef;
  --amber-soft: #ffe9dc;
  --night: #171427;
  --night-2: #25213b;

  --peach: #ffe1d2;
  --lilac: #e9e1ff;
  --mint: #d6f5ec;
  --sky: #dcecff;
  --ui-accent: #14b8a6;
  --ui-img: #e3f7f3;

  color-scheme: light;
}

.fl-hero {
  overflow-x: clip;
  background:
    radial-gradient(38rem 28rem at 12% 18%, var(--peach), transparent 70%),
    radial-gradient(36rem 28rem at 88% 12%, var(--lilac), transparent 70%),
    radial-gradient(40rem 26rem at 70% 95%, var(--mint), transparent 70%),
    var(--bg);
}
.fl-hero__inner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(36rem, 76vh, 48rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.fl-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 46rem; text-align: center; }
.fl-title { font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.96; letter-spacing: -0.05em; }
.fl-hero .hero__lead { margin-top: 1.5rem; }
.fl-hero .hero__actions { justify-content: center; align-self: center; margin-top: 2rem; }

.fl-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -22px rgba(40, 30, 90, 0.4);
  text-align: left;
}
.fl-chip__ico { position: relative; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; }
.fl-chip__text { display: grid; line-height: 1.3; }
.fl-chip__text strong { font-size: 0.9375rem; font-weight: 600; }
.fl-chip__text span { font-size: 0.8125rem; color: var(--ink-2); }

.fl-chip--crm .fl-chip__ico { background: var(--lilac); }
.fl-chip--crm .fl-chip__ico::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: #8b74f0; }
.fl-chip--doc .fl-chip__ico { background: var(--peach); }
.fl-chip--doc .fl-chip__ico::after { content: ""; position: absolute; inset: 22% 28%; background: #f08a5d; clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%); }
.fl-chip--web .fl-chip__ico { background: var(--mint); }
.fl-chip--web .fl-chip__ico::after { content: ""; position: absolute; left: 36%; top: 24%; width: 26%; height: 42%; border: solid #14a58f; border-width: 0 3px 3px 0; rotate: 45deg; }
.fl-chip--coach .fl-chip__ico { background: var(--sky); }
.fl-chip--coach .fl-chip__ico::after { content: ""; position: absolute; inset: 26% 24%; border: 2px solid #4b8ae8; border-top-width: 6px; border-radius: 4px; }
.fl-chip--chart .fl-chip__ico { display: none; }
.fl-bars { display: flex; align-items: flex-end; gap: 4px; height: 2rem; margin-left: 0.5rem; }
.fl-bars i { width: 7px; border-radius: 3px; background: var(--ui-accent); }
.fl-bars i:nth-child(1) { height: 35%; opacity: 0.5; } .fl-bars i:nth-child(2) { height: 55%; opacity: 0.6; }
.fl-bars i:nth-child(3) { height: 45%; opacity: 0.7; } .fl-bars i:nth-child(4) { height: 70%; opacity: 0.8; }
.fl-bars i:nth-child(5) { height: 62%; opacity: 0.9; } .fl-bars i:nth-child(6) { height: 92%; }

/* Small screens: the snippets form a row under the text. */
.fl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; order: 2; margin-top: 2.5rem; }
.fl-hero__inner { grid-template-rows: auto auto; }
.fl-chip--chart { display: none; }

@media (min-width: 64em) {
  .fl-chips { position: absolute; inset: 0; display: block; margin: 0; }
  .fl-chip, .fl-chip--chart { position: absolute; display: flex; }
  .fl-chip--1 { left: 0; top: 12%; rotate: -3deg; }
  .fl-chip--2 { right: 3%; top: 8%; rotate: 2deg; }
  .fl-chip--3 { left: 3%; bottom: 14%; rotate: 2deg; }
  .fl-chip--4 { right: 6%; bottom: 10%; rotate: -2deg; }
  .fl-chip--5 { right: 0; top: 44%; rotate: 1deg; }
}
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .fl-chip { animation: fl-float 7s ease-in-out infinite; }
  .fl-chip--2 { animation-delay: -2s; animation-duration: 8s; }
  .fl-chip--3 { animation-delay: -4s; animation-duration: 6.5s; }
  .fl-chip--4 { animation-delay: -1s; animation-duration: 7.5s; }
  .fl-chip--5 { animation-delay: -3s; animation-duration: 8.5s; }
  @keyframes fl-float { 50% { translate: 0 -10px; } }
}

/* Shared sections */
.tile { border-color: var(--line); }
.tile--dark .focus strong { color: #7ee0d2; }
.steps li::before { background: var(--accent); }
.faq summary::after { background: var(--accent-soft); color: var(--accent); }
.product__visual--water { background: var(--sky); }
.product__visual--jobs { background: var(--mint); }
.product__visual--food { background: var(--peach); }
.product__link { color: var(--accent); }
.phscale__ticks { color: var(--ink-2); }