/* ============================================================
   CLEANFLO — style.css  |  Root Variables + Global Base
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Sora:wght@600;700;800&display=swap');

/* ── Root Design Tokens ──────────────────────────────────── */
:root {
  /* Brand core */
  --cf-primary:       #0A7FAE;
  --cf-primary-700:   #086C96;
  --cf-primary-600:   #0B8CC0;
  --cf-primary-500:   #19A7D8;
  --cf-primary-100:   #DDF4FB;
  --cf-secondary:     #149A87;
  --cf-secondary-700: #0F7E6E;
  --cf-secondary-600: #11907F;
  --cf-secondary-500: #22B59F;
  --cf-secondary-100: #D7F5EF;
  --cf-accent:        #2DB7C9;
  --cf-accent-100:    #E1F8FB;

  /* Neutrals */
  --cf-bg:            #FFFFFF;
  --cf-surface:       #F6FAFC;
  --cf-surface-2:     #EDF5F9;
  --cf-border:        #D8E5EC;
  --cf-border-strong: #C2D4DE;
  --cf-text:          #13212B;
  --cf-text-strong:   #0B1620;
  --cf-muted:         #5F7180;
  --cf-muted-2:       #7E8F9C;

  /* Semantic */
  --cf-success:  #1FA97B;
  --cf-info:     #0E95C7;
  --cf-warning:  #D9961B;
  --cf-danger:   #D64D4D;

  /* Shadows */
  --cf-shadow-sm: 0 2px 8px  rgba(10,127,174,0.06);
  --cf-shadow-md: 0 10px 24px rgba(10,127,174,0.10);
  --cf-shadow-lg: 0 18px 48px rgba(10,127,174,0.14);

  /* Radius */
  --cf-radius-sm: 10px;
  --cf-radius:    14px;
  --cf-radius-lg: 18px;
  --cf-radius-xl: 24px;

  /* Gradients */
  --cf-gradient-primary: linear-gradient(135deg,#0A7FAE 0%,#149A87 100%);
  --cf-gradient-hero:    linear-gradient(135deg,#0674A2 0%,#0F9BB2 48%,#1EA7D8 100%);
  --cf-gradient-soft:    linear-gradient(180deg,#F7FCFE 0%,#ECF7FB 100%);
  --cf-gradient-dark:    linear-gradient(135deg,#081A24 0%,#0C2D3E 50%,#0A3346 100%);

  /* Motion */
  --cf-ease: cubic-bezier(0.4,0,0.2,1);
  --cf-dur:  0.28s;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--cf-text);
  background: var(--cf-bg);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Utility Classes ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Scroll-lock (used by JS when mobile nav opens) ──────── */
body.nav-open { overflow: hidden; }