/* ===== AVA2i • Final Ambient Dual-Neon Lighting (Subtle & Dynamic) ===== */
:root {
  --neon-1: #19b3ff;
  --neon-2: #ff6f91;
  --neon-3: #68d4ff;
  --ink: #0a0b10;
  --text: #eaf2ff;
  --muted: #48cae1;

  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.10);
  --glass-hover: rgba(255,255,255,.08);
  --glass-active: rgba(255,255,255,.12);
  --icon: #d7e5f7;
  --icon-hover: #f2f7ff;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  scroll-behavior: auto !important;
  overflow-x: hidden;
}

#vision, #clients, #partenaires, #contact, #partenairesship {
  scroll-margin-top: 80px;
}

/* === BACKGROUND LIGHTING === */
body {
  /* Ambient dual-color lighting, subtle and dynamic */
  background:
    radial-gradient(1000px 400px at 10% -10%, rgba(36, 182, 255, 0.977), transparent 40%),
    radial-gradient(1200px 500px at 90% -20%, rgba(255,111,145,.10), transparent 45%),
    radial-gradient(900px 500px at 50% 120%, rgba(107, 201, 247, 0.991), transparent 70%),
    var(--ink);
  background-size: 160% 160%;
  animation: bgShift 45s ease-in-out infinite;
  transition: background-position 0.4s ease;
}

/* gentle breathing motion for light */
@keyframes bgShift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%  { background-position: 5% 5%, 95% 5%, 50% 105%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
}

/* Optional: dynamic parallax movement based on mouse position */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 400px at var(--x, 50%) var(--y, 20%), rgba(25,179,255,.07), transparent 70%);
  mix-blend-mode: screen;
  transition: background-position 0.3s ease;
}

/* JS snippet to make it move slightly with cursor:
document.addEventListener('mousemove', e => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.body.style.setProperty('--x', `${x}%`);
  document.body.style.setProperty('--y', `${y}%`);
});
*/

/* === SPLASH INTRO === */
.splash {
  position: fixed;
  inset: 0;
  background: #000;
  display: grid;
  place-items: center;
  z-index: 100;
  animation: splashFade 2s ease forwards;
}

.splash-inner img {
  width: min(42vw, 240px);
  filter: drop-shadow(0 0 28px rgb(26, 176, 235));
}

@keyframes splashFade {
  0%   { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* ---- Custom cursor styles ---- */
.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none; /* never block clicks */
  z-index: 9999;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  opacity: 1;
}

.cursor-ring,
.cursor-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ring (slightly larger) */
.cursor-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.7);
  box-sizing: border-box;
  background: transparent;
}

/* small dot (actual pointer) */
.cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
}

/* hide native cursor on whole page when custom cursor active */
html.custom-cursor-enabled, body.custom-cursor-enabled {
  cursor: none;
}

/* hidden state (when leaving window or disabled) */
.custom-cursor.hidden { opacity: 0; pointer-events: none; }

/* Improve behaviour for interactive elements:
   when hovering form controls, show native cursor to preserve usability */
.show-native-cursor *:hover,
body.show-native-cursor *:hover,
input:focus, textarea:focus, button:focus, a:focus {
  cursor: auto !important;
}

/* Respect reduced motion preference - do not hide native cursor */
@media (prefers-reduced-motion: reduce) {
  html.custom-cursor-enabled, body.custom-cursor-enabled { cursor: auto; }
  .custom-cursor { display: none; }
}


/* === LOGO & PANEL BASE STRUCTURE === */
.tiny-logo {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 10;
}
.tiny-logo img {
  width: 56px;
  height: auto;
  display: block;
  opacity: .98;
}

/* Faint watermark logo center */
.watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url('../img/logoava2ifinal.png') no-repeat center;
  background-size: min(56vw, 520px);
  opacity: .05;
  filter: drop-shadow(0 0 24px rgba(104,212,255,.25));
}

/* === SLIM FLOATING PANEL === */
.panel {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,.04)),
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 60%);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  z-index: 10;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

.icons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--icon);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
}

.icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(25,179,255,0), 0 0 0 0 rgba(255,111,145,0);
  transition: opacity .25s ease, box-shadow .25s ease;
}

.icon:hover {
  transform: translateY(-1px) scale(1.06);
  color: var(--icon-hover);
  background: var(--glass-hover);
  border-color: var(--glass-active);
  box-shadow: 0 10px 28px rgba(25,179,255,.22);
}

.icon:hover::after {
  opacity: .9;
  box-shadow:
    0 0 24px 2px rgba(25,179,255,.28),
    0 0 36px 6px rgba(255,111,145,.16);
}

/* === REVEAL ANIMATION === */
.reveal {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  filter: blur(1px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* === COMPACT PANEL (MOBILE BEHAVIOR) === */
.bubble {
  position: fixed;
  left: 64px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.04) 60%);
  box-shadow: inset 0 0 24px rgba(255,255,255,.06), 0 12px 36px rgba(25,179,255,.22);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9;
}
.bubble img {
  width: 30px;
  height: auto;
  display: block;
  opacity: .96;
}

.panel.compact {
  opacity: 0;
  transform: translate(-10px, -50%);
  pointer-events: none;
}
.panel.compact + .bubble {
  display: flex;
}
.panel.compact + .bubble:hover {
  box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 16px 44px rgba(25,179,255,.28);
  transform: translate(-50%, -50%) scale(1.04);
}

.flyout {
  position: fixed;
  left: 112px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.flyout-inner {
  min-width: 220px;
  max-width: 280px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  padding: 12px 14px;
}
.flyout-title { margin: 0 0 4px 0; font-size: .95rem; font-weight: 700; letter-spacing: .2px; }
.flyout-desc { margin: 0; font-size: .85rem; color: var(--muted); }
.flyout.show { opacity: 1; transform: translateY(-50%) translateX(0); }

/* === HERO SECTION === */
.hero {
  min-height: 110vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 12vh 6vw;
  background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.06), transparent 60%);
}
.headline {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4.6vw, 54px);
  letter-spacing: .2px;
  line-height: 1.06;
  color: #f2f7ff;
  text-shadow: 0 0 24px rgba(104,212,255,.18);
}

.headline span {
  background: linear-gradient(
    90deg,
    var(--neon-1) 0%,          /* deep cyan */
    var(--neon-1) 35%,         /* fade range before white */
    #ffffff 48%,               /* crisp white core */
    #f2f2f2 52%,               /* subtle white halo */
    var(--neon-2) 65%,         /* fade into rose */
    var(--neon-2) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow:
    0 0 20px rgba(104,212,255,0.25),
    0 0 40px rgba(255,111,145,0.18);
  animation: flagGlow 6s ease-in-out infinite alternate;
}

@keyframes flagGlow {
  0% {
    background-position: 0% center;
    filter: drop-shadow(0 0 8px rgba(25,179,255,0.5))
            drop-shadow(0 0 16px rgba(255,255,255,0.2));
  }
  100% {
    background-position: 100% center;
    filter: drop-shadow(0 0 10px rgba(255,111,145,0.45))
            drop-shadow(0 0 20px rgba(255,255,255,0.25));
  }
}

.tricolor-text {
  background: linear-gradient(
    90deg,
    var(--neon-1) 0%,
    var(--neon-1) 35%,
    #ffffff 48%,
    #f2f2f2 52%,
    var(--neon-2) 65%,
    var(--neon-2) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow:
    0 0 20px rgba(104,212,255,0.25),
    0 0 40px rgba(255,111,145,0.18);
  animation: flagGlow 6s ease-in-out infinite alternate;
}

.sub {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  opacity: .9;
}

/* Splash intro 2s */
.splash{ position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:100; animation:splashFade 2s ease forwards; }
.splash-inner img{ width:min(42vw, 240px); filter: drop-shadow(0 0 28px rgba(104,212,255,.45)); }
@keyframes splashFade{ 0%{opacity:1} 75%{opacity:1} 100%{opacity:0; visibility:hidden} }

/* Top-left logo (bigger, clean) */
.tiny-logo{ position:fixed; top:14px; left:18px; z-index:10; }
.tiny-logo img{ width:56px; height:auto; display:block; opacity:.98; }

/* Watermark */
.watermark{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url('../img/logoava2ifinal.png') no-repeat center;
  background-size:min(56vw,520px);
  opacity:.05;
  filter: drop-shadow(0 0 24px rgba(104,212,255,.25));
}

/* Slim icon panel with reflective sheen */
.panel{
  position:fixed;
  left:24px; top:50%; transform:translateY(-50%);
  width:68px; padding:12px;
  border-radius:22px;
  background:
    linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,.04)),
    linear-gradient(120deg, rgba(255,255,255,.06), transparent 60%); /* subtle sheen */
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  z-index:10;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), background-position 4s ease-in-out;
  background-size: 200% 200%, 200% 200%;
  background-position: 0% 0%, 0% 0%;
}
.icons{ display:flex; flex-direction:column; gap:12px; }
.icon{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--icon);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative;
}
/* hover bloom */
.icon::after{
  content:""; position:absolute; inset:-4px;
  border-radius:16px; opacity:0;
  box-shadow: 0 0 0 0 rgba(25,179,255,.0), 0 0 0 0 rgba(255,111,145,.0);
  transition: opacity .25s ease, box-shadow .25s ease;
}
.icon:hover{
  transform: translateY(-1px) scale(1.06);
  color: var(--icon-hover);
  background: var(--glass-hover);
  border-color: var(--glass-active);
  box-shadow: 0 10px 28px rgba(25,179,255,.22);
}
.icon:hover::after{
  opacity:.9;
  box-shadow:
    0 0 24px 2px rgba(25,179,255,.28),
    0 0 36px 6px rgba(255,111,145,.16);
}

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(10px) scale(.98); filter: blur(1px); }
.reveal.visible{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity .6s ease, transform .6s ease, filter .6s ease; }

/* Bubble (compact state) */
.bubble{
  position:fixed;
  left:64px; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.04) 60%);
  box-shadow: inset 0 0 24px rgba(255,255,255,.06), 0 12px 36px rgba(25,179,255,.22);
  display:none; align-items:center; justify-content:center;
  z-index:9;
}
.bubble img{ width:30px; height:auto; display:block; opacity:.96; }

/* Morph behavior */
.panel.compact{ opacity:0; transform:translate(-10px, -50%); pointer-events:none; }
.panel.compact + .bubble{ display:flex; }
.panel.compact + .bubble:hover{ box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 16px 44px rgba(25,179,255,.28); transform:translate(-50%,-50%) scale(1.04); }

/* Flyout */
.flyout{
  position:fixed; left:112px; top:50%; transform:translateY(-50%) translateX(8px);
  opacity:0; pointer-events:none;
  z-index:9;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.flyout-inner{
  min-width: 220px; max-width: 280px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  padding: 12px 14px;
}
.flyout-title{ margin:0 0 4px 0; font-size:.95rem; font-weight:700; letter-spacing:.2px; }
.flyout-desc{ margin:0; font-size:.85rem; color:var(--muted); }
.flyout.show{ opacity:1; transform:translateY(-50%) translateX(0); }

/* Content */
.hero{ min-height:110vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:12vh 6vw; }
.headline{ margin:0; font-weight:800; font-size:clamp(26px,4.6vw,54px); letter-spacing:.2px; line-height:1.06; color:#f2f7ff; text-shadow:0 0 24px rgba(104,212,255,.18); }
.headline span{ background:linear-gradient(90deg,var(--neon-1),var(--neon-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.sub{ margin:0; color:var(--muted); font-weight:500; opacity:.9; }
.section{ min-height:80vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:8vh 6vw; text-align:center; color:#dfe9f7; }

/* Responsive */
@media (max-width: 900px){
  .panel{ left:16px; }
  .bubble{ left:56px; }
}
@media (max-width: 640px){
  .panel{ bottom:16px; top:auto; transform:none; left:50%; translate:-50% 0; }
  .panel.compact{ opacity:0; }
  .bubble{ left:50%; transform:translate(-50%,-50%); top: calc(100% - 72px); }
  .flyout{ display:none; }
}

@media (max-width: 600px) {
  .section h3 {
    font-size: 0.95rem !important;
    padding: 0 16px;
    line-height: 1.6 !important;
  }
}

:root {
  --neon-blue: #19b3ff;
  --neon-pink: #ff6f91;
  --bg: #05070a;
  --text: #eaf2ff;
  --muted: #9fb2cc;
  --neon-3: #19b3ff;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* === SPLASH SCREEN === */
.intro-screen {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  animation: fadeInOut 2s ease-in-out forwards;
}

.intro-screen img {
  width: 300px;
  height: auto;
  margin-bottom: 25px;
}

.intro-screen span {
  font-size: 3rem;
  letter-spacing: 1.3px;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--neon-3), #fff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(25,179,255,.55);
  animation: pulseText 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes pulseText {
  0%,100% { text-shadow: 0 0 14px rgba(25,179,255,.55); }
  50% { text-shadow: 0 0 28px rgba(25,179,255,.9); }
}

body:not(.ready) main, 
body:not(.ready) .widget-panel, 
body:not(.ready) .bg-logo,
body:not(.ready) .logo-fixed {
  opacity: 0;
  pointer-events: none;
}

body.ready main,
body.ready .widget-panel,
body.ready .bg-logo,
body.ready .logo-fixed {
  opacity: 1;
  transition: opacity 1.2s ease-in;
}

/* === FIXED LOGO SHORT === */
/* Logo inline dans un texte (petit format) */
.logo-short {
  width: 50px !important;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  position: static; /* important: pas fixed */
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* === FIXED LOGO TOP-LEFT === */
/* Desktop / default */
.logo-fixed {
  position: fixed;
  top: 20px;
  left: 25px;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  padding: env(safe-area-inset-top) env(safe-area-inset-left);
}

.logo-fixed img {
  width: 80px;
  height: auto;
}

.logo-fixed:hover {
  transform: scale(1.05);
}

/* 📱 Mobile-optimized version */
@media (max-width: 600px) {
  .logo-fixed {
    top: calc(10px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
  }

  .logo-fixed img {
    width: 58px;   /* smaller logo for mobile */
  }
}

/* Extra small screens (very small phones, older Androids) */
@media (max-width: 380px) {
  .logo-fixed img {
    width: 50px;
  }
}


/* === FIXED LOGO TOP-RIGHT === */
/* Desktop / default */
.logo-right {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  padding: 0;
}

.logo-right img {
  width: 70px;
  height: auto;
}

.logo-right:hover {
  transform: scale(1.05);
}

/* 📱 Mobile-optimized version */
@media (max-width: 600px) {
  .logo-right {
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right)); /* FIXED HERE */
  }

  .logo-right img {
    width: 58px;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .logo-right img {
    width: 50px;
  }
}

/* === LOGO DE FOND === */
.bg-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vw;
  max-width: 1000px;
  transform: translate(-50%, -50%) scale(1.05);
  background: url('img/logoava2ifinal.png') no-repeat center center;
  background-size: contain;
  opacity: 0.18;
  filter: blur(30px) brightness(1.6) drop-shadow(0 0 60px rgba(25,179,255,0.6));
  pointer-events: none;
  user-select: none;
  animation: glowPulse 8s ease-in-out infinite;
  z-index: 0;
}

@keyframes glowPulse {
  0%, 100% {
      opacity: 0.18;
      filter: blur(30px) brightness(1.6) drop-shadow(0 0 60px rgba(25,179,255,0.6));
      transform: translate(-50%, -50%) scale(1.05);
  }
  50% {
      opacity: 0.26;
      filter: blur(32px) brightness(2.1) drop-shadow(0 0 100px rgba(25,179,255,0.8));
      transform: translate(-50%, -50%) scale(1.08);
  }
}

/* === WIDGET LATÉRAL ARRONDI === */
.widget-panel {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
  background: rgba(240, 240, 245, 0.12);
  border-radius: 60px;
  padding: 32px 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.5s ease;
}

.widget-panel:hover {
  box-shadow:
    0 0 60px rgba(25,179,255,0.25),
    inset 0 0 30px rgba(25,179,255,0.12);
}


.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 15px;
}

/* === UPDATED AVA2i TEXT STYLE === */
.logo-text {
  font-size: 1.5rem;
  letter-spacing: 1.3px;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--neon-3), #fff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(25,179,255,.55);
  animation: pulseText 4s ease-in-out infinite;
}

.nav-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.nav-widget a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  opacity: 0.8;
  padding: 10px 14px;
  border-radius: 25px;
  transition: background 0.3s, opacity 0.3s, transform 0.3s;
  white-space: nowrap;
}

.nav-widget a:hover {
  background: rgba(25,179,255,0.15);
  opacity: 1;
  transform: translateX(4px);
}

/* === SECTIONS === */
section {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hero h2 {
  font-size: 3rem;
  background: linear-gradient(135deg, #bfe6ff, #ffffff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  color: var(--muted);
  font-size: 1rem;
}

.btn-primary {
  margin-top: 30px;
  background: linear-gradient(135deg, #4f9dff, var(--neon-blue));
  color: #001018;
  padding: 12px 34px;
  border: none;
  border-radius: 40px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.35s, box-shadow 0.35s;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(25,179,255,.25);
}

/* === CLIENT LOGO SLIDER === */
.clients-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 100px 0;
}

.clients-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: scrollClients 200s linear infinite;
}

.clients-track img {
  height: 60px;
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(25,179,255,0.35));
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.3s;
}

.clients-track img:hover {
  opacity: 1;
  transform: scale(1.1);
}

@keyframes scrollClients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* === CAROUSEL WIDGET === */
.carousel-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 60px;
  overflow: hidden;
  gap: 40px;
  position: relative;
}

.carousel-widget {
  width: 90%;
  max-width: 1400px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto !important;
  display: flex;
  -webkit-overflow-scrolling: touch;
  padding: 20px 10px;
}

.carousel-widget::-webkit-scrollbar {
  height: 6px;
}

.carousel-widget::-webkit-scrollbar-thumb {
  background: rgba(25,179,255,0.3);
  border-radius: 10px;
}
.carousel-widget::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

.carousel-track {
  display: flex;
  gap: 100px;
  padding: 10px 40px;
}

.carousel-card {
  flex: 0 0 460px;
  height: 360px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
      0 0 60px rgba(25,179,255,.12),
      inset 0 0 40px rgba(255,255,255,.03);
  padding: 50px 40px;
  text-align: center;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  backdrop-filter: blur(12px);
  cursor: grab;
  perspective: 1000px;
}

.carousel-card:active {
  cursor: grabbing;
}

.carousel-card:hover {
  transform: scale(1.07) rotateY(8deg);
  box-shadow: 0 25px 80px rgba(25,179,255,.25);
}

.carousel-card h3 {
  font-size: 2.4rem;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--neon-blue), #fff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}


.carousel-card p {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 90%;
}

/* === PARTNERS ANIMATION === */
.partners {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.partner-card {
  --glow: rgba(25,179,255,.35);
  min-width: 240px;
  padding: 28px 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 40px rgba(255,255,255,.03), 0 0 0 0 var(--glow);
  color: #dff1ff;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

.partner-card::before {
  content: "";
  position: absolute;
  inset: -120%;
  background: conic-gradient(from 0deg, transparent, rgba(25,179,255,.15), transparent 30%);
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.partner-card span {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
}

.partner-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 15px 50px rgba(25,179,255,.25);
  border-color: rgba(25,179,255,.5);
}

.snow { --glow: rgba(104,212,255,.35); }
.dbx { --glow: rgba(255,111,145,.35); }

/* === SECTION-SPECIFIC BACKLIGHTS === */
#vision::before,
#clients::before,
#partenaires::before,
#partenairesship::before,
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  background: none;
  mix-blend-mode: screen;
  filter: blur(120px);
}

#vision.visible::before {
  opacity: 1;
  background: radial-gradient(
    800px 400px at 90% 50%,
    rgba(81, 244, 200, 0.767),
    rgba(104,212,255,0.08),
    transparent 70%
  );
}

#clients.visible::before {
  opacity: 1;
  background: radial-gradient(
    800px 400px at 90% 50%,
    rgba(102, 219, 243, 0.813),
    rgba(104,212,255,0.10),
    transparent 70%
  );
}

#partenaires.visible::before {
  opacity: 1;
  background: radial-gradient(
    900px 450px at 60% 40%,
    rgba(148, 32, 198, 0.406),
    rgba(104,212,255,0.10),
    transparent 70%
  );
}

#partenairesship.visible::before {
  opacity: 1;
  background: radial-gradient(
    900px 450px at 60% 40%,
    rgba(148, 32, 198, 0.406),
    rgba(104,212,255,0.10),
    transparent 70%
  );
}


#contact.visible::before {
  opacity: 1;
  background: radial-gradient(
    900px 450px at 40% 50%,
    rgba(209, 76, 76, 0.15),
    rgba(223, 200, 230, 0.08),
    transparent 70%
  );
}

footer {
  text-align: center;
  padding: 40px 20px;
  color: #8aa4c3;
  border-top: 1px solid rgba(255,255,255,.05);
}


@media (max-width: 500px) {
  footer p {
    font-size: 0.8rem;
  }
}

/* === REVEAL EFFECT === */
.reveal { 
  opacity: 0; 
  transform: translateY(20px) scale(.98); 
  filter: blur(4px); 
  transition: opacity .9s ease, transform .9s ease, filter .9s ease; 
}
.reveal.visible { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
  filter: blur(0); 
}

@keyframes glowFloat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.95; }
}

#vision.visible::before,
#clients.visible::before,
#partenaires.visible::before,
#partenairesship.visible::before,
#contact.visible::before {
  animation: glowFloat 20s ease-in-out infinite;
}

.contact-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.contact-item {
  min-width: 220px;
  text-align: left;
}

.contact-item h4 {
  color: var(--neon-1);
  font-size: 1.1rem;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(25,179,255,0.3);
}

.contact-item p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

.contact-item a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.contact-item a:hover {
  color: var(--neon-2);
  text-shadow: 0 0 8px rgba(255,111,145,0.5);
}

/* Responsive stack on small screens */
@media (max-width: 768px) {
  .contact-grid {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
  }
  .contact-item {
    text-align: center;
  }
}

/* === Fix text visibility on secondary pages (like explorepage.html) === */
main, section, .hero, .section {
  position: relative;
  z-index: 2;
}

.section p, 
.section h1, 
.section h2, 
.section h3, 
.section span, 
.hero p, 
.hero h1, 
.hero span {
  color: var(--text);
  z-index: 3;
}

.watermark {
  z-index: 0 !important;
  opacity: 0.05 !important;
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  align-items: center;
  justify-items: center;
  margin: 20px 0;
}

.certifications-grid img {
  width: 100%;
  max-width: 700px; /* adjust image size */
  height: auto;
}

/* === WARM WAVE EFFECT — TOP SECTION === */
/* Main container */
#ambient-waves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px) brightness(1.35);
  mix-blend-mode: screen;
}

/* Every colour layer will fade in/out + breathe + vibrate */
.wave-set {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  /* 3 combined animations */
  animation:
    colorFade 8s ease-in-out infinite alternate,
    breathe 6s ease-in-out infinite alternate,
    vibrate 0.35s ease-in-out infinite;
}

/* PURPLE → layer 1 */
.wave-purple {
  --c1: rgba(180, 60, 255, 0.65);
  --c2: rgba(90, 60, 255, 0.35);
  animation-delay: 0s;
}

/* BLUE → layer 2 */
.wave-blue {
  --c1: rgba(60, 120, 255, 0.65);
  --c2: rgba(30, 160, 255, 0.35);
  animation-delay: -2.6s;
}

/* CYAN → layer 3 */
.wave-cyan {
  --c1: rgba(0, 200, 255, 0.65);
  --c2: rgba(0, 140, 255, 0.35);
  animation-delay: -5.3s;
}

/* Left & right waves for each set */
.wave-set::before,
.wave-set::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wave-set::before {
  background:
    radial-gradient(
      1800px 700px at calc(var(--wx, 50%) - 50%) calc(100% + 10%),
      var(--c1),
      var(--c2) 40%,
      transparent 75%
    );
}

.wave-set::after {
  background:
    radial-gradient(
      1800px 700px at calc(var(--wx, 50%) + 50%) calc(100% + 10%),
      var(--c1),
      var(--c2) 40%,
      transparent 75%
    );
}

/* 🌈 Faster, smoother colour crossfading between layers */
@keyframes colorFade {
  0%   { opacity: 0.00; }
  50%  { opacity: 1.00; }
  100% { opacity: 0.00; }
}

/* 🌬 Bigger breathing motion */
@keyframes breathe {
  0%   { transform: scale(1); }
  100% { transform: scale(1.07); }
}

/* ⚡ Micro-vibration for a living, electric feel */
@keyframes vibrate {
  0%   { transform: translate(0px, 0px); }
  33%  { transform: translate(-0.8px, 0.6px); }
  66%  { transform: translate(0.6px, -0.4px); }
  100% { transform: translate(0px, 0px); }
}