/* ============================================================
   MMM — Maghreb Medical Maintenance 2026
   Clean Medical Authority · Plus Jakarta Sans + Inter
   Palette: #000428 · #004AAD · #00B4D8 · #90E0EF · #FFFFFF
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&family=Inter:wght@300;400;500;600&display=swap');

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

:root {
  --navy: #003B73;
  --royal: #00448A;
  --cyan: #00A6D6;
  --sky: #8FDFFF;
  --white:  #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7FAFC;
  --surface-3: #EEF5FA;

  --grad-dark: linear-gradient(135deg, #00448A 0%, #005FA3 100%);
  --grad-mid: linear-gradient(135deg, #00448A, #00A6D6);  
  --grad-light: linear-gradient(135deg, #EAF4FF, #FFFFFF);  
--grad-hero: linear-gradient(135deg, #FFFFFF 0%, #F3F9FF 50%, #EAF4FF 100%);
  --ink:        #000428;
  --ink-mid:    #1e3a5f;
  --ink-soft:   #4a6a8a;
  --ink-muted:  #8baabb;

  --surface:    #FFFFFF;
  --surface-2:  #f6fafd;
  --surface-3:  #eaf3f9;

  --border:     rgba(0,74,173,0.08);
  --border-md:  rgba(0,74,173,0.16);
  --border-cyan:rgba(0,180,216,0.20);

  --sh-sm: 0 2px 12px rgba(0,4,40,0.05);
  --sh-md: 0 8px 30px rgba(0,4,40,0.08), 0 0 0 1px rgba(0,74,173,0.04);
  --sh-lg: 0 20px 60px rgba(0,4,40,0.12);
  --sh-cyan:0 8px 28px rgba(0,180,216,0.18);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-2xl: 48px;
  --ease: all 0.24s cubic-bezier(0.4,0,0.2,1);

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--surface); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
img { max-width: 100%; height: auto; display: block; }

.skip-link { position: absolute; top:-100px; left:1rem; background:var(--navy); color:#fff; padding:.5rem 1rem; border-radius:var(--r-sm); font-size:.85rem; font-weight:600; z-index:999; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:1rem; }

/* ══════════════════════════════════
   HEADER
══════════════════════════════════ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:200;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-top    { background: rgba(255,255,255,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.site-header.is-scrolled { background: rgba(255,255,255,0.97); backdrop-filter:blur(20px); box-shadow: 0 1px 0 var(--border), var(--sh-sm); }

.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:2rem; }

.nav-logo img { height:54px; width:auto; transition: var(--ease); }
.site-header.is-top    .nav-logo img { filter: none; }
.site-header.is-scrolled .nav-logo img { filter: none; }

.nav-links { display:flex; align-items:center; gap:2.2rem; list-style:none; }
.nav-links a {
  text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:.88rem;
  letter-spacing:.01em; position:relative; transition:var(--ease);
}
.site-header.is-top    .nav-links a        { color:var(--ink-soft); }
.site-header.is-scrolled .nav-links a      { color:var(--ink-soft); }
.site-header.is-top    .nav-links a:hover  { color:var(--royal); }
.site-header.is-scrolled .nav-links a:hover,
.site-header.is-scrolled .nav-links a.active { color:var(--royal); }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--cyan); border-radius:2px; transition:width .22s ease; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }

.nav-cta {
  background: var(--grad-dark) !important; color:#fff !important;
  padding:.50rem 1.25rem; border-radius:40px;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  display:flex !important; align-items:center; gap:.4rem;
  transition:var(--ease) !important; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,4,40,0.20);
}
/* nav-cta keeps gradient dark on both states */
.nav-cta::after { display:none !important; }
.nav-cta:hover { opacity:.88; transform:translateY(-1px); }

.nav-hamburger { display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; padding:.4rem; transition:var(--ease); }
.site-header.is-top .nav-hamburger { color:var(--ink); }
.site-header.is-scrolled .nav-hamburger { color:var(--ink); }

/* ══════════════════════════════════
   HERO — full-bleed photo background
══════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 8rem 0 4rem;
  background: var(--royal);
}

/* Photo background and slider elements */
.hero-slides {
  display: flex;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  position: relative;
  display: flex; align-items: center;
  padding: 8rem 0 4rem;
  box-sizing: border-box;
}

.hero-slide-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--royal);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Strong blue left where text sits, fades right to show illustration */
.hero-slide-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,4,40,0.85) 0%,
    rgba(0,4,40,0.40) 40%,
    transparent 70%
  );
}

/* Subtle cyan glow top-right for brand color presence */
.hero-slide-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 65% at 95% 10%, rgba(0,180,216,0.18) 0%, transparent 65%);
  z-index: 1;
}

/* Sidebar navigation arrows for Hero Slider */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  z-index: 10;
}
.hero-arrow:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 180, 216, 0.5);
}
.hero-arrow.prev { left: 24px; }
.hero-arrow.next { right: 24px; }

/* Responsive adjustments for arrows */
@media (max-width: 768px) {
  .hero-arrow { width: 40px; height: 40px; font-size: 0.95rem; }
  .hero-arrow.prev { left: 12px; }
  .hero-arrow.next { right: 12px; }
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 55%;
  margin-left: 0;
}

.hero-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--sky);
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .38rem 1rem; border-radius: 40px; margin-bottom: 1.6rem;
  backdrop-filter: blur(8px);
}
.hero-pill i { color: var(--cyan); font-size: .7rem; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.035em; color: #fff;
  margin-bottom: 1rem;
}
.hero-title .hl {
  background: linear-gradient(90deg, #00448A, hsl(205, 69%, 57%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.1rem; color: rgba(255,255,255,0.68);
  max-width: 580px; line-height: 1.80;
  margin-bottom: 1.5rem; font-weight: 300;
}

.hero-btns { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.btn-solid {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--white); color: var(--navy);
  padding: .9rem 2rem; border-radius: 40px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); letter-spacing: .01em;
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.30); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; padding: .9rem 1.8rem; border-radius: 40px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  text-decoration: none; border: 1.5px solid rgba(255,255,255,0.35);
  transition: var(--ease); background: transparent;
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,180,216,0.08); }

/* Trust badges row */
.hero-badges {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-badge-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 500; color: rgba(255,255,255,0.60);
}
.hero-badge-item i { color: var(--cyan); font-size: .85rem; }

/* Remove the old two-column grid — no longer needed */
.hero-grid { display: block; }
.hero-visual, .hero-img-frame, .hero-card,
.hero-accent-circle, .hc-icon, .hc-text { display: none; }

/* ══════════════════════════════════
   STATS BAR
══════════════════════════════════ */
.stats-bar { background:var(--navy); padding:2.8rem 0; }
.stats-bar-inner { display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:2rem; }
.stat-item { text-align:center; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: #FFFFFF;
}
.stat-lbl { font-size:.8rem; color:rgba(255,255,255,0.42); margin-top:.35rem; font-weight:400; letter-spacing:.03em; }
.stat-sep { width:1px; height:44px; background:rgba(0,180,216,0.16); }

/* ══════════════════════════════════
   SECTION COMMONS
══════════════════════════════════ */
section { padding:6rem 0; }

.sec-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:.75rem;
}
.sec-tag::before { content:''; width:18px; height:2px; background:var(--cyan); border-radius:2px; }

.sec-title {
  font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.4rem); font-weight:800;
  line-height:1.15; letter-spacing:-.03em; color:var(--navy); margin-bottom:.75rem;
}
.sec-sub { font-size:1rem; color:var(--ink-soft); max-width:540px; line-height:1.78; font-weight:400; }
.sec-hd { margin-bottom:3.5rem; }
.sec-hd.center { text-align:center; }
.sec-hd.center .sec-sub { margin:0 auto; }

/* ══════════════════════════════════
   SERVICES
══════════════════════════════════ */
.services-sec { background:var(--surface-2); }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.svc-card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:2.2rem 1.8rem; position:relative; overflow:hidden; transition:var(--ease);
}
.svc-num { position:absolute; top:1.2rem; right:1.4rem; font-family:var(--font-display); font-size:3rem; font-weight:800; color:rgba(0,74,173,0.05); line-height:1; user-select:none; }
.svc-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--grad-mid); transform:scaleX(0); transform-origin:left; transition:transform .32s ease; }
.svc-card:hover { border-color:var(--border-cyan); box-shadow:var(--sh-cyan); transform:translateY(-4px); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon { width:50px; height:50px; border-radius:var(--r-md); background:rgba(0,74,173,0.07); display:flex; align-items:center; justify-content:center; color:var(--royal); font-size:1.25rem; margin-bottom:1.3rem; transition:var(--ease); }
.svc-card:hover .svc-icon { background:var(--grad-dark); color:#fff; }
.svc-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.55rem; }
.svc-card p { font-size:.86rem; color:var(--ink-soft); line-height:1.68; }

/* ══════════════════════════════════
   ABOUT
══════════════════════════════════ */
.about-sec { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:5rem; align-items:center; }
.about-vis { position:relative; }
.about-frame {
  border-radius:var(--r-2xl); background:var(--grad-dark);
  padding:4rem; display:flex; align-items:center; justify-content:center; min-height:360px;
  position:relative; overflow:hidden;
}
.about-frame::after { content:''; position:absolute; bottom:-50px; right:-50px; width:220px; height:220px; border-radius:50%; background:rgba(0,180,216,0.14); filter:blur(40px); }
.about-frame img { max-height:130px; object-fit:contain; filter:brightness(0) invert(1); opacity:.88; position:relative; z-index:1; }
.about-badge {
  position:absolute; bottom:-1.2rem; right:2rem;
  background:var(--white); border:1px solid var(--border-cyan); border-radius:var(--r-md);
  padding:.85rem 1.2rem; display:flex; align-items:center; gap:.7rem; box-shadow:var(--sh-md);
}
.about-badge i { color:var(--cyan); font-size:1.15rem; }
.about-badge strong { display:block; font-family:var(--font-display); font-size:.86rem; font-weight:700; color:var(--navy); }
.about-badge span { font-size:.72rem; color:var(--ink-muted); }
.about-text p { font-size:.98rem; color:var(--ink-soft); line-height:1.85; margin-bottom:1.2rem; }
.about-chips { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.8rem; }
.chip { display:flex; align-items:center; gap:.6rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:.72rem 1rem; font-size:.84rem; font-weight:500; color:var(--ink-mid); transition:var(--ease); }
.chip:hover { border-color:var(--border-cyan); }
.chip i { color:var(--cyan); width:16px; flex-shrink:0; }

/* ══════════════════════════════════
   TESTIMONIAL
══════════════════════════════════ */
.testi-sec {
  background:var(--navy); padding:5rem 0; position:relative; overflow:hidden;
}
.testi-sec::before, .testi-sec::after { content:''; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,180,216,0.3), transparent); }
.testi-sec::before { top:0; } .testi-sec::after { bottom:0; }
.testi-inner { max-width:820px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.testi-mark { font-size:5rem; line-height:.8; color:rgba(0,180,216,0.18); font-family:Georgia,serif; margin-bottom:.5rem; }
.testi-text { font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.45rem); font-weight:500; line-height:1.6; color:rgba(255,255,255,0.86); margin-bottom:2rem; letter-spacing:-.01em; }
.testi-author { display:flex; align-items:center; justify-content:center; gap:1rem; }
.testi-avatar { width:46px; height:46px; border-radius:50%; background:var(--grad-mid); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:#fff; }
.testi-meta strong { display:block; font-family:var(--font-display); font-size:.88rem; font-weight:700; color:#fff; }
.testi-meta span { font-size:.78rem; color:rgba(144,224,239,0.6); }

/* ══════════════════════════════════
   SUPPLIERS CAROUSEL
══════════════════════════════════ */
.suppliers-sec { background:var(--surface-2); padding:5rem 0; }

.carousel-wrap { position:relative; margin-top:2.5rem; }
.carousel-viewport { overflow:hidden; border-radius:var(--r-xl); }
.carousel-track { display:flex; transition:transform .5s cubic-bezier(0.4,0,0.2,1); }
.carousel-slide {
  flex:0 0 calc(33.333%); padding:.6rem .75rem;
  box-sizing:border-box;
}
.supplier-card {
  background:var(--white); border:2px solid var(--border-md);
  border-radius:var(--r-lg); height:100px;
  display:flex; align-items:center; justify-content:center;
  padding:1rem 1.5rem; transition:var(--ease);
}
.supplier-card:hover { border-color:var(--cyan); box-shadow:var(--sh-cyan); transform:translateY(-2px); }
.supplier-card img { max-width:130px; max-height:52px; object-fit:contain; filter:none; opacity:1; transition:var(--ease); }
.supplier-card:hover img { transform:scale(1.05); }
.supplier-card span { font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--royal); text-align:center; }

.carousel-btn {
  position:absolute; top:40%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--white); border:1px solid var(--border-md);
  box-shadow:var(--sh-md); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--royal); font-size:.9rem; transition:var(--ease); z-index:10;
}
.carousel-btn:hover { background:var(--royal); color:#fff; border-color:var(--royal); }
.carousel-btn.prev { left:-36px; }
.carousel-btn.next { right:-36px; }

.carousel-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--border-md); cursor:pointer; transition:var(--ease); border:none; padding:0; }
.carousel-dot.active { background:var(--cyan); width:22px; border-radius:4px; }

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.faq-sec { background:var(--white); }
.faq-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:5rem; align-items:start; }
.faq-list { display:flex; flex-direction:column; gap:.7rem; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:var(--ease); }
.faq-item.open { border-color:var(--border-cyan); box-shadow:var(--sh-sm); }
.faq-q { width:100%; background:none; border:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-display); font-size:.93rem; font-weight:600; color:var(--navy); text-align:left; transition:var(--ease); }
.faq-q:hover { color:var(--royal); }
.faq-q i { color:var(--cyan); font-size:.78rem; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-q i { transform:rotate(180deg); }
.faq-ans { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-ans-inner { padding:0 1.4rem 1.15rem; font-size:.88rem; color:var(--ink-soft); line-height:1.78; }
.faq-item.open .faq-ans { max-height:200px; }

.faq-cta-card { background:var(--grad-dark); border-radius:var(--r-xl); padding:3rem; color:#fff; position:relative; overflow:hidden; }
.faq-cta-card::after { content:''; position:absolute; bottom:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:rgba(0,180,216,0.10); pointer-events:none; }
.faq-cta-card h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; margin-bottom:.65rem; letter-spacing:-.02em; }
.faq-cta-card p { color:rgba(144,224,239,0.65); font-size:.9rem; line-height:1.72; margin-bottom:2rem; }
.btn-white { display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:var(--navy); padding:.8rem 1.8rem; border-radius:40px; font-family:var(--font-display); font-weight:700; font-size:.88rem; text-decoration:none; transition:var(--ease); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,0.18); }

/* ══════════════════════════════════
   CTA BAND
══════════════════════════════════ */
.cta-band {
  padding:5.5rem 0;
  background: radial-gradient(ellipse 80% 70% at 10% 50%, rgba(0,180,216,0.10), transparent), var(--grad-dark);
  position:relative; overflow:hidden;
}
.cta-band::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,180,216,0.35),transparent); }
.cta-band-inner { text-align:center; max-width:660px; margin:0 auto; }
.cta-tag { color: #fff; opacity: 0.75; }
.cta-band h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:800; color:#fff; margin-bottom:.9rem; letter-spacing:-.03em; line-height:1.15; }
.cta-band p { font-size:.98rem; color:rgba(255,255,255,0.50); line-height:1.75; margin-bottom:2.4rem; }
.cta-actions { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.btn-outline-light { display:inline-flex; align-items:center; gap:.5rem; color:#fff; padding:.85rem 1.6rem; border-radius:40px; font-family:var(--font-display); font-weight:700; font-size:.9rem; text-decoration:none; border:1.5px solid rgba(255,255,255,0.25); transition:var(--ease); }
.btn-outline-light:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,180,216,0.07); }

/* ══════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════ */
.page-hero {
  background:var(--grad-dark); padding:8.5rem 0 4rem; color:#fff; position:relative; overflow:hidden;
}
.page-hero-orb { 
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(75px); 
  animation: orbFloat 22s infinite ease-in-out;
}
.page-hero-orb.o1 { width:420px; height:420px; background:rgba(0,180,216,0.14); top:-100px; right:5%; }
.page-hero .sec-tag { color:var(--sky); }
.page-hero .sec-tag::before { background:var(--sky); }
.page-hero .sec-title { color:#fff; font-size:clamp(2rem,4vw,3rem); }
.page-hero .sec-sub { color:rgba(144,224,239,0.65); }

/* ══════════════════════════════════
   FILTER BAR
══════════════════════════════════ */
.filter-strip { background:var(--surface-2); padding:1.8rem 0 0; border-bottom:1px solid var(--border); }
.filter-bar { display:flex; flex-wrap:wrap; gap:.55rem; padding-bottom:1.5rem; }
.fchip {
  padding:.48rem 1.15rem; border-radius:40px; border:1.5px solid var(--border-md);
  background:var(--white); color:var(--ink-soft);
  font-family:var(--font-display); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:var(--ease); letter-spacing:.01em;
}
.fchip:hover { border-color:var(--cyan); color:var(--cyan); }
.fchip.active { background:var(--grad-dark); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(0,4,40,0.18); }

/* ══════════════════════════════════
   PRODUCTS GRID
══════════════════════════════════ */
.products-sec { padding:3.5rem 0 5rem; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1.4rem; }
.prod-card { 
  background: var(--white); 
  border: 1px solid var(--border); 
  border-radius: var(--r-lg); 
  overflow: hidden; 
  transition: var(--ease); 
  display: flex;
  flex-direction: column;
  height: 100%;
}
.prod-card:hover { 
  border-color: rgba(0, 180, 216, 0.4); 
  box-shadow: 0 12px 40px rgba(0, 74, 173, 0.08), 0 0 20px rgba(0, 180, 216, 0.22); 
  transform: translateY(-5px) scale(1.01); 
}
.prod-thumb { 
  background: linear-gradient(45deg,rgba(0,74,173,0.05),rgba(0,180,216,0.08)); 
  padding: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%;
  aspect-ratio: 1 / 1; 
  position: relative; 
  overflow: hidden;
}
.prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.prod-card:hover .prod-thumb img {
  transform: scale(1.05);
}
.prod-thumb i { 
  font-size: 3.5rem; 
  color: var(--royal); 
  opacity: .45; 
}
.prod-cat { 
  position: absolute; 
  bottom: .8rem; 
  right: .8rem; 
  background: rgba(255,255,255,0.93); 
  border: 1px solid var(--border-cyan); 
  color: var(--royal); 
  font-family: var(--font-display); 
  font-size: .64rem; 
  font-weight: 700; 
  letter-spacing: .07em; 
  text-transform: uppercase; 
  padding: .24rem .7rem; 
  border-radius: 40px; 
  z-index: 2;
}
.prod-body { 
  padding: 1rem 1.15rem 1.2rem; 
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
.prod-body h4 { 
  font-family: var(--font-display); 
  font-size: 1.05rem; 
  font-weight: 700; 
  color: var(--navy); 
  margin-bottom: 1.2rem; 
  letter-spacing: -.01em; 
  line-height: 1.3;
}
.prod-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
}
.btn-voir-produit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--royal);
  transition: all 0.2s ease;
}
.prod-card:hover .btn-voir-produit {
  color: var(--cyan);
  gap: 0.75rem;
}

/* ══════════════════════════════════
   CATEGORY GRID (products landing)
══════════════════════════════════ */
.category-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; }
.cat-card {
  background:#f8fbff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:2.2rem 1.6rem; text-align:center; cursor:pointer; transition:var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  text-decoration:none; color:var(--ink);
}
.cat-card:hover { border-color:var(--border-cyan); box-shadow:var(--sh-cyan); transform:translateY(-4px); }
.cat-card-icon {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,rgba(0,74,173,0.08),rgba(0,180,216,0.12));
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:var(--royal); transition:var(--ease);
}
.cat-card:hover .cat-card-icon { background:var(--grad-mid); color:#fff; }
.cat-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--navy); letter-spacing:-.01em; }
.cat-card span { font-size:.78rem; color:var(--ink-muted); font-weight:500; }

/* ══════════════════════════════════
   BREADCRUMB / BACK NAV
══════════════════════════════════ */
.breadcrumb-nav {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-family:var(--font-display); font-size:.85rem; font-weight:600;
  color:var(--ink-soft); margin-bottom:1.4rem;
}
.breadcrumb-nav a { color:var(--royal); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.breadcrumb-nav a:hover { color:var(--cyan); }
.breadcrumb-nav .sep { color:var(--ink-muted); }
.breadcrumb-nav .current { color:var(--ink-muted); }

/* ══════════════════════════════════
   PRODUCT DETAIL
══════════════════════════════════ */
.product-detail { display:grid; grid-template-columns:minmax(280px,400px) 1fr; gap:2.6rem; align-items:start; }
.pd-info { display:flex; flex-direction:column; }
.pd-media {
  background:linear-gradient(45deg,rgba(0,74,173,0.05),rgba(0,180,216,0.08));
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:2.5rem; display:flex; align-items:center; justify-content:center;
  min-height:320px;
}
.pd-media img { max-width:100%; max-height:340px; object-fit:contain; }
.pd-media i { font-size:5rem; color:var(--royal); opacity:.4; }
.pd-cat { display:inline-block; align-self:flex-start; background:rgba(0,180,216,0.10); color:var(--royal); font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .9rem; border-radius:40px; margin-bottom:1rem; }
.pd-title { font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--navy); letter-spacing:-.02em; margin-bottom:1.1rem; line-height:1.2; }
.pd-desc { font-size:.96rem; color:var(--ink-soft); line-height:1.8; margin-bottom:1.8rem; }
.pd-meta { display:flex; flex-direction:column; gap:.9rem; margin-bottom:2rem; }
.pd-meta-row { display:flex; align-items:center; gap:.7rem; font-size:.88rem; color:var(--ink); }
.pd-meta-row i { width:34px; height:34px; border-radius:10px; background:rgba(0,74,173,0.07); color:var(--royal); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.pd-supplier-row {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(0,74,173,0.04);
  padding: .5rem .8rem;
  border-radius: var(--r-md);
}
.pd-supplier-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--surface-2);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-md);
  padding: 0.9rem 1.4rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  width: fit-content;
  min-width: 280px;
  box-shadow: var(--sh-sm);
}
.pd-supplier-logo-wrap {
  width: 130px;
  height: 56px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}
.pd-supplier-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pd-supplier-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pd-supplier-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.pd-supplier-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.pd-meta-row strong { font-weight:700; color:var(--navy); }
.pd-actions { display:flex; gap:.9rem; flex-wrap:wrap; }
.btn-brochure {
  display:inline-flex; align-items:center; gap:.6rem; background:var(--grad-dark); color:#fff;
  padding:.85rem 1.8rem; border-radius:40px; font-family:var(--font-display); font-weight:700;
  font-size:.9rem; text-decoration:none; transition:var(--ease); box-shadow:0 6px 20px rgba(0,4,40,.14);
}
.btn-brochure:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,4,40,.20); }
.btn-brochure.disabled { background:var(--surface-3); color:var(--ink-muted); box-shadow:none; cursor:not-allowed; pointer-events:none; }

/* ══════════════════════════════════
   SIMILAR PRODUCTS CAROUSEL
══════════════════════════════════ */
.similar-sec { padding:4rem 0 5rem; border-top:1px solid var(--border); margin-top:1rem; }
.similar-sec .carousel-slide { flex:0 0 calc(33.333% - 0px); }
@media(max-width:768px){ .similar-sec .carousel-slide { flex:0 0 50%; } }
@media(max-width:480px){ .similar-sec .carousel-slide { flex:0 0 100%; } }

/* ══════════════════════════════════
   NEWS GRID
══════════════════════════════════ */
.news-sec { padding:4rem 0 5rem; }
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.5rem; }
.news-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:var(--ease); display:flex; flex-direction:column; }
.news-card:hover { border-color: rgba(0, 180, 216, 0.4); box-shadow: 0 12px 40px rgba(0, 74, 173, 0.08), 0 0 20px rgba(0, 180, 216, 0.22); transform: translateY(-5px) scale(1.01); }
.news-thumb { height:195px; background:var(--grad-mid); display:flex; align-items:center; justify-content:center; font-size:3rem; color:rgba(255,255,255,.7); position:relative; }
.news-badge { position:absolute; top:.9rem; left:.9rem; padding:.3rem .85rem; border-radius:40px; font-family:var(--font-display); font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.badge-event   { background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,.28); }
.badge-product { background:rgba(0,4,40,0.28); color:var(--sky); border:1px solid rgba(144,224,239,.28); }
.badge-partnership { background:rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,.22); }
.news-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.news-date { font-size:.75rem; color:var(--ink-muted); margin-bottom:.55rem; display:flex; align-items:center; gap:.3rem; }
.news-body h4 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; letter-spacing:-.01em; line-height:1.35; }
.news-body p { font-size:.85rem; color:var(--ink-soft); line-height:1.65; flex:1; }

/* ══════════════════════════════════
   CONTACT
══════════════════════════════════ */
.contact-sec { padding:5rem 0; background:var(--surface-2); }
.contact-card { display:grid; grid-template-columns:1fr 1.55fr; background:var(--white); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-md); }
.contact-left { background:var(--grad-dark); padding:3.5rem 2.5rem; color:#fff; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.contact-left::after { content:''; position:absolute; bottom:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:rgba(0,180,216,0.09); pointer-events:none; }
.contact-left h2 { font-family:var(--font-display); font-size:1.75rem; font-weight:800; margin-bottom:.65rem; letter-spacing:-.025em; }
.contact-left > p { color:rgba(144,224,239,.62); font-size:.88rem; line-height:1.72; margin-bottom:2.5rem; }
.c-items { display:flex; flex-direction:column; gap:1.4rem; flex:1; }
.c-item { display:flex; align-items:flex-start; gap:.95rem; }
.c-item-ico { width:38px; height:38px; flex-shrink:0; background:rgba(0,180,216,.12); border:1px solid rgba(0,180,216,.22); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--sky); font-size:.9rem; }
.c-item-txt strong { display:block; font-family:var(--font-display); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(144,224,239,.48); margin-bottom:.18rem; }
.c-item-txt span, .c-item-txt a { font-size:.88rem; color:rgba(255,255,255,.8); text-decoration:none; }
.c-item-txt a:hover { color:var(--sky); }
.soc-row { display:flex; gap:.65rem; margin-top:auto; padding-top:2rem; }
.soc-btn { width:36px; height:36px; background:rgba(0,180,216,.10); border:1px solid rgba(0,180,216,.20); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--sky); text-decoration:none; font-size:.95rem; transition:var(--ease); }
.soc-btn:hover { background:rgba(0,180,216,.25); color:#fff; }

.contact-right { padding:3.5rem 2.8rem; }
.contact-right h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--navy); margin-bottom:1.8rem; letter-spacing:-.01em; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f-field { margin-bottom:1rem; }
.f-field label { display:block; font-family:var(--font-display); font-size:.7rem; font-weight:700; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem; }
.f-field input, .f-field select, .f-field textarea { width:100%; padding:.75rem 1rem; border:1.5px solid var(--border-md); border-radius:var(--r-md); font-family:var(--font-body); font-size:.9rem; color:var(--ink); background:var(--white); transition:var(--ease); outline:none; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,180,216,.10); }
.f-field textarea { resize:vertical; min-height:105px; border-radius:var(--r-md); }
.btn-send { display:inline-flex; align-items:center; gap:.5rem; background:var(--grad-dark); color:#fff; padding:.85rem 2rem; border-radius:40px; border:none; font-family:var(--font-display); font-weight:700; font-size:.9rem; cursor:pointer; transition:var(--ease); width:100%; justify-content:center; letter-spacing:.01em; margin-top:.4rem; box-shadow:0 6px 20px rgba(0,4,40,.16); }
.btn-send:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,74,173,.26); }
.map-box { margin-top:1.8rem; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-cyan); }
.map-box iframe { width:100%; height:210px; border:none; display:block; }

/* ══════════════════════════════════
   AUTH
══════════════════════════════════ */
.auth-wrap { min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; background:var(--grad-hero); padding:7rem 1rem 3rem; }
.auth-box { background:var(--white); border:1px solid var(--border-cyan); border-radius:var(--r-2xl); padding:3rem 2.5rem; width:100%; max-width:440px; box-shadow:var(--sh-lg); }
.auth-logo { text-align:center; margin-bottom:1.8rem; }
.auth-logo img { height:52px; }
.auth-box h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--navy); text-align:center; margin-bottom:.4rem; letter-spacing:-.025em; }
.auth-sub { text-align:center; font-size:.86rem; color:var(--ink-muted); margin-bottom:1.8rem; }
.auth-notice { background:rgba(0,74,173,.04); border:1px solid var(--border-cyan); border-radius:var(--r-md); padding:.95rem 1.1rem; display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.8rem; }
.auth-notice i { color:var(--cyan); margin-top:.1rem; font-size:.9rem; }
.auth-notice p { font-size:.83rem; color:var(--ink-mid); line-height:1.58; }
.auth-links { display:flex; justify-content:space-between; margin-top:1.1rem; }
.auth-links a { font-size:.8rem; color:var(--royal); text-decoration:none; font-weight:500; }
.auth-links a:hover { color:var(--cyan); }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
.site-footer { background:var(--grad-dark); color:rgba(255, 255, 255, 0.828); padding:5rem 0 2.5rem; position:relative; overflow:hidden; }
.site-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
.ft-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(0,180,216,.10); }
.ft-brand img { height:99px; margin-bottom:1rem;filter:brightness(0) invert(1); opacity:.82; }
.ft-brand p { font-size:.84rem; line-height:1.78; max-width:270px; color:rgba(255, 255, 255, 0.884); }
.ft-cert { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.2rem; background:rgba(0,180,216,.09); border:1px solid rgba(0,180,216,.18); padding:.4rem .9rem; border-radius:40px; font-size:.74rem; font-weight:600; color:var(--sky); }
.ft-col h5 { font-family:var(--font-display); font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); margin-bottom:1.2rem; }
.ft-col ul { list-style:none; }
.ft-col ul li { margin-bottom:.6rem; }
.ft-col ul li a { text-decoration:none; font-size:.85rem; color:rgba(255, 255, 255, 0.864); transition:color .2s; }
.ft-col ul li a:hover { color:var(--sky); }
.ft-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; font-size:.78rem; color:rgba(255,255,255,.28); }

/* ══════════════════════════════════
   ANIMATIONS & UTILS
══════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.fade-up{opacity:0;animation:fadeUp .7s ease forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.30s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-md);border:none!important}

.empty-state{text-align:center;padding:4rem 2rem;color:var(--ink-muted)}
.empty-state i{font-size:2.5rem;margin-bottom:1rem;display:block;color:var(--cyan);opacity:.4}
.empty-state p{font-size:.93rem}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .faq-grid{grid-template-columns:1fr;gap:3rem}
  .hero { padding: 7rem 0 3rem; }
}
@media(max-width:768px){
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .contact-card{grid-template-columns:1fr;border-radius:var(--r-xl)}
  .services-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none;flex-direction:column;gap:1.2rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--border)}
  .nav-links.open{display:flex}
  .nav-hamburger{display:block}
  .nav-inner{flex-wrap:wrap;row-gap:0}
  .nav-links-wrap{width:100%}
  .site-header.is-top .nav-links{border-top-color:var(--border)}
  .ft-grid{grid-template-columns:1fr;gap:1.8rem}
  .f-row{grid-template-columns:1fr}
  section{padding:4rem 0}
  .about-chips{grid-template-columns:1fr}
  .stat-sep{display:none}
  .hero-card{display:none}
  .carousel-btn{display:none}
  .hero { padding: 6rem 0 3rem; }
  .product-detail{grid-template-columns:1fr;gap:1.8rem}
  .pd-media{min-height:240px;padding:1.6rem}
  .hero-inner { max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-slide-bg { background-image: none !important; background: linear-gradient(135deg, rgba(0, 4, 40, 0.95) 0%, rgba(0, 74, 173, 0.95) 100%) !important; }
  .hero-slide-bg::after { display: none !important; }
  .hero-slide-bg::before { display: none !important; }
  .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); margin-bottom: 1.2rem; }
  .hero-desc { font-size: 1rem; max-width: 100%; margin-bottom: 2rem; }
  .hero-btns { justify-content: center; width: 100%; }
  .hero-pill { margin-bottom: 1.2rem; }
  .hero-badges { justify-content: center; width: 100%; }
}
@media(max-width:480px){
  .services-grid{grid-template-columns:1fr}
  .hero-btns{flex-direction:column;align-items:center}
  .cta-actions{flex-direction:column}
  .container{padding:0 1.3rem}
  .news-grid,.products-grid{grid-template-columns:1fr}
  .carousel-slide{flex:0 0 100%}
}

/* ══════════════════════════════════
   HERO EVENT CARD FLOATING BANNER
   ══════════════════════════════════ */
.hero-event-card {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 1.6rem;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease;
}

@media(max-width: 768px) {
  .hero-event-card {
    top: auto;
    bottom: 24px;
    right: 24px;
    left: 24px;
    width: auto;
    transform: none;
  }
}

.hec-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.1rem;
  transition: var(--ease);
}
.hec-close:hover {
  color: var(--royal);
  transform: scale(1.1);
}

.hec-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.hec-badge.event { background: var(--surface-3); color: var(--royal); }
.hec-badge.promo { background: #ffebeb; color: #d9534f; }
.hec-badge.partnership { background: #eafaf1; color: #2ecc71; }
.hec-badge.news { background: #eef2f7; color: var(--ink-soft); }

#heroEventTitle {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.hec-date {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}

#heroEventDesc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  line-height: 1.45;
}

.hec-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--ease);
}
.hec-link:hover {
  color: var(--royal);
  transform: translateX(3px);
}

/* ══════════════════════════════════
   NEWS DETAIL VIEW
   ══════════════════════════════════ */
.news-detail-container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  margin-top: 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem;
  box-shadow: var(--sh-md);
}

@media (max-width: 992px) {
  .news-detail-container {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding: 1.5rem;
  }
}

.nd-media {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nd-main-img img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  object-fit: cover;
  max-height: 480px;
}

.nd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
}

.nd-gallery-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--ease);
  box-shadow: var(--sh-sm);
}

.nd-gallery-item img:hover {
  border-color: var(--cyan);
  transform: scale(1.04);
}

.nd-info {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.nd-badge {
  align-self: flex-start;
}

.nd-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
}

.nd-date {
  font-size: 0.9rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nd-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-mid);
  white-space: pre-wrap;
}

/* Ensure link cards behave like block cards visually */
a.news-card {
  color: inherit;
  text-decoration: none;
}
a.news-card:hover {
  color: inherit;
}

/* ══════════════════════════════════
   PRODUCT IMAGE LIGHTBOX
   ══════════════════════════════════ */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 4, 40, 0.95);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  transition: var(--ease);
  z-index: 2010;
}
.lightbox-close:hover {
  color: var(--cyan);
  transform: scale(1.1);
}
.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  background: #fff;
  padding: 0.5rem;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.lightbox-content img.zoomed {
  transform: scale(1.5);
  cursor: zoom-out;
}

/* ══════════════════════════════════
   MICRO-ANIMATIONS: ORBS & PARTICLES
   ══════════════════════════════════ */

/* Background Orb Slow Drift animation */
@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -60px) scale(1.08); }
  66% { transform: translate(-30px, 30px) scale(0.93); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Floating Science Particles container */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  opacity: 0;
  animation: floatParticle 16s infinite linear;
}

/* Individual particle positions and delay configs */
.particle.p1 {
  width: 130px;
  height: 130px;
  left: 8%;
  bottom: -40px;
  animation-duration: 11s;
  animation-delay: 0s;
}

.particle.p2 {
  width: 90px;
  height: 90px;
  left: 45%;
  bottom: -30px;
  animation-duration: 9s;
  animation-delay: 3s;
}

.particle.p3 {
  width: 100px;
  height: 100px;
  left: 78%;
  bottom: -35px;
  animation-duration: 12s;
  animation-delay: 5s;
}

.particle.p4 {
  width: 70px;
  height: 70px;
  left: 24%;
  bottom: -25px;
  animation-duration: 8s;
  animation-delay: 7s;
}

.particle.p5 {
  width: 110px;
  height: 110px;
  left: 62%;
  bottom: -35px;
  animation-duration: 10s;
  animation-delay: 1.5s;
}

.particle.p6 {
  width: 95px;
  height: 95px;
  left: 16%;
  bottom: -30px;
  animation-duration: 13s;
  animation-delay: 2s;
}

.particle.p7 {
  width: 80px;
  height: 80px;
  left: 34%;
  bottom: -25px;
  animation-duration: 9s;
  animation-delay: 4.5s;
}

.particle.p8 {
  width: 110px;
  height: 110px;
  left: 52%;
  bottom: -35px;
  animation-duration: 14s;
  animation-delay: 1s;
}

.particle.p9 {
  width: 75px;
  height: 75px;
  left: 90%;
  bottom: -40px;
  animation-duration: 10s;
  animation-delay: 3.5s;
}

/* Rising, rotating, and scaling keyframe path */
@keyframes floatParticle {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.85);
    opacity: 0;
  }
  15% {
    opacity: 0.65;
  }
  85% {
    opacity: 0.65;
  }
  100% {
    transform: translateY(-95vh) rotate(360deg) scale(1.15);
    opacity: 0;
  }
}

/* ══════════════════════════════════
   HEIGHT-BASED RESPONSIVENESS (Zoom & Short Screen fixes)
   ══════════════════════════════════ */
@media (max-height: 740px) {
  .hero-slide {
    align-items: flex-start;
    padding-top: 8.5rem;
  }
  .hero-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin-bottom: 1rem;
  }
  .hero-desc {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero-badges {
    display: none !important; /* Hide badges to save 80px vertical height and prevent header overlaps */
  }
  .hero-pill {
    margin-bottom: 1rem;
  }
}