/* ===== Fluxio base layer ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--text-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--text-primary);margin:0;line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4);letter-spacing:var(--ls-normal)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono)}
img{max-width:100%;display:block}

/* ===== Brand utilities ===== */
/* Display type (Poppins) */
.fx-display{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.fx-display-2xl{font-size:var(--fs-display-2xl)}
.fx-display-xl{font-size:var(--fs-display-xl)}
.fx-display-lg{font-size:var(--fs-display-lg)}
.fx-overline{font-family:var(--font-sans);font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}
.fx-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Signature "variable" dot-scatter texture (brand motif). Layer behind hero/section blocks. */
.fx-dot-pattern{
  background-image:radial-gradient(var(--teal-200) 1.4px, transparent 1.5px);
  background-size:22px 22px;
}
.fx-dot-pattern-dense{
  background-image:radial-gradient(var(--teal-300) 1.6px, transparent 1.7px);
  background-size:16px 16px;
}

/* Rounded organic wave divider (brand motif on stationery). Apply to a positioned block. */
.fx-wave-corner{position:relative;overflow:hidden}
.fx-wave-corner::after{
  content:"";position:absolute;right:-8%;bottom:-40%;width:60%;height:120%;
  background:var(--color-brand);border-radius:50% 50% 0 0/60% 60% 0 0;
  transform:rotate(-18deg);opacity:.9;pointer-events:none;
}