/* =====================================================
   GAFFAR GPS SOLUTIONS — GLOBAL CSS
   Brand colours extracted from logo (2026-04-19)
   Never use #2196F3 (Material Design) on this site.
   ===================================================== */

/* --- Brand Variables --- */
:root {
  /* Colours */
  --brand-blue:        #29ABE2;  /* Logo ribbon — primary CTAs, links */
  --brand-blue-dark:   #1E7DC8;  /* Logo globe deep — hover states */
  --brand-blue-light:  #5BC8F5;  /* Logo globe highlight — accents */
  --brand-black:       #2B2B2B;  /* Logo charcoal — headings, nav */
  --brand-white:       #FFFFFF;  /* Page background */
  --brand-off-white:   #F8F9FA;  /* Alternating section backgrounds */
  --brand-gray:        #6B7280;  /* Body text secondary */
  --brand-light-gray:  #E5E7EB;  /* Borders, dividers */
  --whatsapp-green:    #25D366;
  --whatsapp-dark:     #128C7E;

  /* Typography */
  --font-display:  'Bebas Neue', sans-serif;   /* H1, H2 */
  --font-body:     'Poppins', sans-serif;       /* Everything else */

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brand-black);
  background-color: var(--brand-white);
  overflow-x: hidden;
}

/* --- Font Faces — Locally Hosted --- */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-v24-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-v24-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Typography --- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400; /* Bebas Neue is inherently bold */
  line-height: 1.1;
  color: var(--brand-black);
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }

h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-black);
}

h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: var(--space-md);
  color: var(--brand-gray);
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

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

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

ul { list-style: none; }

/* --- Layout --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-4xl) 0;
}

.section--alt {
  background-color: var(--brand-off-white);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.section-header p {
  font-size: 1.125rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 48px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--brand-blue);
  color: var(--brand-white);
  border-color: var(--brand-blue);
}

.btn-primary:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: var(--brand-white);
}

.btn-outline {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-outline:hover {
  background: var(--brand-blue);
  color: var(--brand-white);
}

.btn-white {
  background: var(--brand-white);
  color: var(--brand-blue);
  border-color: var(--brand-white);
}

.btn-white:hover {
  background: var(--brand-off-white);
  color: var(--brand-blue-dark);
}

.btn-whatsapp {
  background: var(--whatsapp-green);
  color: var(--brand-white);
  border-color: var(--whatsapp-green);
}

.btn-whatsapp::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-whatsapp:hover {
  background: var(--whatsapp-dark);
  border-color: var(--whatsapp-dark);
  color: var(--brand-white);
}

.btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

/* --- Skip Link (Accessibility) --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-black);
  color: var(--brand-white);
  padding: var(--space-sm) var(--space-md);
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { top: 0; }

/* --- Utility --- */
.text-center { text-align: center; }
.text-blue   { color: var(--brand-blue); }
.text-white  { color: var(--brand-white); }

/* --- Scroll Fade-In Animations --- */
/* Elements receive .fade-in in HTML; JS adds .is-visible on intersection */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — add .fade-in-children to a grid/flex parent */
.fade-in-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-children.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: none; }
.fade-in-children.is-visible > *:nth-child(8) { transition-delay: 0.75s; opacity: 1; transform: none; }

/* --- Mobile sticky CTA bar clearance --- */
/* Prevent page content from hiding behind the 64px sticky bar */
@media (max-width: 768px) {
  body { padding-bottom: 64px; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}