:root {
  --wa-font-family: var(--inter-regular);
  --wa-subline: #103253;

  --wa-color-white: #ffffff;
  --wa-color-black: #111827;
  --wa-color-primary-900: #0f2f4e;
  --wa-color-primary-800: #144068;
  --wa-color-primary-700: #184e81;
  --wa-color-primary-600: #226db4;
  --wa-color-primary-500: #2f82d3;
  --wa-color-primary-300: #b8d3ea;
  --wa-color-primary-100: #e6eff7;

  --wa-color-text-700: #334155;
  --wa-color-text-600: #475569;
  --wa-color-text-500: #64748b;
  --wa-color-text-400: #959393;
  --wa-color-text-300: #9d9b9b;

  --wa-color-success-500: #01a407;
  --wa-color-success-100: #c8eec7;

  --wa-color-surface-hero: #dce7f2;
  --wa-color-surface-soft: #f4f8fc;
  --wa-color-card-border: #f3f4f6;

  --wa-space-1: 0.25rem;
  --wa-space-2: 0.5rem;
  --wa-space-3: 0.75rem;
  --wa-space-4: 1rem;
  --wa-space-5: 1.25rem;
  --wa-space-6: 1.5rem;
  --wa-space-8: 2rem;
  --wa-space-10: 2.5rem;
  --wa-space-12: 3rem;
  --wa-space-16: 4rem;
  --wa-space-20: 5rem;

  --wa-radius-sm: 0.5rem;
  --wa-radius-md: 0.75rem;
  --wa-radius-lg: 1.25rem;
  --wa-radius-xl: 2.5rem;
  --wa-radius-2xl: 5rem;

  --wa-font-12: 0.75rem;
  --wa-font-14: 0.875rem;
  --wa-font-15: 0.9375rem;
  --wa-font-16: 1rem;
  --wa-font-18: 1.125rem;
  --wa-font-20: 1.25rem;
  --wa-font-24: 1.5rem;
  --wa-font-30: 1.875rem;
  --wa-font-36: 2.25rem;
  --wa-font-48: 3rem;

  --wa-container-width: min(100%, 87.5rem);
  --wa-container-padding: clamp(1rem, 2.6vw, 4.375rem);
  --wa-hero-background: url(../../images/site/herosectionbg.71b44ab3ed0a06854865ce3761a340d7.png);
  --white-op: #ffffff1a;

  /* ── Fix: undefined variables used in product pages ── */
  --wa-text-primary:   var(--wa-color-black);
  --wa-text-secondary: var(--wa-color-text-600);

  /* ── Fix: font aliases referenced but never defined ── */
  --inter-rg: var(--inter-regular);
  --inter-md: var(--inter-medium);

  /* ── Extended color palette ── */
  --wa-color-navy:           #021835;
  --wa-color-link:           #2563eb;
  --wa-color-text-muted:     #5b5b6c;
  --wa-color-error:          #dc2626;
  --wa-color-surface-hover:  #f1f5fa;
  --wa-color-border:         #e5e7eb;
  --wa-color-border-blue:    #cddfff;
  --wa-color-border-input:   #d1d5db;

  /* ── Accent backgrounds (icon containers, note panels) ── */
  --wa-color-blue-50:    #dbeafe;
  --wa-color-blue-active: #ecf3ff;
  --wa-color-green-50:   #dcfce7;
  --wa-color-red-50:     #fee2e2;
  --wa-color-orange-50:  #ffedd5;
  --wa-color-purple-50:  #f3e8ff;
  --wa-color-yellow-50:  #fefce8;

  /* ── Card gradient tints (platform card backgrounds) ── */
  --wa-color-card-tint-green:  #f0fdf4;
  --wa-color-card-tint-orange: #fff7ed;
  --wa-color-card-tint-purple: #faf5ff;

  /* ── Code / terminal block colors ── */
  --wa-color-code-bg:           #111827;
  --wa-color-code-success:      #4ade80;
  --wa-color-code-error:        #f87171;
  --wa-color-code-warning:      #facc15;
  --wa-color-code-warning-text: #a16207;
  --wa-color-code-success-text: #15803d;
  --wa-color-code-info-text:    #1d4ed8;
  --wa-color-code-info-border:  #60a5fa;

  /* ── External brand colors ── */
  --wa-color-brand-linkedin: #0a66c2;
  --wa-color-brand-zoho:     #ef4444;
  --wa-color-brand-bigin:    #22c55e;

  /* ── Typography additions ── */
  --wa-font-body: 1.1rem;
  --wa-font-26:   1.625rem;

  /* ── Border radius additions ── */
  --wa-radius-xs:   0.35rem;
  --wa-radius-base: 1rem;
  --wa-radius-2lg:  1.5rem;
  --wa-radius-pill: 999px;
  --wa-radius-full: 50%;

  /* ── Box shadows ── */
  --wa-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.05);
  --wa-shadow-sm:      0 1px 3px rgba(140, 140, 140, 0.15);
  --wa-shadow-md:      0 0.25rem 0.25rem rgba(0, 0, 0, 0.15);
  --wa-shadow-card:    0.25rem 0 0.25rem rgba(191, 189, 189, 0.25),
                       0 0.25rem 0.25rem rgba(191, 189, 189, 0.25);
  --wa-shadow-popover: 0 0 0.25rem rgba(0, 0, 0, 0.25);

  /* ── Z-index scale ── */
  --wa-z-header:  30;
  --wa-z-popover: 40;
}

* {
  box-sizing: border-box;
  font-weight: normal;
  font-family: var(--inter-regular);
}

body {
  margin: 0;
  font-family: var(--wa-font-family);
  font-weight: normal;
  color: var(--wa-color-black);
  background: var(--wa-color-white);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.wa-container {
  width: var(--wa-container-width);
  margin-inline: auto;
  padding-inline: var(--wa-container-padding);
}

.wa-gradient-text {
  background: linear-gradient(90deg, var(--wa-color-primary-900) 0%, var(--wa-color-primary-800) 25%, var(--wa-color-primary-700) 50%, var(--wa-color-primary-600) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero__heading .wa-gradient-text,
.vision__title .wa-gradient-text {
  font-family: var(--inter-sbold);
}

.wa-section-heading {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, var(--wa-font-36));
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-family: var(--inter-medium);
}

.wa-button {
  border: 0;
  border-radius: var(--wa-radius-lg);
  min-height: 2.625rem;
  padding: 0.75rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wa-space-2);
  font-family: var(--wa-font-family);
  font-size: var(--wa-font-16);
  cursor: pointer;
  line-height: 1;
}

.wa-button-secondary {
  border: 1px solid var(--wa-color-primary-600);
  color: var(--wa-color-primary-600);
  background: var(--wa-color-white);
}

.wa-button-secondary:hover {
  color: var(--wa-color-primary-700);
  border: 1px solid var(--wa-color-primary-700);
}

.wa-button--primary {
  background: var(--wa-color-primary-600);
  color: var(--wa-color-white);
}

.wa-button--primary:hover {
  background: var(--wa-color-primary-700);
}

.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2);
  border: 1px solid var(--wa-color-success-100);
  border-radius: var(--wa-radius-lg);
  background: rgba(200, 238, 199, 0.24);
  padding: 0.625rem 1.375rem;
  color: var(--wa-color-success-500);
  font-size: var(--wa-font-12);
  letter-spacing: 0.03em;
}

.wa-pill__dot {
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  border-radius: 50%;
  background: var(--wa-color-success-500);
}

.wa-card {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-4);
  background: var(--wa-color-white);
  border-radius: var(--wa-radius-lg);
}

.wa-footer-link {
  color: var(--wa-color-text-700);
  font-size: var(--wa-font-15);
  line-height: 1.4;
  font-family: var(--inter-light);
}

.wa-footer-link:hover {
  color: var(--wa-color-primary-600);
}

.mission {
  background: url(../../images/site/mission.02c1c3807bd1e16d643614fbec33aed1.png);
  padding-block: 5.625rem;
  background-size: cover;
  background-repeat: no-repeat;
}

/* @media (max-width: 48rem) {
  .wa-button {
    width: 100%;
  }
} */