/* ==========================================================================
   inLogics — main.css
   Core styles: variables, reset, typography, layout utilities
   Brand: #00AFF0 (primary cyan), #1C2427 (dark), Cairo typeface
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors — from CHARTE.pdf */
  --color-primary:        #00AFF0;      /* inLogics cyan — primary brand */
  --color-primary-dark:   #0090CC;      /* cyan hover / pressed */
  --color-primary-light:  #33C3F5;      /* cyan lighter tint */
  --color-primary-10:     rgba(0, 175, 240, 0.10);
  --color-primary-20:     rgba(0, 175, 240, 0.20);

  /* Dark Palette */
  --color-dark:           #1C2427;      /* inLogics near-black dark */
  --color-dark-80:        rgba(28, 36, 39, 0.80);
  --color-dark-60:        rgba(28, 36, 39, 0.60);
  --color-dark-40:        rgba(28, 36, 39, 0.40);
  --color-dark-10:        rgba(28, 36, 39, 0.10);
  --color-dark-05:        rgba(28, 36, 39, 0.05);

  /* Neutral / Gray */
  --color-gray-700:       #303030;      /* deep gray from charte */
  --color-gray-500:       #828282;      /* mid gray from charte */
  --color-gray-300:       #B0B8BC;
  --color-gray-100:       #E8ECEE;
  --color-gray-50:        #F4F6F7;

  /* Surface Colors */
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F8FA;      /* very light tinted background */
  --color-border:         #DDE4E8;

  /* Hero / Dark Section */
  --color-hero-bg:        #0F1A1E;
  --color-hero-surface:   #1A2A2F;

  /* Section alternating */
  --color-section-light:  #FFFFFF;
  --color-section-alt:    #F4F8FA;

  /* Text */
  --color-text-primary:   #0D1D22;
  --color-text-secondary: #4A5C63;
  --color-text-muted:     #7A8F96;
  --color-text-light:     #FFFFFF;
  --color-text-on-dark:   rgba(255, 255, 255, 0.85);

  /* Status */
  --color-success:        #10B981;
  --color-error:          #EF4444;

  /* Typography */
  --font-heading:         'Cairo', sans-serif;
  --font-body:            'Plus Jakarta Sans', 'Cairo', sans-serif;

  /* Font Sizes */
  --text-xs:      0.75rem;     /* 12px */
  --text-sm:      0.875rem;    /* 14px */
  --text-base:    1rem;        /* 16px */
  --text-lg:      1.125rem;    /* 18px */
  --text-xl:      1.25rem;     /* 20px */
  --text-2xl:     1.5rem;      /* 24px */
  --text-3xl:     1.875rem;    /* 30px */
  --text-4xl:     2.25rem;     /* 36px */
  --text-5xl:     3rem;        /* 48px */
  --text-6xl:     3.75rem;     /* 60px */

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

  /* Line Heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter Spacing */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.12em;

  /* Spacing Scale */
  --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 Padding */
  --section-padding-y:    6rem;    /* 96px */
  --section-padding-y-sm: 4rem;    /* 64px — mobile */

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

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-cyan: 0 0 0 3px rgba(0, 175, 240, 0.25);

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max:    1200px;
  --container-wide:   1440px;
  --nav-height:       72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 8px);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

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

/* Skip to content (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-light);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--transition-fast);
}

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

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-6xl)); letter-spacing: var(--tracking-tight); }
h2 { font-size: clamp(1.875rem, 4vw, var(--text-5xl)); letter-spacing: var(--tracking-tight); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

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

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

ul, ol {
  list-style: none;
}

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

img {
  height: auto;
}

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

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

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

/* --------------------------------------------------------------------------
   Section Header Component
   -------------------------------------------------------------------------- */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-10);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.section-tag--light {
  background: rgba(0, 175, 240, 0.15);
  color: var(--color-primary-light);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Typography utility classes
   -------------------------------------------------------------------------- */
.body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.body-standard {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Reveal Animation (IntersectionObserver target)
   -------------------------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling cards */
.reveal-up:nth-child(2) { transition-delay: 0.08s; }
.reveal-up:nth-child(3) { transition-delay: 0.16s; }
.reveal-up:nth-child(4) { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: rgba(15, 26, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.nav-header.scrolled {
  background: rgba(15, 26, 30, 0.98);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.30);
}

.nav-container {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-logo-img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin-left: auto;
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-text-light);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
  color: var(--color-primary);
}

/* Nav CTA */
.nav-cta {
  flex-shrink: 0;
  margin-left: var(--space-4);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-light);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: rgba(12, 20, 24, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-4) var(--space-6) var(--space-8);
  z-index: 999;
  animation: slideDown 0.25s ease;
}

.mobile-menu[hidden] {
  display: none;
}

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

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav-link {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.80);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.mobile-nav-link:hover {
  color: var(--color-text-light);
  background: rgba(255, 255, 255, 0.06);
}

.mobile-cta {
  margin-top: var(--space-4);
  color: var(--color-primary) !important;
  background: var(--color-primary-10) !important;
  text-align: center;
  font-weight: var(--font-semibold);
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-hero-bg);
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* Decorative grid overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 175, 240, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 175, 240, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 40%, transparent 100%);
}

/* Ambient gradient */
.hero-gradient {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(0, 175, 240, 0.12) 0%, rgba(47, 128, 237, 0.06) 40%, transparent 70%);
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.hero-content {
  text-align: center;
  max-width: 800px;
}

.hero-surtitre {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-10);
  border: 1px solid rgba(0, 175, 240, 0.20);
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: var(--font-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-light);
  margin-bottom: var(--space-6);
}

.hero-title-accent {
  color: var(--color-primary);
  display: block;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, var(--text-lg));
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark);
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Stats bar */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  width: 100%;
  max-width: 860px;
  flex-wrap: wrap;
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-2) var(--space-8);
  flex: 1;
  min-width: 160px;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.stat-badge {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  align-self: center;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  animation: bounce 2s ease-in-out infinite;
  transition: border-color var(--transition-fast);
  z-index: 2;
}

.scroll-indicator:hover {
  border-color: var(--color-primary);
}

.scroll-arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg) translate(-2px, -2px);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}