/* ════════════════════════════════════════════════════════════
   ENTAPPS LIMITED — DESIGN SYSTEM
   Design tokens, CSS custom properties, base styles
   ════════════════════════════════════════════════════════════ */

/* ─── Google Fonts Import ────────────────────────────────── */
/* (loaded via <link> in header for performance) */

/* ─── CSS Custom Properties (Design Tokens) ─────────────── */
:root {
  /* Brand Gradient */
  --color-brand-green:    #00B86B;
  --color-brand-teal:     #007CA8;
  --color-brand-navy:     #0B4F8C;
  --color-brand-accent:   #521A8A;

  /* Primary Gradient */
  --gradient-brand:       linear-gradient(135deg, #00B86B 0%, #007CA8 50%, #0B4F8C 100%);
  --gradient-brand-h:     linear-gradient(90deg,  #00B86B 0%, #007CA8 50%, #0B4F8C 100%);
  --gradient-brand-45:    linear-gradient(45deg,  #00B86B 0%, #007CA8 60%, #0B4F8C 100%);
  --gradient-accent:      linear-gradient(135deg, #521A8A 0%, #0B4F8C 100%);
  --gradient-dark:        linear-gradient(135deg, #0f1923 0%, #0B4F8C 100%);

  /* Text Colors */
  --color-text-primary:   #222222;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #718096;
  --color-text-light:     #A0AEC0;
  --color-text-white:     #FFFFFF;
  --color-text-brand:     #007CA8;

  /* Backgrounds */
  --color-bg-white:       #FFFFFF;
  --color-bg-surface:     #F5F5F5;
  --color-bg-muted:       #F8FAFC;
  --color-bg-dark:        #0f1923;
  --color-bg-navy:        #0B4F8C;

  /* Borders */
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E0;

  /* Status Colors */
  --color-success:        #00B86B;
  --color-warning:        #F6AD55;
  --color-danger:         #E53E3E;
  --color-info:           #007CA8;

  /* ── Typography ── */
  --font-primary:   'Manrope',  system-ui, -apple-system, sans-serif;
  --font-heading:   'Poppins',  system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid, clamped) */
  --text-xs:   clamp(0.70rem, 1.2vw,  0.75rem);
  --text-sm:   clamp(0.80rem, 1.4vw,  0.875rem);
  --text-base: clamp(0.93rem, 1.6vw,  1.00rem);
  --text-md:   clamp(1.00rem, 1.8vw,  1.125rem);
  --text-lg:   clamp(1.10rem, 2.0vw,  1.25rem);
  --text-xl:   clamp(1.20rem, 2.2vw,  1.50rem);
  --text-2xl:  clamp(1.50rem, 3.0vw,  2.00rem);
  --text-3xl:  clamp(1.75rem, 3.5vw,  2.50rem);
  --text-4xl:  clamp(2.00rem, 4.5vw,  3.25rem);
  --text-5xl:  clamp(2.50rem, 6.0vw,  4.50rem);
  --text-6xl:  clamp(3.00rem, 7.5vw,  6.00rem);

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.60;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  -0.01em;
  --ls-wide:    0.05em;
  --ls-wider:   0.10em;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.50rem;
  --space-3:  0.75rem;
  --space-4:  1.00rem;
  --space-5:  1.25rem;
  --space-6:  1.50rem;
  --space-8:  2.00rem;
  --space-10: 2.50rem;
  --space-12: 3.00rem;
  --space-16: 4.00rem;
  --space-20: 5.00rem;
  --space-24: 6.00rem;
  --space-32: 8.00rem;

  /* Section padding */
  --section-pad:     clamp(4rem, 8vw, 8rem);
  --section-pad-sm:  clamp(2.5rem, 5vw, 4rem);

  /* ── Border Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:   0 2px 8px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 32px 0 rgba(0,0,0,0.10), 0 4px 8px 0 rgba(0,0,0,0.06);
  --shadow-xl:   0 16px 48px 0 rgba(0,0,0,0.12), 0 8px 16px 0 rgba(0,0,0,0.08);
  --shadow-2xl:  0 24px 64px 0 rgba(0,0,0,0.16);
  --shadow-brand:0 8px 32px 0 rgba(0, 124, 168, 0.25);
  --shadow-dark: 0 16px 48px 0 rgba(11, 79, 140, 0.30);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Layers ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-text-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-brand-navy); }
a:focus-visible {
  outline: 2px solid var(--color-brand-teal);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ─── Typography Utilities ───────────────────────────────── */
.font-primary  { font-family: var(--font-primary) !important; }
.font-heading  { font-family: var(--font-heading) !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

h1, .h1 { font-size: var(--text-5xl); }
h2, .h2 { font-size: var(--text-4xl); }
h3, .h3 { font-size: var(--text-3xl); }
h4, .h4 { font-size: var(--text-2xl); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

.display-1 { font-size: var(--text-6xl); font-weight: var(--fw-extrabold); }
.display-2 { font-size: var(--text-5xl); font-weight: var(--fw-extrabold); }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-brand-teal);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gradient-brand-h);
  border-radius: var(--radius-full);
}

.section-headline {
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.section-headline--white { color: var(--color-text-white); }

.section-subheadline {
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 65ch;
}

.section-subheadline--white { color: rgba(255,255,255,0.80); }

/* ─── Button System ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand-teal);
  outline-offset: 3px;
}

/* Primary */
.btn-brand-primary {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.btn-brand-primary:hover {
  background: linear-gradient(135deg, #00a05d 0%, #006b92 50%, #0a4479 100%);
  color: #fff;
  box-shadow: 0 12px 40px rgba(0,124,168,0.35);
  transform: translateY(-1px);
}
.btn-brand-primary:active { transform: translateY(0); }

/* Outline Primary */
.btn-outline-primary {
  background: transparent;
  color: var(--color-brand-teal);
  border-color: var(--color-brand-teal);
}
.btn-outline-primary:hover {
  background: var(--color-brand-teal);
  color: #fff;
}

/* Ghost (dark bg) */
.btn-ghost-white {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.30);
  backdrop-filter: blur(8px);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border-color: rgba(255,255,255,0.50);
}

/* Accent */
.btn-accent {
  background: var(--gradient-accent);
  color: #fff;
  border-color: transparent;
}
.btn-accent:hover {
  background: linear-gradient(135deg, #461772 0%, #0a4479 100%);
  color: #fff;
}

/* Sizes */
.btn-sm  { padding: 0.55rem 1.25rem; font-size: var(--text-xs); }
.btn-lg  { padding: 1.00rem 2.25rem; font-size: var(--text-md); }
.btn-xl  { padding: 1.15rem 2.75rem; font-size: var(--text-lg); border-radius: var(--radius-md); }

/* ─── Section Spacing ────────────────────────────────────── */
.section { padding: var(--section-pad) 0; }
.section-sm { padding: var(--section-pad-sm) 0; }

.section--surface { background-color: var(--color-bg-surface); }
.section--muted   { background-color: var(--color-bg-muted); }
.section--dark    { background-color: var(--color-bg-dark); color: var(--color-text-white); }
.section--navy    { background-color: var(--color-bg-navy); color: var(--color-text-white); }
.section--gradient{ background: var(--gradient-brand); color: var(--color-text-white); }
.section--gradient-dark { background: var(--gradient-dark); color: var(--color-text-white); }

/* ─── Container Overrides ────────────────────────────────── */
.container,
.container-xl { max-width: 1280px; }

/* ─── Card System ────────────────────────────────────────── */
.card-enterprise {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.card-enterprise:hover {
  border-color: var(--color-brand-teal);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-enterprise::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, rgba(0,184,107,0.04), rgba(0,124,168,0.04));
  transition: opacity var(--transition-base);
}
.card-enterprise:hover::after { opacity: 1; }

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.card-icon--brand {
  background: linear-gradient(135deg, rgba(0,184,107,0.12), rgba(0,124,168,0.12));
  color: var(--color-brand-teal);
}

.card-icon--accent {
  background: linear-gradient(135deg, rgba(82,26,138,0.12), rgba(11,79,140,0.12));
  color: var(--color-brand-accent);
}

/* ─── Badge / Tag System ─────────────────────────────────── */
.badge-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.badge-success { background: rgba(0,184,107,0.12); color: #007a47; }
.badge-info    { background: rgba(0,124,168,0.12); color: #005880; }
.badge-navy    { background: rgba(11,79,140,0.12); color: var(--color-brand-navy); }
.badge-accent  { background: rgba(82,26,138,0.12); color: var(--color-brand-accent); }

/* ─── Dividers ───────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-8) 0;
}

.divider--brand {
  height: 2px;
  background: var(--gradient-brand-h);
}

/* ─── Accessibility ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-brand-navy);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  z-index: 9999;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ─── Selection Color ────────────────────────────────────── */
::selection {
  background: rgba(0,124,168,0.20);
  color: var(--color-text-primary);
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Utilities ──────────────────────────────────────────── */
.text-brand-green  { color: var(--color-brand-green)  !important; }
.text-brand-teal   { color: var(--color-brand-teal)   !important; }
.text-brand-navy   { color: var(--color-brand-navy)   !important; }
.text-brand-accent { color: var(--color-brand-accent) !important; }

.bg-brand-gradient  { background: var(--gradient-brand) !important; }
.bg-brand-dark      { background: var(--gradient-dark)  !important; }

.rounded-brand { border-radius: var(--radius-lg); }

.shadow-brand  { box-shadow: var(--shadow-brand); }
.shadow-dark   { box-shadow: var(--shadow-dark); }

/* Gradient border trick */
.border-gradient {
  position: relative;
  border-radius: var(--radius-lg);
}
.border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Shimmer loading effect */
.shimmer {
  background: linear-gradient(90deg,
    var(--color-bg-surface) 25%,
    var(--color-border) 50%,
    var(--color-bg-surface) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ─── Print ──────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .whatsapp-fab,
  .back-to-top,
  .announcement-bar { display: none !important; }
}