/* --- DESIGN TOKENS --- */
/**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   /**
 * Netiquette Software — Design Tokens
 * colors_and_type.css
 *
 * Import via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * Or:
 *   @import url("3e7a7434-466b-480f-9eac-ac4affac2406");
 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }

 */

/* ─────────────────────────────────────────────
   GOOGLE FONTS
   Primary UI font: Poppins
   Logo-match font: Nunito (closest to wordmark)
───────────────────────────────────────────── */
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("51d8d4b0-fd41-41b2-9a9e-556453087dc1") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("d50938d1-0aca-4124-bfd6-6067e46f20c1") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("c58a2747-cae5-4d01-ae99-63f52bcc300b") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("44d55db5-3da0-45e6-ac06-6469369fe0fd") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("99bb4ece-3fd7-43d6-867f-67ce6628f810") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81369570-30ff-4503-85c6-d675457c5b62") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("52da6f0f-3fc6-492b-9875-21926dc5e476") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("db23eab0-119c-42d0-9158-b3f2cadcc843") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2d1eca02-0924-4ac3-b31e-7adaf9e3206c") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80842ca1-6883-407b-a34e-3564b36ac0e6") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("9dd48414-0353-4567-bd17-5781bcb44ce5") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4c0cd400-8272-4aef-b9ed-d0f88bc85dc1") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("12fc0d50-a82c-41d8-9e4e-634a16774b0e") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("7ad40ac6-4ec2-4a60-b5af-ffb025b6b1ca") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ea4eafe9-f174-4cb2-8aea-858764b1c74f") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0a99e1f3-b80d-4608-91bd-88e8fe78cb7b") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ac6b0ac0-84aa-4e3d-b267-5444f5559cb3") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("34d649e8-9d6d-4133-b664-ade00480f8f2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d3ac553-c7c5-446e-bceb-6fe754fe342c") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9d426015-0c58-4867-8a9e-a183ee1fa2ba") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2b266ede-b98f-4f67-ba79-d2d050a61a19") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("30808c0f-c68c-4f55-8224-f7b459148f67") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2682cf1b-5dd2-42ac-9e86-0959acc79572") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─────────────────────────────────────────────
   COLOR TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Brand Primary */
  --color-primary:        #30B0FC;
  --color-primary-light:  #c8e8f8;
  --color-primary-dark:   #0a8fd6;
  --color-primary-faint:  #f0f9ff;

  /* Brand Dark */
  --color-dark:           #0a2540;
  --color-dark-mid:       #1a3a5c;

  /* Logo Wordmark Brown */
  --color-logo-brown:     #3D1C02;

  /* Neutrals */
  --color-white:          #ffffff;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7fbff;
  --color-bg-highlight:   #f0f9ff;
  --color-border:         #e0eaf5;
  --color-border-strong:  #c8d8ec;

  /* Text */
  --color-fg1:            #0a2540;   /* headings */
  --color-fg2:            #2d3748;   /* primary body */
  --color-fg3:            #4a5568;   /* secondary body */
  --color-fg4:            #718096;   /* muted / captions */
  --color-fg-on-dark:     #ffffff;
  --color-fg-on-dark-sub: rgba(255,255,255,0.75);

  /* Semantic */
  --color-success:        #2E7D32;
  --color-success-bg:     #f0fff4;
  --color-warning:        #E65100;
  --color-warning-bg:     #fff8f0;
  --color-error:          #C62828;
  --color-error-bg:       #fff5f5;
  --color-info:           #30B0FC;
  --color-info-bg:        #f0f9ff;

  /* WhatsApp */
  --color-whatsapp:       #25D366;

  /* ── Module Accent Colors ── */
  --color-ams:            #2E7D32;   /* Accounting — green */
  --color-ams-light:      #e8f5e9;
  --color-ims:            #C62828;   /* Inventory — rose-red */
  --color-ims-light:      #fce4ec;
  --color-crm:            #E65100;   /* CRM — amber-orange */
  --color-crm-light:      #fff3e0;
  --color-pay:            #AD1457;   /* Payroll — magenta */
  --color-pay-light:      #fce4ec;
  --color-pos:            #BF360C;   /* POS — red-orange */
  --color-pos-light:      #fbe9e7;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BASE
───────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-primary:   'Poppins', system-ui, -apple-system, sans-serif;
  --font-logo:      'Nunito', 'Poppins', sans-serif;   /* nearest to wordmark */
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;
  --text-3xl:   26px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Font Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.6;
  --leading-relaxed:  1.7;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tight:   -0.5px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-widest:  1.5px;
}

/* ─────────────────────────────────────────────
   SPACING TOKENS
───────────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-15:  60px;
  --space-20:  80px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS TOKENS
───────────────────────────────────────────── */
:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-pill:  999px;
}

/* ─────────────────────────────────────────────
   SHADOW TOKENS
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-xs:     0 1px 2px rgba(10,37,64,0.06);
  --shadow-sm:     0 2px 8px rgba(10,37,64,0.08);
  --shadow-md:     0 4px 16px rgba(10,37,64,0.10);
  --shadow-lg:     0 8px 32px rgba(10,37,64,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHIC ELEMENTS
───────────────────────────────────────────── */

/* Apply base */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

h5, h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-fg1);
}

p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg3);
}

/* Section label / overline */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
}

/* Small caption */
small, .caption {
  font-size: var(--text-xs);
  color: var(--color-fg4);
  line-height: var(--leading-normal);
}

/* Code */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark      { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline   { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-faint); }
.btn-ghost     { background: rgba(255,255,255,0.15); color: var(--color-white); border: 1px solid rgba(255,255,255,0.3); }
.btn-sm        { padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg        { padding: 16px 32px; font-size: var(--text-lg); }

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.card-highlight {
  border-color: var(--color-primary);
  background: var(--color-bg-highlight);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.badge-primary { background: var(--color-primary); color: var(--color-white); }
.badge-outline { background: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); }
.badge-dark    { background: var(--color-dark); color: var(--color-white); }
.badge-success { background: var(--color-success); color: var(--color-white); }

/* Section label overline */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}

/* Containers */
.surface       { background: var(--color-bg); }
.surface-alt   { background: var(--color-bg-alt); }
.surface-dark  { background: var(--color-dark); color: var(--color-fg-on-dark); }


/* --- BESPOKE HOMEPAGE STYLES --- */
/* ───────────────────────────────────────────────
   Netiquette Homepage — bespoke styles
   Builds on design tokens from assets/colors_and_type.css
─────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-primary);
  color: var(--color-fg2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* Density (tweakable) ------------------------- */
:root {
  --d: 1;
  --sec-pad-y: calc(96px * var(--d));
  --sec-pad-x: 48px;
  --container: 1240px;
}
body[data-density="compact"] {
  --d: 0.78;
}
body[data-density="comfortable"] {
  --d: 1;
}

/* Primary override (tweakable) ---------------- */
body[data-primary="indigo"]  { --color-primary: #4F66F5; --color-primary-dark:#2f47d6; --color-primary-light:#dde2fd; --color-primary-faint:#f2f4ff; --color-info:#4F66F5; --color-info-bg:#f2f4ff; }
body[data-primary="teal"]    { --color-primary: #0FB5A8; --color-primary-dark:#0a8a80; --color-primary-light:#cdeeea; --color-primary-faint:#effbf9; --color-info:#0FB5A8; --color-info-bg:#effbf9; }
body[data-primary="cobalt"]  { --color-primary: #2F6FE3; --color-primary-dark:#1e54bf; --color-primary-light:#d4e2fa; --color-primary-faint:#eff5fe; --color-info:#2F6FE3; --color-info-bg:#eff5fe; }
body[data-primary="violet"]  { --color-primary: #7A5AE0; --color-primary-dark:#5e3fcc; --color-primary-light:#dfd6f7; --color-primary-faint:#f5f1fe; --color-info:#7A5AE0; --color-info-bg:#f5f1fe; }

/* Util */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sec-pad-x); }
.section { padding: var(--sec-pad-y) 0; }
.section.alt { background: var(--color-bg-alt); }
.section.dark { background: var(--color-dark); color: var(--color-fg-on-dark); }
.section-head { max-width: 720px; margin-bottom: calc(56px * var(--d)); }
.section-head.center { margin: 0 auto calc(56px * var(--d)); text-align: center; }
.label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-family: var(--font-primary);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--color-fg1);
  margin: 0 0 18px;
}
.section.dark h2 { color: #fff; }
.section h2 em { font-style: normal; color: var(--color-primary); }
.section-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-fg3);
  margin: 0;
}
.section.dark .section-sub { color: var(--color-fg-on-dark-sub); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  white-space: nowrap;
}
.btn i { font-size: 16px; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-dark { background: var(--color-dark); color: #fff; }
.btn-dark:hover { background: var(--color-dark-mid); }
.btn-outline { background: transparent; color: var(--color-fg1); border-color: var(--color-border-strong); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-on-dark { background: #fff; color: var(--color-dark); }
.btn-on-dark:hover { background: var(--color-bg-highlight); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-wa { background: var(--color-whatsapp); color: #fff; }
.btn-wa:hover { background: #1ebe5b; }
.btn-lg { padding: 16px 30px; font-size: 15px; }

/* ── Announcement bar ─────────────────────── */
.announce {
  background: var(--color-dark);
  color: #fff;
  padding: 11px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: 0.2px;
}
.announce .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(48,176,252,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(48,176,252,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(48,176,252,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,176,252,0); }
}
.announce a { color: var(--color-primary); font-weight: 600; }
.announce a:hover { text-decoration: underline; }

/* ── Nav ──────────────────────────────────── */
.nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sec-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  font-family: var(--font-logo);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-logo-brown);
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.nav-logo span { color: var(--color-primary); }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-fg2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-links a:hover { color: var(--color-primary); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-actions .btn { padding: 10px 20px; font-size: 13px; }

/* ── Hero ─────────────────────────────────── */
.hero {
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(48,176,252,0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 120%, rgba(48,176,252,0.12), transparent 60%),
    linear-gradient(180deg, var(--color-bg-highlight) 0%, #eaf5fc 100%);
  padding: calc(110px * var(--d)) 0 calc(120px * var(--d));
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-fg2);
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}
.hero-badge .dot {
  background: var(--color-primary);
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-badge .dot i { font-size: 12px; }
.hero h1 {
  font-family: var(--font-primary);
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: var(--color-fg1);
  margin: 0 0 22px;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: var(--color-primary);
  opacity: 0.18;
  border-radius: 4px;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-fg3);
  max-width: 560px;
  margin: 0 0 32px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-credentials {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-fg3);
  font-size: 12px;
  font-weight: 500;
}
.hero-credentials .sep { width: 1px; height: 16px; background: var(--color-border-strong); }
.hero-credentials .item { display: inline-flex; align-items: center; gap: 6px; }
.hero-credentials i { color: var(--color-primary); font-size: 16px; }
.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Hero visual carousel */
.hero-visual {
  position: relative;
}
.hero-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 560px;
  margin-left: auto;
}
.hero-card::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 56px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5f57 0 16px, transparent 16px 20px, #febc2e 20px 36px, transparent 36px 40px, #28c840 40px 56px);
  opacity: 0.55;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s, transform 0.6s;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* slide 1 — brand statement with orbiting modules */
.hs-brand {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0eef9 100%);
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-orbit-mini {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  min-height: 380px;
}
.hero-orbit-mini .ring-line {
  position: absolute;
  top: 50%; left: 50%;
  width: 85%;
  aspect-ratio: 1;
  border: 1px dashed var(--color-border-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero-orbit-mini .center {
  position: absolute;
  top: 50%; left: 50%;
  width: 98px; height: 98px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.hero-orbit-mini .center img { width: 49px; height: 49px; }
.hero-orbit-badge {
  position: absolute;
  width: 110px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  z-index: 2;
}
.hero-orbit-badge img { width: 40px; height: 40px; margin: 0 auto 6px; }
.hero-orbit-badge .name { font-size: 12px; font-weight: 700; color: var(--color-fg1); }
.hero-orbit-badge .short { font-size: 10px; color: var(--color-fg4); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.brand-tagline {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-fg2);
  text-align: center;
  letter-spacing: 0.5px;
}

/* slide 2 — GST InvoiceNow promo */
.hero-promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: #fff;
}
.hs-promo {
  background: linear-gradient(160deg, #0a2540 0%, #143b66 100%);
  color: #fff;
  padding: 40px 36px;
  justify-content: space-between;
}
.hs-promo .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(48,176,252,0.18);
  color: var(--color-primary);
  border: 1px solid rgba(48,176,252,0.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  align-self: flex-start;
}
.hs-promo h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 16px 0 12px;
}
.hs-promo p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0 0 24px;
}
.hs-promo .free-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hs-promo .free-box .val { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.hs-promo .free-box .ks { font-size: 11px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1.5px; }
.hs-promo .free-box .until { font-size: 11px; color: rgba(255,255,255,0.55); text-align: right; }

/* slide 3 — product preview */
.hs-prod {
  background: linear-gradient(180deg, #fafdff 0%, #eaf5fc 100%);
  padding: 32px;
  justify-content: space-between;
}
.hs-prod .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.hs-prod .topbar .title { font-size: 13px; font-weight: 700; color: var(--color-fg1); }
.hs-prod .topbar .sub { font-size: 11px; color: var(--color-fg4); }
.hs-prod .kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.hs-prod .kpi {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
}
.hs-prod .kpi .k { font-size: 10px; color: var(--color-fg4); text-transform: uppercase; letter-spacing: 1px; }
.hs-prod .kpi .v { font-size: 17px; font-weight: 700; color: var(--color-fg1); margin-top: 4px; }
.hs-prod .kpi .d { font-size: 11px; color: var(--color-success); margin-top: 3px; font-weight: 600; }
.hs-prod .chart {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  flex: 1;
}
.hs-prod .chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hs-prod .chart-title { font-size: 12px; font-weight: 600; color: var(--color-fg1); }
.hs-prod .chart-pill { font-size: 10px; color: var(--color-primary); background: var(--color-info-bg); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.hs-prod .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding-top: 8px; }
.hs-prod .chart-bars span {
  flex: 1;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 4px 4px 0 0;
  min-height: 8px;
}
.hs-prod .chart-bars span:nth-child(odd) { background: var(--color-primary-light); }

/* Slide 4 — medallions (only when variant=medallions) */
.hs-meds {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0eef9 100%);
  align-items: center;
  justify-content: center;
  padding: 30px;
  position: relative;
}
.hs-meds .center-iq {
  width: 90px; height: 90px;
  filter: drop-shadow(0 10px 24px rgba(10,37,64,0.18));
  z-index: 2;
}
.hs-meds .ring {
  position: absolute;
  width: 84%;
  aspect-ratio: 1;
  border: 1.5px dashed rgba(48,176,252,0.35);
  border-radius: 50%;
}
.hs-meds .ring img {
  position: absolute;
  width: 64px; height: 64px;
  filter: drop-shadow(0 6px 14px rgba(10,37,64,0.15));
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Carousel dots */
.hero-dots {
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.hero-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(10,37,64,0.25);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s;
}
.hero-dots button.active {
  background: var(--color-primary);
  width: 24px;
  border-radius: 999px;
}

/* ── Trust strip ─────────────────────────── */
.trust {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px var(--sec-pad-x);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  align-items: center;
}
.trust-item { text-align: center; position: relative; }
.trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: -16px;
  width: 1px; height: 40px;
  background: var(--color-border);
  transform: translateY(-50%);
}
.trust-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -1px;
  line-height: 1;
}
.trust-num-text {
  font-size: 18px;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
.trust-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: 2px;
  margin-left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--color-fg4);
  cursor: help;
  position: relative;
  transition: color 0.18s;
}
.trust-info:hover, .trust-info:focus-visible {
  color: var(--color-primary);
  outline: none;
}
.trust-info i { font-size: 16px; }
.trust-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s;
}
.trust-link i { font-size: 12px; opacity: 0.5; }
.trust-link:hover { color: var(--color-primary); text-decoration: underline; }
.trust-link:hover i { opacity: 1; }
.trust-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 280px;
  background: var(--color-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10,37,64,0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 50;
  text-align: left;
  pointer-events: none;
}
.trust-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-dark);
}
.trust-info:hover .trust-tooltip,
.trust-info:focus-visible .trust-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 720px) {
  .trust-tooltip { width: 240px; left: auto; right: -10px; transform: translateY(4px); }
  .trust-tooltip::after { left: auto; right: 14px; transform: none; }
  .trust-info:hover .trust-tooltip,
  .trust-info:focus-visible .trust-tooltip { transform: translateY(0); }
}
.trust-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-fg3);
  text-transform: none;
  letter-spacing: 0.3px;
  margin-top: 8px;
  line-height: 1.45;
}

/* ── Challenge ───────────────────────────── */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ch-card {
  border-radius: 20px;
  padding: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ch-card.old {
  background: #fafbfc;
  border: 1px solid var(--color-border);
}
.ch-card.new {
  background: linear-gradient(160deg, #0a2540 0%, #143b66 100%);
  color: #fff;
  border: 1px solid var(--color-dark);
  box-shadow: 0 20px 60px rgba(10,37,64,0.18);
}
.ch-card.new::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 180px; height: 180px;
  background: radial-gradient(circle at top right, rgba(48,176,252,0.35), transparent 70%);
  border-top-right-radius: 20px;
  pointer-events: none;
}
.ch-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
  align-self: flex-start;
}
.ch-card.old .ch-tag { color: var(--color-fg4); }
.ch-card.new .ch-tag { color: var(--color-primary); }
.ch-tag .pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 4px 10px;
}
.ch-card.old .ch-tag .pill { background: #ececec; border-color: transparent; color: var(--color-fg3); }
.ch-list { display: flex; flex-direction: column; gap: 18px; }
.ch-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
}
.ch-card.old li { color: var(--color-fg2); }
.ch-card.new li { color: rgba(255,255,255,0.92); }
.ch-list li .ic {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ch-list li .ic i { font-size: 16px; }
.ch-card.old .ic { background: rgba(198,40,40,0.08); color: var(--color-error); }
.ch-card.new .ic { background: rgba(48,176,252,0.18); color: var(--color-primary); }

/* ── Solutions tabs ───────────────────────── */
.solutions-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.sol-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-fg2);
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.2s;
}
.sol-tab .swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sol-tab:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.sol-tab.active {
  background: var(--color-dark);
  color: #fff;
  border-color: var(--color-dark);
}
.sol-tab.active .swatch { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }

.sol-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 360px;
  box-shadow: var(--shadow-sm);
}
.sol-panel-info { animation: fadeUp 0.4s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sol-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.sol-panel h3 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--color-fg1);
  margin: 0 0 16px;
  line-height: 1.15;
}
.sol-panel-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-fg3);
  margin: 0 0 24px;
}
.sol-panel-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.sol-panel-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-fg2);
}
.sol-panel-features li i { font-size: 18px; }
.sol-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.sol-panel-link:hover { gap: 10px; }

.sol-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1;
  max-width: 360px;
  margin: 0 auto;
}
.sol-visual::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--mod-tint, #f0f9ff);
  z-index: 0;
}
.sol-visual::after {
  content: "";
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px dashed var(--mod-color, var(--color-primary));
  opacity: 0.35;
  z-index: 0;
}
.sol-visual img {
  width: 64%;
  z-index: 2;
  filter: drop-shadow(0 14px 30px rgba(10,37,64,0.18));
}

/* Orbit layout for solutions (tweak) */
.sol-orbit {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1.2;
  min-height: 480px;
}
.sol-orbit .center {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.sol-orbit .center img { width: 80px; height: 80px; }
.sol-orbit .center .lbl {
  font-family: var(--font-logo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-dark);
  margin-top: 6px;
}
.sol-orbit .ring-line {
  position: absolute;
  top: 50%; left: 50%;
  width: 88%;
  aspect-ratio: 1;
  border: 1px dashed var(--color-border-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.sol-orbit-node {
  position: absolute;
  width: 130px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  z-index: 2;
}
.sol-orbit-node:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: var(--shadow-md); border-color: var(--mod-color, var(--color-primary)); }
.sol-orbit-node img { width: 44px; height: 44px; margin: 0 auto 6px; }
.sol-orbit-node .nm { font-size: 13px; font-weight: 700; color: var(--color-fg1); }
.sol-orbit-node .sw { font-size: 10px; color: var(--color-fg4); margin-top: 2px; text-transform: uppercase; letter-spacing: 1px; }

/* ── Products grid ───────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.prod-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prod-card:hover {
  border-color: var(--mod-color, var(--color-primary));
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,37,64,0.10);
}
.prod-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mod-color, var(--color-primary));
  opacity: 0;
  transition: opacity 0.25s;
}
.prod-card:hover::before { opacity: 1; }
.prod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.prod-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--mod-tint, var(--color-info-bg));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prod-icon i { font-size: 24px; color: var(--mod-color, var(--color-primary)); }
.prod-name { font-size: 15px; font-weight: 700; color: var(--color-fg1); line-height: 1.3; }
.prod-name small { display: block; font-size: 11px; color: var(--color-fg4); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.prod-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; }
.prod-features li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-fg3);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.prod-features li i { font-size: 8px; color: var(--mod-color, var(--color-primary)); margin-top: 7px; flex-shrink: 0; }
.prod-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mod-color, var(--color-primary));
  margin-top: auto;
}
.prod-link:hover { gap: 10px; }

/* ── Testimonials ────────────────────────── */
.test-carousel-wrap { position: relative; }
.test-track {
  display: flex;
  gap: 18px;
  transition: transform 0.5s ease;
}
.test-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px;
  flex: 0 0 calc(33.333% - 12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.test-stars { color: #eab308; font-size: 14px; letter-spacing: 2px; }
.test-quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-fg2);
  font-weight: 500;
  flex: 1;
  position: relative;
  padding-left: 28px;
}
.test-quote::before {
  content: "“";
  position: absolute;
  top: -16px; left: -4px;
  font-size: 64px;
  color: var(--color-primary);
  opacity: 0.25;
  font-family: Georgia, serif;
  line-height: 1;
}
.test-meta { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.test-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.test-author { font-size: 13px; font-weight: 700; color: var(--color-fg1); }
.test-author small { display: block; font-weight: 500; color: var(--color-fg4); font-size: 11px; margin-top: 1px; }

.test-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.test-controls .arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-fg2);
  font-family: inherit;
  transition: all 0.2s;
}
.test-controls .arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.test-dots { display: flex; gap: 6px; }
.test-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border-strong);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s;
}
.test-dots button.active { background: var(--color-primary); width: 24px; border-radius: 999px; }

/* ── Steps ───────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  counter-reset: stepc;
}
.step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}
.step-num.zero { background: #f0f0f0; color: var(--color-fg3); }
.step-card h4 { font-size: 16px; font-weight: 700; color: var(--color-fg1); margin: 0 0 8px; line-height: 1.3; }
.step-card p { font-size: 13px; line-height: 1.6; color: var(--color-fg3); margin: 0; }
.step-arrow {
  position: absolute;
  top: 50px;
  right: -14px;
  color: var(--color-border-strong);
  font-size: 24px;
  z-index: 2;
  background: var(--color-bg-alt);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card:last-child .step-arrow { display: none; }

/* ── Final CTA ────────────────────────────── */
.final-cta {
  background: #0a8fd6;
  color: #fff;
  text-align: center;
  padding: calc(110px * var(--d)) 0;
  position: relative;
  overflow: hidden;
}
.final-cta h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 16px;
  color: #fff;
}
.final-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.72);
  margin: 0 auto 36px;
  max-width: 560px;
}
.final-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-form {
  max-width: 680px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cta-content {
  display: none;
}
.contact-info {
  display: none;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-row.full {
  grid-template-columns: 1fr;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group.full {
  grid-column: 1 / -1;
}
.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.form-group input,
.form-group textarea {
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-family: inherit;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.5);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.form-disclaimer {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  .cta-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
}

/* ── Override .final-cta.contact to prevent conflicts with main.css ── */
.final-cta.contact {
  background: #0a8fd6 !important;
  background-image: none !important;
  color: #fff !important;
  padding: calc(110px * var(--d)) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.final-cta.contact::before {
  display: none !important;
  content: none !important;
}

.final-cta.contact .contact-form.php-email-form {
  max-width: 680px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.final-cta.contact .contact-form.php-email-form input[type=text],
.final-cta.contact .contact-form.php-email-form input[type=email],
.final-cta.contact .contact-form.php-email-form input[type=tel],
.final-cta.contact .contact-form.php-email-form textarea {
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  font-family: inherit !important;
  width: 100% !important;
  box-shadow: none !important;
  height: auto !important;
}

.final-cta.contact .contact-form.php-email-form input[type=text]::placeholder,
.final-cta.contact .contact-form.php-email-form input[type=email]::placeholder,
.final-cta.contact .contact-form.php-email-form input[type=tel]::placeholder,
.final-cta.contact .contact-form.php-email-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.final-cta.contact .contact-form.php-email-form input[type=text]:focus,
.final-cta.contact .contact-form.php-email-form input[type=email]:focus,
.final-cta.contact .contact-form.php-email-form input[type=tel]:focus,
.final-cta.contact .contact-form.php-email-form textarea:focus {
  background: rgba(255, 255, 255, 0.25) !important;
  border: none !important;
  outline: none !important;
}

.final-cta.contact .contact-form.php-email-form label {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

.final-cta.contact .contact-form.php-email-form button[type=submit] {
  background: #fff !important;
  color: #0a2540 !important;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 16px 30px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s !important;
  box-shadow: none !important;
  height: auto !important;
}

.final-cta.contact .contact-form.php-email-form button[type=submit]:hover {
  background: #f0f4f8 !important;
  color: #0a2540 !important;
}

.final-cta.contact .contact-form.php-email-form .form-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
}

/* ── Footer Disabled to match other pages ── */
/*
.footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.7);
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sec-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
}
.footer-creds { display: flex; gap: 18px; align-items: center; }
.footer-creds .item { display: inline-flex; gap: 6px; align-items: center; }
.footer-creds i { color: var(--color-primary); }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.2s;
}
.footer-social a:hover { color: #fff; border-color: var(--color-primary); background: rgba(48,176,252,0.15); }
*/

/* CTA strip mid-page */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
  gap: 12px;
  flex-wrap: wrap;
}

/* Scroll reveal ------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: none; }
}

/* Responsive ---------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-card { margin: 0 auto; max-width: 480px; }
  .sol-panel { grid-template-columns: 1fr; gap: 24px; padding: 36px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .test-card { flex: 0 0 calc(50% - 9px); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .step-arrow { display: none; }
}

@media (max-width: 720px) {
  :root { --sec-pad-x: 24px; }
  .nav-links { display: none; }
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .trust-item:not(:last-child)::after { display: none; }
  .trust-item:nth-child(3) { grid-column: 1 / -1; }
  .challenge-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .test-card { flex: 0 0 calc(100% - 0px); }
  .hero h1 { font-size: 38px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* --- Additional Responsive Overrides --- */
.sol-orbit-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 1024px) {
  .sol-orbit-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sol-orbit {
    max-width: 480px;
    min-height: 380px;
    margin: 0 auto;
  }
  .trust-inner {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
  }
  .trust-item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 720px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .trust-inner {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .steps-grid {
    grid-template-columns: 1fr !important;
  }
  .sol-orbit {
    max-width: 320px;
    min-height: 280px;
  }
  .sol-orbit-node {
    width: 90px;
    padding: 8px 4px;
  }
  .sol-orbit-node img {
    width: 28px;
    height: 28px;
  }
  .sol-orbit-node .nm {
    font-size: 11px;
  }
  .sol-orbit .center {
    width: 120px;
    height: 120px;
  }
  .sol-orbit .center img {
    width: 44px;
    height: 44px;
  }

  /* Mobile responsiveness overrides for Hero card & Orbit mini */
  .hero-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .hero-grid > div {
    min-width: 0 !important;
    width: 100% !important;
  }
  #hero-visual-mount {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .hero-card {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    height: 350px !important;
  }
  .hs-brand {
    padding: 16px !important;
    gap: 16px !important;
  }
  .hero-orbit-mini {
    min-height: 260px !important;
    max-width: 260px !important;
  }
  .hero-orbit-badge {
    width: 76px !important;
    padding: 6px 4px !important;
    border-radius: 8px !important;
  }
  .hero-orbit-badge img {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 2px !important;
  }
  .hero-orbit-badge .name {
    font-size: 9px !important;
  }
  .hero-orbit-badge .short {
    font-size: 8px !important;
    margin-top: 0px !important;
  }
  .hero-orbit-mini .center {
    width: 70px !important;
    height: 70px !important;
  }
  .hero-orbit-mini .center img {
    width: 36px !important;
    height: 36px !important;
  }
  .brand-tagline {
    font-size: 13px !important;
  }
  .hero-promo-img {
    object-fit: contain !important;
    object-position: center !important;
  }
}