/* ==========================================================================
   ABDALLAH TECH — Main Stylesheet (style.css)
   Point d'entrée : importe tous les modules dans l'ordre + styles de sections.
   Ordre d'import important : variables → reset → typography → layout →
   components → utilities → animations → responsive.
   ========================================================================== */

@import url('variables.css');
@import url('reset.css');
@import url('typography.css');
@import url('layout.css');
@import url('components.css');
@import url('utilities.css');
@import url('animations.css');
@import url('responsive.css');

/* ==========================================================================
   SECTION-SPECIFIC LAYOUTS
   ========================================================================== */

/* --- HERO --- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.hero-title { margin-block: var(--space-5) var(--space-5); }
.hero-subtitle { font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-6); max-width: 560px; }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); }
.hero-stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.hero-stats .hs { display: flex; flex-direction: column; }
.hero-stats .hs-value { font-size: 1.7rem; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; color: var(--text-primary); }
.hero-stats .hs-label { font-size: var(--fs-xs); color: var(--text-muted); }
.hero-visual { position: relative; }
.hero-visual svg { width: 100%; height: auto; overflow: visible; }
.hero-glow { position: absolute; width: 60%; height: 60%; top: 10%; left: 20%; z-index: -1; }

/* --- ABOUT --- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.about-visual svg { width: 100%; height: auto; }

/* --- SERVICES --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.services-grid .service-card:first-child { grid-column: span 1; }

/* --- WHY US --- */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,3vw,2.5rem); }

/* --- STATS --- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

/* --- SECTORS --- */
.sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* --- TESTIMONIALS --- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* --- CONTACT --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form-wrap {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Section background helpers positioning */
.hero .glow-orb.blue { width: 460px; height: 460px; top: -120px; right: -80px; }
.hero .glow-orb.indigo { width: 380px; height: 380px; bottom: -140px; left: -100px; }

.section .glow-orb { z-index: 0; }

/* Process wrapper */
.process-wrap { max-width: 760px; margin-inline: auto; }

/* About intro two-col */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
@media (max-width: 900px) { .about-intro { grid-template-columns: 1fr; } }

/* Partners section */
.partners-section { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.partners-label { text-align: center; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-5); }