/*
 * envokit — brand.css
 * Single source of truth for all design tokens and base components.
 * Import this file first on every page. Never hardcode values — always use variables.
 * Last updated: May 2026
 */

/* ============================================================
   GOOGLE FONTS IMPORT
   Using: Nunito (headings) + DM Sans (body)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');


/* ============================================================
   DESIGN TOKENS — COLOR
   ============================================================ */
:root {

  /* --- Brand blue — "envo" (#1cb1fe) --- */
  --blue:        #1cb1fe;   /* primary sky blue */
  --blue-dk:     #0a90d4;   /* hover / pressed */
  --blue-dkk:    #0573aa;   /* deep — for text on white */
  --blue-lt:     #e4f6ff;   /* tinted background */
  --blue-mid:    #9dddfc;   /* border on light backgrounds */

  /* --- Brand orange — "kit" (#fe6945) --- */
  --orange:      #fe6945;   /* primary accent orange */
  --orange-dk:   #e04e2b;   /* hover / pressed */
  --orange-dkk:  #b83c1f;   /* deep — for text on white */
  --orange-lt:   #fff1ed;   /* tinted background */
  --orange-mid:  #fdb9a8;   /* border on light backgrounds */

  /* --- Brand navy — dark base (#021133) --- */
  --navy:        #021133;   /* deepest — hero dark sections, footers */
  --navy2:       #071d4a;   /* slightly lighter navy */
  --navy3:       #0d2860;   /* for gradients */

  /* --- Neutrals (cool-leaning, pairs with navy/blue) --- */
  --ink:         #021133;   /* headings, nav text — uses brand navy */
  --ink2:        #071d4a;   /* secondary dark */
  --body:        #1e3558;   /* body text — navy-tinted */
  --muted:       #4a6282;   /* secondary / helper text */
  --subtle:      #7a95b0;   /* placeholders, disabled, timestamps */

  /* --- Backgrounds --- */
  --bg:          #ffffff;   /* default page background */
  --bg2:         #f4f7ff;   /* section alternates — soft blue tint */
  --bg3:         #e8effa;   /* hover fills, progress bar backgrounds */

  /* --- Borders --- */
  --border:      #dde5f0;   /* default card/section borders */
  --border2:     #c4d0e3;   /* input outlines, stronger dividers */

  /* --- Status colors --- */
  --green:       #16A34A;
  --green-bg:    #F0FDF4;
  --green-bd:    #86EFAC;

  --amber:       #D97706;
  --amber-bg:    #FFFBEB;
  --amber-bd:    #FCD34D;

  --red:         #DC2626;
  --red-bg:      #FEF2F2;
  --red-bd:      #FECACA;


  /* ============================================================
     DESIGN TOKENS — TYPOGRAPHY
     ============================================================ */

  --fh: 'Nunito', sans-serif;     /* headings, nav, buttons, labels */
  --fb: 'DM Sans', sans-serif;    /* body, descriptions, inputs */


  /* ============================================================
     DESIGN TOKENS — SPACING & SHAPE
     ============================================================ */

  --r:    8px;    /* buttons, inputs, small chips */
  --rl:   12px;   /* cards, panels */
  --rxl:  16px;   /* large containers, modals */
  --rxx:  24px;   /* hero cards, feature blocks */

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(2,17,51,0.07), 0 1px 2px rgba(2,17,51,0.04);
  --sh:     0 4px 12px rgba(2,17,51,0.08), 0 1px 3px rgba(2,17,51,0.05);
  --sh-lg:  0 12px 32px rgba(2,17,51,0.10), 0 4px 8px rgba(2,17,51,0.06);
  --sh-xl:  0 24px 48px rgba(2,17,51,0.14), 0 8px 16px rgba(2,17,51,0.08);

  /* Layout */
  --max-w:        1200px;
  --max-w-narrow: 760px;
  --nav-h:        60px;
  --section-py:   96px;
  --section-px:   48px;
}


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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--blue-dk);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--fh);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--fb);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.02em; }
h4 { font-size: 20px; }
h5 { font-size: 17px; font-weight: 700; }
h6 { font-size: 15px; font-weight: 700; }

p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}

.text-large {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--muted);
}

.text-small {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.text-blue   { color: var(--blue); }
.text-orange { color: var(--orange); }
.text-navy   { color: var(--navy); }
.text-muted  { color: var(--muted); }
.text-ink    { color: var(--ink); }

.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Section eyebrow labels */
.eyebrow {
  display: inline-block;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}

.eyebrow-blue {
  color: var(--blue);
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

section {
  padding: var(--section-py) var(--section-px);
}

.section-alt {
  background: var(--bg2);
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.gap-24  { gap: 24px; }
.gap-32  { gap: 32px; }


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--section-px);
}

.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--blue);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1;
}

/* Primary — blue */
.btn-primary {
  background: var(--blue);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--blue-dk);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(28,177,254,0.35);
}

/* Accent — orange (use for hero + main CTAs) */
.btn-accent {
  background: var(--orange);
  color: #ffffff;
}

.btn-accent:hover {
  background: var(--orange-dk);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(254,105,69,0.35);
}

/* Navy — dark */
.btn-navy {
  background: var(--navy);
  color: #ffffff;
}

.btn-navy:hover {
  background: var(--navy2);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,17,51,0.30);
}

/* Ghost on light */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border2);
}

.btn-ghost:hover {
  background: var(--bg3);
  border-color: var(--muted);
}

/* Ghost blue */
.btn-ghost-blue {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue-mid);
}

.btn-ghost-blue:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
}

/* Ghost orange */
.btn-ghost-orange {
  background: transparent;
  color: var(--orange);
  border: 1.5px solid var(--orange-mid);
}

.btn-ghost-orange:hover {
  background: var(--orange-lt);
  border-color: var(--orange);
}

/* Sizes */
.btn-sm {
  font-size: 13px;
  padding: 8px 16px;
}

.btn-lg {
  font-size: 17px;
  padding: 16px 32px;
  border-radius: var(--rl);
}


/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 28px;
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: var(--sh);
  border-color: var(--border2);
  transform: translateY(-2px);
}

/* Feature card with icon box */
.card-feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rxx);
  padding: 32px;
  box-shadow: var(--sh-sm);
}

.card-icon {
  width: 52px;
  height: 52px;
  background: var(--blue-lt);
  border: 1px solid var(--blue-mid);
  border-radius: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.card-icon-orange {
  background: var(--orange-lt);
  border-color: var(--orange-mid);
}

.card-icon-orange svg {
  stroke: var(--orange);
}

.card-icon-navy {
  background: var(--navy);
  border-color: var(--navy2);
}

.card-icon-navy svg {
  stroke: #ffffff;
}


/* ============================================================
   FORM FIELDS
   ============================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--subtle);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28,177,254,0.14);
}


/* ============================================================
   BADGES & TAGS
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
  line-height: 1;
}

.badge-blue   { color: var(--blue-dkk); background: var(--blue-lt);   border-color: var(--blue-mid); }
.badge-orange { color: var(--orange-dkk);background: var(--orange-lt); border-color: var(--orange-mid); }
.badge-navy   { color: #ffffff;          background: var(--navy);       border-color: var(--navy2); }
.badge-green  { color: var(--green);    background: var(--green-bg);  border-color: var(--green-bd); }
.badge-amber  { color: var(--amber);    background: var(--amber-bg);  border-color: var(--amber-bd); }
.badge-red    { color: var(--red);      background: var(--red-bg);    border-color: var(--red-bd); }
.badge-neutral{ color: var(--muted);    background: var(--bg3);       border-color: var(--border2); }


/* ============================================================
   DIVIDERS
   ============================================================ */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}


/* ============================================================
   SECTION HEADER (reusable centered header block)
   ============================================================ */

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.section-header h2 {
  margin-bottom: 16px;
}

.section-header p {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--border);
  padding: 32px var(--section-px);
  background: var(--bg);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Top row: logo left, links right */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li { list-style: none; }

.footer-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--orange);
}

/* Bottom row: copyright alone */
.footer-copy {
  font-size: 13px;
  color: var(--subtle);
  margin: 0;
}


/* ============================================================
   UTILITIES
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.w-full { width: 100%; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --section-px: 32px;
    --section-py: 72px;
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-px: 20px;
    --section-py: 56px;
  }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .section-header { margin-bottom: 40px; }

  /* Headings — smaller on mobile so long words don't overflow */
  h1 { font-size: clamp(28px, 8vw, 38px); }
  h2 { font-size: clamp(24px, 6vw, 32px); }

  /* Footer — on mobile, top row stacks too */
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-links {
    gap: 14px;
  }
}

/* Mobile nav overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(2,17,51,0.35);
  z-index: 99;
}
.nav-mobile-overlay.open { display: block; }

/* Mobile nav drawer */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 12px 0 20px;
  box-shadow: 0 8px 24px rgba(2,17,51,0.10);
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mobile-menu ul li a {
  display: block;
  padding: 13px var(--section-px);
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.nav-mobile-menu ul li a:hover { background: var(--bg2); color: var(--blue); }
.nav-mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px var(--section-px) 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.nav-mobile-menu-actions .btn { width: 100%; justify-content: center; }

/* Hamburger button */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: var(--r);
  transition: background 0.12s;
}
.nav-burger:hover { background: var(--bg2); }
.nav-burger svg {
  width: 22px;
  height: 22px;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  transition: opacity 0.15s;
}
@media (max-width: 768px) {
  .nav-burger { display: flex; }
}


/* ============================================================
   NEVER RULES (comments for future reference)
   -- Never hardcode a color — always use a CSS variable
   -- Never use font-family without var(--fh) or var(--fb)
   -- Never go below 14px for visible text
   -- Never use uppercase headings — sentence case only
   -- Never use title case for buttons — sentence case only
   -- Eyebrow labels are the only uppercase element allowed
   -- Never use em dashes in copy — use commas or rewrite
   ============================================================ */