/* =============================================================
   DESIGN TOKENS — Anas El-Abrak Personal Brand
   www.aelabrak.com
   Version: 1.0 | 21 March 2026
   Source of truth: All pages import this file. Edit here to
   update the entire site. Never hardcode values in page CSS.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500&display=swap');

:root {

  /* ─── COLOR PALETTE ─── */
  /* Core backgrounds */
  --color-bg:              #FFFFFF;   /* Page canvas — white-first */
  --color-bg-alt:          #F4F4F4;   /* Card / section backgrounds */
  --color-bg-dark:         #0A0A0A;   /* Dark CTA sections, footer */
  --color-bg-navy:         #0D2240;   /* Authority sections, callout blocks */
  --color-bg-navy-mid:     #1E3A5F;   /* Hover / lighter navy */

  /* Text */
  --color-text:            #0A0A0A;   /* Primary text — brand black */
  --color-text-secondary:  #1A1A1A;   /* Near-black for paragraphs */
  --color-text-muted:      #6B6B6B;   /* Captions, metadata, labels */
  --color-text-inverse:    #FFFFFF;   /* Text on dark/navy backgrounds */

  /* Accent */
  --color-accent:          #0D2240;   /* Navy — authority, borders, headings */
  --color-accent-mid:      #1E3A5F;   /* Navy hover states */
  --color-link:            #2563EB;   /* Electric blue — inline links */
  --color-highlight:       #F97316;   /* Amber — emphasis, pull quotes */

  /* CTAs */
  --color-cta-primary:     #25D366;   /* WhatsApp green — primary CTA */
  --color-cta-primary-hov: #1DA851;   /* WhatsApp green hover */
  --color-cta-secondary:   #0D2240;   /* Navy — secondary CTA */
  --color-cta-secondary-hov:#1E3A5F;  /* Secondary hover */
  --color-cta-text:        #FFFFFF;   /* Text on CTA buttons */

  /* Borders */
  --color-border:          #E5E5E5;   /* Dividers, card borders */
  --color-border-dark:     #2A2A2A;   /* Borders on dark backgrounds */
  --color-border-focus:    #2563EB;   /* Focus rings */


  /* ─── TYPOGRAPHY ─── */
  --font-heading:          'Space Grotesk', sans-serif;
  --font-body:             'Inter', sans-serif;

  /* Sizes */
  --text-hero:             clamp(2.5rem, 5.5vw, 4.5rem);  /* 40–72px fluid */
  --text-h1:               clamp(2rem, 4vw, 3rem);         /* 32–48px fluid */
  --text-h2:               clamp(1.5rem, 3vw, 2.25rem);   /* 24–36px fluid */
  --text-h3:               clamp(1.25rem, 2vw, 1.5rem);   /* 20–24px fluid */
  --text-body-lg:          1.125rem;                        /* 18px */
  --text-body:             1rem;                            /* 16px */
  --text-sm:               0.875rem;                        /* 14px */
  --text-caption:          0.8125rem;                       /* 13px */
  --text-label:            0.6875rem;                       /* 11px */

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

  /* Line heights */
  --lh-hero:               1.05;
  --lh-heading:            1.2;
  --lh-body:               1.7;
  --lh-caption:            1.5;
  --lh-tight:              1.35;


  /* ─── SPACING (8px base grid) ─── */
  --space-1:     0.25rem;   /* 4px */
  --space-2:     0.5rem;    /* 8px */
  --space-3:     0.75rem;   /* 12px */
  --space-4:     1rem;      /* 16px */
  --space-5:     1.25rem;   /* 20px */
  --space-6:     1.5rem;    /* 24px */
  --space-8:     2rem;      /* 32px */
  --space-10:    2.5rem;    /* 40px */
  --space-12:    3rem;      /* 48px */
  --space-16:    4rem;      /* 64px */
  --space-20:    5rem;      /* 80px */
  --space-24:    6rem;      /* 96px */
  --space-32:    8rem;      /* 128px */

  /* Section vertical rhythm */
  --section-py-mobile:    3rem;    /* 48px */
  --section-py-tablet:    4rem;    /* 64px */
  --section-py-desktop:   5rem;    /* 80px */


  /* ─── LAYOUT ─── */
  --max-width:             1200px;
  --max-width-text:        680px;   /* Optimal reading width */
  --max-width-narrow:      520px;   /* Tight copy blocks */
  --container-pad:         clamp(1.25rem, 5vw, 2rem);


  /* ─── BORDERS & RADIUS ─── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;


  /* ─── SHADOWS ─── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-navy:  0 4px 24px rgba(13, 34, 64, 0.20);


  /* ─── TRANSITIONS ─── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;


  /* ─── Z-INDEX SCALE ─── */
  --z-base:       0;
  --z-above:      10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-whatsapp:   999;


  /* ─── NAV ─── */
  --nav-height-mobile:    96px;
  --nav-height-desktop:   108px;

}


/* =============================================================
   BASE RESET & DEFAULTS
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

/* Page fade-in */
body {
  animation: pageFadeIn 0.3s ease-out;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

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

ul, ol {
  list-style: none;
}

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

/* Focus visible — keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-modal);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}


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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-py-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-py-tablet);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--section-py-desktop);
  }
}

/* Alternating section backgrounds */
.section-alt {
  background-color: var(--color-bg-alt);
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section-navy {
  background-color: var(--color-bg-navy);
  color: var(--color-text-inverse);
}

/* Section header block */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
  max-width: var(--max-width-text);
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.section-navy .eyebrow,
.section-dark .eyebrow {
  color: rgba(255,255,255,0.6);
}

.section-title {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
  max-width: var(--max-width-text);
}

.section-navy .section-title,
.section-dark .section-title {
  color: var(--color-text-inverse);
}

.section-navy .section-subtitle,
.section-dark .section-subtitle {
  color: rgba(255,255,255,0.7);
}


/* =============================================================
   BUTTON SYSTEM
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.8125rem 1.5rem;  /* 13px 24px — 44px total height */
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  white-space: nowrap;
  min-height: 44px;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

/* Primary — WhatsApp Green */
.btn-primary {
  background-color: var(--color-cta-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-cta-primary);
}

.btn-primary:hover {
  background-color: var(--color-cta-primary-hov);
  border-color: var(--color-cta-primary-hov);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}

/* Secondary — Navy outlined */
.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Secondary on dark/navy backgrounds */
.section-navy .btn-secondary,
.section-dark .btn-secondary {
  color: var(--color-text-inverse);
  border-color: rgba(255,255,255,0.5);
}

.section-navy .btn-secondary:hover,
.section-dark .btn-secondary:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: var(--color-text-inverse);
}

/* Ghost / text button */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-inline: var(--space-2);
}

.btn-ghost:hover {
  color: var(--color-accent);
  background: transparent;
  transform: none;
}

/* Button sizes */
.btn-sm {
  font-size: var(--text-sm);
  padding: 0.5rem 1rem;
  min-height: 36px;
}

.btn-lg {
  font-size: var(--text-body-lg);
  padding: 1rem 2rem;
  min-height: 52px;
}

/* Button icon */
.btn-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}


/* =============================================================
   CARD SYSTEM
   ============================================================= */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card-alt {
  background: var(--color-bg-alt);
  border-color: transparent;
}


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

.text-hero {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}

.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}

.text-h3 {
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-inverse {
  color: var(--color-text-inverse);
}

.text-navy {
  color: var(--color-accent);
}

.text-amber {
  color: var(--color-highlight);
}

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

.text-balance {
  text-wrap: balance;
}


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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Scroll-triggered fade-in — added by IntersectionObserver */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible,
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }


/* =============================================================
   INLINE LINK STYLES
   ============================================================= */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: gap var(--transition-base), color var(--transition-fast);
}

.link-arrow:hover {
  gap: var(--space-3);
  color: var(--color-accent-mid);
}

.link-arrow::after {
  content: '→';
}


/* =============================================================
   FORM ELEMENTS
   ============================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  width: 100%;
  min-height: 44px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(13, 34, 64, 0.08);
}

.form-input.valid {
  border-color: var(--color-cta-primary);
}

.form-input.error,
.form-textarea.error {
  border-color: #EF4444;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  font-size: var(--text-sm);
  color: #EF4444;
  animation: slideDown 0.2s ease-out;
}

.form-helper {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}


/* =============================================================
   DIVIDER
   ============================================================= */

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}


/* Stagger animation items */
[data-stagger-item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger-item].stagger-visible {
  opacity: 1;
  transform: translateY(0);
}