/* ==========================================================================
   FLOA — "Clear Water"
   Swiss-precise, light and airy. One teal accent, large type, generous air,
   and a laminar flow band in the hero. RTL, mobile-first.

   Structure:
     01 tokens
     02 reset & base
     03 layout primitives
     04 typography
     05 buttons
     06 forms
     07 cards
     08 hero
     09 sections
     10 footer
     11 legal pages
     12 motion
     13 responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* --- colour: one accent, everything else is ink and paper ---------------
     Paper is a cool tinted ground, cards are pure white. Previously both were
     effectively the same white (#FBFCFC vs #FFFFFF), so a card had nothing to
     sit ON and only its hairline separated it from the page. Making white the
     figure and the tint the ground is what gives the cards their lift. */
  --paper:        #E9F0EE;
  --surface:      #FFFFFF;
  --surface-sunk: #F2F7F5;   /* recessed panels INSIDE a white card */

  --ink:          #0F2A33;
  --ink-2:        #24444F;
  /* darkened to clear AA (4.5:1) against the tinted paper, not just against a
     white card — the section leads sit on paper, where #66797F fell to 3.94 */
  --muted:        #586C73;
  --muted-2:      #63757B;

  --teal:         #0E8C7E;
  --teal-dark:    #0A6C61;
  /* deep enough to read on BOTH grounds — chips sit on tinted paper (section
     heads) and on white (inside the contact panel). The old #E8F4F1 was within
     1.03 of the new paper, so the chip's fill simply vanished. */
  --teal-tint:    #C9E6DE;
  --water:        #7FC5E4;

  --hairline:     #DCE6E3;
  --hairline-2:   #E9F0EE;

  --danger:       #A23B3B;
  --danger-bg:    #FCECEC;
  --danger-line:  #F0CFCF;

  /* --- type --- */
  --font-display: "Rubik", system-ui, "Segoe UI", Arial, sans-serif;
  --font-body:    "Assistant", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --fs-hero:  clamp(2.9rem, 6.4vw, 5.5rem);
  --fs-h2:    clamp(2.2rem, 4.1vw, 3.4rem);
  --fs-h3:    1.45rem;
  --fs-lead:  clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-body:  1.25rem;
  --fs-sm:    1.14rem;
  --fs-xs:    .95rem;

  /* --- space: one 4px-based scale, used everywhere --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* Every inset is fluid. Fixed paddings stack up on narrow screens (container
     + panel + card) and crush the content column until text wraps one word per
     line — so each one scales with the viewport instead. */
  --gutter:   clamp(14px, 4vw, 24px);     /* container side padding */
  --gap:      clamp(14px, 2vw, 24px);     /* the ONE gap between grid items */
  --pad-card: clamp(18px, 3vw, 28px);     /* the ONE card padding */
  --pad-panel: clamp(20px, 5vw, 56px);    /* the ONE panel padding */
  --section:  clamp(64px, 8vw, 128px);
  --head-gap: clamp(36px, 4.5vw, 64px);   /* section head -> content */

  /* --- shape --- */
  --r-sm:  12px;
  --r:     18px;
  --r-lg:  24px;
  --r-pill: 999px;

  --field-h: 56px;           /* every input, select and button agrees */

  /* --- depth: soft, water-like, never heavy --- */
  --sh-1: 0 2px 6px rgba(15, 42, 51, .05);
  --sh-2: 0 10px 28px -12px rgba(15, 42, 51, .16);
  --sh-3: 0 26px 64px -28px rgba(15, 42, 51, .24);
  --sh-teal: 0 12px 28px -12px rgba(14, 140, 126, .45);

  --container: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--s-1);
}

::selection { background: var(--teal); color: #fff; }

/* ==========================================================================
   03. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Long unbroken strings (emails, URLs) must never widen a track — but that is
   only true of body text. Headings are excluded on purpose: break-word would
   snap a Hebrew word in half mid-word on a narrow screen. They wrap between
   words only, and balance so the lines come out even. */
p, li, label, a, strong, span {
  overflow-wrap: break-word;
}
/* balance: headings wrap into even lines instead of leaving a one-word orphan
   on the last line, which is what a big heading does on a narrow screen.
   break-word stays as a last resort — it only ever splits a word that cannot
   fit a line by itself, so it guards against overflow without splitting the
   ordinary Hebrew words that now fit fine. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Grid tracks must be allowed to shrink below their content's min-content
   width, or long unbroken Hebrew strings push cards out of their column. */
.mini-cards, .solutions-grid, .features-grid,
.projects-grid, .approach-grid, .ba-strip, .tl-item {
  min-width: 0;
}
.mini-cards > *, .solutions-grid > *, .features-grid > *,
.projects-grid > *, .approach-grid > *, .ba-strip > *, .tl-item > * {
  min-width: 0;
}

/* An anchor jump aligns the section's border box to the top of the viewport —
   which then leaves the section's whole top padding (up to 128px) as dead space
   above the heading. Pulling the scroll target up by that padding lands the
   CONTENT a normal ~40px below the fold instead. */
.section {
  padding-block: var(--section);
  scroll-margin-top: calc(var(--s-8) - var(--section));
  position: relative;
}

main, .site-footer { position: relative; z-index: 1; }

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* The section head is IDENTICAL in every section — one chip, one h2, one lead,
   always centred. Centring is not a modifier here: it is the only option, so a
   section cannot drift out of alignment with the others. */
.section-head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--head-gap);
  text-align: center;
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head p {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 40rem;
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* Mono has no Hebrew glyphs — it is used ONLY for numerals and Latin, never
   for a Hebrew label, which would silently fall back to a system font. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* eyebrow: a chip. Sets the section's topic before the headline lands.
   inline-flex, so it is centred by the head's text-align like any inline box. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

.emphasis { color: var(--teal-dark); font-weight: 600; }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
/* No white-space:nowrap. A nowrap label gives the button a min-content width of
   the entire unbroken string, which no flex or grid track can shrink below — so
   a long Hebrew CTA silently forces the whole page wider than the viewport. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 0;
  max-width: 100%;
  min-height: var(--field-h);
  padding: var(--s-3) var(--s-7);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 62px; padding-inline: var(--s-8); font-size: 1.18rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--teal);
  color: #fff;
  box-shadow: var(--sh-teal);
}
.btn-primary:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(14, 140, 126, .55);
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }


/* ==========================================================================
   06. FORMS
   Every control shares one height, one border, one radius, one focus ring.
   ========================================================================== */
.contact-panel {
  max-width: 800px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--pad-panel);
  box-shadow: var(--sh-3);
}
.contact-panel .section-head { margin-bottom: var(--s-8); }

/* minmax(0,1fr), not 1fr: a bare 1fr track refuses to shrink below the
   min-content width of a select/textarea, which pushes the fields out of the
   panel on narrow screens. min-width:0 lets the controls actually flex down. */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.field-full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

/* the single source of truth for control chrome */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.field textarea {
  min-height: 132px;
  resize: vertical;
  padding-block: var(--s-3);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }

.field select {
  cursor: pointer;
  padding-inline-start: var(--s-8);   /* room for the chevron on the left (RTL) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366797F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--s-4) center;
}
.field select.is-empty { color: var(--muted-2); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #D2DEDB; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(14, 140, 126, .13);
}

/* invalid state is applied by JS ONLY after a submit attempt — never on load */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(162, 59, 59, .10);
}

/* the submit sits in its own row with real air around it */
.form-actions {
  grid-column: 1 / -1;
  margin-top: var(--s-3);
}

/* reassurance note sits directly under the submit, with real air around it */
.contact-note {
  margin-top: var(--s-5);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* --- "or" divider: a hairline with the word centred in it ----------------- */
/* no letter-spacing: it visibly splits a two-letter Hebrew word into "א ו" */
.or-divider {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block: var(--s-7);
  color: var(--muted-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* --- WhatsApp: a real button, not a sentence with a link in it ------------ */
.btn-whatsapp {
  width: 100%;
  gap: var(--s-3);
  padding-block: var(--s-3);
  min-height: 64px;
  background: var(--surface-sunk);
  color: var(--ink);
  border-color: var(--hairline);
  box-shadow: var(--sh-1);
}
.btn-whatsapp:hover {
  background: #F6FDF9;
  border-color: #25D366;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(37, 211, 102, .5);
}
/* the mark sits in its own badge, so it reads as an icon and not as a stray
   glyph floating beside a two-line label */
.btn-whatsapp .wa-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
}
.btn-whatsapp .wa-mark svg { width: 22px; height: 22px; }

/* label above sub-label, never side by side */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
  text-align: start;
}
.btn-whatsapp .btn-sub {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.form-success,
.form-error {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  align-items: center;
  text-align: center;
  padding: var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form-success {
  background: var(--teal-tint);
  border: 1px solid rgba(14, 140, 126, .2);
  color: var(--teal-dark);
}
.form-success strong { font-size: 1.05rem; font-weight: 700; }
.form-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  font-weight: 600;
}
/* [hidden] must always win over the flex display above */
.form-success[hidden], .form-error[hidden] { display: none; }

/* ==========================================================================
   07. CARDS  — one card recipe, reused everywhere
   ========================================================================== */
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 140, 126, .28);
  box-shadow: var(--sh-2);
}
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.card p { color: var(--muted); font-size: var(--fs-sm); }

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-5);
  border-radius: var(--r-sm);
  background: var(--teal-tint);
  color: var(--teal-dark);
  flex: 0 0 auto;
}
.card-icon svg { width: 24px; height: 24px; }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(24px, 3vw, 40px) clamp(64px, 7vw, 96px);
  overflow: hidden;
}

/* --- the animated system ------------------------------------------------
   The hero diagram, alive: each solution lights in turn and sends a pulse down
   its wire into the FLOA hub. SVG, not a video — crisp at any size, no download,
   and it honours reduced-motion by simply holding still. */
.hero-system {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: clamp(28px, 3.5vw, 44px) auto clamp(8px, 1.5vw, 16px);
}
.system-svg { width: 100%; height: auto; overflow: visible; }

/* cards */
.system-svg .plate { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; }
.system-svg .bar   { fill: #E7EDEC; }
.system-svg .bar-teal { fill: rgba(14, 140, 126, .28); }
.system-svg .bar-blue { fill: rgba(127, 197, 228, .45); }
.system-svg .dot   { fill: #DCE5E3; }
.system-svg .dot-teal { fill: rgba(14, 140, 126, .55); }
.system-svg .dot-blue { fill: rgba(127, 197, 228, .75); }

/* a node at rest sits back; the lit one comes forward */
.system-svg .node {
  transform-box: fill-box;
  transform-origin: center;
  opacity: .62;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.system-svg .node.is-lit { opacity: 1; transform: scale(1.045); }
.system-svg .node.is-lit .plate { stroke: rgba(14, 140, 126, .45); }
.system-svg .node.is-lit .bar-teal { fill: var(--teal); }

/* wires: drawn faint, and the lit one brightens */
.system-svg .wires path {
  opacity: .3;
  transition: opacity .5s var(--ease), stroke-width .5s var(--ease);
}
.system-svg .wires path.is-lit { opacity: .95; stroke-width: 2.6; }

/* the pulse riding each wire — positioned by JS along the path */
.system-svg .pulse { fill: var(--teal); opacity: 0; }
.system-svg .pulse.is-live { opacity: 1; }

/* the hub breathes, so the system reads as running even between steps */
.system-svg .hub { transform-box: fill-box; transform-origin: center; }
@keyframes hub-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.system-svg .hub { animation: hub-breathe 3.4s var(--ease) infinite; }

/* the caption names whichever solution is lit */
/* the caption leads: it names the solution, then the diagram lights it */
.system-caption {
  margin-bottom: var(--s-5);
  text-align: center;
  min-height: 2.2em;
}
.system-caption-text {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.system-caption.is-swapping .system-caption-text {
  opacity: 0;
  transform: translateY(6px);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* letter-spacing appends a trailing gap AFTER the final letter, which makes the
   span's box wider than its glyphs — so a centred wordmark visibly sits off to
   one side. Force an LTR box and pull that trailing gap back off the end. */
.hero-logo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .34em;
  direction: ltr;
  margin-inline-end: -.34em;
  color: var(--teal);
  margin-bottom: var(--s-6);
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 16ch;
  text-wrap: balance;
}

.hero-text {
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.hero-actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
}


/* ==========================================================================
   09. SECTIONS
   ========================================================================== */

/* --- 01 problem: 4 equal cards + the before/after strip ------------------- */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.mini-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
  border-top: 2px solid var(--water);
}
.mini-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.mini-card p { color: var(--muted); font-size: var(--fs-sm); }

.ba-strip {
  margin-top: var(--gap);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--gap);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
}
.ba-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.ba-side-after { background: var(--teal-tint); }
.ba-tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
}
.ba-tag-before { background: #fff; color: var(--muted); border: 1px solid var(--hairline); }
.ba-tag-after  { background: var(--teal); color: #fff; }
.ba-side p { color: var(--muted); font-size: var(--fs-sm); }
.ba-side-after p { color: var(--teal-dark); font-weight: 600; }
.ba-arrow { display: grid; place-items: center; color: var(--teal); }
.ba-arrow svg { width: 40px; height: 24px; }

/* --- 02 approach: media beside the principles, under a centred head ------- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.principles {
  display: grid;
  gap: var(--s-6);
  align-content: center;
}
.principle {
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--teal-tint);
  transition: border-color .25s var(--ease);
}
.principle:hover { border-inline-start-color: var(--teal); }
.principle h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--s-1); }
.principle p { color: var(--muted); font-size: var(--fs-sm); }

.approach-media img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--sh-3);
}

/* --- 03 solutions: 2x2 + one wide ---------------------------------------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.solutions-grid .card-wide { grid-column: 1 / -1; }
/* the wide card lays its icon beside the copy so it never looks stretched */
.card-wide {
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
}
.card-wide .card-icon { margin-bottom: 0; }

/* --- 04 cta band --------------------------------------------------------- */
.cta-band { padding-block: var(--section); }
.cta-inner {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--pad-panel);
  box-shadow: var(--sh-2);
}
.cta-inner h2 { font-size: var(--fs-h2); }
.cta-inner p {
  margin: var(--s-4) auto var(--s-8);
  color: var(--muted);
  font-size: var(--fs-lead);
  max-width: 44rem;
}

/* --- 05 projects --------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 140, 126, .28);
  box-shadow: var(--sh-2);
}
.project-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunk);
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.project-card:hover .project-media img { transform: scale(1.03); }

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--pad-card);
}
.project-name {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal-dark);
}
.project-body h3 {
  font-size: 1.35rem;
  margin: var(--s-2) 0 var(--s-6);
  line-height: 1.25;
}
.project-body h3 a { transition: color .18s var(--ease); }
.project-body h3 a:hover { color: var(--teal-dark); }

/* the three parts share one rhythm and a hairline ladder */
.project-part {
  padding-block: var(--s-4);
  border-top: 1px solid var(--hairline-2);
}
.project-label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted-2);
}
.project-part p { color: var(--muted); font-size: var(--fs-sm); }

.project-link {
  margin-top: auto;
  padding-top: var(--s-6);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  color: var(--teal-dark);
  transition: color .18s var(--ease);
}
.project-link::after { content: "←"; transition: transform .2s var(--ease); }
.project-link:hover { color: var(--teal); }
.project-link:hover::after { transform: translateX(-4px); }

/* two screenshots sharing one media area — side by side, stacked on mobile */
.project-media-duo {
  aspect-ratio: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad-card);
  background: var(--surface-sunk);
}
.project-media-duo .duo-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-media-duo .duo-item:first-child { flex-grow: 1.45; }
.project-media-duo img {
  max-width: 100%;
  max-height: clamp(230px, 26vw, 320px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  transition: transform .5s var(--ease);
}
.project-card:hover .project-media-duo img { transform: none; }
.project-media-duo a.duo-item:hover img { transform: translateY(-3px); }
@media (max-width: 640px) {
  .project-media-duo { flex-direction: column; }
  .project-media-duo .duo-item { width: 100%; flex: none; }
  .project-media-duo img { width: 100%; height: auto; max-height: none; }
}

/* --- testimonial: balanced quote cards, side by side then stacked -------- */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1000px;
  margin-inline: auto;
}
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--sh-2);
  text-align: center;
}
.quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: .5;
  height: .55em;
  color: var(--teal);
}
.quote-text {
  font-size: var(--fs-lead);
  line-height: 1.75;
  font-weight: 600;
  color: var(--ink-2);
}
.quote-by {
  margin-top: auto;
  padding-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.quote-role { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .quotes-grid { grid-template-columns: 1fr; }
}

/* --- 06 process: numbered timeline --------------------------------------- */
.timeline {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 27px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(180deg, var(--teal), var(--water));
  opacity: .35;
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-6);
  align-items: start;
}
.tl-num {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-1);
  color: var(--teal-dark);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.tl-item:hover .tl-num {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.tl-body {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--s-6) var(--pad-card);
  box-shadow: var(--sh-1);
}
.tl-body h3 { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.tl-body p { color: var(--muted); font-size: var(--fs-sm); }

/* --- 07 advantage: 3 features -------------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.feature {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
  border-top: 2px solid var(--teal);
}
.feature h3 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.feature p { color: var(--muted); font-size: var(--fs-sm); }

/* --- 08 about: centred, round portrait ----------------------------------- */
.about-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.about-avatar {
  width: 132px;
  height: 132px;
  margin: 0 auto var(--s-7);
}
.about-avatar img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  border: 3px solid var(--surface);
  background: var(--teal-tint);
  box-shadow: var(--sh-3);
}
.about-inner h2 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.about-inner p {
  color: var(--muted);
  margin-inline: auto;
  max-width: 58ch;
  margin-bottom: var(--s-4);
}
/* skills as chips — the eyebrow's pill language, in a neutral tone */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.chips li {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--sh-1);
}
.about-inner .emphasis {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--teal-dark);
}

/* ==========================================================================
   10. FOOTER & MOBILE BAR
   ========================================================================== */
.site-footer {
  margin-top: var(--section);
  background: var(--ink);
  color: #C3D3D7;
}
/* the whole footer sits on the page's centre axis, like every section head */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-7);
  padding-block: var(--s-9);
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}
.logo-mark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .3em;
  direction: ltr;
  margin-inline-end: -.3em;
  color: #fff;
}
.logo-sub { font-size: var(--fs-sm); color: #8FA4A9; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
}
.footer-links a {
  font-size: var(--fs-sm);
  color: #C3D3D7;
  transition: color .18s var(--ease);
}
.footer-links a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-block: var(--s-5);
  font-size: var(--fs-xs);
  color: #8FA4A9;
  text-align: center;
}

/* ==========================================================================
   11. LEGAL PAGES
   ========================================================================== */
.legal { padding-block: var(--s-8) var(--section); }
.legal .container { max-width: 760px; }

.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--hairline);
}
.legal-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .3em;
  direction: ltr;
  margin-inline-end: -.3em;
  color: var(--teal);
}
.legal-home {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--teal-dark);
  transition: gap .2s var(--ease);
}
.legal-home:hover { text-decoration: underline; }

.legal h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: var(--s-2);
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: var(--s-8);
}
.legal h2 {
  font-size: 1.3rem;
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-2);
}
.legal p { color: var(--ink-2); margin-bottom: var(--s-4); }
.legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.legal-list li {
  position: relative;
  padding-inline-start: var(--s-6);
  color: var(--ink-2);
}
.legal-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
/* :not(.btn) — a bare `.legal a` rule (0,1,1) outranks `.btn-primary` (0,1,0)
   and would repaint the CTA's white label teal */
.legal a:not(.btn) { color: var(--teal-dark); font-weight: 600; }
.legal a:not(.btn):hover { text-decoration: underline; }
/* the closing CTA follows the site's centred language and is set off from the
   text above it, rather than stranded at the edge of the last paragraph */
.legal-foot {
  margin-top: var(--s-9);
  padding-top: var(--s-8);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.legal-foot p {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-6);
}
/* the WhatsApp button is full-width inside the contact panel; here it sizes to
   its own content so it sits as a centred pill */
.legal-cta {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

/* ==========================================================================
   12. MOTION
   ========================================================================== */
/* Gated on .js: the reveal must only hide content once we know JS is running to
   bring it back. Hiding it unconditionally would leave the entire page below the
   hero invisible if the script ever fails to load. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .mini-cards   { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-media { order: -1; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 860px) {
  .rules { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid { grid-template-columns: 1fr; }
  .card-wide { flex-direction: column; align-items: flex-start; }
  .card-wide .card-icon { margin-bottom: var(--s-5); }

  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  :root {
    --gap: 16px;
    --pad-card: 22px;
    --fs-body: 1.16rem;
  }
  .rules { display: none; }

  .mini-cards { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }

  .ba-strip { grid-template-columns: 1fr; }
  .ba-arrow svg { transform: rotate(-90deg); width: 24px; height: 36px; }

  .tl-item { grid-template-columns: 44px 1fr; gap: var(--s-4); }
  .tl-num { width: 44px; height: 44px; font-size: .85rem; }
  .timeline::before { inset-inline-start: 21px; }

  .hero-title { max-width: none; }
}

/* ==========================================================================
   14. SOLUTION PAGES
   Per-solution landing pages (for the FB campaigns). They reuse every homepage
   component as-is; the only additions are a "featured" hero node, a "what's
   included" checklist, and the "full picture" ecosystem grid — so all five
   pages stay identical in design and graphic language, differing only in copy.
   ========================================================================== */

/* --- the featured solution: pinned forward and lit while the rest still pulse,
   so the visitor sees THEIR solution at the centre, still wired into one system */
.system-svg .node.is-feature { opacity: 1; }
.system-svg .node.is-feature .plate { stroke: var(--teal); stroke-width: 2; }
.system-svg .node.is-feature .bar-teal { fill: var(--teal); }
/* placed AFTER .node.is-lit so the feature's larger scale wins when both apply */
.system-svg .node.is-feature { transform: scale(1.07); }

/* the hero wordmark is a link back home on these pages */
a.hero-logo { transition: color .18s var(--ease); }
a.hero-logo:hover { color: var(--teal-dark); }

/* a slimmer hero for a single-solution page: the promise, then the system */
.hero-actions .btn-ghost {
  background: var(--surface);
  color: var(--teal-dark);
  border-color: var(--hairline);
  box-shadow: var(--sh-1);
}
.hero-actions .btn-ghost:hover {
  border-color: rgba(14, 140, 126, .4);
  color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

/* --- "what's included": the solution itemised — one checklist, two columns --- */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 940px;
  margin-inline: auto;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad-card);
  box-shadow: var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.check-item:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 140, 126, .28);
  box-shadow: var(--sh-2);
}
.check-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark);
}
.check-ic svg { width: 18px; height: 18px; }
.check-item h3 { font-size: 1.12rem; margin-bottom: var(--s-1); }
.check-item p { color: var(--muted); font-size: var(--fs-sm); }

/* --- "the full picture": all five solutions as one connected system.
   Every solution page shows this so the visitor grasps that FLOA is one system,
   not a single trick — the page's own solution is highlighted, the rest link. */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}
.eco-card {
  text-align: start;
  align-items: flex-start;
}
.eco-card .card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: var(--s-4);
}
.eco-card h3 { font-size: 1.08rem; margin-bottom: var(--s-1); }
.eco-card p { color: var(--muted); font-size: var(--fs-xs); }
/* the current page's card: highlighted, and not a link */
.eco-card.is-current {
  border-color: rgba(14, 140, 126, .45);
  background: var(--teal-tint);
  box-shadow: var(--sh-2);
}
.eco-card.is-current:hover { transform: none; }
.eco-card.is-current .card-icon { background: var(--teal); color: #fff; }
.eco-here {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--teal);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}

/* the "one system" line that closes the ecosystem section */
.eco-note {
  margin-top: var(--gap);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 46rem;
  margin-inline: auto;
}
.eco-note a { color: var(--teal-dark); font-weight: 700; }
.eco-note a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .checklist { grid-template-columns: 1fr; }
}

/* --- unique per-solution hero illustration ---------------------------------
   Each solution page gets its OWN hero image instead of the shared system
   diagram. They are drawn from one palette and one set of card/line-icon
   primitives, so the five pages read as a family while each picture is unique. */
.hero-chip { margin-bottom: var(--s-6); }
.hero-chip span {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.4;
}
.hero-art { width: 100%; }
.hero-illust {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: clamp(20px, 2.6vw, 36px) auto clamp(4px, 1vw, 12px);
  overflow: visible;
}

/* one shared palette for the whole illustration family */
.hero-illust .plate      { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; }
.hero-illust .plate-sunk { fill: var(--surface-sunk); stroke: var(--hairline); stroke-width: 1; }
.hero-illust .bar        { fill: #E7EDEC; }
.hero-illust .bar-teal   { fill: var(--teal); }
.hero-illust .bar-tint   { fill: rgba(14, 140, 126, .22); }
.hero-illust .bar-blue   { fill: rgba(127, 197, 228, .5); }
.hero-illust .dot        { fill: #D3E0DD; }
.hero-illust .fill-teal  { fill: var(--teal); }
.hero-illust .fill-tint  { fill: var(--teal-tint); }
.hero-illust .fill-white { fill: #fff; }
.hero-illust .fill-water { fill: rgba(127, 197, 228, .5); }
.hero-illust .wire       { fill: none; stroke: var(--water); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.hero-illust .wire-teal  { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.hero-illust .glyph      { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-illust .glyph-teal { stroke: var(--teal); }
.hero-illust .glyph-white{ stroke: #fff; }
.hero-illust .glyph-ink  { stroke: var(--ink-2); }
.hero-illust .glyph-muted{ stroke: #AFC0C0; }

.hero-illust .lift    { filter: drop-shadow(0 8px 12px rgba(15, 42, 51, .10)); }
.hero-illust .lift-lg { filter: drop-shadow(0 16px 24px rgba(15, 42, 51, .16)); }
.hero-illust .hub-glow{ filter: drop-shadow(0 10px 16px rgba(14, 140, 126, .40)); }

/* gentle life — frozen automatically under prefers-reduced-motion (see §12) */
@keyframes hero-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hero-breathe { 0%, 100% { transform: scale(1); }      50% { transform: scale(1.04); } }
@keyframes hero-blink   { 0%, 100% { opacity: .5; }              50% { opacity: 1; } }
.hero-illust .float   { animation: hero-float 5.5s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.hero-illust .float-b { animation: hero-float 5.5s var(--ease) infinite; animation-delay: -2.75s; transform-box: fill-box; transform-origin: center; }
.hero-illust .breathe { animation: hero-breathe 3.8s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.hero-illust .blink   { animation: hero-blink 2.6s var(--ease) infinite; }