/* ═══════════════════════════════════════════════════
   B.E. Romdhane — Premium Civil Engineering Platform
   ═══════════════════════════════════════════════════ */
:root {
  --primary:        #0d2240;
  --primary-mid:    #1c355e;
  --primary-light:  #2c4a7c;
  --accent:         #f58220;
  --accent-hover:   #d97018;
  --accent-light:   rgba(245,130,32,.15);
  --green:          #10b981;
  --green-light:    rgba(16,185,129,.15);
  --blue-light:     rgba(44,74,124,.12);
  --text:           #1f2937;
  --text-muted:     #6b7280;
  --text-light:     #ccd6f6;
  --bg:             #ffffff;
  --bg-alt:         #f9fafb;
  --bg-dark:        #0a1628;
  --border:         #e5e7eb;
  --shadow-sm:      0 2px 8px rgba(0,0,0,.06);
  --shadow-md:      0 8px 24px rgba(0,0,0,.1);
  --shadow-lg:      0 20px 48px rgba(0,0,0,.14);
  --radius:         12px;
  --font:           'Outfit', sans-serif;
  --font2:          'Space Grotesk', sans-serif;
  --ease:           cubic-bezier(0.4,0,0.2,1);
  --transition:     all 0.3s var(--ease);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Utilities ── */
.container  { max-width:1200px; margin:0 auto; padding:0 2rem; }
.text-center{ text-align:center; }
.mt-2       { margin-top:2rem; }
.w-100      { width:100%; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #ff9a44 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section layout */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}
.section-header { text-align:center; margin-bottom:4rem; }
.section-title  { font-size:clamp(1.9rem,3.5vw,2.8rem); line-height:1.2; margin-bottom:1rem; color:var(--primary); }
.section-desc   { max-width:620px; margin:0 auto; color:var(--text-muted); font-size:1.05rem; }

/* Reveal animations */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}

/* ─────────────────────────────
   LOADER
───────────────────────────── */
#loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s;
}
#loader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; color:#fff; }
.loader-logo { font-size:3.5rem; color:var(--accent); margin-bottom:1.5rem;
  animation:spin 2s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.loader-bar {
  width:200px; height:3px; background:rgba(255,255,255,.15);
  border-radius:2px; margin:0 auto 1rem; overflow:hidden;
}
.loader-bar span {
  display:block; height:100%; background:var(--accent);
  border-radius:2px; animation:progress 1.8s ease forwards;
}
@keyframes progress { from{width:0} to{width:100%} }
.loader-inner p { font-size:1rem; letter-spacing:3px; color:var(--text-light); text-transform:uppercase; }

/* ─────────────────────────────
   NAVBAR
───────────────────────────── */
.navbar {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:1.4rem 0; background:transparent;
  transition:var(--transition);
}
.navbar.scrolled {
  background:rgba(13,34,64,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:1rem 0;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.logo {
  display:flex; align-items:center; gap:.6rem;
  color:#fff; text-decoration:none;
  font-size:1.4rem; font-weight:700; letter-spacing:.5px;
}
.logo i { color:var(--accent); font-size:1.6rem; }
.nav-links { display:flex; gap:1.8rem; align-items:center; list-style:none; }
.nav-link {
  color:rgba(255,255,255,.85); text-decoration:none;
  font-weight:500; font-size:.95rem; transition:var(--transition);
  position:relative; padding:.2rem 0;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--accent);
  transition:width .3s var(--ease);
}
.nav-link:hover { color:#fff; }
.nav-link:hover::after { width:100%; }
.nav-cta {
  background:var(--accent); color:var(--primary) !important;
  padding:.65rem 1.4rem; border-radius:6px; font-weight:700;
}
.nav-cta::after { display:none; }
.nav-cta:hover { background:var(--accent-hover); transform:translateY(-2px); }

/* Mobile hamburger */
.mobile-menu-btn {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.4rem;
}
.mobile-menu-btn span {
  display:block; width:26px; height:2px; background:#fff;
  border-radius:2px; transition:var(--transition);
}
.mobile-menu-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity:0; }
.mobile-menu-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────
   HERO
───────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#particles { position:absolute; inset:0; z-index:0; }
.hero-bg {
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  background-attachment:fixed;
}
.hero-overlay {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,
    rgba(13,34,64,.97) 0%,
    rgba(13,34,64,.82) 60%,
    rgba(28,53,94,.7) 100%);
}
.hero-content {
  position:relative; z-index:1;
  max-width:860px; text-align:center;
  padding:8rem 2rem 4rem;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(245,130,32,.15); color:var(--accent);
  border:1px solid rgba(245,130,32,.3);
  padding:.45rem 1.2rem; border-radius:50px;
  font-size:.85rem; font-weight:600; letter-spacing:1px;
  margin-bottom:2rem;
}
.hero-title {
  font-size:clamp(2.8rem,6vw,5.5rem);
  font-weight:900; color:#fff; line-height:1.08;
  margin-bottom:1.5rem; letter-spacing:-1px;
}
.hero-subtitle {
  font-size:clamp(1rem,2vw,1.25rem);
  color:rgba(204,214,246,.85); margin-bottom:3rem;
  max-width:680px; margin-left:auto; margin-right:auto;
  font-weight:300;
}
.hero-cta { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-bottom:4rem; }
.hero-scroll { display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.4); font-size:.8rem; letter-spacing:2px; text-transform:uppercase; }
.scroll-line { width:1px; height:50px; background:rgba(255,255,255,.15); position:relative; overflow:hidden; }
.scroll-line span { display:block; width:100%; height:50%; background:var(--accent); animation:scrollDown 1.6s ease infinite; }
@keyframes scrollDown { 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 2rem; border-radius:8px;
  text-decoration:none; font-weight:600; font-size:1rem;
  transition:var(--transition); cursor:pointer; border:none;
  font-family:var(--font);
}
.btn-primary {
  background:var(--accent); color:var(--primary);
  box-shadow:0 4px 24px rgba(245,130,32,.4);
}
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-3px); box-shadow:0 8px 32px rgba(245,130,32,.5); }
.btn-ghost {
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover { background:rgba(255,255,255,.2); transform:translateY(-3px); }
.btn-outline-dark {
  background:transparent; color:var(--primary);
  border:2px solid var(--primary);
}
.btn-outline-dark:hover { background:var(--primary); color:#fff; transform:translateY(-3px); }
.btn-whatsapp {
  background:#25D366; color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.35);
  font-size:1.05rem; padding:1rem 2rem; justify-content:center;
}
.btn-whatsapp:hover { background:#128C7E; transform:translateY(-3px); box-shadow:0 8px 32px rgba(37,211,102,.4); }

/* ─────────────────────────────
   LOGO — SVG transparent bg, white+gold content
───────────────────────────── */

/* Navbar – wide SVG, drop shadow for depth */
.logo-img {
  width: 230px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 14px rgba(255,209,0,.30));
  transition: var(--transition);
}
.navbar.scrolled .logo-img {
  width: 200px;
}

/* Loader – large splash, golden glow */
.loader-logo-img {
  width: min(480px, 88vw);
  height: auto;
  object-fit: contain;
  margin-bottom: 2.5rem;
  filter: drop-shadow(0 0 32px rgba(255,209,0,.45));
}

/* Footer – full-width brand logo */
.footer-logo {
  width: 300px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.8rem;
  filter: drop-shadow(0 2px 12px rgba(255,209,0,.25));
}

/* Contact – logo on dark card */
.contact-logo {
  width: 260px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.8rem;
  filter: drop-shadow(0 2px 12px rgba(255,209,0,.25));
}

/* ─────────────────────────────
   STATS
───────────────────────────── */
.stats-section { background:var(--primary); padding:5rem 0; }
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
}
.stat-card {
  text-align:center; padding:2.5rem 1.5rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  transition:var(--transition);
}
.stat-card:hover { background:rgba(255,255,255,.08); transform:translateY(-6px); }
.stat-icon { font-size:2rem; color:var(--accent); margin-bottom:1rem; }
.stat-value-row { display:flex; align-items:baseline; justify-content:center; gap:.15rem; }
.stat-number {
  font-size:3.5rem; font-weight:900;
  color:#fff; line-height:1;
}
.stat-word {
  font-size:2.2rem; font-weight:900;
  color:var(--accent); line-height:1;
  font-style:italic; letter-spacing:-.5px;
}
.stat-plus { font-size:2.2rem; font-weight:900; color:var(--accent); }
.stat-unit { font-size:1.1rem; font-weight:600; color:rgba(204,214,246,.6); display:block; margin:.2rem 0 .4rem; }
.stat-label { color:rgba(204,214,246,.55); font-size:.85rem; text-transform:uppercase; letter-spacing:1.5px; }

/* ─────────────────────────────
   ABOUT
───────────────────────────── */
.about-section { padding:9rem 0; background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.img-stack { position:relative; }
.img-main {
  width:100%; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); object-fit:cover;
  aspect-ratio:4/3;
}
.img-secondary {
  position:absolute; bottom:-2rem; right:-2rem;
  width:55%; border-radius:var(--radius);
  border:4px solid #fff; box-shadow:var(--shadow-lg);
  object-fit:cover; aspect-ratio:4/3;
}
.img-badge {
  position:absolute; top:-1.5rem; left:-1.5rem;
  background:var(--accent); color:var(--primary);
  padding:1rem 1.2rem; border-radius:var(--radius);
  display:flex; align-items:center; gap:.8rem;
  box-shadow:0 8px 32px rgba(245,130,32,.4);
}
.img-badge i { font-size:1.5rem; }
.img-badge span { font-weight:700; font-size:.95rem; line-height:1.3; }
.about-text .section-title { text-align:left; }
.about-text p { color:var(--text-muted); margin-bottom:1.2rem; font-size:1.02rem; }
.about-highlights { margin:2rem 0; display:flex; flex-direction:column; gap:.9rem; }
.highlight { display:flex; align-items:flex-start; gap:.8rem; }
.highlight i { color:var(--accent); margin-top:.15rem; flex-shrink:0; }
.highlight span { color:var(--text-muted); font-size:.98rem; }

/* ─────────────────────────────
   SERVICES
───────────────────────────── */
.services-section { padding:9rem 0; background:var(--bg-alt); }
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.8rem;
}
.service-card {
  position:relative; overflow:hidden;
  background:var(--bg); padding:2.5rem 2rem;
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); transition:var(--transition);
}
.service-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.service-card:hover .card-glow { opacity:1; }
.card-glow {
  position:absolute; inset:0; border-radius:var(--radius);
  opacity:0; transition:var(--transition);
  background:linear-gradient(135deg,rgba(245,130,32,.08) 0%,rgba(44,74,124,.06) 100%);
  pointer-events:none;
}
.service-icon {
  width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.5rem;
}
.icon-blue   { background:var(--blue-light);  color:var(--primary-light); }
.icon-orange { background:var(--accent-light); color:var(--accent); }
.icon-green  { background:var(--green-light);  color:var(--green); }
.service-card h3 { font-size:1.2rem; color:var(--primary); margin-bottom:.8rem; }
.service-card > p { color:var(--text-muted); font-size:.95rem; margin-bottom:1.2rem; }
.service-list { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.service-list li {
  color:var(--text-muted); font-size:.88rem;
  padding-left:1.1rem; position:relative;
}
.service-list li::before {
  content:'→'; position:absolute; left:0;
  color:var(--accent); font-weight:700;
}
.card-featured { border-color:var(--accent); }
.card-featured::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),#ff9a44);
}
.badge-featured {
  position:absolute; top:1.2rem; right:1.2rem;
  background:var(--accent); color:var(--primary);
  font-size:.75rem; font-weight:700; padding:.25rem .7rem;
  border-radius:50px; letter-spacing:.5px;
}

/* ─────────────────────────────
   SOFTWARE  (no % bars — professional cards)
───────────────────────────── */
.software-section { padding:9rem 0; background:var(--bg); }
.software-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(340px,1fr));
  gap:1.5rem;
}
.sw-card {
  display:flex; align-items:flex-start; gap:1.6rem;
  background:var(--bg-alt); border-radius:var(--radius);
  padding:2rem 2rem; border:1px solid var(--border);
  transition:var(--transition);
}
.sw-card:hover {
  transform:translateY(-5px); box-shadow:var(--shadow-md);
  border-color:var(--accent); background:var(--bg);
}
.sw-logo-box {
  width:64px; height:64px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.sw-logo-box span { font-weight:900; font-size:.95rem; letter-spacing:.5px; color:#fff; }
.sw-autocad { background:linear-gradient(135deg,#003d7a,#0057a8); }
.sw-revit   { background:linear-gradient(135deg,#0078d4,#005fa3); }
.sw-robot   { background:linear-gradient(135deg,#003087,#0041a8); }
.sw-tekla   { background:linear-gradient(135deg,#b01218,#e31e24); }
.sw-civil   { background:linear-gradient(135deg,#0d5b2d,#178040); }
.sw-safe    { background:linear-gradient(135deg,#1a2634,#2c3e50); }
.sw-info { flex:1; }
.sw-info h4 { font-size:1.05rem; color:var(--primary); margin-bottom:.5rem; font-weight:700; }
.sw-info > p { color:var(--text-muted); font-size:.9rem; line-height:1.55; margin-bottom:.9rem; }
.sw-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.sw-tags span {
  background:var(--blue-light); color:var(--primary-light);
  font-size:.75rem; font-weight:600; padding:.2rem .65rem;
  border-radius:50px; letter-spacing:.3px;
}


/* ─────────────────────────────
   PROJECTS / CAROUSEL
───────────────────────────── */
.projects-section { padding:9rem 0; background:var(--bg-alt); }
.filter-tabs { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-btn {
  background:var(--bg); border:1px solid var(--border);
  color:var(--text-muted); font-family:var(--font); font-weight:600;
  font-size:.9rem; padding:.55rem 1.4rem; border-radius:50px;
  cursor:pointer; transition:var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background:var(--accent); border-color:var(--accent);
  color:var(--primary); transform:translateY(-2px);
}

/* Carousel wrapper */
.carousel-wrapper {
  position:relative; display:flex; align-items:center; gap:1rem;
}
.carousel-track-outer {
  flex:1; overflow:hidden; border-radius:var(--radius);
}
.carousel-track {
  display:flex; gap:1.2rem;
  transition:transform .5s var(--ease);
  will-change:transform;
}
.car-slide {
  flex:0 0 calc((100% - 2.4rem) / 3);
  position:relative; border-radius:var(--radius);
  overflow:hidden; cursor:pointer; aspect-ratio:4/3;
  background:var(--primary); flex-shrink:0;
}
.car-slide img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease), filter .4s;
  filter:brightness(.88);
}
.car-slide:hover img { transform:scale(1.06); filter:brightness(.65); }
.car-slide-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:1.2rem 1rem .8rem;
  background:linear-gradient(to top, rgba(13,34,64,.9) 0%, transparent 100%);
  transform:translateY(8px); opacity:0; transition:var(--transition);
}
.car-slide:hover .car-slide-overlay { opacity:1; transform:translateY(0); }
.car-slide-overlay strong {
  display:block; color:#fff; font-size:.9rem; font-weight:600; margin-bottom:.35rem;
}
.car-slide-overlay span {
  font-size:.75rem; font-weight:600; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px;
  background:rgba(245,130,32,.2); padding:.15rem .55rem; border-radius:50px;
  border:1px solid rgba(245,130,32,.3);
}
.car-expand {
  position:absolute; top:.8rem; right:.8rem;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; opacity:0; transition:var(--transition); cursor:pointer;
  backdrop-filter:blur(4px);
}
.car-slide:hover .car-expand { opacity:1; }

/* Navigation buttons */
.car-btn {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:var(--bg); border:1px solid var(--border);
  color:var(--primary); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.car-btn:hover { background:var(--accent); border-color:var(--accent); color:var(--primary); transform:scale(1.08); }
.car-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }

/* Dots */
.carousel-dots {
  display:flex; gap:.5rem; justify-content:center; margin-top:1.8rem;
}
.car-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--border); border:none; cursor:pointer;
  transition:var(--transition); padding:0;
}
.car-dot.active { background:var(--accent); transform:scale(1.3); }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.94); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.lightbox.active { display:flex; }
.lb-content { position:relative; max-width:90vw; max-height:90vh; }
.lb-content img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:8px; display:block; }
.lb-caption {
  display:flex; justify-content:space-between; align-items:center;
  padding:.8rem 1rem 0; color:#fff;
}
.lb-caption span { font-weight:600; font-size:1rem; }
.lb-caption small { color:rgba(255,255,255,.5); font-size:.85rem; }
.lb-close, .lb-prev, .lb-next {
  position:fixed; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); color:#fff;
  cursor:pointer; transition:var(--transition); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.lb-close { top:1.5rem; right:1.5rem; width:48px; height:48px; font-size:1.2rem; }
.lb-prev, .lb-next { top:50%; width:52px; height:52px; font-size:1rem; transform:translateY(-50%); }
.lb-prev { left:1.5rem; }
.lb-next { right:1.5rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--accent); border-color:var(--accent); color:var(--primary); }

/* ─────────────────────────────
   FORMATION
───────────────────────────── */
.formation-section { padding:9rem 0; background:var(--bg); }
.formation-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:2rem;
}
.formation-card {
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius); padding:2.5rem 2rem;
  transition:var(--transition); position:relative; overflow:hidden;
}
.formation-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.form-num {
  font-size:4rem; font-weight:900; line-height:1;
  color:var(--border); position:absolute; top:1rem; right:1.5rem;
  font-family:var(--font2); letter-spacing:-2px;
}
.form-icon {
  width:52px; height:52px; background:var(--accent-light);
  color:var(--accent); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1.5rem;
}
.formation-card h3 { font-size:1.15rem; color:var(--primary); margin-bottom:.8rem; }
.formation-card > p { color:var(--text-muted); font-size:.92rem; margin-bottom:1.2rem; }
.form-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.form-tags span {
  background:var(--blue-light); color:var(--primary-light);
  font-size:.78rem; font-weight:600; padding:.2rem .7rem;
  border-radius:50px;
}
.form-link { color:var(--accent); font-weight:600; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.form-link:hover { gap:.8rem; }

/* ─────────────────────────────
   CONTACT
───────────────────────────── */
.contact-section { padding:9rem 0; background:var(--bg-alt); }
.contact-grid { display:grid; grid-template-columns:1fr 2fr; gap:4rem; }
.contact-info {
  background:var(--primary); border-radius:var(--radius);
  padding:3rem 2rem; display:flex; flex-direction:column; gap:1rem;
}
.contact-info h3 { font-size:1.6rem; color:var(--accent); margin-bottom:.5rem; }
.contact-info > p { color:var(--text-light); font-size:.97rem; margin-bottom:1.5rem; }
.info-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.info-icon {
  width:42px; height:42px; background:rgba(245,130,32,.15); color:var(--accent);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.info-item small { display:block; color:rgba(204,214,246,.5); font-size:.78rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:.2rem; }
.info-item span { color:#fff; font-size:.97rem; }
.social-links { display:flex; gap:.8rem; margin-top:auto; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.08); }
.social-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:1rem; transition:var(--transition);
  border:1px solid rgba(255,255,255,.1);
}
.social-btn:hover { background:var(--accent); color:var(--primary); border-color:var(--accent); transform:translateY(-3px); }
.contact-form {
  background:var(--bg); border-radius:var(--radius);
  padding:3rem; box-shadow:var(--shadow-md); border:1px solid var(--border);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-group { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.5rem; }
.form-group label { font-weight:600; font-size:.88rem; color:var(--text); letter-spacing:.3px; }
input, select, textarea {
  width:100%; padding:.85rem 1rem;
  border:1.5px solid var(--border); border-radius:8px;
  font-family:var(--font); font-size:.97rem;
  background:var(--bg-alt); color:var(--text);
  transition:var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(245,130,32,.15);
  background:var(--bg);
}
textarea { resize:vertical; min-height:130px; }
.file-upload label { cursor:pointer; display:flex; align-items:center; gap:.4rem; color:var(--text-muted); font-weight:600; }
.file-upload input {
  background:transparent; border:1.5px dashed var(--border);
  cursor:pointer; font-size:.88rem; margin-top:.3rem;
}
.file-upload small { color:var(--text-muted); font-size:.8rem; }

/* ─────────────────────────────
   FOOTER
───────────────────────────── */
.footer { background:var(--bg-dark); color:var(--text-light); }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:4rem; padding:6rem 2rem 4rem;
}
.footer-brand .logo { margin-bottom:1.5rem; }
.footer-brand > p { color:rgba(204,214,246,.5); font-size:.92rem; max-width:320px; line-height:1.7; margin-bottom:1rem; }
.founder { font-size:.82rem; color:rgba(204,214,246,.4); }
.footer-links h4 { color:#fff; margin-bottom:1.5rem; font-size:1rem; letter-spacing:.5px; }
.footer-links ul { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.footer-links li { display:flex; align-items:center; gap:.6rem; color:rgba(204,214,246,.45); font-size:.9rem; }
.footer-links a { color:rgba(204,214,246,.5); text-decoration:none; transition:var(--transition); font-size:.9rem; }
.footer-links a:hover { color:var(--accent); padding-left:.3rem; }
.footer-links li i { color:var(--accent); width:16px; flex-shrink:0; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2rem; border-top:1px solid rgba(255,255,255,.06);
  color:rgba(204,214,246,.3); font-size:.85rem;
}

/* Back to top */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:500;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:var(--primary);
  border:none; cursor:pointer; font-size:1rem;
  box-shadow:0 4px 20px rgba(245,130,32,.4);
  transition:var(--transition); display:none; align-items:center; justify-content:center;
}
.back-to-top.visible { display:flex; }
.back-to-top:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(245,130,32,.5); }

/* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */

/* iOS fix: background-attachment:fixed is broken on mobile WebKit */
@supports (-webkit-touch-callout: none) {
  .hero-bg { background-attachment: scroll; }
}

@media (max-width:1100px) {
  .footer-top { grid-template-columns:1fr 1fr; gap:3rem; }
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .about-section,
  .services-section,
  .software-section,
  .projects-section,
  .formation-section,
  .contact-section  { padding:6rem 0; }

  .about-grid        { grid-template-columns:1fr; }
  .img-secondary     { display:none; }
  .img-badge         { top:auto; left:1rem; bottom:1rem; }
  .contact-grid      { grid-template-columns:1fr; }
  .footer-bottom     { flex-direction:column; gap:.5rem; text-align:center; }
  .footer-logo       { width:220px; }
  .contact-logo      { width:200px; }
}

@media (max-width:768px) {
  /* Navbar / mobile menu */
  .nav-links {
    display:none; flex-direction:column;
    position:fixed; top:0; right:0;
    width:min(300px, 85vw); height:100vh;
    background:var(--primary);
    padding:6rem 2rem 3rem; gap:1.5rem;
    box-shadow:-8px 0 32px rgba(0,0,0,.4);
    overflow-y:auto;
  }
  .nav-links.open    { display:flex; }
  .mobile-menu-btn   { display:flex; }
  .logo-img          { width:150px; }
  .navbar.scrolled .logo-img { width:135px; }

  /* Sections */
  .about-section,
  .services-section,
  .software-section,
  .projects-section,
  .formation-section,
  .contact-section  { padding:5rem 0; }
  .section-header   { margin-bottom:2.5rem; }
  .container        { padding:0 1.2rem; }

  /* Hero */
  .hero-content     { padding:7rem 1.2rem 3rem; }
  .hero-bg          { background-attachment:scroll; }

  /* Stats */
  .stats-grid       { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .stat-card        { padding:1.8rem 1rem; }
  .stat-number      { font-size:2.6rem; }

  /* About */
  .about-images     { margin-bottom:2rem; }

  /* Services & Software */
  .services-grid    { grid-template-columns:1fr; }
  .software-grid    { grid-template-columns:1fr; }
  .sw-card          { flex-direction:row; align-items:center; }

  /* Formation */
  .formation-grid   { grid-template-columns:1fr; }

  /* Contact */
  .contact-info     { padding:2rem 1.5rem; }
  .contact-form     { padding:2rem 1.5rem; }
  .form-row         { grid-template-columns:1fr; }
  .footer-logo      { width:180px; }
  .contact-logo     { width:170px; }

  /* Footer */
  .footer-top       { grid-template-columns:1fr; gap:2.5rem; padding:4rem 1.2rem 2.5rem; }
  .footer-bottom    { flex-direction:column; gap:.5rem; text-align:center; padding:1.2rem; }

  /* CTA buttons */
  .hero-cta         { flex-direction:column; align-items:center; }
  .btn              { width:100%; max-width:320px; justify-content:center; }

  /* Carousel */
  .car-slide        { flex:0 0 calc((100% - 1.2rem) / 2); }
  .car-btn          { width:38px; height:38px; font-size:.8rem; }
  .lb-prev          { left:.5rem; }
  .lb-next          { right:.5rem; }

  /* Lightbox */
  .lb-content img   { max-width:95vw; max-height:70vh; }
}

@media (max-width:540px) {
  /* Hero */
  .hero-content     { padding:6rem 1rem 2.5rem; }

  /* Stats */
  .stats-grid       { grid-template-columns:1fr 1fr; gap:.8rem; }
  .stat-number      { font-size:2.2rem; }
  .stat-plus        { font-size:1.8rem; }

  /* Carousel: 1 slide at a time */
  .car-slide        { flex:0 0 100%; }
  .carousel-wrapper { gap:.5rem; }

  /* Filter tabs */
  .filter-tabs      { gap:.4rem; }
  .filter-btn       { font-size:.8rem; padding:.4rem .9rem; }

  /* Software cards: always row layout */
  .sw-card          { flex-direction:row; gap:1rem; padding:1.4rem 1rem; }
  .sw-logo-box      { width:50px; height:50px; }

  /* Buttons full width */
  .btn              { font-size:.95rem; padding:.8rem 1.4rem; max-width:100%; }

  /* Back to top – avoid overlap with WhatsApp */
  .back-to-top      { bottom:1.2rem; right:1.2rem; width:40px; height:40px; font-size:.9rem; }
}