/* ===================================================
   VDH CLEAN SOLUTION — SHARED DESIGN SYSTEM
   Colors: #00144D navy · #0047FF blue · #002FA7 grad · #F5B321 gold
   Fonts: Montserrat (headings) · Poppins (body)
   Style: Glassmorphism + Premium Dark + Blue Glow
   =================================================== */

/* ── TOKENS ── */
:root {
  --dark:    #00144D;
  --darker:  #000B2E;
  --blue:    #0047FF;
  --grad:    #002FA7;
  --gold:    #F5B321;
  --gold-l:  #FFC72C;
  --white:   #FFFFFF;
  --light:   #F4F6FA;
  --border:  #D9E0EA;

  --g-bg:    rgba(255,255,255,0.055);
  --g-bd:    rgba(255,255,255,0.10);
  --g-bl:    blur(20px);

  --t1: rgba(255,255,255,1.00);
  --t2: rgba(255,255,255,0.74);
  --t3: rgba(255,255,255,0.44);

  --sh-blue: 0 10px 32px rgba(0,71,255,.32);
  --sh-glow: 0 0 28px rgba(0,71,255,.22), 0 8px 32px rgba(0,71,255,.18);
  --sh-gold: 0 8px 28px rgba(245,179,33,.48);
  --sh-card: 0 10px 30px rgba(0,0,0,.32);

  --btn-grad: linear-gradient(90deg, var(--darker) 0%, var(--blue) 100%);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-x: 32px;

  --tf: 180ms ease;
  --tm: 250ms ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--dark);
  color: var(--t1);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 800; line-height: 1.15;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── BACKGROUND DEPTH ── */
.page-blobs {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.b1 { width:640px; height:640px; top:-180px; left:-120px;  background:var(--blue); opacity:.10; }
.b2 { width:520px; height:520px; bottom:-120px; right:-80px; background:var(--grad); opacity:.09; }
.b3 { width:280px; height:280px; top:42%; left:45%;         background:var(--gold); opacity:.04; }

.page { position: relative; z-index: 1; }

/* ── GLASS UTIL ── */
.glass {
  background: var(--g-bg);
  backdrop-filter: var(--g-bl);
  -webkit-backdrop-filter: var(--g-bl);
  border: 1px solid var(--g-bd);
  box-shadow: var(--sh-glow);
}

/* ── NAVBAR ── */
.navbar {
  position: sticky; top: 14px; z-index: 50;
  margin: 0 16px;
  padding: 0 22px;
  height: 72px;
  border-radius: var(--r-m);
  background: rgba(0,15,60,.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-img {
  height: 62px; width: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0,71,255,.35));
  transition: filter var(--tf);
}
.nav-logo:hover .nav-logo-img { filter: drop-shadow(0 4px 18px rgba(0,71,255,.5)); }
.nav-brand { display:flex; flex-direction:column; line-height:1; }
.nav-brand-top {
  font-family:'Montserrat',sans-serif; font-size:18px; font-weight:900;
  color:#fff; letter-spacing:2px; text-transform:uppercase; line-height:1.1;
}
.nav-brand-top em { font-style:normal; color:#fff; }
.nav-brand-bot {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600;
  color:rgba(255,255,255,.72); letter-spacing:3px; text-transform:uppercase;
}
/* legacy badge hidden */
.nav-badge, .nav-name { display: none; }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  display:flex; align-items:center; gap:5px;
  color:var(--t2); font-size:13px; font-weight:500;
  padding:7px 12px; border-radius:9px; transition:all var(--tf);
}
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-links a.active { color:var(--gold); background:rgba(245,167,0,.12); }
.nav-links a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.nav-cta {
  background:var(--gold) !important; color:var(--dark) !important;
  font-weight:700 !important; padding:8px 16px !important;
  border-radius:9px !important; font-size:13px !important;
}
.nav-cta:hover { background:var(--gold-l) !important; box-shadow:var(--sh-gold) !important; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:4.5px;
  cursor:pointer; padding:8px; border:none; background:transparent;
  border-radius:8px; transition:background var(--tf);
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.hamburger:hover { background:rgba(255,255,255,.08); }
.hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:all var(--tm); }
.hamburger:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* Mobile nav */
.mob-nav {
  display:none; flex-direction:column;
  position:fixed; top:82px; left:10px; right:10px; z-index:49;
  background:rgba(0,12,50,.95);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-m); padding:10px;
  gap:2px; box-shadow:0 16px 48px rgba(0,0,0,.55);
}
.mob-nav.open { display:flex; }
.mob-nav a {
  padding:13px 16px; border-radius:9px;
  color:var(--t2); font-weight:500; font-size:15px;
  transition:all var(--tf); display:flex; align-items:center; gap:10px;
  min-height:44px;
}
.mob-nav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.mob-nav .m-cta { background:var(--gold); color:var(--dark); font-weight:700; margin-top:6px; }
.mob-nav .m-cta:hover { background:var(--gold-l); }

/* ── SECTION HELPERS ── */
.section { padding:88px 40px; }
.wrap { max-width:1160px; margin:0 auto; }
.sec-head { text-align:center; margin-bottom:56px; }
.sec-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,71,255,.16); border:1px solid rgba(0,71,255,.32);
  color:#7EB0FF; font-size:10.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:5px 14px; border-radius:100px; margin-bottom:16px;
  font-family:'Montserrat',sans-serif;
}
.sec-tag.g { background:rgba(245,179,33,.12); border-color:rgba(245,179,33,.28); color:var(--gold); }
.sec-h2 { font-size:clamp(27px,4.5vw,46px); color:#fff; margin-bottom:12px; }
.sec-h2 span { color:var(--blue); }
.sec-h2 .gd { color:var(--gold); }
.sec-p { font-size:16px; color:var(--t2); max-width:520px; margin:0 auto; line-height:1.72; }
.sec-line { width:48px; height:3px; background:linear-gradient(to right,var(--blue),var(--gold)); border-radius:2px; margin:16px auto 0; }

/* ── AVANT / APRÈS BADGES ── */
.ph-badge {
  position: absolute; bottom: 12px; left: 12px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.ph-apres { background: var(--gold); color: var(--darker); }
.ph-avant { background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.25); }

/* ── LIGHT SECTION (white alternating) ── */
.section-light {
  background: linear-gradient(180deg, #F0F4FF 0%, #F8FAFF 50%, #FFFFFF 100%);
  position: relative; z-index: 1;
}
.section-light .sec-tag {
  background: rgba(0,71,255,.10); border-color: rgba(0,71,255,.22); color: var(--blue);
}
.section-light .sec-h2 { color: var(--darker); }
.section-light .sec-h2 span { color: var(--blue); }
.section-light .sec-p { color: #475569; }
.section-light .glass {
  background: #fff;
  border: 1px solid #D9E0EA;
  box-shadow: 0 6px 28px rgba(0,71,255,.07);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.section-light .glass:hover { box-shadow: 0 12px 40px rgba(0,71,255,.14); }
.section-light h3 { color: #0F172A; }
.section-light p { color: #475569; }
.section-light .svc-pill.gd { background: linear-gradient(90deg,var(--blue),var(--grad)); color:#fff; }
.section-light .i-wrap { background: linear-gradient(135deg, var(--blue), var(--grad)); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:14px; padding:14px 26px; border-radius:14px;
  border:none; cursor:pointer; transition:all var(--tf);
  white-space:nowrap; min-height:44px; text-decoration:none;
}
.btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.btn-gold { background:var(--gold); color:var(--darker); }
.btn-gold:hover { background:var(--gold-l); transform:translateY(-2px); box-shadow:var(--sh-gold); }
.btn-glass { background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.18); }
.btn-glass:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.32); }
.btn-blue { background:var(--btn-grad); color:#fff; box-shadow:0 4px 16px rgba(0,71,255,.22); }
.btn-blue:hover { transform:translateY(-2px); box-shadow:var(--sh-blue); }
.btn-lg { font-size:15px; padding:16px 32px; border-radius:14px; }
.btn-full { width:100%; }

/* ── ICON WRAP ── */
.i-wrap {
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--grad));
  display:flex; align-items:center; justify-content:center;
}
.i-wrap svg { width:24px; height:24px; color:#fff; }
.i-wrap.gd { background:linear-gradient(135deg,var(--gold),#e08c00); }
.i-wrap.lg { width:64px; height:64px; border-radius:16px; }
.i-wrap.lg svg { width:30px; height:30px; }

/* ── FOOTER ── */
footer {
  border-top:1px solid rgba(255,255,255,.06);
  padding:44px 40px; text-align:center;
}
.ft-brand { font-family:'Montserrat',sans-serif; font-size:20px; font-weight:800; color:#fff; letter-spacing:2px; margin-bottom:5px; }
.ft-brand span { color:var(--gold); }
.ft-logo {
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; margin:0 auto 14px;
}
.ft-logo-img { height:62px; width:auto; display:block; filter: drop-shadow(0 2px 12px rgba(0,71,255,.35)); transition: filter var(--tf); }
.ft-logo:hover .ft-logo-img { filter: drop-shadow(0 4px 18px rgba(0,71,255,.5)); }
.ft-logo-brand { display:flex; flex-direction:column; line-height:1; text-align:left; }
.ft-logo-top {
  font-family:'Montserrat',sans-serif; font-size:18px; font-weight:900;
  color:#fff; letter-spacing:2px; text-transform:uppercase; line-height:1.1;
}
.ft-logo-bot {
  font-family:'Montserrat',sans-serif; font-size:9px; font-weight:600;
  color:rgba(255,255,255,.9); letter-spacing:3px; text-transform:uppercase;
}
.ft-sub { font-size:12.5px; color:var(--t3); margin-bottom:24px; }
.ft-links { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.ft-links a { font-size:13px; color:var(--t3); transition:color var(--tf); cursor:pointer; }
.ft-links a:hover { color:var(--gold); }
.ft-copy { font-size:11.5px; color:rgba(255,255,255,.18); }

/* ── FLOATING CALL ── */
.float-cta {
  position:fixed; bottom:24px; right:24px; z-index:100;
  width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:var(--dark);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(245,167,0,.5);
  transition:transform var(--tf), box-shadow var(--tf);
  animation:fpulse 2.8s ease infinite;
}
.float-cta svg { width:24px; height:24px; }
.float-cta:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(245,167,0,.7); }
.float-cta:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@keyframes fpulse {
  0%,100% { box-shadow:0 4px 20px rgba(245,167,0,.5); }
  50%      { box-shadow:0 4px 36px rgba(245,167,0,.8); }
}

/* ── SCROLL FADE ── */
.fade { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }
.fade.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .fade { opacity:1; transform:none; transition:none; } }

/* ── RESPONSIVE ── */
@media (max-width:1024px) { .section { padding:72px 24px; } }
@media (max-width:768px) {
  .navbar { margin:0 10px; top:10px; padding:0 14px; height:60px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .section { padding:56px 16px; }
  footer { padding:32px 16px; }
  .float-cta { bottom:16px; right:16px; width:50px; height:50px; }
  .float-cta svg { width:22px; height:22px; }
  .mob-nav { top:80px; }
  .nav-logo-img { height:50px; }
}
@media (max-width:480px) { .navbar { margin:0 6px; } }